From a1233aa1fe609d4650d97cd9f13082c23e976fe8 Mon Sep 17 00:00:00 2001 From: yangwq7 Date: Thu, 25 Aug 2022 20:27:57 +0800 Subject: [PATCH 1/6] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E6=9C=AA=E5=8A=A0=E5=85=A5=E5=8E=86=E5=8F=B2?= =?UTF-8?q?=E6=A0=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + .../modules/chartEditStore/chartEditStore.ts | 24 +++++++ .../chartHistoryStore/chartHistoryStore.ts | 65 ++++++++++++++++--- .../chart/ContentEdit/hooks/useDrag.hook.ts | 16 ++++- 4 files changed, 95 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index ea8faaa0..a16eafdb 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@types/color": "^3.0.3", "@types/crypto-js": "^4.1.1", "@types/keymaster": "^1.6.30", + "@types/lodash": "^4.14.184", "animate.css": "^4.1.1", "axios": "^0.27.2", "color": "^4.2.3", diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 9b9567be..c694436d 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -313,6 +313,21 @@ export const useChartEditStore = defineStore({ loadingError() } }, + // * 重置组件位置 + resetComponentPostion(item: CreateComponentType | CreateComponentGroupType):void{ + const index = this.fetchTargetIndex(item.id) + if(index > -1){ + const componentInstance = this.getComponentList[index] + componentInstance.attr = Object.assign(componentInstance.attr, { + x: item.attr.x, + y: item.attr.y + }) + } + }, + // * 移动组件 + moveComponentList(item: CreateComponentType | CreateComponentGroupType){ + chartHistoryStore.createMoveHistory([item]) + }, // * 更新组件列表某一项的值 updateComponentList(index: number, newData: CreateComponentType | CreateComponentGroupType) { if (index < 1 && index > this.getComponentList.length) return @@ -530,6 +545,15 @@ export const useChartEditStore = defineStore({ return } + // 处理移动 + const isMove = HistoryItem.actionType === HistoryActionTypeEnum.MOVE + if(isMove){ + historyData.forEach(item => { + this.resetComponentPostion(item) + }) + return + } + // 处理层级 const isTop = HistoryItem.actionType === HistoryActionTypeEnum.TOP const isBottom = HistoryItem.actionType === HistoryActionTypeEnum.BOTTOM diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.ts index b8627ca6..5f2f44df 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryStore.ts @@ -1,6 +1,7 @@ import { defineStore } from 'pinia' import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d' +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { loadingStart, loadingFinish, loadingError } from '@/utils' import { editHistoryMax } from '@/settings/designSetting' import { @@ -10,6 +11,7 @@ import { HistoryItemType, ChartHistoryStoreType } from './chartHistoryStore.d' +import { cloneDeep } from 'lodash' export const useChartHistoryStore = defineStore({ id: 'useChartHistoryStore', @@ -95,12 +97,33 @@ export const useChartHistoryStore = defineStore({ // 排除画布初始化 if (this.getBackStack.length > 1) { const targetData = this.popBackStackItem() - if (!targetData) { - loadingFinish() - return + // 移动时逻辑单独处理 + const isMove = targetData?.actionType === HistoryActionTypeEnum.MOVE + if(isMove){ + const chartEditStore = useChartEditStore() + // 将当前状态存入前进栈 + const curTargetData:HistoryItemType = cloneDeep(targetData) + curTargetData.historyData.forEach(item => { + if(item.id){ + const index = chartEditStore.fetchTargetIndex(item.id) + if(index > -1){ + const componentInstance = chartEditStore.getComponentList[index] + item.attr = Object.assign(item.attr, { + x: componentInstance.attr.x, + y: componentInstance.attr.y + }) + } + } + }) + this.pushForwardStack(curTargetData) + }else{ + if (!targetData) { + loadingFinish() + return + } + // 移除记录到前进栈 + this.pushForwardStack(targetData) } - // 移除记录到前进堆 - this.pushForwardStack(targetData) loadingFinish() return targetData } @@ -115,12 +138,34 @@ export const useChartHistoryStore = defineStore({ loadingStart() if (this.getForwardStack.length) { const targetData = this.popForwardStack() - if (!targetData) { - loadingFinish() - return + // 移动时逻辑单独处理 + const isMove = targetData?.actionType === HistoryActionTypeEnum.MOVE + if(isMove){ + const chartEditStore = useChartEditStore() + // 将当前状态存入后退栈 + const curTargetData:HistoryItemType = cloneDeep(targetData) + curTargetData.historyData.forEach(item => { + if(item.id){ + const index = chartEditStore.fetchTargetIndex(item.id) + if(index > -1){ + const componentInstance = chartEditStore.getComponentList[index] + item.attr = Object.assign(item.attr, { + x: componentInstance.attr.x, + y: componentInstance.attr.y + }) + } + } + }) + this.pushBackStackItem(curTargetData, true) + }else{ + if (!targetData) { + loadingFinish() + return + } + // 放入后退栈 + this.pushBackStackItem(targetData, true) } - // 放入后退栈 - this.pushBackStackItem(targetData, true) + loadingFinish() return targetData } diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index ed15914f..1caac641 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts @@ -7,7 +7,7 @@ import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d' import { loadingStart, loadingFinish, loadingError } from '@/utils' -import throttle from 'lodash/throttle' +import { throttle, cloneDeep } from 'lodash' const chartEditStore = useChartEditStore() const { onClickOutSide } = useContextMenu() @@ -222,6 +222,16 @@ export const useMouseHandle = () => { const startX = e.screenX const startY = e.screenY + // 记录历史位置 + let prevComponentInstance:CreateComponentType | CreateComponentGroupType + chartEditStore.getTargetChart.selectId.forEach(id => { + if (!targetMap.has(id)) return + + const index = chartEditStore.fetchTargetIndex(id) + // 拿到初始位置数据 + prevComponentInstance = cloneDeep(chartEditStore.getComponentList[index]) + }) + // 记录初始位置 chartEditStore.setMousePosition(undefined, undefined, startX, startY) @@ -267,6 +277,10 @@ export const useMouseHandle = () => { const mouseup = () => { chartEditStore.setMousePosition(0, 0, 0, 0) chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false) + // 加入历史栈 + if(prevComponentInstance){ + chartEditStore.moveComponentList(prevComponentInstance) + } document.removeEventListener('mousemove', mousemove) document.removeEventListener('mouseup', mouseup) } From 9fea20cb7937f32966557e26579086138b99f822 Mon Sep 17 00:00:00 2001 From: yangwq7 Date: Fri, 26 Aug 2022 09:50:46 +0800 Subject: [PATCH 2/6] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E6=B8=90=E5=8F=98?= =?UTF-8?q?=E6=96=87=E6=9C=AC=E7=BB=84=E4=BB=B6=E4=BF=AE=E6=94=B9=E5=86=85?= =?UTF-8?q?=E5=AE=B9=E5=90=8E=E9=A2=84=E8=A7=88=E6=9C=AA=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Informations/Texts/TextGradient/index.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/packages/components/Informations/Texts/TextGradient/index.vue b/src/packages/components/Informations/Texts/TextGradient/index.vue index d16d1c19..f8958bb0 100644 --- a/src/packages/components/Informations/Texts/TextGradient/index.vue +++ b/src/packages/components/Informations/Texts/TextGradient/index.vue @@ -31,7 +31,8 @@ watch( () => props.chartConfig.option.dataset, (newData: any) => { option.dataset = newData - } + }, + {immediate: true} ) useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { From 36bfbf900ab00453a3d0f0851d9361d6e9fae855 Mon Sep 17 00:00:00 2001 From: yangwq7 Date: Tue, 30 Aug 2022 14:14:56 +0800 Subject: [PATCH 3/6] =?UTF-8?q?perf:=20=E8=A7=A3=E8=80=A6=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=9B=B8=E5=85=B3=E5=90=8E=E9=80=80=E3=80=81=E5=89=8D?= =?UTF-8?q?=E8=BF=9B=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/index.d.ts | 2 +- .../modules/chartEditStore/chartEditStore.ts | 19 ++++-- .../chartHistoryStore/chartHistoryStore.ts | 65 +++---------------- .../chart/ContentEdit/hooks/useDrag.hook.ts | 9 +++ 4 files changed, 33 insertions(+), 62 deletions(-) diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 153dc6af..8b80eced 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -63,7 +63,7 @@ export enum FilterEnum { export interface PublicConfigType { id: string isGroup: boolean - attr: { x: number; y: number; w: number; h: number; zIndex: number } + attr: { x: number; y: number; w: number; h: number; zIndex: number; offsetX: number; offsetY: number; } styles: { [FilterEnum.OPACITY]: number [FilterEnum.SATURATE]: number diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index c694436d..4a50a7eb 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -314,14 +314,21 @@ export const useChartEditStore = defineStore({ } }, // * 重置组件位置 - resetComponentPostion(item: CreateComponentType | CreateComponentGroupType):void{ + resetComponentPostion(item: CreateComponentType | CreateComponentGroupType, isForward: boolean):void{ const index = this.fetchTargetIndex(item.id) if(index > -1){ const componentInstance = this.getComponentList[index] - componentInstance.attr = Object.assign(componentInstance.attr, { - x: item.attr.x, - y: item.attr.y - }) + if(isForward){ + componentInstance.attr = Object.assign(componentInstance.attr, { + x: item.attr.x + item.attr.offsetX, + y: item.attr.y + item.attr.offsetY + }) + }else{ + componentInstance.attr = Object.assign(componentInstance.attr, { + x: item.attr.x, + y: item.attr.y + }) + } } }, // * 移动组件 @@ -549,7 +556,7 @@ export const useChartEditStore = defineStore({ const isMove = HistoryItem.actionType === HistoryActionTypeEnum.MOVE if(isMove){ historyData.forEach(item => { - this.resetComponentPostion(item) + this.resetComponentPostion(item, isForward) }) return } diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.ts index 5f2f44df..b8627ca6 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryStore.ts @@ -1,7 +1,6 @@ import { defineStore } from 'pinia' import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d' -import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { loadingStart, loadingFinish, loadingError } from '@/utils' import { editHistoryMax } from '@/settings/designSetting' import { @@ -11,7 +10,6 @@ import { HistoryItemType, ChartHistoryStoreType } from './chartHistoryStore.d' -import { cloneDeep } from 'lodash' export const useChartHistoryStore = defineStore({ id: 'useChartHistoryStore', @@ -97,33 +95,12 @@ export const useChartHistoryStore = defineStore({ // 排除画布初始化 if (this.getBackStack.length > 1) { const targetData = this.popBackStackItem() - // 移动时逻辑单独处理 - const isMove = targetData?.actionType === HistoryActionTypeEnum.MOVE - if(isMove){ - const chartEditStore = useChartEditStore() - // 将当前状态存入前进栈 - const curTargetData:HistoryItemType = cloneDeep(targetData) - curTargetData.historyData.forEach(item => { - if(item.id){ - const index = chartEditStore.fetchTargetIndex(item.id) - if(index > -1){ - const componentInstance = chartEditStore.getComponentList[index] - item.attr = Object.assign(item.attr, { - x: componentInstance.attr.x, - y: componentInstance.attr.y - }) - } - } - }) - this.pushForwardStack(curTargetData) - }else{ - if (!targetData) { - loadingFinish() - return - } - // 移除记录到前进栈 - this.pushForwardStack(targetData) + if (!targetData) { + loadingFinish() + return } + // 移除记录到前进堆 + this.pushForwardStack(targetData) loadingFinish() return targetData } @@ -138,34 +115,12 @@ export const useChartHistoryStore = defineStore({ loadingStart() if (this.getForwardStack.length) { const targetData = this.popForwardStack() - // 移动时逻辑单独处理 - const isMove = targetData?.actionType === HistoryActionTypeEnum.MOVE - if(isMove){ - const chartEditStore = useChartEditStore() - // 将当前状态存入后退栈 - const curTargetData:HistoryItemType = cloneDeep(targetData) - curTargetData.historyData.forEach(item => { - if(item.id){ - const index = chartEditStore.fetchTargetIndex(item.id) - if(index > -1){ - const componentInstance = chartEditStore.getComponentList[index] - item.attr = Object.assign(item.attr, { - x: componentInstance.attr.x, - y: componentInstance.attr.y - }) - } - } - }) - this.pushBackStackItem(curTargetData, true) - }else{ - if (!targetData) { - loadingFinish() - return - } - // 放入后退栈 - this.pushBackStackItem(targetData, true) + if (!targetData) { + loadingFinish() + return } - + // 放入后退栈 + this.pushBackStackItem(targetData, true) loadingFinish() return targetData } diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index 1caac641..b6b1b61d 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts @@ -279,6 +279,15 @@ export const useMouseHandle = () => { chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false) // 加入历史栈 if(prevComponentInstance){ + chartEditStore.getTargetChart.selectId.forEach(id => { + if (!targetMap.has(id)) return + const index = chartEditStore.fetchTargetIndex(id) + const curComponentInstance = chartEditStore.getComponentList[index] + prevComponentInstance.attr = Object.assign(prevComponentInstance.attr, { + offsetX: curComponentInstance.attr.x - prevComponentInstance.attr.x, + offsetY: curComponentInstance.attr.y - prevComponentInstance.attr.y + }) + }) chartEditStore.moveComponentList(prevComponentInstance) } document.removeEventListener('mousemove', mousemove) From df10ae58f42e6a6ee78f0042111eb7bd843c26a5 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, 30 Aug 2022 17:28:21 +0800 Subject: [PATCH 4/6] =?UTF-8?q?style:=20=E6=A0=BC=E5=BC=8F=E5=8C=96?= =?UTF-8?q?=E4=BB=A3=EF=BC=8C=E4=BF=AE=E6=94=B9=E5=8D=95=E8=AF=8D=E9=94=99?= =?UTF-8?q?=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/public/publicConfig.ts | 2 +- src/settings/designSetting.ts | 5 ++++- .../modules/chartEditStore/chartEditStore.ts | 20 +++++++++---------- .../chart/ContentEdit/hooks/useDrag.hook.ts | 6 +++--- 4 files changed, 18 insertions(+), 15 deletions(-) diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index a285cf13..ddccc09d 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -104,5 +104,5 @@ export class PublicGroupConfigClass extends publicConfig implements CreateCompon // 标识 public id = getUUID() // 基本信息 - public attr = { w: 0, h: 0, x: 0, y: 0, zIndex: -1 } + public attr = { w: 0, h: 0, x: 0, y: 0, offsetX: 0, offsetY: 0, zIndex: -1 } } diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts index 713b88bd..42fa7ad5 100644 --- a/src/settings/designSetting.ts +++ b/src/settings/designSetting.ts @@ -25,7 +25,10 @@ export const chartInitConfig = { x: 50, y: 50, w: 500, - h: 300 + h: 300, + // 不建议动 offset + offsetX: 0, + offsetY: 0, } // dialog 图标的大小 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 4a50a7eb..6f48c788 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -314,16 +314,16 @@ export const useChartEditStore = defineStore({ } }, // * 重置组件位置 - resetComponentPostion(item: CreateComponentType | CreateComponentGroupType, isForward: boolean):void{ + resetComponentPosition(item: CreateComponentType | CreateComponentGroupType, isForward: boolean): void { const index = this.fetchTargetIndex(item.id) - if(index > -1){ + if (index > -1) { const componentInstance = this.getComponentList[index] - if(isForward){ + if (isForward) { componentInstance.attr = Object.assign(componentInstance.attr, { x: item.attr.x + item.attr.offsetX, y: item.attr.y + item.attr.offsetY }) - }else{ + } else { componentInstance.attr = Object.assign(componentInstance.attr, { x: item.attr.x, y: item.attr.y @@ -332,7 +332,7 @@ export const useChartEditStore = defineStore({ } }, // * 移动组件 - moveComponentList(item: CreateComponentType | CreateComponentGroupType){ + moveComponentList(item: CreateComponentType | CreateComponentGroupType) { chartHistoryStore.createMoveHistory([item]) }, // * 更新组件列表某一项的值 @@ -554,9 +554,9 @@ export const useChartEditStore = defineStore({ // 处理移动 const isMove = HistoryItem.actionType === HistoryActionTypeEnum.MOVE - if(isMove){ + if (isMove) { historyData.forEach(item => { - this.resetComponentPostion(item, isForward) + this.resetComponentPosition(item, isForward) }) return } @@ -593,12 +593,12 @@ export const useChartEditStore = defineStore({ if (isGroup || isUnGroup) { if ((isGroup && isForward) || (isUnGroup && !isForward)) { const ids: string[] = [] - if(historyData.length > 1) { + if (historyData.length > 1) { historyData.forEach(item => { ids.push(item.id) }) } else { - (historyData[0] as CreateComponentGroupType).groupList.forEach(item => { + ;(historyData[0] as CreateComponentGroupType).groupList.forEach(item => { ids.push(item.id) }) } @@ -606,7 +606,7 @@ export const useChartEditStore = defineStore({ return } // 都需使用子组件的id去解组 - if(historyData.length > 1) { + if (historyData.length > 1) { this.setUnGroup([(historyData[0] as CreateComponentType).id], undefined, false) } else { this.setUnGroup([(historyData[0] as CreateComponentGroupType).groupList[0].id], undefined, false) diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index b6b1b61d..f481192d 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts @@ -111,7 +111,7 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C selectAttr.x1 = Math.round(startOffsetX - (startScreenX - moveEvent.screenX) / scale) selectAttr.y1 = startOffsetY selectAttr.x2 = startOffsetX - selectAttr.y2 = Math.round(startOffsetY + (moveEvent.screenY - startScreenY ) / scale) + selectAttr.y2 = Math.round(startOffsetY + (moveEvent.screenY - startScreenY) / scale) // 左下方向 } else { // 左上方向 @@ -223,7 +223,7 @@ export const useMouseHandle = () => { const startY = e.screenY // 记录历史位置 - let prevComponentInstance:CreateComponentType | CreateComponentGroupType + let prevComponentInstance: CreateComponentType | CreateComponentGroupType chartEditStore.getTargetChart.selectId.forEach(id => { if (!targetMap.has(id)) return @@ -278,7 +278,7 @@ export const useMouseHandle = () => { chartEditStore.setMousePosition(0, 0, 0, 0) chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false) // 加入历史栈 - if(prevComponentInstance){ + if (prevComponentInstance) { chartEditStore.getTargetChart.selectId.forEach(id => { if (!targetMap.has(id)) return const index = chartEditStore.fetchTargetIndex(id) From 085c3937671f4c73eda73af113f6a197d2aae3f9 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, 30 Aug 2022 18:48:48 +0800 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20=E5=A4=84=E7=90=86=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E8=AE=B0=E5=BD=95=E7=9A=84=E7=B1=BB=E5=9E=8B=E9=94=99=E8=AF=AF?= =?UTF-8?q?bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chart/ContentEdit/components/EditAlignLine/index.vue | 2 ++ src/views/chart/ContentEdit/components/EditSelect/index.vue | 5 ++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue index 21cd161f..e65f5c6d 100644 --- a/src/views/chart/ContentEdit/components/EditAlignLine/index.vue +++ b/src/views/chart/ContentEdit/components/EditAlignLine/index.vue @@ -85,6 +85,8 @@ const canvasPositionList = computed(() => { h: cloneDeep(chartEditStore.getEditCanvasConfig.height), x: 0, y: 0, + offsetX: 0, + offsetY: 0, zIndex: 0 } } diff --git a/src/views/chart/ContentEdit/components/EditSelect/index.vue b/src/views/chart/ContentEdit/components/EditSelect/index.vue index e307e118..1a8df6c7 100644 --- a/src/views/chart/ContentEdit/components/EditSelect/index.vue +++ b/src/views/chart/ContentEdit/components/EditSelect/index.vue @@ -41,7 +41,10 @@ watch( // 宽 w: 0, // 高 - h: 0 + h: 0, + // 偏移 + offsetX: 0, + offsetY: 0 } // 处理位置 From fe22e1d33066309f33d698420221a22a0828fe75 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, 30 Aug 2022 19:02:25 +0800 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=E5=A4=84=E7=90=86=E5=A4=9A=E4=B8=AA?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=80=89=E4=B8=AD=E7=A7=BB=E5=8A=A8=E6=97=A0?= =?UTF-8?q?=E6=B3=95=E6=92=A4=E5=9B=9E=E7=9A=84=20bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modules/chartEditStore/chartEditStore.ts | 4 ++-- .../chart/ContentEdit/hooks/useDrag.hook.ts | 17 +++++++++++------ 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 6f48c788..fffde217 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -332,8 +332,8 @@ export const useChartEditStore = defineStore({ } }, // * 移动组件 - moveComponentList(item: CreateComponentType | CreateComponentGroupType) { - chartHistoryStore.createMoveHistory([item]) + moveComponentList(item: Array) { + chartHistoryStore.createMoveHistory(item) }, // * 更新组件列表某一项的值 updateComponentList(index: number, newData: CreateComponentType | CreateComponentGroupType) { diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index f481192d..2e2218b6 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts @@ -223,13 +223,13 @@ export const useMouseHandle = () => { const startY = e.screenY // 记录历史位置 - let prevComponentInstance: CreateComponentType | CreateComponentGroupType + let prevComponentInstance: Array = [] chartEditStore.getTargetChart.selectId.forEach(id => { if (!targetMap.has(id)) return const index = chartEditStore.fetchTargetIndex(id) // 拿到初始位置数据 - prevComponentInstance = cloneDeep(chartEditStore.getComponentList[index]) + prevComponentInstance.push(cloneDeep(chartEditStore.getComponentList[index])) }) // 记录初始位置 @@ -278,14 +278,19 @@ export const useMouseHandle = () => { chartEditStore.setMousePosition(0, 0, 0, 0) chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false) // 加入历史栈 - if (prevComponentInstance) { + if (prevComponentInstance.length) { chartEditStore.getTargetChart.selectId.forEach(id => { if (!targetMap.has(id)) return const index = chartEditStore.fetchTargetIndex(id) const curComponentInstance = chartEditStore.getComponentList[index] - prevComponentInstance.attr = Object.assign(prevComponentInstance.attr, { - offsetX: curComponentInstance.attr.x - prevComponentInstance.attr.x, - offsetY: curComponentInstance.attr.y - prevComponentInstance.attr.y + // 找到记录的所选组件 + prevComponentInstance.forEach(preItem => { + if (preItem.id === id) { + preItem.attr = Object.assign(preItem.attr, { + offsetX: curComponentInstance.attr.x - preItem.attr.x, + offsetY: curComponentInstance.attr.y - preItem.attr.y + }) + } }) }) chartEditStore.moveComponentList(prevComponentInstance)