Electron Adventures: Episode 47: Context Dependent Keyboard Handling

I wanted to add dialogs next (copy, move, mkdir, delete), but it just got back to situation where there were too many components handling keyboard shortcuts, so maybe it's best to clean this up first.

This is reality of software development. If you're developing something new, it's best to start with a very simple design, then as it gets more complex to refactor it to support the complexity.

A lot of code will follow, but these are mostly tiny changes from previous versions, so if you've been more or less following Electron Adventures along, there shouldn't be too many surprises. If you want a deeper look into any specific code, check out earlier episodes.

`src/EventBus.js`

First tiny change is adding some console.logs to the EventBus, so I'll be told when I made a typo. Crashing application on typos is generally annoying in development, as crashed JavaScript apps tend to lose their state.

class EventTarget {
  constructor(bus, target) {
    this.bus = bus
    this.target = target
    return new Proxy(this, {
      get: (receiver, name) => {
        return (...args) => {
          bus.emit(target, name, ...args)
        }
      }
    })
  }
}

export default class EventBus {
  constructor() {
    this.callbacks = {}
  }

  handle(target, map) {
    this.callbacks[target] = { ...(this.callbacks[target] || {}), ...map }
  }

  emit(target, event, ...details) {
    let handlers = this.callbacks[target]
    if (handlers) {
      if (handlers[event]) {
        handlers[event](...details)
      } else if (handlers["*"]) {
        handlers["*"](event, ...details)
      } else {
        console.log(`Target ${target} has no handler for ${event}`)
      }
    } else {
      console.log(`Target ${target} not defined`)
    }
  }

  target(t) {
    return new EventTarget(this, t)
  }
}

`src/commands.js`

Instead of just supporting shortcuts for the main mode, we now list them for each mode separately, so Preview, CommandPalette etc. don't need to do their keyboard handling.

As overlap between different modes is currently non-existent, each mode is just separate. If modes shared different shortcuts a lot, then it would make sense to have one list and modes: as attribute of each command.

export default {
  default: [
    {
      shortcuts: [{key: "F2"}, {key: "P", cmd: true, shift: true}],
      action: ["app", "openPalette"]
    },
    {
      name: "Close Palette",
      shortcuts: [{key: "Escape"}],
      action: ["app", "closePalette"],
    },
    {
      name: "Enter Directory",
      shortcuts: [{key: "Enter"}],
      action: ["activePanel", "activateItem"],
    },
    {
      name: "Flip Selection",
      shortcuts: [{key: " "}],
      action: ["activePanel", "flipItem"],
    },
    {
      name: "Go to First File",
      shortcuts: [{key: "Home"}],
      action: ["activePanel", "firstItem"],
    },
    {
      name: "Go to Last File",
      shortcuts: [{key: "End"}],
      action: ["activePanel", "lastItem"],
    },
    {
      name: "Go to Next File",
      shortcuts: [{key: "ArrowDown"}, {key: "N", ctrl: true}],
      action: ["activePanel", "nextItem"],
    },
    {
      name: "Go to Previous File",
      shortcuts: [{key: "ArrowUp"}, {key: "P", ctrl: true}],
      action: ["activePanel", "previousItem"],
    },
    {
      name: "Page Down",
      shortcuts: [{key: "PageDown"}],
      action: ["activePanel", "pageDown"],
    },
    {
      name: "Page Up",
      shortcuts: [{key: "PageUp"}],
      action: ["activePanel", "pageUp"],
    },
    {
      name: "Quit",
      shortcuts: [{key: "F10"}],
      action: ["app", "quit"],
    },
    {
      name: "Switch Panel",
      shortcuts: [{key: "Tab"}],
      action: ["app", "switchPanel"],
    },
    {
      name: "View File",
      shortcuts: [{key: "F3"}],
      action: ["activePanel", "viewFocusedFile"],
    },
    {
      name: "Edit File",
      shortcuts: [{key: "F4"}],
      action: ["activePanel", "editFocusedFile"],
    },
  ],
  palette: [
    {
      shortcuts: [{key: "Escape"}],
      action: ["app", "closePalette"],
    }
  ],
  preview: [
    {
      shortcuts: [{key: "Escape"}, {key: "Q"}, {key: "F3"}, {key: "F10"}],
      action: ["app", "closePreview"],
    }
  ],
}

`src/Keyboard.svelte`

Keyboard component gained two features. First, its active flag got replaced by mode. Second, it now supports fakeKey event so components like the Footer can send it fake keys, without bothering with things like e.preventDefault() on that fake key. To support this interface better, modifier key checks all look like (!!shortcut.ctrl) === (!!e.ctrlKey) so missing and false values are treated the same.

Crazy thing is that JavaScript has == loose equality checks, but somehow they don't think false == undefined or false == null. In any case it's best to forget == even exists.

<script>
  export let mode

  import commands from "./commands.js"
  import { getContext } from "svelte"

  let { eventBus } = getContext("app")

  function matchingShortcut(e, shortcut) {
    return (
      (shortcut.key.toLowerCase() === e.key.toLowerCase()) &&
      ((!!shortcut.ctrl) === (!!e.ctrlKey)) &&
      ((!!shortcut.alt) === (!!e.altKey)) &&
      ((!!shortcut.shift) === (!!e.shiftKey)) &&
      ((!!shortcut.cmd) === (!!e.metaKey))
    )
  }

  function findMatch(e) {
    for (let command of commands[mode]) {
      for (let shortcut of command.shortcuts) {
        if (matchingShortcut(e, shortcut)) {
          return command.action
        }
      }
    }
  }

  function handleKey(e) {
    let action = findMatch(e)
    if (action) {
      e.preventDefault()
      e.stopPropagation()
      eventBus.emit(...action)
    }
  }

  function fakeKey(e) {
    let action = findMatch(e)
    if (action) {
      eventBus.emit(...action)
    }
  }

  eventBus.handle("keyboard", {fakeKey})
</script>

<svelte:window on:keydown={handleKey} />

`src/Footer.svelte`

This lets us refactor the Footer to not know which command it needs to send to which component for which button. Pressing unsupported button like F8 will just be ignored, just like pressing F8 button on the keyboard would.

<script>
  import { getContext } from "svelte"
  let { eventBus } = getContext("app")

  let keyboard = eventBus.target("keyboard")
  function click(key) {
    keyboard.fakeKey({key})
  }
</script>

<footer>
  <button on:click|preventDefault={() => click("F1")}>F1 Help</button>
  <button on:click|preventDefault={() => click("F2")}>F2 Menu</button>
  <button on:click|preventDefault={() => click("F3")}>F3 View</button>
  <button on:click|preventDefault={() => click("F4")}>F4 Edit</button>
  <button on:click|preventDefault={() => click("F5")}>F5 Copy</button>
  <button on:click|preventDefault={() => click("F6")}>F6 Move</button>
  <button on:click|preventDefault={() => click("F7")}>F7 Mkdir</button>
  <button on:click|preventDefault={() => click("F8")}>F8 Delete</button>
  <button on:click|preventDefault={() => click("F10")}>F10 Quit</button>
</footer>

<style>
  footer {
    text-align: center;
    grid-area: footer;
  }

  button {
    font-family: inherit;
    font-size: inherit;
    background-color: #66b;
    color: inherit;
  }
</style>

`src/App.svelte`

App component needs to bring those changes together. So first it needs to define keyboardMode property:

  let paletteOpen = false
  let preview = null
  let keyboardMode

  $: {
    keyboardMode = "default"
    if (paletteOpen) keyboardMode = "palette"
    if (preview) keyboardMode = "preview"
  }

Reactive block statement does exactly the right thing and handles dependencies just fine.

Then we just pass it as a prop to Keyboard component:

<Keyboard mode={keyboardMode} />

The rest of this big component is just as before.

`src/CommandPalette.svelte`

And finally the CommandPalette changes.

It's now a <form> not a <div> so pressing Enter key triggers submit handler naturally. It doesn't matter a huge deal for this component, but some dialogs will need Cancel / OK buttons, and they really want to be <form>s.

Second thing is that we get commands only from default mode with matchingCommands = matcher(commands.default, pattern) as there are modes now, but command palette will never be open in any mode other than default.

At least for now, it's pretty clear that Preview component will want CommandPalette support at some point, but we'll get there when we get there.

We also don't handle Escape key at all. It's listed as command for palette mode, but it goes to App component telling it to close to palette, not to CommandPalette component. That follows the usual HTML logic where parents open and close their children.

Here's the code, skipping the unchanged style:

<script>
  import commands from "./commands.js"
  import matcher from "./matcher.js"
  import { getContext } from "svelte"
  import CommandPaletteEntry from "./CommandPaletteEntry.svelte"

  let { eventBus } = getContext("app")
  let pattern = ""

  $: matchingCommands = matcher(commands.default, pattern)

  let app = eventBus.target("app")

  function submit() {
    app.closePalette()
    if (matchingCommands[0]) {
      eventBus.emit(...matchingCommands[0].action)
    }
  }
  function focus(el) {
    el.focus()
  }
</script>

<form class="palette" on:submit|preventDefault={submit}>
  <input use:focus bind:value={pattern} placeholder="Search for command">
  <ul>
    {#each matchingCommands as command}
      <CommandPaletteEntry {...command} />
    {/each}
  </ul>
</form>

Result

Here's the result, the code is cleaned up, but the app is working just as before:

In the next episode we'll get back to adding some modal dialogs to the app.

As usual, all the code for the episode is here.

Blog