visbug-lib/app/components/hotkey-map/move.element.js

<p align="center"> <img src="./assets/visbug.png" width="300" height="300" alt="visbug"> <br> <a href="https://www.npmjs.org/package/visbug"><img src="https://img.shields.io/npm/v/visbug.svg?style=flat" alt="npm latest version number"></a> <a href

import { HotkeyMap } from './base.element'

export class MoveHotkeys extends HotkeyMap {
  constructor() {
    super()

    this._hotkey  = 'v'
    this.tool     = 'move'
  }

  createCommand({e:{code}, hotkeys}) {
    let amount, negative, negative_modifier

    let side = '[arrow key]'
    if (code === 'ArrowUp')     side = 'up & out of div'
    if (code === 'ArrowDown')   side = 'down & into next sibling / out & under div'
    if (code === 'ArrowLeft')   side = 'towards the front/top of the stack'
    if (code === 'ArrowRight')  side = 'towards the back/bottom of the stack'

    return {
      negative, negative_modifier, amount, side,
    }
  }

  displayCommand({side}) {
    return `
      <span tool>${this._tool}</span>
      <span side>${side}</span>
    `
  }
}

customElements.define('hotkeys-move', MoveHotkeys)