update

src/configs/hotkey.ts

@@ -0,0 +1,17 @@
+export enum KEYS {
+  C = 'C',
+  X = 'X',
+  Z = 'Z',
+  Y = 'Y',
+  A = 'A',
+  G = 'G',
+  L = 'L',
+  DELETE = 'DELETE',
+  UP = 'ARROWUP',
+  DOWN = 'ARROWDOWN',
+  LEFT = 'ARROWLEFT',
+  RIGHT = 'ARROWRIGHT',
+  ENTER = 'ENTER',
+  SPACE = ' ',
+  TAB = 'TAB',
+}

src/configs/keyCode.ts

@@ -1,17 +0,0 @@
-export enum KEYCODE {
-  C = 67,
-  X = 88,
-  Z = 90,
-  Y = 89,
-  A = 65,
-  G = 71,
-  L = 76,
-  DELETE = 46,
-  UP = 38,
-  DOWN = 40,
-  LEFT = 37,
-  RIGHT = 39,
-  ENTER = 13,
-  SPACE = 32,
-  TAB = 9,
-}

src/views/Editor/index.vue

@@ -13,14 +13,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, onUnmounted } from 'vue'
+import { defineComponent } from 'vue'
-import { useStore } from 'vuex'
-import { State, MutationTypes } from '@/store'
-import { KEYCODE } from '@/configs/keyCode'
-import { decrypt } from '@/utils/crypto'
-import { getImageDataURL } from '@/utils/image'
 
-import { message } from 'ant-design-vue'
+import useHotkey from './useHotkey'
+import usePasteEvent from './usePasteEvent'
 
 import EditorHeader from './EditorHeader/index.vue'
 import Canvas from './Canvas/index.vue'
@@ -38,173 +34,8 @@ export default defineComponent({
     Toolbar,
   },
   setup() {
-    const store = useStore<State>()
+    useHotkey()
-
+    usePasteEvent()
-    const ctrlKeyActive = computed(() => store.state.ctrlKeyState)
-    const shiftKeyActive = computed(() => store.state.shiftKeyState)
-
-    const editorAreaFocus = computed(() => store.state.editorAreaFocus)
-    const thumbnailsFocus = computed(() => store.state.thumbnailsFocus)
-    const disableHotkeys = computed(() => store.state.disableHotkeys)
-
-    const copy = () => {
-      message.success('copy')
-    }
-    const cut = () => {
-      message.success('cut')
-    }
-    const undo = () => {
-      message.success('undo')
-    }
-    const redo = () => {
-      message.success('redo')
-    }
-    const selectAll = () => {
-      message.success('selectAll')
-    }
-    const lock = () => {
-      message.success('lock')
-    }
-    const combine = () => {
-      message.success('combine')
-    }
-    const uncombine = () => {
-      message.success('uncombine')
-    }
-    const remove = () => {
-      message.success('remove')
-    }
-    const move = (key: number) => {
-      message.success(`move: ${key}`)
-    }
-    const create = () => {
-      message.success('create')
-    }
-
-    const keydownListener = (e: KeyboardEvent) => {
-      const { keyCode, ctrlKey, shiftKey } = e
-
-      if(ctrlKey && !ctrlKeyActive.value) store.commit(MutationTypes.SET_CTRL_KEY_STATE, true)
-      if(shiftKey && !shiftKeyActive.value) store.commit(MutationTypes.SET_SHIFT_KEY_STATE, true)
-      
-      if(!editorAreaFocus.value && !thumbnailsFocus.value) return      
-
-      if(ctrlKey && keyCode === KEYCODE.C) {
-        e.preventDefault()
-        copy()
-      }
-      if(ctrlKey && keyCode === KEYCODE.X) {
-        e.preventDefault()
-        cut()
-      }
-      if(ctrlKey && keyCode === KEYCODE.Z) {
-        e.preventDefault()
-        undo()
-      }
-      if(ctrlKey && keyCode === KEYCODE.Y) {
-        e.preventDefault()
-        redo()
-      }
-      if(ctrlKey && keyCode === KEYCODE.A) {
-        e.preventDefault()
-        selectAll()
-      }
-      if(ctrlKey && keyCode === KEYCODE.L) {
-        e.preventDefault()
-        lock()
-      }
-      if(!shiftKey && ctrlKey && keyCode === KEYCODE.G) {
-        e.preventDefault()
-        combine()
-      }
-      if(shiftKey && ctrlKey && keyCode === KEYCODE.G) {
-        e.preventDefault()
-        uncombine()
-      }
-      if(keyCode === KEYCODE.DELETE) {
-        e.preventDefault()
-        remove()
-      }
-      if(keyCode === KEYCODE.UP) {
-        e.preventDefault()
-        move(KEYCODE.UP)
-      }
-      if(keyCode === KEYCODE.DOWN) {
-        e.preventDefault()
-        move(KEYCODE.DOWN)
-      }
-      if(keyCode === KEYCODE.LEFT) {
-        e.preventDefault()
-        move(KEYCODE.LEFT)
-      }
-      if(keyCode === KEYCODE.RIGHT) {
-        e.preventDefault()
-        move(KEYCODE.RIGHT)
-      }
-      if(keyCode === KEYCODE.ENTER) {
-        e.preventDefault()
-        create()
-      }
-    }
-    
-    const keyupListener = () => {
-      if(ctrlKeyActive.value) store.commit(MutationTypes.SET_CTRL_KEY_STATE, false)
-      if(shiftKeyActive.value) store.commit(MutationTypes.SET_SHIFT_KEY_STATE, false)
-    }
-
-    const pasteImageFile = (imageFile: File) => {
-      getImageDataURL(imageFile).then(dataURL => {
-        console.log(dataURL)
-      })
-    }
-
-    const pasteText = (text: string) => {
-      let content
-      try {
-        content = JSON.parse(decrypt(text))
-      }
-      catch {
-        content = text
-      }
-      console.log(content)
-    }
-
-    const pasteListener = (e: ClipboardEvent) => {
-      if(!editorAreaFocus.value && !thumbnailsFocus.value) return
-      if(disableHotkeys.value) return
-
-      if(!e.clipboardData) return
-
-      const clipboardDataItems = e.clipboardData.items
-      const clipboardDataFirstItem = clipboardDataItems[0]
-
-      if(!clipboardDataFirstItem) return
-
-      for(const item of clipboardDataItems) {
-        if(item.kind === 'file' && item.type.indexOf('image') !== -1) {
-          const imageFile = item.getAsFile()
-          if(imageFile) pasteImageFile(imageFile)
-          return
-        }
-      }
-
-      if( clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain' ) {
-        clipboardDataFirstItem.getAsString(text => pasteText(text))
-      }
-    }
-
-    onMounted(() => {
-      document.addEventListener('keydown', keydownListener)
-      document.addEventListener('keyup', keyupListener)
-      window.addEventListener('blur', keyupListener)
-      document.addEventListener('paste', pasteListener)
-    })
-    onUnmounted(() => {
-      document.removeEventListener('keydown', keydownListener)
-      document.removeEventListener('keyup', keyupListener)
-      window.removeEventListener('blur', keyupListener)
-      document.removeEventListener('paste', pasteListener)
-    })
   },
 })
 </script>

src/views/Editor/useHotkey.ts

@@ -0,0 +1,133 @@
+import { computed, onMounted, onUnmounted } from 'vue'
+import { useStore } from 'vuex'
+import { State, MutationTypes } from '@/store'
+import { KEYS } from '@/configs/hotkey'
+
+import { message } from 'ant-design-vue'
+
+export default () => {
+  const store = useStore<State>()
+
+  const ctrlKeyActive = computed(() => store.state.ctrlKeyState)
+  const shiftKeyActive = computed(() => store.state.shiftKeyState)
+
+  const editorAreaFocus = computed(() => store.state.editorAreaFocus)
+  const thumbnailsFocus = computed(() => store.state.thumbnailsFocus)
+
+  const copy = () => {
+    message.success('copy')
+  }
+  const cut = () => {
+    message.success('cut')
+  }
+  const undo = () => {
+    message.success('undo')
+  }
+  const redo = () => {
+    message.success('redo')
+  }
+  const selectAll = () => {
+    message.success('selectAll')
+  }
+  const lock = () => {
+    message.success('lock')
+  }
+  const combine = () => {
+    message.success('combine')
+  }
+  const uncombine = () => {
+    message.success('uncombine')
+  }
+  const remove = () => {
+    message.success('remove')
+  }
+  const move = (key: string) => {
+    message.success(`move: ${key}`)
+  }
+  const create = () => {
+    message.success('create')
+  }
+
+  const keydownListener = (e: KeyboardEvent) => {
+    const { ctrlKey, shiftKey } = e
+    const key = e.key.toUpperCase()
+
+    if(ctrlKey && !ctrlKeyActive.value) store.commit(MutationTypes.SET_CTRL_KEY_STATE, true)
+    if(shiftKey && !shiftKeyActive.value) store.commit(MutationTypes.SET_SHIFT_KEY_STATE, true)
+    
+    if(!editorAreaFocus.value && !thumbnailsFocus.value) return      
+
+    if(ctrlKey && key === KEYS.C) {
+      e.preventDefault()
+      copy()
+    }
+    if(ctrlKey && key === KEYS.X) {
+      e.preventDefault()
+      cut()
+    }
+    if(ctrlKey && key === KEYS.Z) {
+      e.preventDefault()
+      undo()
+    }
+    if(ctrlKey && key === KEYS.Y) {
+      e.preventDefault()
+      redo()
+    }
+    if(ctrlKey && key === KEYS.A) {
+      e.preventDefault()
+      selectAll()
+    }
+    if(ctrlKey && key === KEYS.L) {
+      e.preventDefault()
+      lock()
+    }
+    if(!shiftKey && ctrlKey && key === KEYS.G) {
+      e.preventDefault()
+      combine()
+    }
+    if(shiftKey && ctrlKey && key === KEYS.G) {
+      e.preventDefault()
+      uncombine()
+    }
+    if(key === KEYS.DELETE) {
+      e.preventDefault()
+      remove()
+    }
+    if(key === KEYS.UP) {
+      e.preventDefault()
+      move(KEYS.UP)
+    }
+    if(key === KEYS.DOWN) {
+      e.preventDefault()
+      move(KEYS.DOWN)
+    }
+    if(key === KEYS.LEFT) {
+      e.preventDefault()
+      move(KEYS.LEFT)
+    }
+    if(key === KEYS.RIGHT) {
+      e.preventDefault()
+      move(KEYS.RIGHT)
+    }
+    if(key === KEYS.ENTER) {
+      e.preventDefault()
+      create()
+    }
+  }
+  
+  const keyupListener = () => {
+    if(ctrlKeyActive.value) store.commit(MutationTypes.SET_CTRL_KEY_STATE, false)
+    if(shiftKeyActive.value) store.commit(MutationTypes.SET_SHIFT_KEY_STATE, false)
+  }
+
+  onMounted(() => {
+    document.addEventListener('keydown', keydownListener)
+    document.addEventListener('keyup', keyupListener)
+    window.addEventListener('blur', keyupListener)
+  })
+  onUnmounted(() => {
+    document.removeEventListener('keydown', keydownListener)
+    document.removeEventListener('keyup', keyupListener)
+    window.removeEventListener('blur', keyupListener)
+  })
+}

src/views/Editor/usePasteEvent.ts

@@ -0,0 +1,60 @@
+import { computed, onMounted, onUnmounted } from 'vue'
+import { useStore } from 'vuex'
+import { State } from '@/store'
+import { decrypt } from '@/utils/crypto'
+import { getImageDataURL } from '@/utils/image'
+
+export default () => {
+  const store = useStore<State>()
+  const editorAreaFocus = computed(() => store.state.editorAreaFocus)
+  const thumbnailsFocus = computed(() => store.state.thumbnailsFocus)
+  const disableHotkeys = computed(() => store.state.disableHotkeys)
+
+  const pasteImageFile = (imageFile: File) => {
+    getImageDataURL(imageFile).then(dataURL => {
+      console.log(dataURL)
+    })
+  }
+
+  const pasteText = (text: string) => {
+    let content
+    try {
+      content = JSON.parse(decrypt(text))
+    }
+    catch {
+      content = text
+    }
+    console.log(content)
+  }
+
+  const pasteListener = (e: ClipboardEvent) => {
+    if(!editorAreaFocus.value && !thumbnailsFocus.value) return
+    if(disableHotkeys.value) return
+
+    if(!e.clipboardData) return
+
+    const clipboardDataItems = e.clipboardData.items
+    const clipboardDataFirstItem = clipboardDataItems[0]
+
+    if(!clipboardDataFirstItem) return
+
+    for(const item of clipboardDataItems) {
+      if(item.kind === 'file' && item.type.indexOf('image') !== -1) {
+        const imageFile = item.getAsFile()
+        if(imageFile) pasteImageFile(imageFile)
+        return
+      }
+    }
+
+    if( clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain' ) {
+      clipboardDataFirstItem.getAsString(text => pasteText(text))
+    }
+  }
+
+  onMounted(() => {
+    document.addEventListener('paste', pasteListener)
+  })
+  onUnmounted(() => {
+    document.removeEventListener('paste', pasteListener)
+  })
+}

src/views/_common/_element/ImageElement/ImageClipHandler.vue

@@ -49,7 +49,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, onUnmounted, PropType, reactive, ref } from 'vue'
-import { KEYCODE } from '@/configs/keyCode'
+import { KEYS } from '@/configs/hotkey'
 
 import SvgWrapper from '@/components/SvgWrapper.vue'
 
@@ -217,7 +217,8 @@ export default defineComponent({
     }
 
     const keyboardClip = (e: KeyboardEvent) => {
-      if(e.keyCode === KEYCODE.ENTER) clip()
+      const key = e.key.toUpperCase()
+      if(key === KEYS.ENTER) clip()
     }
 
     onMounted(() => {