fix: 允许键盘移动可独立操作的组合元素成员(#50)

src/hooks/useMoveElement.ts

@@ -1,44 +1,57 @@
 import { computed } from 'vue'
 import { MutationTypes, useStore } from '@/store'
-import { Slide } from '@/types/slides'
+import { PPTElement, Slide } from '@/types/slides'
 import { KEYS } from '@/configs/hotkey'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 export default () => {
   const store = useStore()
   const activeElementIdList = computed(() => store.state.activeElementIdList)
+  const activeGroupElementId = computed(() => store.state.activeGroupElementId)
   const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
   const { addHistorySnapshot } = useHistorySnapshot()
 
   /**
    * 将元素向指定方向移动指定的距离
+   * 组合元素成员中，存在被选中可独立操作的元素时，优先移动该元素。否则默认移动所有被选中的元素
    * @param command 移动方向
    * @param step 移动距离
    */
   const moveElement = (command: string, step = 1) => {
-    const newElementList = currentSlide.value.elements.map(el => {
+    let newElementList: PPTElement[] = []
-      if (activeElementIdList.value.includes(el.id)) {
+
-        let { left, top } = el
+    const move = (el: PPTElement) => {
-        switch (command) {
+      let { left, top } = el
-          case KEYS.LEFT: 
+      switch (command) {
-            left = left - step
+        case KEYS.LEFT: 
-            break
+          left = left - step
-          case KEYS.RIGHT: 
+          break
-            left = left + step
+        case KEYS.RIGHT: 
-            break
+          left = left + step
-          case KEYS.UP: 
+          break
-            top = top - step
+        case KEYS.UP: 
-            break
+          top = top - step
-          case KEYS.DOWN: 
+          break
-            top = top + step
+        case KEYS.DOWN: 
-            break
+          top = top + step
-          default: break
+          break
-        }
+        default: break
-        return { ...el, left, top }
       }
-      return el
+      return { ...el, left, top }
-    })
+    }
+
+    if (activeGroupElementId.value) {
+      newElementList = currentSlide.value.elements.map(el => {
+        return activeGroupElementId.value === el.id ? move(el) : el
+      })
+    }
+    else {
+      newElementList = currentSlide.value.elements.map(el => {
+        return activeElementIdList.value.includes(el.id) ? move(el) : el
+      })
+    }
+
     store.commit(MutationTypes.UPDATE_SLIDE, { elements: newElementList })
     addHistorySnapshot()
   }

src/views/Screen/index.vue

@@ -171,7 +171,7 @@ export default defineComponent({
 
     const throttleMassage = throttle(function(msg) {
       message.success(msg)
-    }, 3000, { leading: true, trailing: false })
+    }, 1000, { leading: true, trailing: false })
 
     // 向上/向下播放
     // 遇到元素动画时，优先执行动画播放，无动画则执行翻页