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(chartData: T): void { this.componentList.push(chartData) }, // * 删除组件列表 - removeComponentList(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 }) 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)" > { - 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 }) 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 @@ 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(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,