From 8dfe8fb77d21e0f24c5ced00787161f157b57982 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 14 Dec 2023 20:17:00 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=95=B0=E6=8D=AE=E5=A4=A7?= =?UTF-8?q?=E5=B1=8F=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-visualization/RealTimeGroup.vue | 6 +++ .../canvas/ContextMenuDetails.vue | 7 ++- .../modules/data-visualization/common.ts | 29 +++++++++++ .../store/modules/data-visualization/copy.ts | 7 +-- .../store/modules/data-visualization/layer.ts | 51 ++++++++++++------- 5 files changed, 78 insertions(+), 22 deletions(-) create mode 100644 core/core-frontend/src/store/modules/data-visualization/common.ts diff --git a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue index ec26a616f4..481c3633d9 100644 --- a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue +++ b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue @@ -67,6 +67,12 @@ const shiftDataPush = curClickIndex => { } const onClick = (e, index) => { + setCurComponent(index) + //其他情况点击清理选择区域 + areaData.value.components.splice(0, areaData.value.components.length) +} + +const onClickBack = (e, index) => { // 初始化点击是 laterIndex=0 if (!curComponent.value) { composeStore.setLaterIndex(null) diff --git a/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue b/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue index 7a7fcb33cb..e32beddc99 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue @@ -9,6 +9,7 @@ import { storeToRefs } from 'pinia' import { computed, toRefs } from 'vue' import { ElDivider } from 'element-plus-secondary' import eventBus from '@/utils/eventBus' +import { getCurInfo } from '@/store/modules/data-visualization/common' const dvMainStore = dvMainStoreWithOut() const copyStore = copyStoreWithOut() const lockStore = lockStoreWithOut() @@ -52,7 +53,8 @@ const menuOpt = optName => { } const cut = () => { - copyStore.cut() + const curInfo = getCurInfo() + copyStore.cut(curInfo.componentData) menuOpt('cut') } @@ -85,7 +87,8 @@ const paste = () => { const deleteComponent = () => { if (curComponent.value) { - dvMainStore.deleteComponentById(curComponent.value?.id) + const curInfo = getCurInfo() + dvMainStore.deleteComponentById(curComponent.value?.id, curInfo.componentData) } else if (areaData.value.components.length) { areaData.value.components.forEach(component => { dvMainStore.deleteComponentById(component.id) diff --git a/core/core-frontend/src/store/modules/data-visualization/common.ts b/core/core-frontend/src/store/modules/data-visualization/common.ts new file mode 100644 index 0000000000..ff51a9b921 --- /dev/null +++ b/core/core-frontend/src/store/modules/data-visualization/common.ts @@ -0,0 +1,29 @@ +import { storeToRefs } from 'pinia' +import { dvMainStoreWithOut } from './dvMain' +const dvMainStore = dvMainStoreWithOut() +const { curComponent, componentData } = storeToRefs(dvMainStore) + +export const getCurInfo = () => { + if (curComponent.value) { + const curComponentId = curComponent.value.id + let curIndex = 0 + let curComponentData = componentData.value + componentData.value.forEach((component, index) => { + if (curComponentId === component.id) { + curIndex = index + } + if (component.component === 'Group') { + component.propValue.forEach((subComponent, subIndex) => { + if (curComponentId === subComponent.id) { + curIndex = subIndex + curComponentData = component.propValue + } + }) + } + }) + return { + index: curIndex, + componentData: curComponentData + } + } +} diff --git a/core/core-frontend/src/store/modules/data-visualization/copy.ts b/core/core-frontend/src/store/modules/data-visualization/copy.ts index 904013c629..27d6ab41cc 100644 --- a/core/core-frontend/src/store/modules/data-visualization/copy.ts +++ b/core/core-frontend/src/store/modules/data-visualization/copy.ts @@ -18,7 +18,8 @@ const { curMultiplexingComponents, dvInfo, pcMatrixCount, - canvasStyleData + canvasStyleData, + componentData } = storeToRefs(dvMainStore) const { menuTop, menuLeft } = storeToRefs(contextmenuStore) @@ -119,10 +120,10 @@ export const copyStore = defineStore('copy', { }, moveTime) snapshotStore.recordSnapshotCache() }, - cut() { + cut(curComponentData = componentData.value) { if (curComponent.value) { this.copyDataInfo([curComponent.value]) - dvMainStore.deleteComponentById(curComponent.value.id) + dvMainStore.deleteComponentById(curComponent.value.id, curComponentData) } else if (composeStore.areaData.components.length) { this.copyDataInfo(composeStore.areaData.components) composeStore.areaData.components.forEach(component => { diff --git a/core/core-frontend/src/store/modules/data-visualization/layer.ts b/core/core-frontend/src/store/modules/data-visualization/layer.ts index f373e10c8f..d31f1b9c6a 100644 --- a/core/core-frontend/src/store/modules/data-visualization/layer.ts +++ b/core/core-frontend/src/store/modules/data-visualization/layer.ts @@ -3,43 +3,60 @@ import { store } from '../../index' import { dvMainStoreWithOut } from './dvMain' import { swap } from '@/utils/utils' import { useEmitt } from '@/hooks/web/useEmitt' +import { getCurInfo } from '@/store/modules/data-visualization/common' const dvMainStore = dvMainStoreWithOut() -const { componentData, curComponentIndex, curComponent } = storeToRefs(dvMainStore) +const { curComponentIndex, curComponent } = storeToRefs(dvMainStore) export const layerStore = defineStore('layer', { actions: { upComponent() { - // 上移图层 index，表示元素在数组中越往后 - if (curComponentIndex.value < componentData.value.length - 1) { - swap(componentData.value, curComponentIndex.value, curComponentIndex.value + 1) - curComponentIndex.value = curComponentIndex.value + 1 + const curInfo = getCurInfo() + if (curInfo) { + const { index, componentData } = curInfo + // 上移图层 index，表示元素在数组中越往后 + if (index < componentData.length - 1) { + swap(componentData, index, index + 1) + curComponentIndex.value = index + 1 + } } }, downComponent() { - // 下移图层 index，表示元素在数组中越往前 - if (curComponentIndex.value > 0) { - swap(componentData.value, curComponentIndex.value, curComponentIndex.value - 1) - curComponentIndex.value = curComponentIndex.value - 1 + const curInfo = getCurInfo() + if (curInfo) { + const { index, componentData } = curInfo + // 下移图层 index，表示元素在数组中越往前 + if (index > 0) { + swap(componentData, index, index - 1) + curComponentIndex.value = index - 1 + } } }, topComponent() { // 置顶 - if (curComponentIndex.value < componentData.value.length - 1) { - componentData.value.splice(curComponentIndex.value, 1) - componentData.value.push(curComponent.value) - curComponentIndex.value = componentData.value.length - 1 + const curInfo = getCurInfo() + if (curInfo) { + const { index, componentData } = curInfo + if (index < componentData.length - 1) { + componentData.splice(curComponentIndex.value, 1) + componentData.push(curComponent.value) + curComponentIndex.value = componentData.length - 1 + } } }, bottomComponent() { // 置底 - if (curComponentIndex.value > 0) { - componentData.value.splice(curComponentIndex.value, 1) - componentData.value.unshift(curComponent.value) - curComponentIndex.value = 0 + const curInfo = getCurInfo() + if (curInfo) { + const { index, componentData } = curInfo + if (index > 0) { + componentData.splice(index, 1) + componentData.unshift(curComponent.value) + curComponentIndex.value = 0 + } } },