feat: add tool useKeyboardShortcuts

src/components/VpEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, toRef } from 'vue'
 import type { DrawEvent, SaveParameters, Settings, Shape, Tool } from '../types'
 import VpImage from './VpImage.vue'
 import VpToolbar from './VpToolbar.vue'
@@ -145,7 +145,7 @@ async function reset() {
   const shapes = await Promise.all(
     props.tools
       .filter((tool) => 'onInitialize' in tool)
-      .flatMap(async (tool) => await tool.onInitialize?.({ tools: props.tools }))
+      .flatMap(async (tool) => await tool.onInitialize?.({ tools: props.tools, settings: toRef(settings), history: toRef(history) }))
   )
   history.value = [...shapes.filter(Boolean), ...history.value]
   emit('reset')

src/composables/tools/useAllTools.ts

@@ -7,14 +7,15 @@ import { useBackground } from './useBackground/useBackground'
 import { useTextarea } from './useTextarea/useTextarea'
 import { useEraser } from './useEraser/useEraser'
 import { useMove, type UseMoveOptions } from './useMove/useMove'
+import { useKeyboardShortcuts } from './useKeyboardShortcuts/useKeyboardShortcuts'
 
 export interface Options extends UseMoveOptions {
   backgroundImage?: Blob | Promise<Blob>
   backgroundColor?: string
 }
 
 export function useAllTools(options?: Options) {
-  const tools = [useFreehand(), useLine(), useArrow(), useRectangle(), useTextarea(), useCrop(), useEraser(), useMove(options)]
+  const tools = [useFreehand(), useLine(), useArrow(), useRectangle(), useTextarea(), useCrop(), useEraser(), useMove(options), useKeyboardShortcuts()]
   if (options?.backgroundImage || options?.backgroundColor) {
     return { tools: [useBackground({ blob: options?.backgroundImage, color: options?.backgroundColor }), ...tools] }
   }

src/composables/tools/useKeyboardShortcuts/useKeyboardShortcuts.ts

@@ -0,0 +1,58 @@
+import type { Tool, BaseShape, InitializeEvent } from '@/types'
+import { computed } from 'vue'
+import { useActiveElement, useMagicKeys, whenever } from '@vueuse/core'
+import { logicAnd } from '@vueuse/math'
+
+// Feels weird to create a Shape that will never be added to the history. Can we support Tool<undefined>?
+export interface KeyboardShortcuts extends BaseShape {
+  type: 'keyboard-shortcuts'
+}
+
+interface UseKeyboardShortcutsOptions {
+  /** You can use whatever shortcuts you want. Have a look at defaultShortcuts to see the format. If you only want to 
+   * change something small, you might use defaultSettings as a base:
+   * 
+   * @example
+   * const shortcuts = Object.assign({}, defaultShortcuts, {
+   *   's': ({settings}) => settings.value.tool = 'rectangle', // 's' as in 'select'
+   *   'd': ({settings}) => settings.value.tool = 'eraser', // 'd' as in 'delete'
+   * })
+   * const tools = [useKeyboardShortcuts({ shortcuts }), useAnotherTool(), useAThirdTool]
+   */
+  shortcuts?: Shortcuts
+}
+
+type Shortcuts = Record<string, (args: InitializeEvent) => void>
+
+export const defaultShortcuts: Shortcuts = {
+  'f': ({settings}) => settings.value.tool = 'freehand',
+  'l': ({settings}) => settings.value.tool = 'line',
+  'a': ({settings}) => settings.value.tool = 'arrow',
+  'r': ({settings}) => settings.value.tool = 'rectangle',
+  't': ({settings}) => settings.value.tool = 'textarea',
+  'c': ({settings}) => settings.value.tool = 'crop',
+  'e': ({settings}) => settings.value.tool = 'eraser',
+  'm': ({settings}) => settings.value.tool = 'move',
+}
+
+export function useKeyboardShortcuts({ shortcuts = defaultShortcuts }: UseKeyboardShortcutsOptions = {}): Tool<KeyboardShortcuts> {
+  const type = 'keyboard-shortcuts'
+
+  const activeElement = useActiveElement()
+  const notUsingInput = computed(() =>
+    activeElement.value?.tagName !== 'INPUT' &&
+    activeElement.value?.tagName !== 'TEXTAREA'
+  )
+
+  const keys = useMagicKeys()
+
+  async function onInitialize(event: InitializeEvent) {
+    Object.entries(shortcuts).forEach(([keycode, callback]) => {
+      whenever(logicAnd(keys[keycode], notUsingInput), () => {
+        callback(event)
+      })
+    })
+  }
+
+  return { type, onInitialize }
+}

src/types.ts

@@ -8,6 +8,7 @@ import type { Background } from './composables/tools/useBackground/useBackground
 import type { MaybeRef, Position } from '@vueuse/core'
 import type { Textarea } from './composables/tools/useTextarea/useTextarea'
 import type { Move } from './composables/tools/useMove/useMove'
+import type { Ref } from 'vue'
 
 /** These settings are editable by the user and will affect what tool to use and style etc. */
 export interface Settings {
@@ -234,6 +235,8 @@ export interface DrawEvent {
 
 export interface InitializeEvent {
   tools: Tool<Shape>[]
+  settings: Ref<Settings>
+  history: ImageHistory<Tool<any>[]>
 }
 
 export type Shape = Freehand | Crop | Rectangle | Line | Arrow | Background | Textarea | Eraser | Move