From b9501cee376a18b058addb0daf71b6ab5722aa64 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Tue, 1 Feb 2022 01:20:00 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E5=88=A0?=
=?UTF-8?q?=E9=99=A4=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../chartEditStore/chartEditStore.d.ts | 4 ++--
.../modules/chartEditStore/chartEditStore.ts | 22 ++++++++-----------
.../ContentEdit/components/ShapeBox/index.vue | 4 ++--
.../chart/ContentEdit/hooks/useDrop.hook.ts | 2 +-
src/views/chart/ContentEdit/index.vue | 2 +-
.../components/ListItem/index.vue | 4 ++--
src/views/chart/ContentLayers/index.vue | 4 ++--
src/views/chart/hooks/useContextMenu.hook.ts | 10 ++++-----
8 files changed, 23 insertions(+), 29 deletions(-)
diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts
index 22e3d60c..b49774f4 100644
--- a/src/store/modules/chartEditStore/chartEditStore.d.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.d.ts
@@ -47,8 +47,8 @@ export type MousePositionType = {
// 操作目标
export type TargetChartType = {
- hoverIndex?: string
- selectIndex?: string
+ hoverId?: string
+ selectId?: string
}
// Store 枚举
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index b127bd4a..aa67f9e0 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -1,6 +1,7 @@
import { defineStore } from 'pinia'
import debounce from 'lodash/debounce'
import { loadingStart, loadingFinish, loadingError } from '@/utils'
+import { CreateComponentType } from '@/packages/index.d'
import {
chartEditStoreType,
EditCanvasType,
@@ -41,8 +42,8 @@ export const useChartEditStoreStore = defineStore({
},
// 目标图表
targetChart: {
- hoverIndex: undefined,
- selectIndex: undefined
+ hoverId: undefined,
+ selectId: undefined
},
// 图表数组
componentList: []
@@ -74,27 +75,22 @@ export const useChartEditStoreStore = defineStore({
this.rightMenuShow = value
},
// * 设置目标数据 hover
- setTargetHoverChart(hoverIndex?:TargetChartType["hoverIndex"]) {
- this.targetChart.hoverIndex = hoverIndex
+ setTargetHoverChart(hoverId?:TargetChartType["hoverId"]) {
+ this.targetChart.hoverId = hoverId
},
// * 设置目标数据 select
- setTargetSelectChart(selectIndex?:TargetChartType["selectIndex"]) {
- this.targetChart.selectIndex = selectIndex
+ setTargetSelectChart(selectId?:TargetChartType["selectId"]) {
+ this.targetChart.selectId = selectId
},
// * 新增组件列表
addComponentList<T>(chartData: T): void {
this.componentList.push(chartData)
},
// * 删除组件列表
- removeComponentList<T extends { key: string }>(chartData: T | number): void {
+ removeComponentList(): void {
loadingStart()
try {
- if(typeof chartData === 'number') {
- this.componentList.splice(chartData, 1)
- loadingFinish()
- return
- }
- const i = this.componentList.findIndex(e => e.key === chartData.key)
+ const i = this.componentList.findIndex(e => e.id === this.getTargetChart.selectId)
if (i !== -1) {
this.componentList.splice(i, 1)
loadingFinish()
diff --git a/src/views/chart/ContentEdit/components/ShapeBox/index.vue b/src/views/chart/ContentEdit/components/ShapeBox/index.vue
index 51a0c262..0d58a9c8 100644
--- a/src/views/chart/ContentEdit/components/ShapeBox/index.vue
+++ b/src/views/chart/ContentEdit/components/ShapeBox/index.vue
@@ -31,11 +31,11 @@ const chartEditStore = useChartEditStoreStore()
// 计算当前选中目标
const hover = computed(() => {
- return props.item.id === chartEditStore.getTargetChart.hoverIndex
+ return props.item.id === chartEditStore.getTargetChart.hoverId
})
const select = computed(() => {
- return props.item.id === chartEditStore.getTargetChart.selectIndex
+ return props.item.id === chartEditStore.getTargetChart.selectId
})
</script>
diff --git a/src/views/chart/ContentEdit/hooks/useDrop.hook.ts b/src/views/chart/ContentEdit/hooks/useDrop.hook.ts
index bd97707b..0fdf9677 100644
--- a/src/views/chart/ContentEdit/hooks/useDrop.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useDrop.hook.ts
@@ -52,7 +52,7 @@ export const mousedownHandleUnStop = (
chartEditStore.setTargetSelectChart(item.id)
return
}
- chartEditStore.setTargetSelectChart(item)
+ chartEditStore.setTargetSelectChart(undefined)
}
// 移动图表
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index 9e6b398e..7f02820b 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -24,7 +24,7 @@
@mousedown="mousedownHandle($event, item)"
@mouseenter="mouseenterHandle($event, item)"
@mouseleave="mouseleaveHandle($event, item)"
- @contextmenu="handleContextMenu($event, index)"
+ @contextmenu="handleContextMenu($event, item)"
>
<component
class="edit-content-chart"
diff --git a/src/views/chart/ContentLayers/components/ListItem/index.vue b/src/views/chart/ContentLayers/components/ListItem/index.vue
index 680f904b..7ca7e401 100644
--- a/src/views/chart/ContentLayers/components/ListItem/index.vue
+++ b/src/views/chart/ContentLayers/components/ListItem/index.vue
@@ -43,11 +43,11 @@ const { image, title } = toRefs(props.componentData.chartData)
// 计算当前选中目标
const select = computed(() => {
- return props.componentData.id === chartEditStore.getTargetChart.selectIndex
+ return props.componentData.id === chartEditStore.getTargetChart.selectId
})
const hover = computed(() => {
- return props.componentData.id === chartEditStore.getTargetChart.hoverIndex
+ return props.componentData.id === chartEditStore.getTargetChart.hoverId
})
</script>
diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue
index bade06f0..f18e2cd5 100644
--- a/src/views/chart/ContentLayers/index.vue
+++ b/src/views/chart/ContentLayers/index.vue
@@ -14,13 +14,13 @@
<!-- 图层内容 -->
<ListItem
- v-for="item in chartEditStore.getComponentList"
+ v-for="(item) in chartEditStore.getComponentList"
:key="item.id"
:componentData="item"
@mousedown="mousedownHandle(item)"
@mouseenter="mouseenterHandle(item)"
@mouseleave="mouseleaveHandle(item)"
- @contextmenu="handleContextMenu($event, index)"
+ @contextmenu="handleContextMenu($event, item)"
/>
</ContentBox>
</template>
diff --git a/src/views/chart/hooks/useContextMenu.hook.ts b/src/views/chart/hooks/useContextMenu.hook.ts
index 38d93da6..d275239b 100644
--- a/src/views/chart/hooks/useContextMenu.hook.ts
+++ b/src/views/chart/hooks/useContextMenu.hook.ts
@@ -1,5 +1,6 @@
import { ref, nextTick } from 'vue'
import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { CreateComponentType } from '@/packages/index.d'
import { loadingError } from '@/utils'
const chartEditStore = useChartEditStoreStore()
@@ -27,8 +28,6 @@ export const useContextMenu = (menuOption?: {
const selfOptions = menuOption?.selfOptions
const optionsHandle = menuOption?.optionsHandle
- const targetIndex = ref<number>(0)
-
// * 默认选项
const defaultOptions: MenuOptionsItemType[] = [
{
@@ -42,10 +41,9 @@ export const useContextMenu = (menuOption?: {
const menuOptions: MenuOptionsItemType[] = selfOptions || defaultOptions
// * 右键处理
- const handleContextMenu = (e: MouseEvent, index: number) => {
+ const handleContextMenu = (e: MouseEvent, item: CreateComponentType) => {
e.stopPropagation()
e.preventDefault()
- targetIndex.value = index
let target = e.target
while (target instanceof SVGElement) {
target = target.parentNode
@@ -69,9 +67,9 @@ export const useContextMenu = (menuOption?: {
(e: MenuOptionsItemType) => e.key === key
)
if (!targetItem) loadingError()
- if (targetItem.length) targetItem.pop()?.fnHandle(targetIndex.value)
+ if (targetItem.length) targetItem.pop()?.fnHandle()
}
- console.log(optionsHandle ? optionsHandle(menuOptions) : menuOptions)
+
return {
menuOptions: optionsHandle ? optionsHandle(menuOptions) : menuOptions,
handleContextMenu,