jasder
/
PPTist
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

This commit is contained in:
pipipi-pikachu 2020-12-20 10:17:47 +08:00
parent 8fa35d4645
commit c7a6f3bc0d
6 changed files with 218 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/configs/hotkey.ts Normal file
View File

@ -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',
}

17
src/configs/keyCode.ts
View File

@ -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,
}

179
src/views/Editor/index.vue
View File

@ -13,14 +13,10 @@
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, onUnmounted } 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 { defineComponent } from 'vue'
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>()
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)
})
useHotkey()
usePasteEvent()
},
})
</script>

133
src/views/Editor/useHotkey.ts Normal file
View File

@ -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)
})
}

60
src/views/Editor/usePasteEvent.ts Normal file
View File

@ -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)
})
}

5
src/views/_common/_element/ImageElement/ImageClipHandler.vue
View File

@ -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(() => {