Interface NonToggleKey<TId>

A list of css classes the key should be rendered with.

Whether the key is enabled.

If it's disabled, checking if "pressed" can be set to true will return an error. Also the manager will not manage the key's state so it will never be set to pressed (and therefore it will not trigger any shortcuts, even though shortcuts can use disabled keys).

Useful for preventing the Meta/Super key from being pressed, but still showing a key.

The height of the key. See Keys.layout.

The id used to identify which key was pressed.

For keyboard keys, this should be KeyboardEvent.code.

For mouse buttons, this should be MouseEvent.button, i.e. 0-5.

For scroll wheel up/down, pass the custom WheelUp and WheelDown.

For modifiers, see Keys.variants. for how to handle them as the same key, otherwise they are handled like different keys.

For toggles, pass the key code like normal (e.g. CapsLock), see Key.isToggle for how to implement toggles.

Changing the id is not supported. It's recommended you just create a new key if you happen to expose changing key options to users. You can then attempt to change all shortcuts to the new key (note you will have to find the toggles as well if they were created) and report back any errors to users (e.g. changing from/to a modifier can render shortcut chords invalid).

Whether the key is a modifier. A modifier can be either "native" (event.getModifierState will always be used on all events to get it's true state) or "emulated".

For both, this determines in the manager when a chord is considered to have been pressed (when it contains a non-modifer key). See Manager.

Notes

• event.getModifierState does not check the validity of the key code, and will just return false for keys that don't exist.
• You will probably need to specify key variants because, for example, to get the state of the Control keys, you need to pass Control not ControlLeft/Right
• If the modifier is native and the state is seen to change without a key press (i.e. when the element is not in focus), a key release is emulated.

The preferred human readable version of a key. Used when stringifying it.

Wether the key is currently being held down.

Keys presses can be emulated for testing using the Emulator.

Whether the key should be rendered. See Keys.layout.

Toggle on/off keys are automatically created with this set to false.

See Manager.options.updateStateOnAllEvents. Only has an effect if the key is a modifier or toggle key.

Variants are a list of fallback codes that will also trigger a key.

For example, without variants, there's no way to have native modifier keys or have a shortcut like [[Ctrl, A]] where Ctrl can be either of the right/lefts Ctrl keys. One could create two shortcuts for both keys, but only one key would be considered triggered at a time on the layout.

Variants can solve this by allowing us to create a key that's only labeled as Ctrl. The id can be set to an invalid key code (we still need an id for the Keys class), preferably one that indicates what's happening (e.g. VirtualCtrl). The variants can be set to ["ControlLeft", "ControlRight", "Control"]. Now you can have shortcuts like [[VirtualCtrl, A]] and either control key will trigger them.

const virtualCtrl = new Key("VirtualCtrl" {label: "Ctrl", variants: ["ControlLeft", "ControlRight", "Control"] })
Copy

If you still need the keys to be labeled or styled different, you can register multiple keys with different invalid ids but the same variants.

// different labels for the layout
const virtualCtrl = new Key("VirtualCtrl" {label: "Ctrl Left", variants: ["ControlLeft", "ControlRight", "Control"] })
const virtualCtrl2 = new Key("VirtualCtrl2" {label: "Ctrl Right", variants: ["ControlLeft", "ControlRight", "Control"] })

// same labels, different sizes
const virtualCtrl = new Key("VirtualCtrl"
	{ label: "Ctrl", variants: ["ControlLeft", "ControlRight", "Control"], layout: {width: 1.5} },
)
const virtualCtrl2 = new Key("VirtualCtrl2"
	{ label: "Ctrl", variants: ["ControlLeft", "ControlRight", "Control"], layout: {width: 2}},
)

Copy

They can also be use to treat any set of keys as the exact same keys. This can be useful for allowing users to remap keys only within the application.

For example, to use CapsLock as an extra Control key (e.g. id: Ctrl, variants: ["ControlLeft", "ControlRight", "Control", "Capslock"]). You could even "remap" it to multiple modifiers, just add "Capslock" to the variants list of those modifiers (e.g. Ctrl, Alt, Shift). This would cause all those keys to be considered pressed when Capslock is pressed.

The width of the key. See Keys.layout.

The x position of the key. See Keys.layout.

The y position of the key. See Keys.layout.