feat: 添加切换焦点元素快捷键

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

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<PPTElement>(() => store.getters.handleElement)
+  const currentSlide = computed<Slide>(() => 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 = () => {