mirror of https://gitee.com/godoos/godoos.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
296 lines
8.5 KiB
296 lines
8.5 KiB
import { onMounted, onUnmounted } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useMainStore, useSlidesStore, useKeyboardStore } from '@/store'
|
|
import { ElementOrderCommands } from '@/types/edit'
|
|
import { KEYS } from '@/configs/hotkey'
|
|
|
|
import useSlideHandler from './useSlideHandler'
|
|
import useLockElement from './useLockElement'
|
|
import useDeleteElement from './useDeleteElement'
|
|
import useCombineElement from './useCombineElement'
|
|
import useCopyAndPasteElement from './useCopyAndPasteElement'
|
|
import useSelectElement from './useSelectElement'
|
|
import useMoveElement from './useMoveElement'
|
|
import useOrderElement from './useOrderElement'
|
|
import useHistorySnapshot from './useHistorySnapshot'
|
|
import useScreening from './useScreening'
|
|
import useScaleCanvas from './useScaleCanvas'
|
|
|
|
export default () => {
|
|
const mainStore = useMainStore()
|
|
const keyboardStore = useKeyboardStore()
|
|
const {
|
|
activeElementIdList,
|
|
disableHotkeys,
|
|
handleElement,
|
|
handleElementId,
|
|
editorAreaFocus,
|
|
thumbnailsFocus,
|
|
showSearchPanel,
|
|
} = storeToRefs(mainStore)
|
|
const { currentSlide } = storeToRefs(useSlidesStore())
|
|
const { ctrlKeyState, shiftKeyState, spaceKeyState } = storeToRefs(keyboardStore)
|
|
|
|
const {
|
|
updateSlideIndex,
|
|
copySlide,
|
|
createSlide,
|
|
deleteSlide,
|
|
cutSlide,
|
|
copyAndPasteSlide,
|
|
selectAllSlide,
|
|
} = useSlideHandler()
|
|
|
|
const { combineElements, uncombineElements } = useCombineElement()
|
|
const { deleteElement } = useDeleteElement()
|
|
const { lockElement } = useLockElement()
|
|
const { copyElement, cutElement, quickCopyElement } = useCopyAndPasteElement()
|
|
const { selectAllElements } = useSelectElement()
|
|
const { moveElement } = useMoveElement()
|
|
const { orderElement } = useOrderElement()
|
|
const { redo, undo } = useHistorySnapshot()
|
|
const { enterScreening, enterScreeningFromStart } = useScreening()
|
|
const { scaleCanvas, resetCanvas } = useScaleCanvas()
|
|
|
|
const copy = () => {
|
|
if (activeElementIdList.value.length) copyElement()
|
|
else if (thumbnailsFocus.value) copySlide()
|
|
}
|
|
|
|
const cut = () => {
|
|
if (activeElementIdList.value.length) cutElement()
|
|
else if (thumbnailsFocus.value) cutSlide()
|
|
}
|
|
|
|
const quickCopy = () => {
|
|
if (activeElementIdList.value.length) quickCopyElement()
|
|
else if (thumbnailsFocus.value) copyAndPasteSlide()
|
|
}
|
|
|
|
const selectAll = () => {
|
|
if (editorAreaFocus.value) selectAllElements()
|
|
if (thumbnailsFocus.value) selectAllSlide()
|
|
}
|
|
|
|
const lock = () => {
|
|
if (!editorAreaFocus.value) return
|
|
lockElement()
|
|
}
|
|
const combine = () => {
|
|
if (!editorAreaFocus.value) return
|
|
combineElements()
|
|
}
|
|
|
|
const uncombine = () => {
|
|
if (!editorAreaFocus.value) return
|
|
uncombineElements()
|
|
}
|
|
|
|
const remove = () => {
|
|
if (activeElementIdList.value.length) deleteElement()
|
|
else if (thumbnailsFocus.value) deleteSlide()
|
|
}
|
|
|
|
const move = (key: string) => {
|
|
if (activeElementIdList.value.length) moveElement(key)
|
|
else if (key === KEYS.UP || key === KEYS.DOWN) updateSlideIndex(key)
|
|
}
|
|
|
|
const moveSlide = (key: string) => {
|
|
if (key === KEYS.PAGEUP) updateSlideIndex(KEYS.UP)
|
|
else if (key === KEYS.PAGEDOWN) updateSlideIndex(KEYS.DOWN)
|
|
}
|
|
|
|
const order = (command: ElementOrderCommands) => {
|
|
if (!handleElement.value) return
|
|
orderElement(handleElement.value, command)
|
|
}
|
|
|
|
const create = () => {
|
|
if (!thumbnailsFocus.value) return
|
|
createSlide()
|
|
}
|
|
|
|
const tabActiveElement = () => {
|
|
if (!currentSlide.value.elements.length) return
|
|
if (!handleElementId.value) {
|
|
const firstElement = currentSlide.value.elements[0]
|
|
mainStore.setActiveElementIdList([firstElement.id])
|
|
return
|
|
}
|
|
const currentIndex = currentSlide.value.elements.findIndex(el => el.id === handleElementId.value)
|
|
const nextIndex = currentIndex >= currentSlide.value.elements.length - 1 ? 0 : currentIndex + 1
|
|
const nextElementId = currentSlide.value.elements[nextIndex].id
|
|
|
|
mainStore.setActiveElementIdList([nextElementId])
|
|
}
|
|
|
|
const keydownListener = (e: KeyboardEvent) => {
|
|
const { ctrlKey, shiftKey, altKey, metaKey } = e
|
|
const ctrlOrMetaKeyActive = ctrlKey || metaKey
|
|
|
|
const key = e.key.toUpperCase()
|
|
|
|
if (ctrlOrMetaKeyActive && !ctrlKeyState.value) keyboardStore.setCtrlKeyState(true)
|
|
if (shiftKey && !shiftKeyState.value) keyboardStore.setShiftKeyState(true)
|
|
if (!disableHotkeys.value && key === KEYS.SPACE) keyboardStore.setSpaceKeyState(true)
|
|
|
|
|
|
if (ctrlOrMetaKeyActive && key === KEYS.P) {
|
|
e.preventDefault()
|
|
mainStore.setDialogForExport('pdf')
|
|
return
|
|
}
|
|
if (shiftKey && key === KEYS.F5) {
|
|
e.preventDefault()
|
|
enterScreening()
|
|
keyboardStore.setShiftKeyState(false)
|
|
return
|
|
}
|
|
if (key === KEYS.F5) {
|
|
e.preventDefault()
|
|
enterScreeningFromStart()
|
|
return
|
|
}
|
|
if (ctrlKey && key === KEYS.F) {
|
|
e.preventDefault()
|
|
mainStore.setSearchPanelState(!showSearchPanel.value)
|
|
return
|
|
}
|
|
|
|
if (!editorAreaFocus.value && !thumbnailsFocus.value) return
|
|
|
|
if (ctrlOrMetaKeyActive && key === KEYS.C) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
copy()
|
|
}
|
|
if (ctrlOrMetaKeyActive && key === KEYS.X) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
cut()
|
|
}
|
|
if (ctrlOrMetaKeyActive && key === KEYS.D) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
quickCopy()
|
|
}
|
|
if (ctrlOrMetaKeyActive && key === KEYS.Z) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
undo()
|
|
}
|
|
if (ctrlOrMetaKeyActive && key === KEYS.Y) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
redo()
|
|
}
|
|
if (ctrlOrMetaKeyActive && key === KEYS.A) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
selectAll()
|
|
}
|
|
if (ctrlOrMetaKeyActive && key === KEYS.L) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
lock()
|
|
}
|
|
if (!shiftKey && ctrlOrMetaKeyActive && key === KEYS.G) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
combine()
|
|
}
|
|
if (shiftKey && ctrlOrMetaKeyActive && key === KEYS.G) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
uncombine()
|
|
}
|
|
if (altKey && key === KEYS.F) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
order(ElementOrderCommands.TOP)
|
|
}
|
|
if (altKey && key === KEYS.B) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
order(ElementOrderCommands.BOTTOM)
|
|
}
|
|
if (key === KEYS.DELETE || key === KEYS.BACKSPACE) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
remove()
|
|
}
|
|
if (key === KEYS.UP) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
move(KEYS.UP)
|
|
}
|
|
if (key === KEYS.DOWN) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
move(KEYS.DOWN)
|
|
}
|
|
if (key === KEYS.LEFT) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
move(KEYS.LEFT)
|
|
}
|
|
if (key === KEYS.RIGHT) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
move(KEYS.RIGHT)
|
|
}
|
|
if (key === KEYS.PAGEUP) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
moveSlide(KEYS.PAGEUP)
|
|
}
|
|
if (key === KEYS.PAGEDOWN) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
moveSlide(KEYS.PAGEDOWN)
|
|
}
|
|
if (key === KEYS.ENTER) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
create()
|
|
}
|
|
if (key === KEYS.MINUS) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
scaleCanvas('-')
|
|
}
|
|
if (key === KEYS.EQUAL) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
scaleCanvas('+')
|
|
}
|
|
if (key === KEYS.DIGIT_0) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
resetCanvas()
|
|
}
|
|
if (key === KEYS.TAB) {
|
|
if (disableHotkeys.value) return
|
|
e.preventDefault()
|
|
tabActiveElement()
|
|
}
|
|
}
|
|
|
|
const keyupListener = () => {
|
|
if (ctrlKeyState.value) keyboardStore.setCtrlKeyState(false)
|
|
if (shiftKeyState.value) keyboardStore.setShiftKeyState(false)
|
|
if (spaceKeyState.value) keyboardStore.setSpaceKeyState(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)
|
|
})
|
|
}
|