From 0db49d055f96132b64f6221573364fb42173043f Mon Sep 17 00:00:00 2001 From: yangwq7 Date: Thu, 25 Aug 2022 20:27:57 +0800 Subject: [PATCH 1/3] =?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 8fdb0680231b3601a7de4e65d6badf3d2e63f4a7 Mon Sep 17 00:00:00 2001 From: yangwq7 Date: Fri, 26 Aug 2022 09:50:46 +0800 Subject: [PATCH 2/3] =?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 f691bb8437258d0b0f5b1676a0dd9e97640c14a7 Mon Sep 17 00:00:00 2001 From: yangwq7 Date: Tue, 30 Aug 2022 14:14:56 +0800 Subject: [PATCH 3/3] =?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)