mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增多选的历史记录处理

Browse Source
This commit is contained in:
奔跑的面条 2022-08-16 20:41:41 +08:00
parent 26d249f942
commit 57be88e8aa
7 changed files with 118 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/store/modules/chartEditStore/chartEditStore.d.ts vendored
View File

@ -117,7 +117,7 @@ export type TargetChartType = {
// 数据记录
export type RecordChartType = {
charts: CreateComponentType | CreateComponentType[] | CreateComponentGroupType
charts: CreateComponentType | CreateComponentGroupType | Array<CreateComponentType | CreateComponentGroupType>
type: HistoryActionTypeEnum.CUT | HistoryActionTypeEnum.COPY
}

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

@ -252,41 +252,60 @@ export const useChartEditStore = defineStore({
// * 统一格式化处理入参 id
idPreFormat(id?: string | string[]) {
const idArr = []
if (!id) idArr.push(...this.getTargetChart.selectId)
if (!id) {
idArr.push(...this.getTargetChart.selectId)
return idArr
}
if (isString(id)) idArr.push(id)
if (isArray(id)) idArr.push(...id)
return idArr
},
/**
* * 新增组件列表
* @param chartConfig 新图表实例
* @param componentInstance 新图表实例
* @param isHead 是否头部插入
* @param isHistory 是否进行记录
* @returns
*/
addComponentList(chartConfig: CreateComponentType | CreateComponentGroupType, isHead = false, isHistory = false): void {
if (isHistory) {
chartHistoryStore.createAddHistory(chartConfig)
}
if (isHead) {
this.componentList.unshift(chartConfig)
addComponentList(
componentInstance:
| CreateComponentType
| CreateComponentGroupType
| CreateComponentType[]
| CreateComponentGroupType[],
isHead = false,
isHistory = false
): void {
if(componentInstance instanceof Array) {
componentInstance.forEach(item => {
this.addComponentList(item, isHead, isHistory)
})
return
}
this.componentList.push(chartConfig)
if (isHistory) {
chartHistoryStore.createAddHistory([componentInstance])
}
if (isHead) {
this.componentList.unshift(componentInstance)
return
}
this.componentList.push(componentInstance)
},
// * 删除组件
removeComponentList(id?:string | string[], isHistory = true): void {
try {
loadingStart()
const idArr = this.idPreFormat(id)
const history: Array<CreateComponentType | CreateComponentGroupType> = []
// 遍历所有对象
idArr.forEach(ids => {
const index = this.fetchTargetIndex(ids)
if (index !== -1) {
isHistory ? chartHistoryStore.createDeleteHistory(this.getComponentList[index]) : undefined
history.push(this.getComponentList[index])
this.componentList.splice(index, 1)
}
})
isHistory && chartHistoryStore.createDeleteHistory(history)
loadingFinish()
return
} catch(value) {
@ -331,8 +350,8 @@ export const useChartEditStore = defineStore({
}
// 记录原有位置
const setIndex = (t:CreateComponentType | CreateComponentGroupType, i:number) => {
const temp = cloneDeep(t)
const setIndex = (componentInstance:CreateComponentType | CreateComponentGroupType, i:number) => {
const temp = cloneDeep(componentInstance)
temp.attr.zIndex = i
return temp
}
@ -340,7 +359,7 @@ export const useChartEditStore = defineStore({
// 历史记录
if (isHistory) {
chartHistoryStore.createLayerHistory(
setIndex(targetData, index),
[setIndex(targetData, index)],
isEnd ? HistoryActionTypeEnum.BOTTOM : HistoryActionTypeEnum.TOP
)
}
@ -391,7 +410,7 @@ export const useChartEditStore = defineStore({
// 历史记录
if (isHistory) {
chartHistoryStore.createLayerHistory(
targetItem,
[targetItem],
isDown ? HistoryActionTypeEnum.DOWN : HistoryActionTypeEnum.UP
)
}
@ -482,45 +501,54 @@ export const useChartEditStore = defineStore({
}
},
// * 撤回/前进 目标处理
setBackAndSetForwardHandle(item: HistoryItemType, isForward = false) {
setBackAndSetForwardHandle(HistoryItem: HistoryItemType, isForward = false) {
// 处理画布
if (item.targetType === HistoryTargetTypeEnum.CANVAS) {
this.editCanvas = item.historyData as EditCanvasType
if (HistoryItem.targetType === HistoryTargetTypeEnum.CANVAS) {
this.editCanvas = HistoryItem.historyData[0] as EditCanvasType
return
}
const historyData = item.historyData as CreateComponentType
let historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
if(isArray(historyData)) {
// 选中目标元素，支持多个
historyData.forEach((item: CreateComponentType | CreateComponentGroupType) => {
this.setTargetSelectChart(item.id, true)
})
}
// 处理新增类型
const isAdd = item.actionType === HistoryActionTypeEnum.ADD
const isDel = item.actionType === HistoryActionTypeEnum.DELETE
this.setTargetSelectChart(historyData.id)
const isAdd = HistoryItem.actionType === HistoryActionTypeEnum.ADD
const isDel = HistoryItem.actionType === HistoryActionTypeEnum.DELETE
if (isAdd || isDel) {
if ((isAdd && isForward) || (isDel && !isForward)) {
this.addComponentList(historyData)
return
historyData.forEach(item => {
this.addComponentList(item)
})
return
}
this.removeComponentList(undefined, false)
historyData.forEach(item => {
this.removeComponentList(item.id, false)
})
return
}
// 处理层级
const isTop = item.actionType === HistoryActionTypeEnum.TOP
const isBottom = item.actionType === HistoryActionTypeEnum.BOTTOM
const isTop = HistoryItem.actionType === HistoryActionTypeEnum.TOP
const isBottom = HistoryItem.actionType === HistoryActionTypeEnum.BOTTOM
if (isTop || isBottom) {
if (!isForward) {
// 插入到原有位置
if (isTop) this.getComponentList.pop()
if (isBottom) this.getComponentList.shift()
this.getComponentList.splice(historyData.attr.zIndex, 0, historyData)
this.getComponentList.splice(historyData[0].attr.zIndex, 0, historyData[0])
return
}
if (isTop) this.setTop(false)
if (isBottom) this.setBottom(false)
}
const isUp = item.actionType === HistoryActionTypeEnum.UP
const isDown = item.actionType === HistoryActionTypeEnum.DOWN
const isUp = HistoryItem.actionType === HistoryActionTypeEnum.UP
const isDown = HistoryItem.actionType === HistoryActionTypeEnum.DOWN
if (isUp || isDown) {
if ((isUp && isForward) || (isDown && !isForward)) {
this.setUp(false)
@ -530,8 +558,17 @@ export const useChartEditStore = defineStore({
return
}
// 处理内容修改
this.getComponentList[this.fetchTargetIndex()] = item.historyData as CreateComponentType
// 处理分组
const isGroup = HistoryItem.actionType === HistoryActionTypeEnum.GROUP
const isUnGroup = HistoryItem.actionType === HistoryActionTypeEnum.UN_GROUP
if (isGroup || isUnGroup) {
if ((isGroup && isForward) || (isUnGroup && !isForward)) {
this.setGroup(false)
return
}
this.setUnGroup([historyData[0].id], undefined, false)
return
}
},
// * 撤回
setBack() {
@ -542,13 +579,6 @@ export const useChartEditStore = defineStore({
loadingFinish()
return
}
if (Array.isArray(targetData)) {
targetData.forEach((e: HistoryItemType) => {
this.setBackAndSetForwardHandle(e)
})
loadingFinish()
return
}
this.setBackAndSetForwardHandle(targetData)
loadingFinish()
@ -565,13 +595,6 @@ export const useChartEditStore = defineStore({
loadingFinish()
return
}
if (Array.isArray(targetData)) {
targetData.forEach((e: HistoryItemType) => {
this.setBackAndSetForwardHandle(e, true)
})
loadingFinish()
return
}
this.setBackAndSetForwardHandle(targetData, true)
loadingFinish()
@ -599,9 +622,9 @@ export const useChartEditStore = defineStore({
attr.x -= distance
break;
}
},
},
// * 创建分组
setGroup() {
setGroup(isHistory = true) {
try {
const selectIds = this.getTargetChart.selectId
if (selectIds.length < 2) return
@ -628,7 +651,7 @@ export const useChartEditStore = defineStore({
newSelectIds.push(e.id)
})
}, false)
} else {
} else if (targetIndex !== -1) {
newSelectIds.push(id)
}
})
@ -649,6 +672,9 @@ export const useChartEditStore = defineStore({
targetList.push(item)
})
// 修改原数据之前，先记录
if(isHistory) chartHistoryStore.createGroupHistory(targetList)
// 设置子组件的位置
targetList.forEach((item: CreateComponentType) => {
item.attr.x = item.attr.x - groupAttr.l

2
src/store/modules/chartHistoryStore/chartHistoryDefine.ts
View File

@ -15,6 +15,8 @@ export const historyActionTypeName = {
[HistoryActionTypeEnum.BOTTOM]: '层级置底',
[HistoryActionTypeEnum.UP]: '层级上移',
[HistoryActionTypeEnum.DOWN]: '层级下移',
[HistoryActionTypeEnum.GROUP]: '创建分组',
[HistoryActionTypeEnum.UN_GROUP]: '解除分组',
[HistoryActionTypeEnum.SELECT_HISTORY]: '选择记录',
[HistoryTargetTypeEnum.CANVAS]: '画布初始化'

4
src/store/modules/chartHistoryStore/chartHistoryStore.d.ts vendored
View File

@ -56,10 +56,10 @@ export enum HistoryStackItemEnum {
// 历史记录项类型
export interface HistoryItemType {
// 会有同时操作多个组件场景
[HistoryStackItemEnum.ID]: string | string[]
[HistoryStackItemEnum.ID]: string
[HistoryStackItemEnum.TARGET_TYPE]: HistoryTargetTypeEnum
[HistoryStackItemEnum.ACTION_TYPE]: HistoryActionTypeEnum
[HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | CreateComponentGroupType | EditCanvasType
[HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType[] | CreateComponentGroupType[] | EditCanvasType[]
}
// 历史 Store 类型

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

@ -35,31 +35,26 @@ export const useChartHistoryStore = defineStore({
* @param targetType 对象类型（默认图表）
*/
createStackItem(
item: CreateComponentType | CreateComponentGroupType | EditCanvasType,
item: CreateComponentType[] | CreateComponentGroupType[] | EditCanvasType[],
actionType: HistoryActionTypeEnum,
targetType: HistoryTargetTypeEnum = HistoryTargetTypeEnum.CHART
) {
// 优化性能转为freeze
this.pushBackStackItem(Object.freeze({
[HistoryStackItemEnum.ID]: new Date().getTime().toString(),
[HistoryStackItemEnum.HISTORY_DATA]: item,
[HistoryStackItemEnum.ACTION_TYPE]: actionType,
[HistoryStackItemEnum.TARGET_TYPE]: targetType
} as const))
// 优化性能转为 freeze
this.pushBackStackItem(
Object.freeze({
[HistoryStackItemEnum.ID]: new Date().getTime().toString(),
[HistoryStackItemEnum.HISTORY_DATA]: item,
[HistoryStackItemEnum.ACTION_TYPE]: actionType,
[HistoryStackItemEnum.TARGET_TYPE]: targetType
} as const)
)
},
// * 画布初始化
canvasInit(canvas: EditCanvasType) {
this.createStackItem(
canvas,
HistoryActionTypeEnum.ADD,
HistoryTargetTypeEnum.CANVAS
)
this.createStackItem([canvas], HistoryActionTypeEnum.ADD, HistoryTargetTypeEnum.CANVAS)
},
// * 推入后退栈
pushBackStackItem(
item: HistoryItemType | Array<HistoryItemType>,
notClear = false
): void {
pushBackStackItem(item: HistoryItemType | Array<HistoryItemType>, notClear = false): void {
if (item instanceof Array) this.backStack = [...this.backStack, ...item]
else this.backStack.push(item)
this.backStack.splice(0, this.backStack.length - editHistoryMax)
@ -69,30 +64,17 @@ export const useChartHistoryStore = defineStore({
},
// * 推入前进栈
pushForwardStack(item: HistoryItemType | Array<HistoryItemType>): void {
if (item instanceof Array)
this.forwardStack = [...this.forwardStack, ...item]
if (item instanceof Array) this.forwardStack = [...this.forwardStack, ...item]
else this.forwardStack.push(item)
},
// * 移出后退栈
popBackStackItem(
index?: number
): HistoryItemType[] | HistoryItemType | undefined {
const length = this.backStack.length
if (index && length >= index) {
return this.backStack.splice(-index)
}
popBackStackItem(): HistoryItemType | undefined {
if (this.backStack.length > 0) {
return this.backStack.pop()
}
},
// * 移出前进栈
popForwardStack(
index?: number
): HistoryItemType[] | HistoryItemType | undefined {
const length = this.forwardStack.length
if (index && length >= index) {
return this.forwardStack.splice(-index)
}
popForwardStack(): HistoryItemType | undefined {
if (this.forwardStack.length > 0) {
return this.forwardStack.pop()
}
@ -104,7 +86,7 @@ export const useChartHistoryStore = defineStore({
// * 清空后退栈(保留初始化)
clearBackStack() {
const canvasHistory = this.getBackStack[0]
this.backStack = [canvasHistory]
this.backStack = [canvasHistory]
},
// * 撤回
backAction() {
@ -148,59 +130,43 @@ export const useChartHistoryStore = defineStore({
}
},
// * 新增组件记录
createAddHistory(item: CreateComponentType | CreateComponentGroupType) {
this.createStackItem(
item,
HistoryActionTypeEnum.ADD,
HistoryTargetTypeEnum.CHART
)
createAddHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
this.createStackItem(item, HistoryActionTypeEnum.ADD, HistoryTargetTypeEnum.CHART)
},
// * 更新属性记录（大小、图表属性）
createUpdateHistory(item: CreateComponentType | CreateComponentGroupType) {
this.createStackItem(
item,
HistoryActionTypeEnum.UPDATE,
HistoryTargetTypeEnum.CHART
)
createUpdateHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
this.createStackItem(item, HistoryActionTypeEnum.UPDATE, HistoryTargetTypeEnum.CHART)
},
// * 删除组件记录
createDeleteHistory(item: CreateComponentType | CreateComponentGroupType) {
this.createStackItem(
item,
HistoryActionTypeEnum.DELETE,
HistoryTargetTypeEnum.CHART
)
createDeleteHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
this.createStackItem(item, HistoryActionTypeEnum.DELETE, HistoryTargetTypeEnum.CHART)
},
// * 移动组件记录
createMoveHistory(item: CreateComponentType | CreateComponentGroupType) {
this.createStackItem(
item,
HistoryActionTypeEnum.MOVE,
HistoryTargetTypeEnum.CHART
)
createMoveHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
this.createStackItem(item, HistoryActionTypeEnum.MOVE, HistoryTargetTypeEnum.CHART)
},
// * 改变层级组件记录
createLayerHistory(
item: CreateComponentType | CreateComponentGroupType,
item: Array<CreateComponentType | CreateComponentGroupType>,
type:
| HistoryActionTypeEnum.TOP
| HistoryActionTypeEnum.DOWN
| HistoryActionTypeEnum.UP
| HistoryActionTypeEnum.BOTTOM
) {
this.createStackItem(
item,
type,
HistoryTargetTypeEnum.CHART
)
this.createStackItem(item, type, HistoryTargetTypeEnum.CHART)
},
// * 剪切组件记录
createPasteHistory(item: CreateComponentType | CreateComponentGroupType) {
this.createStackItem(
item,
HistoryActionTypeEnum.CUT,
HistoryTargetTypeEnum.CHART
)
createPasteHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
this.createStackItem(item, HistoryActionTypeEnum.CUT, HistoryTargetTypeEnum.CHART)
},
// * 创建分组
createGroupHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
this.createStackItem(item, HistoryActionTypeEnum.GROUP, HistoryTargetTypeEnum.CHART)
},
// * 解除分组
createUnGroupHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
this.createStackItem(item, HistoryActionTypeEnum.GROUP, HistoryTargetTypeEnum.CHART)
}
}
})

2
src/views/chart/ContentEdit/components/EditHistory/index.vue
View File

@ -96,7 +96,7 @@ const labelHandle = (e: HistoryItemType) => {
} else if (e.actionType === HistoryActionTypeEnum.GROUP) {
return `${historyActionTypeName[e.actionType]}`
} else {
return `${historyActionTypeName[e.actionType]} - ${(e.historyData as CreateComponentType).chartConfig.title}`
return `${historyActionTypeName[e.actionType]} - ${(e.historyData[0] as CreateComponentType).chartConfig.title}`
}
}

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

@ -136,6 +136,8 @@ export const useMouseHandle = () => {
let offsetY = (moveEvent.screenY - startY) / scale
chartEditStore.getTargetChart.selectId.forEach(id => {
if(!targetMap.has(id)) return
const index = chartEditStore.fetchTargetIndex(id)
// 拿到初始位置数据
const { x, y, w, h } = targetMap.get(id)