From 5cadcc82591df6aadc60706f3deb04a81a050178 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Tue, 9 Aug 2022 19:50:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=A4=9A=E9=80=89?=
 =?UTF-8?q?=E7=9A=84=E5=8F=B3=E9=94=AE=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/EditGroup/index.vue            |  5 +----
 .../chart/hooks/useContextMenu.hook.d.ts      |  2 ++
 src/views/chart/hooks/useContextMenu.hook.ts  | 20 ++++++++++++-------
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/views/chart/ContentEdit/components/EditGroup/index.vue b/src/views/chart/ContentEdit/components/EditGroup/index.vue
index 8bf8aaa7..c7f97fd6 100644
--- a/src/views/chart/ContentEdit/components/EditGroup/index.vue
+++ b/src/views/chart/ContentEdit/components/EditGroup/index.vue
@@ -16,7 +16,7 @@
       @mousedown="mousedownHandle($event, groupData)"
       @mouseenter="mouseenterHandle($event, groupData)"
       @mouseleave="mouseleaveHandle($event, groupData)"
-      @contextmenu="handleContextMenu($event, groupData, undefined, undefined, pickOptionsList)"
+      @contextmenu="handleContextMenu($event, groupData, undefined, undefined)"
     >
       <!-- 组合组件 -->
       <edit-shape-box
@@ -74,9 +74,6 @@ const props = defineProps({
 const chartEditStore = useChartEditStore()
 const { handleContextMenu } = useContextMenu()
 
-// 右键
-const pickOptionsList = [MenuEnum.UN_GROUP]
-
 // 点击事件
 const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
 
diff --git a/src/views/chart/hooks/useContextMenu.hook.d.ts b/src/views/chart/hooks/useContextMenu.hook.d.ts
index 486e9b8c..99d5b743 100644
--- a/src/views/chart/hooks/useContextMenu.hook.d.ts
+++ b/src/views/chart/hooks/useContextMenu.hook.d.ts
@@ -9,6 +9,8 @@ export enum MenuEnum {
   UP = 'up',
   DOWN = 'down',
   CLEAR = 'clear',
+  GROUP = 'group',
+  UN_GROUP = 'unGroup'
 }
 
 export interface MenuOptionsItemType {
diff --git a/src/views/chart/hooks/useContextMenu.hook.ts b/src/views/chart/hooks/useContextMenu.hook.ts
index bb08e154..78bc1cd0 100644
--- a/src/views/chart/hooks/useContextMenu.hook.ts
+++ b/src/views/chart/hooks/useContextMenu.hook.ts
@@ -1,4 +1,4 @@
-import { ref, nextTick, toRaw } from 'vue';
+import { ref, nextTick, toRaw } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { renderIcon, loadingError } from '@/utils'
@@ -13,7 +13,7 @@ const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Car
 const chartEditStore = useChartEditStore()
 
 // * 默认单组件选项
-const defaultOptions: MenuOptionsItemType[] = [
+export const defaultOptions: MenuOptionsItemType[] = [
   {
     label: '复制',
     key: MenuEnum.COPY,
@@ -79,7 +79,7 @@ const defaultOptions: MenuOptionsItemType[] = [
 ]
 
 // * 默认多选组件选项
-const defaultMultiSelectOptions: MenuOptionsItemType[] = [
+export const defaultMultiSelectOptions: MenuOptionsItemType[] = [
   {
     label: '创建分组',
     key: MenuEnum.GROUP,
@@ -91,7 +91,7 @@ const defaultMultiSelectOptions: MenuOptionsItemType[] = [
     key: MenuEnum.UN_GROUP,
     icon: renderIcon(Carbon3DCursorIcon),
     fnHandle: chartEditStore.setUnGroup
-  },
+  }
 ]
 
 // * 无数据传递拥有的选项
@@ -105,9 +105,11 @@ const defaultNoItemKeys = [MenuEnum.PARSE, MenuEnum.CLEAR]
  */
 const pickOption = (options: MenuOptionsItemType[], pickList?: MenuEnum[]) => {
   if (!pickList) return options
-  return options.filter((op: MenuOptionsItemType) => {
-    return pickList.findIndex((e: MenuEnum) => e === op.key) !== -1
+  const list: MenuOptionsItemType[] = []
+  pickList.forEach(e => {
+    list.push(...options.filter(op => op.key === e))
   })
+  return list
 }
 
 /**
@@ -168,7 +170,11 @@ const handleContextMenu = (
   }
   if (optionsHandle) {
     // 自定义函数能够拿到当前选项和所有选项
-    menuOptions.value = optionsHandle(cloneDeep(toRaw(menuOptions.value)), [...defaultMultiSelectOptions, ...defaultOptions], item)
+    menuOptions.value = optionsHandle(
+      cloneDeep(toRaw(menuOptions.value)),
+      [...defaultMultiSelectOptions, ...defaultOptions],
+      item
+    )
   }
   nextTick().then(() => {
     chartEditStore.setMousePosition(e.clientX, e.clientY)