diff --git a/src/configs/hotkey.ts b/src/configs/hotkey.ts index d6d51d5e..7ae91902 100644 --- a/src/configs/hotkey.ts +++ b/src/configs/hotkey.ts @@ -70,6 +70,7 @@ export const HOTKEY_DOC = [ { label: '置底层', value: 'Alt + B' }, { label: '锁定宽高比例', value: '按住 Ctrl 或 Shift' }, { label: '创建水平 / 垂直线条', value: '按住 Ctrl 或 Shift' }, + { label: '切换焦点元素', value: 'Tab' }, { label: '确认图片裁剪', value: 'Enter' }, ], }, diff --git a/src/hooks/useGlobalHotkey.ts b/src/hooks/useGlobalHotkey.ts index 63d6c31b..a3737419 100644 --- a/src/hooks/useGlobalHotkey.ts +++ b/src/hooks/useGlobalHotkey.ts @@ -1,7 +1,7 @@ import { computed, onMounted, onUnmounted } from 'vue' import { MutationTypes, useStore } from '@/store' import { ElementOrderCommand, ElementOrderCommands } from '@/types/edit' -import { PPTElement } from '@/types/slides' +import { PPTElement, Slide } from '@/types/slides' import { KEYS } from '@/configs/hotkey' import useSlideHandler from './useSlideHandler' @@ -24,6 +24,7 @@ export default () => { const disableHotkeys = computed(() => store.state.disableHotkeys) const activeElementIdList = computed(() => store.state.activeElementIdList) const handleElement = computed(() => store.getters.handleElement) + const currentSlide = computed(() => store.getters.currentSlide) const editorAreaFocus = computed(() => store.state.editorAreaFocus) const thumbnailsFocus = computed(() => store.state.thumbnailsFocus) @@ -103,6 +104,21 @@ export default () => { createSlide() } + const tabActiveElement = () => { + if (!currentSlide.value.elements.length) return + if (!handleElement.value) { + const firstElement = currentSlide.value.elements[0] + store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [firstElement.id]) + return + } + + const currentIndex = currentSlide.value.elements.findIndex(el => el.id === handleElement.value.id) + const nextIndex = currentIndex >= currentSlide.value.elements.length - 1 ? 0 : currentIndex + 1 + const nextElementId = currentSlide.value.elements[nextIndex].id + + store.commit(MutationTypes.SET_ACTIVE_ELEMENT_ID_LIST, [nextElementId]) + } + const keydownListener = (e: KeyboardEvent) => { const { ctrlKey, shiftKey, altKey, metaKey } = e @@ -219,6 +235,11 @@ export default () => { e.preventDefault() setCanvasPercentage(90) } + if (key === KEYS.TAB) { + if (disableHotkeys.value) return + e.preventDefault() + tabActiveElement() + } } const keyupListener = () => {