artboard-deluxe

Appearance

keyboard() ​

Adds support for keyboard shortcuts.

INFO

For more flexibility you can also implement your own keyboard event listener, since all methods are available on the Artboard instance, such as resetZoom() or scrollDown().

Markup ​

No additional markup or CSS is needed.

typescript
import { createArtboard, keyboard, raf } from 'artboard-deluxe'

const artboard = createArtboard(document.getElementById('root'), [
  keyboard(),
  raf(),
])

Shortcuts ​

The plugin adds some common shortcuts to interact with the artboard:

  • ArrowDown: Scroll down
  • ArrowUp: Scroll up
  • ArrowLeft: Scroll left
  • ArrowRight: Scroll right
  • Home: Scroll to top
  • End: Scroll to end
  • PageUp: Scroll one page up
  • PageDown: Scroll one page down
  • Modifier + 0: Reset zoom
  • Modifier + 1: Scale to fit

Modifiers ​

By default, the plugin uses both the Control key as the modifier. This can be changed using the modifier option. Possible options are 'ctrl', 'meta', 'alt' or 'ctrlmeta'.

typescript
keyboard({
  modifier: 'ctrlmeta', // Allow both Ctrl and Meta.
})

Custom Keymap ​

You can provide your own mapping for the shortcuts. By doing so you override all default mappings.

The keymap is an object whose property is the code of the pressed key and the value is an array where the first item is the name of the method to call and the optional second item is whether it requires pressing the modifier key.

Example:

typescript
keyboard({
  keymap: {
    // vim style keybindings.
    h: ['scrollLeft'],
    j: ['scrollDown'],
    k: ['scrollUp'],
    l: ['scrollRight'],
    r: ['resetZoom', true], // Use Ctrl + R to reset zoom.
    s: ['scaleToFit', true], // Use Ctrl + S to scale to fit.
  },
})