feat: 新增组件多选和右键成组按钮

src/views/chart/hooks/useContextMenu.hook.ts

@@ -6,82 +6,85 @@ import { icon } from '@/plugins'
 import { MenuOptionsItemType } from './useContextMenu.hook.d'
 import { MenuEnum } from '@/enums/editPageEnum'
 
-const {
-  CopyIcon,
-  CutIcon,
-  ClipboardOutlineIcon,
-  TrashIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} = icon.ionicons5
-const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon } = icon.carbon
+const { CopyIcon, CutIcon, ClipboardOutlineIcon, TrashIcon, ChevronDownIcon, ChevronUpIcon } = icon.ionicons5
+const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Carbon3DCursorIcon } = icon.carbon
 
 const chartEditStore = useChartEditStore()
 
-// * 默认选项
+// * 默认单组件选项
 const defaultOptions: MenuOptionsItemType[] = [
   {
     label: '复制',
     key: MenuEnum.COPY,
     icon: renderIcon(CopyIcon),
-    fnHandle: chartEditStore.setCopy,
+    fnHandle: chartEditStore.setCopy
   },
   {
     label: '剪切',
     key: MenuEnum.CUT,
     icon: renderIcon(CutIcon),
-    fnHandle: chartEditStore.setCut,
+    fnHandle: chartEditStore.setCut
   },
   {
     label: '粘贴',
     key: MenuEnum.PARSE,
     icon: renderIcon(ClipboardOutlineIcon),
-    fnHandle: chartEditStore.setParse,
+    fnHandle: chartEditStore.setParse
   },
   {
     type: 'divider',
-    key: 'd1',
+    key: 'd1'
   },
   {
     label: '置顶',
     key: MenuEnum.TOP,
     icon: renderIcon(UpToTopIcon),
-    fnHandle: chartEditStore.setTop,
+    fnHandle: chartEditStore.setTop
   },
   {
     label: '置底',
     key: MenuEnum.BOTTOM,
     icon: renderIcon(DownToBottomIcon),
-    fnHandle: chartEditStore.setBottom,
+    fnHandle: chartEditStore.setBottom
   },
   {
     label: '上移一层',
     key: MenuEnum.UP,
     icon: renderIcon(ChevronUpIcon),
-    fnHandle: chartEditStore.setUp,
+    fnHandle: chartEditStore.setUp
   },
   {
     label: '下移一层',
     key: MenuEnum.DOWN,
     icon: renderIcon(ChevronDownIcon),
-    fnHandle: chartEditStore.setDown,
+    fnHandle: chartEditStore.setDown
   },
   {
     type: 'divider',
-    key: 'd2',
+    key: 'd2'
   },
   {
     label: '清空剪贴板',
     key: MenuEnum.CLEAR,
     icon: renderIcon(PaintBrushIcon),
-    fnHandle: chartEditStore.setRecordChart,
+    fnHandle: chartEditStore.setRecordChart
   },
   {
     label: '删除',
     key: MenuEnum.DELETE,
     icon: renderIcon(TrashIcon),
-    fnHandle: chartEditStore.removeComponentList,
-  },
+    fnHandle: chartEditStore.removeComponentList
+  }
+]
+
+// * 默认多选组件选项
+const defaultMultiSelectionOptions: MenuOptionsItemType[] = [
+  {
+    label: '成组',
+    key: MenuEnum.COPY,
+    icon: renderIcon(Carbon3DSoftwareIcon),
+    fnHandle: chartEditStore.setCopy
+  }
 ]
 
 // * 无数据传递拥有的选项
@@ -126,7 +129,7 @@ const handleContextMenu = (
   // 隐藏选项列表
   hideOptionsList?: MenuEnum[],
   // 挑选选项列表
-  pickOptionsList?: MenuEnum[],
+  pickOptionsList?: MenuEnum[]
 ) => {
   e.stopPropagation()
   e.preventDefault()
@@ -136,8 +139,13 @@ const handleContextMenu = (
   }
   chartEditStore.setRightMenuShow(false)
 
-  // * 设置默认选项
-  menuOptions.value = defaultOptions
+  // * 多选默认选项
+  if (chartEditStore.getTargetChart.selectId.length > 1) {
+    menuOptions.value = defaultMultiSelectionOptions
+  } else {
+    // * 单选默认选项
+    menuOptions.value = defaultOptions
+  }
 
   if (!item) {
     menuOptions.value = pickOption(menuOptions.value, defaultNoItemKeys)
@@ -163,7 +171,6 @@ const handleContextMenu = (
  * @returns
  */
 export const useContextMenu = () => {
-
   // 设置默认项
   menuOptions.value = defaultOptions
 
@@ -175,9 +182,7 @@ export const useContextMenu = () => {
   // * 事件处理
   const handleMenuSelect = (key: string) => {
     chartEditStore.setRightMenuShow(false)
-    const targetItem: MenuOptionsItemType[] = menuOptions.value.filter(
-      (e: MenuOptionsItemType) => e.key === key
-    )
+    const targetItem: MenuOptionsItemType[] = menuOptions.value.filter((e: MenuOptionsItemType) => e.key === key)
 
     menuOptions.value.forEach((e: MenuOptionsItemType) => {
       if (e.key === key) {
@@ -189,12 +194,12 @@ export const useContextMenu = () => {
       }
     })
   }
-  
+
   return {
     menuOptions,
     handleContextMenu,
     onClickOutSide,
     handleMenuSelect,
-    mousePosition: chartEditStore.getMousePosition,
+    mousePosition: chartEditStore.getMousePosition
   }
 }

src/views/chart/hooks/useKeyboard.hook.ts

@@ -77,14 +77,14 @@ const macKeyList: Array<string> = [
 
 // 处理键盘记录
 const keyRecordHandle = () => {
-  document.onkeydown = throttle((e: KeyboardEvent) => {
+  document.onkeydown = (e: KeyboardEvent) => {
     if(window.$KeyboardActive) window.$KeyboardActive.add(e.key.toLocaleLowerCase())
-    else window.$KeyboardActive = new Set([e.key])
-  }, 200)
+    else window.$KeyboardActive = new Set([e.key.toLocaleLowerCase()])
+  }
 
-  document.onkeyup = throttle((e: KeyboardEvent) => {
+  document.onkeyup = (e: KeyboardEvent) => {
     if(window.$KeyboardActive) window.$KeyboardActive.delete(e.key.toLocaleLowerCase())
-  }, 200)
+  }
 }
 
 // 初始化监听事件