feat(components): pick keyboard shortcut

Akryum · Akryum · commit f6a37ab11c87 · 2020-08-29T05:06:41.000+02:00
diff --git a/packages/app-frontend/src/features/components/ComponentsInspector.vue b/packages/app-frontend/src/features/components/ComponentsInspector.vue
@@ -5,6 +5,7 @@ import { useComponentPick } from './pick'
 import SplitPane from '@front/features/layout/SplitPane.vue'
 import ComponentTreeNode from './ComponentTreeNode.vue'
 import SelectedComponentPane from './SelectedComponentPane.vue'
+import { onKeyUp } from '@front/util/keyboard'
 
 export default {
   components: {
@@ -37,6 +38,15 @@ export default {
       stopPickingComponent
     } = useComponentPick()
 
+    onKeyUp(event => {
+      console.log(event.key)
+      if (event.key === 's' && !pickingComponent.value) {
+        startPickingComponent()
+      } else if (event.key === 'Escape' && pickingComponent.value) {
+        stopPickingComponent()
+      }
+    })
+
     return {
       rootInstances,
       treeFilter,
diff --git a/packages/app-frontend/src/util/keyboard.js b/packages/app-frontend/src/util/keyboard.js
@@ -0,0 +1,22 @@
+import { onMounted, onUnmounted } from '@vue/composition-api'
+
+export function onKeyUp (cb) {
+  function handler (event) {
+    if (
+      event.target.tagName === 'INPUT' ||
+      event.target.tagName === 'TEXTAREA'
+    ) {
+      return
+    }
+
+    cb(event)
+  }
+
+  onMounted(() => {
+    window.addEventListener('keyup', handler)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('keyup', handler)
+  })
+}
