test/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2024-12-04 20:59:26 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: 解耦移动相关后退、前进逻辑

Browse Source
This commit is contained in:
yangwq7 2022-08-30 14:14:56 +08:00
parent 9fea20cb79
commit 36bfbf900a
4 changed files with 33 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/packages/index.d.ts vendored
View File

@ -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

19
src/store/modules/chartEditStore/chartEditStore.ts
View File

@ -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
}

65
src/store/modules/chartHistoryStore/chartHistoryStore.ts
View File

@ -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
}

9
src/views/chart/ContentEdit/hooks/useDrag.hook.ts
View File

@ -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)