github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-23 07:42:56 +08:00
Code Issues Actions 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/packages/utils/publicConfig.ts
View File

@ -1,15 +1,15 @@
import { getUUID } from '@/utils'
import { PublicConfigType } from '@/packages/index.d'
export class publicConfig implements PublicConfigType{
export class publicConfig implements PublicConfigType {
public id = getUUID()
// 重命名
public rename = undefined
// 基本信息
public attr = { x: 0, y: 0, w: 500, h: 300, zIndex: 0 }
public attr = { x: 0, y: 0, w: 500, h: 300, zIndex: -1 }
// 设置坐标
public setPosition(x: number, y: number): void {
this.attr.x = x
this.attr.y = y
}
}
}

2
src/plugins/naive.ts
View File

@ -17,6 +17,7 @@ import {
NInput,
NImage,
NButton,
NButtonGroup,
NForm,
NFormItem,
NCheckboxGroup,
@ -101,6 +102,7 @@ const naive = create({
NGradientText,
NInput,
NButton,
NButtonGroup,
NForm,
NFormItem,
NCheckboxGroup,

121
src/store/modules/chartEditStore/chartEditStore.ts
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()

7
src/store/modules/chartHistoryStore/chartHistoryDefine.ts
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]: '画布初始化'

14
src/store/modules/chartHistoryStore/chartHistoryStore.d.ts vendored
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 类型

89
src/store/modules/chartHistoryStore/chartHistoryStore.ts
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
)
}
}
})

2
src/views/chart/ContentDetails/components/Behind/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
后端数据
数据
</div>
</template>

10
src/views/chart/ContentDetails/components/Setting/index.vue
View File

@ -1,13 +1,13 @@
<template>
<div>
<div class="go-chart-content-details">
设置
</div>
</template>
<script setup>
</script>
<script setup></script>
<style lang="scss" scoped>
@include go('chart-content-details') {
position: relative;
}
</style>

2
src/views/chart/ContentDetails/index.vue
View File

@ -90,7 +90,7 @@ const tabList = shallowRef([
},
{
key: 'behind',
title: '后端数据',
title: '数据',
icon: FlashIcon,
render: Behind
}

8
src/views/chart/ContentEdit/components/History/index.vue
View File

@ -75,7 +75,13 @@ const iconHandle = (e: HistoryItemType) => {
return renderIcon(TrashIcon)
case HistoryActionTypeEnum.PASTE:
return renderIcon(CopyIcon)
case HistoryActionTypeEnum.LARYER:
case HistoryActionTypeEnum.TOP:
return renderIcon(LayersIcon)
case HistoryActionTypeEnum.BOTTOM:
return renderIcon(LayersIcon)
case HistoryActionTypeEnum.UP:
return renderIcon(LayersIcon)
case HistoryActionTypeEnum.DOWN:
return renderIcon(LayersIcon)
case HistoryActionTypeEnum.MOVE:
return renderIcon(StackedMoveIcon)

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

@ -50,7 +50,7 @@ import { EditBottom } from './components/EditBottom'
import { ShapeBox } from './components/ShapeBox/index'
import { useLayout } from './hooks/useLayout.hook'
import { useAddKeyboard, useRemoveKeyboard } from './hooks/useKeyboard.hook'
import { useAddKeyboard } from '../hooks/useKeyboard.hook'
import { handleDrop, handleDragOver, useMouseHandle } from './hooks/useDrop.hook'
import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
import { getChartEditStore } from './hooks/useStore.hook'

2
src/views/chart/HeaderLeftBtn/index.vue
View File

@ -27,7 +27,7 @@ import { icon } from '@/plugins'
const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon } = icon.ionicons5
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
import { useRemoveKeyboard } from '../ContentEdit/hooks/useKeyboard.hook'
import { useRemoveKeyboard } from '../hooks/useKeyboard.hook'
const { setItem } = useChartLayoutStore()
const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore())

3
src/views/chart/ContentEdit/hooks/useKeyboard.hook.ts → src/views/chart/hooks/useKeyboard.hook.ts
View File

@ -1,5 +1,5 @@
import { isMac, addEventListener, removeEventListener } from '@/utils'
import { getChartEditStore } from './useStore.hook'
import { getChartEditStore } from '../ContentEdit/hooks/useStore.hook'
import { MenuEnum } from '@/views/chart/hooks/useContextMenu.hook'
const chartEditStore = getChartEditStore()
@ -25,6 +25,7 @@ const KeyboardHandle = (e: KeyboardEvent) => {
chartEditStore.removeComponentList()
return
}
// 前进
if (e.ctrlKey && e.shiftKey && key == keyboardValue.back) {
chartEditStore.setForward()