Handling Key Events

In Lively.next, the world handles key events for you. If you want to react to a key press, you can register a command that is assigned to a key via a key binding. Commands and keybindings are attached to a morph. The world automatically collects them from all morphs by calling the commands and keybindings getters on them when the world is loaded.

Commands

Creating a Command

If you want to create a command, you need to extend the list of commands already implemented on your morphs' super class. Morph has no commands registered, so you don't need to extend the commands here.
Notice: Since the commands of all morphs are loaded when the world is loaded, you need to reload the world when adding/renaming a command.

class SwipeButton extends Button {
  swipeLeft() {
    console.log("Nope");
  }

  swipeRight() {
    console.log("Hell yeah!");
  }

  get commands () {
    return [
      {
        name: 'swipe left',  // the command will be identified by that name
        doc: 'Do not match with that person',  // description for documentation purposes
        exec: (morph, args, count, event) => {  // function being executed when calling the command
            // arguments
            //   morph: Morph on which the command is executed
            //   args: Argument Object which can be set when calling the command
            //   count: Usually undefined, if used with emacs command stacking, it passes the number of times this command is going to be executed (see information below)
            //   event: Key Event of key press that leads to this command execution

            // code executed on command execution
            this.swipeLeft();
            // ...
          }
        }
      },
      {
        name: 'swipe right',
        doc: 'Possibly match with that person',
        exec: () => {
            this.swipeRight();
            // ...
          }
        }
      },
      {
        name: 'start chat',
        doc: 'Create a chat with a given person',
        exec: (morph, args) => {
            this.createChat(args.personId);
            // ...
          }
        }
      }
    ].concat(super.commands);  // no need to concat with super.commands when extending from Morph
  }
}

Emacs command stacking

Lively's key bindings and commands support Emacs shortcuts; it is also possible to stack commands like in Emacs, so to execute a command repeatedly. This is done by pressing Ctrland any number X, maybe even multiple digits, followed by the key binding of the command that should actually be executed X times.
Example: Pressing Ctrl and then 1 and then 0, followed by Ctrl-S within the world, saves the world 10 times in the row.
If you execute a command stacked, then the counter parameter will count down how many executions are left for this command.

Command Examples

The worls introduces many commands, which can be used as reference for creating own commands. You can find them in the module livel.ide/world.commands.js.

Key Bindings

Creating a Key Binding

This works analogous to the creation of a Command. Simply extend the keybinding getter of a morph, while Morph itself has none.
If you have overlapping key bindings, e.g. Left and in another binding Shift-Left, only the exactly matching binding is executed.

get keybindings () {
  return [
    { keys: 'Right', command: 'swipe right' },  // bind a key to a command
    { keys: { mac: 'Meta-Left', win: 'Ctrl-Left' }, // combine keys with '-' or differentiate between Mac and Windows if wanted
      command: 'swipe left' },
    { keys: { mac: 'C|Alt-P|Ctrl-S C' },  // Bind multiple keys to the same command via '|' or enable chains of key strokes with ' '
      command: {
        command: 'start chat',
        args: { personId: 'xxx' },  // put arguments into the command (note that you have to wrap it with a second command object)
      }
    }
  ].concat(super.keybindings);
}

See the list of keys to find out which key identifier are available.

Key Binding Examples

You can find the key bindings of the world in the config file under lively.morphic/config.js > config > globalKeybindings.

List of Keys

• A..Z
• 0..9
• Left, Right, Up, Down
• Shift, Alt
• Win: Ctrl, Mac: Meta
• Enter, Space, Tab, Backspace
• Punctuation Marks, Brackets, /, \
• Esc, End
• PageUp, PageDown
• ...