github/go-view
4
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2026-04-23 00:00:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增撤回前进功能

Browse Source
This commit is contained in:
MTrun
2022-02-04 18:28:02 +08:00
parent 7d5985f743
commit 7b24b90fbc
13 changed files with 198 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/store/modules/chartEditStore/chartEditStore.ts
+92 -29
View File
@@ -13,7 +13,7 @@ import {
// 记录记录
import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
import { HistoryActionTypeEnum, HistoryItemType } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
const chartHistoryStoreStore = useChartHistoryStoreStore()
@@ -115,22 +115,22 @@ export const useChartEditStoreStore = defineStore({
* @returns
*/
addComponentList(chartData: CreateComponentType, isEnd = false, isHistory = false): void {
if(isHistory) {
if (isHistory) {
chartHistoryStoreStore.createAddHistory(chartData)
}
if(isEnd) {
if (isEnd) {
this.componentList.unshift(chartData)
return
}
this.componentList.push(chartData)
},
// * 删除组件列表
removeComponentList(): void {
removeComponentList(isHistory = true): void {
try {
loadingStart()
const index = this.fetchTargetIndex()
if (index !== -1) {
chartHistoryStoreStore.createDeleteHistory(this.getComponentList[index])
isHistory ? chartHistoryStoreStore.createDeleteHistory(this.getComponentList[index]) : undefined
this.componentList.splice(index, 1)
loadingFinish()
return
@@ -141,7 +141,7 @@ export const useChartEditStoreStore = defineStore({
},
// * 更新组件列表某一项的值
updateComponentList(index: number, newData: CreateComponentType) {
if(index < 1 && index > this.getComponentList.length) return
if (index < 1 && index > this.getComponentList.length) return
this.componentList[index] = newData
},
// * 设置页面样式属性
@@ -155,25 +155,41 @@ export const useChartEditStoreStore = defineStore({
}
},
// * 移动组件列表位置到两端
setBothEnds(isEnd = false): void {
setBothEnds(isEnd = false, isHistory = true): void {
try {
loadingStart()
const length = this.getComponentList.length
if(length < 2) {
if (length < 2) {
loadingFinish()
return
}
const index = this.fetchTargetIndex()
const targetData = this.getComponentList[index]
if (index !== -1) {
// 置底排除最底层, 置顶排除最顶层
if ((isEnd && index === 0) || (!isEnd && index === length - 1 )) {
loadingFinish()
return
}
// 记录原有位置
const setIndex = (t:CreateComponentType, i:number) => {
const temp = cloneDeep(t)
temp.attr.zIndex = i
return temp
}
// 历史记录
if (isHistory) {
chartHistoryStoreStore.createLaryerHistory(
setIndex(targetData, index),
isEnd ? HistoryActionTypeEnum.BOTTOM : HistoryActionTypeEnum.TOP
)
}
// 插入两端
chartHistoryStoreStore.createLaryerHistory(this.getComponentList[index])
this.addComponentList(this.getComponentList[index], isEnd)
this.addComponentList(targetData, isEnd)
this.getComponentList.splice(isEnd ? index + 1: index, 1)
loadingFinish()
return
@@ -183,15 +199,15 @@ export const useChartEditStoreStore = defineStore({
}
},
// * 置顶
setTop(): void {
this.setBothEnds()
setTop(isHistory = true): void {
this.setBothEnds(false, isHistory)
},
// * 置底
setBottom(): void {
this.setBothEnds(true)
setBottom(isHistory = true): void {
this.setBothEnds(true, isHistory)
},
// * 互换图表位置
wrap(isDown = false) {
wrap(isDown = false, isHistory = true) {
try {
loadingStart()
const length = this.getComponentList.length
@@ -212,10 +228,15 @@ export const useChartEditStoreStore = defineStore({
const targetItem = this.getComponentList[index]
const swapItem = this.getComponentList[swapIndex]
chartHistoryStoreStore.createLaryerHistory(targetItem)
// 历史记录
if (isHistory) {
chartHistoryStoreStore.createLaryerHistory(
targetItem,
isDown ? HistoryActionTypeEnum.DOWN : HistoryActionTypeEnum.UP
)
}
this.updateComponentList(index, swapItem)
this.updateComponentList(swapIndex, targetItem)
loadingFinish()
return
}
@@ -224,12 +245,12 @@ export const useChartEditStoreStore = defineStore({
}
},
// * 上移
setUp() {
this.wrap()
setUp(isHistory = true) {
this.wrap(false, isHistory)
},
// * 下移
setDown() {
this.wrap(true)
setDown(isHistory = true) {
this.wrap(true, isHistory)
},
// * 复制
setCopy(isCut = false) {
@@ -279,7 +300,7 @@ export const useChartEditStoreStore = defineStore({
// 剪切需删除原数据
if (isCut) {
this.setTargetSelectChart(e.id)
this.removeComponentList()
this.removeComponentList(true)
}
})
if (isCut) this.setRecordChart(undefined)
@@ -288,7 +309,7 @@ export const useChartEditStoreStore = defineStore({
}
// 单项
this.addComponentList(parseHandle(recordCharts.charts), undefined, true)
if(isCut) {
if (isCut) {
this.setTargetSelectChart(recordCharts.charts.id)
this.removeComponentList()
this.setRecordChart(undefined)
@@ -298,19 +319,62 @@ export const useChartEditStoreStore = defineStore({
loadingError()
}
},
// 撤回处理
// * 撤回/前进 目标处理
setBackAndSetForwardHandle(item: HistoryItemType, isForward = false) {
// 前进
if (isForward) {
// 处理画布
if (item.targetType === HistoryTargetTypeEnum.CANVAS) {
this.editCanvas = item.historyData as EditCanvasType
return
}
console.log(item);
const historyData = item.historyData as CreateComponentType
// 处理新增类型
const isAdd = item.actionType === HistoryActionTypeEnum.ADD
const isDel = item.actionType === HistoryActionTypeEnum.DELETE
this.setTargetSelectChart(historyData.id)
if (isAdd || isDel) {
if ((isAdd && isForward) || (isDel && !isForward)) {
this.addComponentList(historyData)
return
}
this.removeComponentList(false)
return
}
// 处理层级
const isTop = item.actionType === HistoryActionTypeEnum.TOP
const isBottom = item.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)
return
}
if (isTop) this.setTop(false)
if (isBottom) this.setBottom(false)
}
const isUp = item.actionType === HistoryActionTypeEnum.UP
const isDown = item.actionType === HistoryActionTypeEnum.DOWN
if (isUp || isDown) {
if ((isUp && isForward) || (isDown && !isForward)) {
this.setUp(false)
return
}
this.setDown(false)
return
}
// 处理内容修改
this.getComponentList[this.fetchTargetIndex()] = item.historyData as CreateComponentType
},
// * 撤回
setBack() {
try {
loadingStart()
console.log('撤回');
const targetData = chartHistoryStoreStore.backAction()
if (!targetData) {
loadingFinish()
@@ -334,7 +398,6 @@ export const useChartEditStoreStore = defineStore({
setForward() {
try {
loadingStart()
console.log('前进');
const targetData = chartHistoryStoreStore.forwardAction()
if (!targetData) {
loadingFinish()
src/store/modules/chartHistoryStore/chartHistoryDefine.ts
+6 -1
View File
@@ -9,7 +9,12 @@ export const historyActionTypeName = {
[HistoryActionTypeEnum.UPDATE]: '修改属性',
[HistoryActionTypeEnum.MOVE]: '移动图表',
[HistoryActionTypeEnum.PASTE]: '粘贴图表',
[HistoryActionTypeEnum.LARYER]: '改变层级',
[HistoryActionTypeEnum.COPY]: '复制图表',
[HistoryActionTypeEnum.CUT]: '剪切图表',
[HistoryActionTypeEnum.TOP]: '层级置顶',
[HistoryActionTypeEnum.BOTTOM]: '层级置底',
[HistoryActionTypeEnum.UP]: '层级上移',
[HistoryActionTypeEnum.DOWN]: '层级下移',
[HistoryActionTypeEnum.SELECT_HISTORY]: '选择记录',
[HistoryTargetTypeEnum.CANVAS]: '画布初始化'
src/store/modules/chartHistoryStore/chartHistoryStore.d.ts
Vendored
+10 -4
View File
@@ -1,5 +1,5 @@
import { CreateComponentType } from '@/packages/index.d'
import { ChartLayoutType } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d'
// 操作类型枚举
export enum HistoryActionTypeEnum {
@@ -17,8 +17,14 @@ export enum HistoryActionTypeEnum {
CUT = 'cut',
// 粘贴
PASTE = 'paste',
// 改变层级
LARYER = 'laryer',
// 置顶
TOP = 'top',
// 置底
BOTTOM = 'bottom',
// 上移
UP = 'up',
// 下移
DOWN = 'down',
// 选择历史记录
SELECT_HISTORY = 'selectHistory'
}
@@ -48,7 +54,7 @@ export interface HistoryItemType {
[HistoryStackItemEnum.ID]: string
[HistoryStackItemEnum.TARGET_TYPE]: HistoryTargetTypeEnum
[HistoryStackItemEnum.ACTION_TYPE]: HistoryActionTypeEnum
[HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | ChartLayoutType
[HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | EditCanvasType
}
// 历史 Store 类型
src/store/modules/chartHistoryStore/chartHistoryStore.ts
+67 -22
View File
@@ -1,7 +1,6 @@
import { defineStore } from 'pinia'
import { CreateComponentType } from '@/packages/index.d'
import { ChartLayoutType } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d'
import { loadingStart, loadingFinish, loadingError } from '@/utils'
import {
HistoryStackEnum,
@@ -35,25 +34,36 @@ export const useChartHistoryStoreStore = defineStore({
* @param actionType 动作类型
* @param targetType 对象类型（默认图表）
*/
createStackItem(item: CreateComponentType | ChartLayoutType, actionType: HistoryActionTypeEnum, targetType: HistoryTargetTypeEnum = HistoryTargetTypeEnum.CHART) {
createStackItem(
item: CreateComponentType | EditCanvasType,
actionType: HistoryActionTypeEnum,
targetType: HistoryTargetTypeEnum = HistoryTargetTypeEnum.CHART
) {
this.pushBackStackItem({
[HistoryStackItemEnum.ID]: new Date().getTime().toString(),
[HistoryStackItemEnum.HISTORY_DATA]: item,
[HistoryStackItemEnum.ACTION_TYPE]: actionType,
[HistoryStackItemEnum.TARGET_TYPE]: targetType,
[HistoryStackItemEnum.TARGET_TYPE]: targetType
})
},
// * 画布初始化
canvasInit(canvas: ChartLayoutType) {
this.createStackItem(canvas, HistoryActionTypeEnum.ADD, HistoryTargetTypeEnum.CANVAS)
canvasInit(canvas: EditCanvasType) {
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 - 20)
// 新动作需清空前进栈
if(notClear) return
if (notClear) return
this.clearForwardStack()
},
// * 推入前进栈
@@ -63,7 +73,9 @@ export const useChartHistoryStoreStore = defineStore({
else this.forwardStack.push(item)
},
// * 移出记录栈
popBackStackItem( index?: number ): HistoryItemType[] | HistoryItemType | undefined {
popBackStackItem(
index?: number
): HistoryItemType[] | HistoryItemType | undefined {
const length = this.backStack.length
if (index && length >= index) {
return this.backStack.splice(-index)
@@ -73,7 +85,9 @@ export const useChartHistoryStoreStore = defineStore({
}
},
// * 移出前进栈
popForwardStack( index?: number ): HistoryItemType[] | HistoryItemType | undefined {
popForwardStack(
index?: number
): HistoryItemType[] | HistoryItemType | undefined {
const length = this.forwardStack.length
if (index && length >= index) {
return this.forwardStack.splice(-index)
@@ -96,7 +110,7 @@ export const useChartHistoryStoreStore = defineStore({
if (!targetData) {
loadingFinish()
return
}
}
// 移除记录到前进堆
this.pushForwardStack(targetData)
loadingFinish()
@@ -116,7 +130,7 @@ export const useChartHistoryStoreStore = defineStore({
if (!targetData) {
loadingFinish()
return
}
}
// 放入后退栈
this.pushBackStackItem(targetData, true)
loadingFinish()
@@ -129,27 +143,58 @@ export const useChartHistoryStoreStore = defineStore({
},
// * 新增组件记录
createAddHistory(item: CreateComponentType) {
this.createStackItem(item, HistoryActionTypeEnum.ADD, HistoryTargetTypeEnum.CHART)
this.createStackItem(
item,
HistoryActionTypeEnum.ADD,
HistoryTargetTypeEnum.CHART
)
},
// * 更新属性记录（大小、图表属性）
createUpdateHistory(item: CreateComponentType) {
this.createStackItem(item, HistoryActionTypeEnum.UPDATE, HistoryTargetTypeEnum.CHART)
this.createStackItem(
item,
HistoryActionTypeEnum.UPDATE,
HistoryTargetTypeEnum.CHART
)
},
// * 删除组件记录
createDeleteHistory(item: CreateComponentType) {
this.createStackItem(item, HistoryActionTypeEnum.DELETE, HistoryTargetTypeEnum.CHART)
this.createStackItem(
item,
HistoryActionTypeEnum.DELETE,
HistoryTargetTypeEnum.CHART
)
},
// * 移动组件记录
createMoveHistory(item: CreateComponentType) {
this.createStackItem(item, HistoryActionTypeEnum.MOVE, HistoryTargetTypeEnum.CHART)
this.createStackItem(
item,
HistoryActionTypeEnum.MOVE,
HistoryTargetTypeEnum.CHART
)
},
// * 改变层级组件记录
createLaryerHistory(item: CreateComponentType) {
this.createStackItem(item, HistoryActionTypeEnum.LARYER, HistoryTargetTypeEnum.CHART)
createLaryerHistory(
item: CreateComponentType,
type:
| HistoryActionTypeEnum.TOP
| HistoryActionTypeEnum.DOWN
| HistoryActionTypeEnum.UP
| HistoryActionTypeEnum.BOTTOM
) {
this.createStackItem(
item,
type,
HistoryTargetTypeEnum.CHART
)
},
// * 粘贴组件记录
// * 剪切组件记录
createPasteHistory(item: CreateComponentType) {
this.createStackItem(item, HistoryActionTypeEnum.PASTE, HistoryTargetTypeEnum.CHART)
},
this.createStackItem(
item,
HistoryActionTypeEnum.CUT,
HistoryTargetTypeEnum.CHART
)
}
}
})