Add hotkeys

Author: Kitenite

app/components/hotkey-map/hotkeys.element.js

@@ -1,39 +1,41 @@
-import $        from 'blingblingjs'
-import hotkeys  from 'hotkeys-js'
+import $ from 'blingblingjs'
+import hotkeys from 'hotkeys-js'
+import { metaKey } from '../../utilities/'
 
-import { GuidesHotkeys }        from './guides.element'
-import { InspectorHotkeys }     from './inspector.element'
+import { GuidesHotkeys } from './guides.element'
+import { InspectorHotkeys } from './inspector.element'
 import { AccessibilityHotkeys } from './accessibility.element'
-import { MoveHotkeys }          from './move.element'
-import { MarginHotkeys }        from './margin.element'
-import { PaddingHotkeys }       from './padding.element'
-import { AlignHotkeys }         from './align.element'
-import { HueshiftHotkeys }      from './hueshift.element'
-import { BoxshadowHotkeys }     from './boxshadow.element'
-import { PositionHotkeys }      from './position.element'
-import { FontHotkeys }          from './font.element'
-import { TextHotkeys }          from './text.element'
-import { SearchHotkeys }        from './search.element'
+import { MoveHotkeys } from './move.element'
+import { MarginHotkeys } from './margin.element'
+import { PaddingHotkeys } from './padding.element'
+import { AlignHotkeys } from './align.element'
+import { HueshiftHotkeys } from './hueshift.element'
+import { BoxshadowHotkeys } from './boxshadow.element'
+import { PositionHotkeys } from './position.element'
+import { FontHotkeys } from './font.element'
+import { TextHotkeys } from './text.element'
+import { SearchHotkeys } from './search.element'
+import { undoLastEvent, redoLastEvent } from '../../features/history'
 
 export class Hotkeys extends HTMLElement {
 
   constructor() {
     super()
 
     this.tool_map = {
-      guides:         document.createElement('hotkeys-guides'),
-      inspector:      document.createElement('hotkeys-inspector'),
-      accessibility:  document.createElement('hotkeys-accessibility'),
-      move:           document.createElement('hotkeys-move'),
-      margin:         document.createElement('hotkeys-margin'),
-      padding:        document.createElement('hotkeys-padding'),
-      align:          document.createElement('hotkeys-align'),
-      hueshift:       document.createElement('hotkeys-hueshift'),
-      boxshadow:      document.createElement('hotkeys-boxshadow'),
-      position:       document.createElement('hotkeys-position'),
-      font:           document.createElement('hotkeys-font'),
-      text:           document.createElement('hotkeys-text'),
-      search:         document.createElement('hotkeys-search'),
+      guides: document.createElement('hotkeys-guides'),
+      inspector: document.createElement('hotkeys-inspector'),
+      accessibility: document.createElement('hotkeys-accessibility'),
+      move: document.createElement('hotkeys-move'),
+      margin: document.createElement('hotkeys-margin'),
+      padding: document.createElement('hotkeys-padding'),
+      align: document.createElement('hotkeys-align'),
+      hueshift: document.createElement('hotkeys-hueshift'),
+      boxshadow: document.createElement('hotkeys-boxshadow'),
+      position: document.createElement('hotkeys-position'),
+      font: document.createElement('hotkeys-font'),
+      text: document.createElement('hotkeys-text'),
+      search: document.createElement('hotkeys-search'),
     }
 
     Object.values(this.tool_map).forEach(tool =>
@@ -47,9 +49,11 @@ export class Hotkeys extends HTMLElement {
         : this.showTool())
 
     hotkeys('esc', e => this.hideTool())
+    hotkeys(`${metaKey}+z`, (e) => undoLastEvent());
+    hotkeys(`${metaKey}+z`, (e) => redoLastEvent());
   }
 
-  disconnectedCallback() {}
+  disconnectedCallback() { }
 
   hideTool() {
     if (!this.cur_tool) return