diff --git a/package-lock.json b/package-lock.json index 7caf667..322cdce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5472,11 +5472,6 @@ "object.assign": "^4.1.1" } }, - "keycode": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", - "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" - }, "kuler": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz", diff --git a/package.json b/package.json index 546ca17..6d9e3ae 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "ip-address": "^7.1.0", "isomorphic-fetch": "^3.0.0", "js-file-download": "^0.4.12", - "keycode": "^2.1.9", "localforage": "^1.9.0", "morgan": "^1.10.0", "multer": "^1.4.1", diff --git a/src/controls/PixelPainterControls.js b/src/controls/PixelPainterControls.js index 807f1bc..50cd1e7 100644 --- a/src/controls/PixelPainterControls.js +++ b/src/controls/PixelPainterControls.js @@ -1,11 +1,12 @@ /* - * Creates Viewport for 2D Canvas + * Controls for 2D canvases + * + * keycodes: + * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values * * @flow */ -import keycode from 'keycode'; - import { setHover, unsetHover, @@ -444,9 +445,9 @@ class PixelPlainterControls { } onKeyUp(event: KeyboardEvent) { - switch (keycode(event)) { - case 'shift': - case 'caps lock': + switch (event.key) { + case 'Shift': + case 'CapsLock': this.holdPainting = false; break; default: @@ -461,22 +462,21 @@ class PixelPlainterControls { return; } const { store } = this; - const key = keycode(event); - switch (key) { - case 'up': + switch (event.key) { + case 'ArrowUp': case 'w': store.dispatch(moveNorth()); break; - case 'left': + case 'ArrowLeft': case 'a': store.dispatch(moveWest()); break; - case 'down': + case 'ArrowDown': case 's': store.dispatch(moveSouth()); break; - case 'right': + case 'ArrowRight': case 'd': store.dispatch(moveEast()); break; @@ -488,19 +488,27 @@ class PixelPlainterControls { case 'q': store.dispatch(zoomOut()); break; - case 'ctrl': - case 'shift': { + case 'Control': + case 'Shift': { const state = store.getState(); const { hover } = state.gui; if (hover) { - if (key === 'ctrl') { + if (event.key === 'Control') { + // ctrl const clrIndex = this.renderer.getColorIndexOfPixel(...hover); if (clrIndex !== null) { store.dispatch(selectColor(clrIndex)); } - } else { + return; + } + if (event.location === KeyboardEvent.DOM_KEY_LOCATION_LEFT) { + // left shift this.holdPainting = true; PixelPlainterControls.placePixel(store, this.renderer, hover); + return; + } + if (event.location === KeyboardEvent.DOM_KEY_LOCATION_RIGHT) { + // right shift } } break; diff --git a/src/controls/keypress.js b/src/controls/keypress.js index d6640bf..06e5e27 100644 --- a/src/controls/keypress.js +++ b/src/controls/keypress.js @@ -2,8 +2,6 @@ * keypress actions * @flow */ -import keycode from 'keycode'; - import store from '../ui/store'; import copy from '../utils/clipboard'; import { @@ -24,7 +22,7 @@ function onKeyPress(event: KeyboardEvent) { return; } - switch (keycode(event)) { + switch (event.key) { case 'g': store.dispatch(toggleGrid()); break;