feat: drauu shortcuts

slidevjs · Sep 13, 2021 · 4867749 · 4867749
1 parent a44ddfc
commit 4867749
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 13 deletions.
diff --git a/packages/client/internals/DrauuControls.vue b/packages/client/internals/DrauuControls.vue
@@ -1,12 +1,7 @@
 <script setup lang="ts">
-import { drauuMode, drauu, drauuBrush, brushColors, drauuEnabled, canUndo, canRedo } from '../logic/drauu'
+import { drauuMode, drauu, drauuBrush, brushColors, drauuEnabled, canUndo, canRedo, clearDrauu } from '../logic/drauu'
 import VerticalDivider from './VerticalDivider.vue'
 
-function clear() {
-  if (confirm('Clear the drawing?'))
-    drauu.clear()
-}
-
 function undo() {
   drauu.undo()
 }
@@ -50,7 +45,7 @@ function redo() {
 
       <VerticalDivider />
 
-      <button class="icon-btn" @click="clear()">
+      <button class="icon-btn" @click="clearDrauu()">
         <carbon:clean />
       </button>
       <button class="icon-btn" :class="{ disabled: !canUndo }" @click="undo()">

diff --git a/packages/client/logic/drauu.ts b/packages/client/logic/drauu.ts
@@ -22,9 +22,59 @@ export const drauu = markRaw(createDrauu({
   mode: drauuMode.value,
 }))
 
-drauu.on('changed', () => {
-  canRedo.value = drauu.canRedo()
-  canUndo.value = drauu.canUndo()
-})
+export function clearDrauu() {
+  if (confirm('Clear the drawing?'))
+    drauu.clear()
+}
 
-watch(drauuMode, mode => drauu.mode = mode)
+if (__DEV__) {
+  drauu.on('changed', () => {
+    canRedo.value = drauu.canRedo()
+    canUndo.value = drauu.canUndo()
+  })
+
+  watch(drauuMode, mode => drauu.mode = mode)
+
+  window.addEventListener('keydown', (e) => {
+    if (!drauuEnabled.value)
+      return
+
+    const noModifier = !e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey
+    let handled = true
+    if (e.code === 'KeyZ' && (e.ctrlKey || e.metaKey)) {
+      if (e.shiftKey)
+        drauu.redo()
+      else
+        drauu.undo()
+    }
+    else if (e.code === 'Escape') {
+      drauuEnabled.value = false
+    }
+    else if (e.code === 'KeyL' && noModifier) {
+      drauuMode.value = 'line'
+    }
+    else if (e.code === 'KeyD' && noModifier) {
+      drauuMode.value = 'draw'
+    }
+    else if (e.code === 'KeyR' && noModifier) {
+      drauuMode.value = 'rectangle'
+    }
+    else if (e.code === 'KeyE' && noModifier) {
+      drauuMode.value = 'ellipse'
+    }
+    else if (e.code === 'KeyC' && noModifier) {
+      clearDrauu()
+    }
+    else if (e.code.startsWith('Digit') && noModifier && +e.code[5] <= brushColors.length) {
+      drauuBrush.color = brushColors[+e.code[5] - 1]
+    }
+    else {
+      handled = false
+    }
+
+    if (handled) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+  }, false)
+}
diff --git a/packages/client/logic/shortcuts.ts b/packages/client/logic/shortcuts.ts
@@ -5,8 +5,9 @@ import { fullscreen, magicKeys, shortcutsEnabled, isInputting, toggleOverview, s
 import setupShortcuts from '../setup/shortcuts'
 import { toggleDark } from './dark'
 import { next, nextSlide, prev, prevSlide } from './nav'
+import { drauuEnabled } from './drauu'
 
-const _shortcut = and(not(isInputting), not(isOnFocus), shortcutsEnabled)
+const _shortcut = and(not(isInputting), not(isOnFocus), not(drauuEnabled), shortcutsEnabled)
 
 export function shortcut(key: string | Ref<boolean>, fn: Fn, autoRepeat = false) {
   if (typeof key === 'string')