From c7a6f3bc0d7782d9065d2872b91e5f9fd6a25b3c Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Sun, 20 Dec 2020 10:17:47 +0800
Subject: [PATCH] update
---
src/configs/hotkey.ts | 17 ++
src/configs/keyCode.ts | 17 --
src/views/Editor/index.vue | 179 +-----------------
src/views/Editor/useHotkey.ts | 133 +++++++++++++
src/views/Editor/usePasteEvent.ts | 60 ++++++
.../ImageElement/ImageClipHandler.vue | 5 +-
6 files changed, 218 insertions(+), 193 deletions(-)
create mode 100644 src/configs/hotkey.ts
delete mode 100644 src/configs/keyCode.ts
create mode 100644 src/views/Editor/useHotkey.ts
create mode 100644 src/views/Editor/usePasteEvent.ts
diff --git a/src/configs/hotkey.ts b/src/configs/hotkey.ts
new file mode 100644
index 00000000..4ecfe842
--- /dev/null
+++ b/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',
+}
\ No newline at end of file
diff --git a/src/configs/keyCode.ts b/src/configs/keyCode.ts
deleted file mode 100644
index 13ec2d10..00000000
--- a/src/configs/keyCode.ts
+++ /dev/null
@@ -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,
-}
\ No newline at end of file
diff --git a/src/views/Editor/index.vue b/src/views/Editor/index.vue
index 59c9487f..98b60804 100644
--- a/src/views/Editor/index.vue
+++ b/src/views/Editor/index.vue
@@ -13,14 +13,10 @@
diff --git a/src/views/Editor/useHotkey.ts b/src/views/Editor/useHotkey.ts
new file mode 100644
index 00000000..2894c593
--- /dev/null
+++ b/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()
+
+ 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)
+ })
+}
\ No newline at end of file
diff --git a/src/views/Editor/usePasteEvent.ts b/src/views/Editor/usePasteEvent.ts
new file mode 100644
index 00000000..e57c4245
--- /dev/null
+++ b/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()
+ 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)
+ })
+}
\ No newline at end of file
diff --git a/src/views/_common/_element/ImageElement/ImageClipHandler.vue b/src/views/_common/_element/ImageElement/ImageClipHandler.vue
index d47e0923..e51f78a2 100644
--- a/src/views/_common/_element/ImageElement/ImageClipHandler.vue
+++ b/src/views/_common/_element/ImageElement/ImageClipHandler.vue
@@ -49,7 +49,7 @@