From f57fa702d9cab238a6bf2f80dc07450e838d3cc6 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Thu, 27 Jan 2022 22:30:35 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=E5=8F=B3=E9=94=AE?=
 =?UTF-8?q?=E5=92=8C=E5=88=A0=E9=99=A4=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/chartEditStore/chartEditStore.ts  |  6 +-
 .../ContentEdit/hooks/useContextMenu.hook.ts  | 60 +++++++++++++++++++
 .../chart/ContentEdit/hooks/useLayout.hook.ts |  5 +-
 src/views/chart/ContentEdit/index.vue         | 24 +++++++-
 4 files changed, 91 insertions(+), 4 deletions(-)
 create mode 100644 src/views/chart/ContentEdit/hooks/useContextMenu.hook.ts

diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 789563c8..20203615 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -52,7 +52,11 @@ export const useChartEditStoreStore = defineStore({
       this.componentList.push(chartData)
     },
     // * 删除组件列表
-    removeComponentList<T extends { key: string }>(chartData: T): void {
+    removeComponentList<T extends { key: string }>(chartData: T | number): void {
+      if(typeof chartData === 'number') {
+        this.componentList.splice(chartData, 1)
+        return
+      }
       const i = this.componentList.findIndex(e => e.key === chartData.key)
       if (i !== -1) {
         this.componentList.splice(i, 1)
diff --git a/src/views/chart/ContentEdit/hooks/useContextMenu.hook.ts b/src/views/chart/ContentEdit/hooks/useContextMenu.hook.ts
new file mode 100644
index 00000000..aadb7fc5
--- /dev/null
+++ b/src/views/chart/ContentEdit/hooks/useContextMenu.hook.ts
@@ -0,0 +1,60 @@
+import { reactive, ref, nextTick } from 'vue'
+import { getChartEditStore } from './useStore.hook'
+const chartEditStore = getChartEditStore()
+
+enum MenuEnum {
+  DELETE = 'delete'
+}
+
+export const useContextMenu = () => {
+  const showDropdownRef = ref(false)
+  const targetIndex = ref<number>(0)
+
+  // * 右键选项
+  const menuOptions = reactive([
+    {
+      label: '删除',
+      key: MenuEnum.DELETE
+    }
+  ])
+
+  // * 右键处理
+  const handleContextMenu = (e: MouseEvent, index: number) => {
+    e.stopPropagation()
+    e.preventDefault()
+    targetIndex.value = index
+    let target = e.target
+    while (target instanceof SVGElement) {
+      target = target.parentNode
+    }
+    showDropdownRef.value = false
+    nextTick().then(() => {
+      chartEditStore.setMousePosition(e.clientX, e.clientY)
+      showDropdownRef.value = true
+    })
+  }
+
+  // * 失焦
+  const onClickoutside = (e: MouseEvent) => {
+    showDropdownRef.value = false
+  }
+
+  // * 事件处理
+  const handleMenuSelect = (key: string) => {
+    showDropdownRef.value = false
+    switch (key) {
+      case MenuEnum.DELETE:
+        chartEditStore.removeComponentList(targetIndex.value)
+        break
+    }
+  }
+
+  return {
+    showDropdownRef,
+    menuOptions,
+    handleContextMenu,
+    onClickoutside,
+    handleMenuSelect,
+    mousePosition: chartEditStore.getMousePosition
+  }
+}
diff --git a/src/views/chart/ContentEdit/hooks/useLayout.hook.ts b/src/views/chart/ContentEdit/hooks/useLayout.hook.ts
index e4fea09b..135b26fa 100644
--- a/src/views/chart/ContentEdit/hooks/useLayout.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useLayout.hook.ts
@@ -1,9 +1,10 @@
-import { onUnmounted, onMounted } from 'vue'
+import { onUnmounted, onMounted, ref, nextTick } from 'vue'
 import { getChartEditStore } from './useStore.hook'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 
 const chartEditStore = getChartEditStore()
 
+// 布局处理
 export const useLayout = () => {
   onMounted(() => {
     // 设置 Dom 值(ref 不生效先用 document)
@@ -26,4 +27,4 @@ export const useLayout = () => {
       removeScale()
     })
   })
-}
+}
\ No newline at end of file
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index b83f31f7..20d53f17 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -12,11 +12,24 @@
     <div id="go-chart-edit-content">
       <!-- 展示 -->
       <EditRange>
+        <!-- 右键 -->
+        <n-dropdown
+          placement="bottom-start"
+          trigger="manual"
+          size="small"
+          :x="mousePosition.x"
+          :y="mousePosition.y"
+          :options="menuOptions"
+          :show="showDropdownRef"
+          :on-clickoutside="onClickoutside"
+          @select="handleMenuSelect"
+        />
         <ShapeBox
           v-for="(item, index) in chartEditStore.getComponentList"
           :key="item.id"
           :index="index"
           :style="useComponentStyle(item.attr, index)"
+          @contextmenu="handleContextMenu($event, index)"
         >
           <component
             class="edit-content-chart"
@@ -40,13 +53,22 @@ import { ContentBox } from '../ContentBox/index'
 import { EditRange } from './components/EditRange'
 import { EditBottom } from './components/EditBottom'
 import { ShapeBox } from './components/ShapeBox/index'
+
 import { useLayout } from './hooks/useLayout.hook'
 import { handleDrop, handleDragOver } from './hooks/useDrop.hook'
+import { useContextMenu } from './hooks/useContextMenu.hook'
 import { getChartEditStore } from './hooks/useStore.hook'
 import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
 
 const chartEditStore = getChartEditStore()
-
+const {
+  showDropdownRef,
+  menuOptions,
+  onClickoutside,
+  mousePosition,
+  handleContextMenu,
+  handleMenuSelect,
+} = useContextMenu()
 // 布局处理
 useLayout()
 </script>