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-03 22:54:31 +08:00
parent 0cda041315
commit ad8cc8a003
22 changed files with 519 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/store/modules/chartEditStore/chartEditStore.d.ts
Vendored
+2
View File
@@ -60,6 +60,7 @@ export enum ChartEditStoreEnum {
RIGHT_MENU_SHOW = 'rightMenuShow',
MOUSE_POSITION = 'mousePosition',
TARGET_CHART = 'targetChart',
RECORD_CHARTS = 'recordCharts',
COMPONENT_LIST = 'componentList'
}
@@ -69,5 +70,6 @@ export interface chartEditStoreType {
[ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean
[ChartEditStoreEnum.MOUSE_POSITION]: MousePositionType
[ChartEditStoreEnum.TARGET_CHART]: TargetChartType
[ChartEditStoreEnum.RECORD_CHARTS]?: CreateComponentType | CreateComponentType[]
[ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[]
}
src/store/modules/chartEditStore/chartEditStore.ts
+95 -20
View File
@@ -1,7 +1,8 @@
import { defineStore } from 'pinia'
import debounce from 'lodash/debounce'
import { loadingStart, loadingFinish, loadingError } from '@/utils'
import { getUUID, loadingStart, loadingFinish, loadingError } from '@/utils'
import { CreateComponentType } from '@/packages/index.d'
import debounce from 'lodash/debounce'
import cloneDeep from 'lodash/cloneDeep'
import {
chartEditStoreType,
EditCanvasType,
@@ -9,6 +10,12 @@ import {
TargetChartType
} from './chartEditStore.d'
// 记录记录
import { useChartHistoryStoreStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
import { HistoryActionTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
const chartHistoryStoreStore = useChartHistoryStoreStore()
// 编辑区域内容
export const useChartEditStoreStore = defineStore({
id: 'useChartEditStoreStore',
@@ -24,7 +31,7 @@ export const useChartEditStoreStore = defineStore({
height: 1080,
// 偏移量
offset: 20,
// 系统控制缩放
// 系统控制缩放
scale: 1,
// 用户控制的缩放
userScale: 1,
@@ -45,6 +52,8 @@ export const useChartEditStoreStore = defineStore({
hoverId: undefined,
selectId: undefined
},
// 记录临时数据（复制等）
recordCharts: undefined,
// 图表数组
componentList: []
}),
@@ -61,6 +70,9 @@ export const useChartEditStoreStore = defineStore({
getTargetChart():TargetChartType {
return this.targetChart
},
getRecordCharts(): CreateComponentType | CreateComponentType[] | undefined {
return this.recordCharts
},
getComponentList(): CreateComponentType[] {
return this.componentList
}
@@ -82,6 +94,10 @@ export const useChartEditStoreStore = defineStore({
setTargetSelectChart(selectId?:TargetChartType["selectId"]) {
this.targetChart.selectId = selectId
},
// * 设置记录数据
setRecordCharts(item: CreateComponentType | CreateComponentType[] | undefined) {
this.recordCharts = cloneDeep(item)
},
// * 找到目标 id 数据下标位置
fetchTargetIndex(): number {
const index = this.componentList.findIndex(e => e.id === this.getTargetChart.selectId)
@@ -91,8 +107,17 @@ export const useChartEditStoreStore = defineStore({
}
return index
},
// * 新增组件列表
addComponentList(chartData: CreateComponentType, isEnd = false): void {
/**
* * 新增组件列表
* @param chartData 新图表实例
* @param isEnd 是否末端插入
* @param isHistory 是否进行记录
* @returns
*/
addComponentList(chartData: CreateComponentType, isEnd = false, isHistory = false): void {
if(isHistory) {
chartHistoryStoreStore.createAddHistory(chartData)
}
if(isEnd) {
this.componentList.unshift(chartData)
return
@@ -105,6 +130,7 @@ export const useChartEditStoreStore = defineStore({
loadingStart()
const index = this.fetchTargetIndex()
if (index !== -1) {
chartHistoryStoreStore.createDeleteHistory(this.getComponentList[index])
this.componentList.splice(index, 1)
loadingFinish()
return
@@ -118,6 +144,16 @@ export const useChartEditStoreStore = defineStore({
if(index < 1 && index > this.getComponentList.length) return
this.componentList[index] = newData
},
// * 设置页面样式属性
setPageStyle<T extends keyof CSSStyleDeclaration>(
key: T,
value: any
): void {
const dom = this.getEditCanvas.editContentDom
if (dom) {
dom.style[key] = value
}
},
// * 移动组件列表位置到两端
setBothEnds(isEnd = false): void {
try {
@@ -136,6 +172,7 @@ export const useChartEditStoreStore = defineStore({
return
}
// 插入两端
chartHistoryStoreStore.createLaryerHistory(this.getComponentList[index])
this.addComponentList(this.getComponentList[index], isEnd)
this.getComponentList.splice(isEnd ? index + 1: index, 1)
loadingFinish()
@@ -153,16 +190,6 @@ export const useChartEditStoreStore = defineStore({
setBottom(): void {
this.setBothEnds(true)
},
// * 设置页面样式属性
setPageStyle<T extends keyof CSSStyleDeclaration>(
key: T,
value: any
): void {
const dom = this.getEditCanvas.editContentDom
if (dom) {
dom.style[key] = value
}
},
// * 互换图表位置
wrap(isDown = false) {
try {
@@ -186,8 +213,10 @@ export const useChartEditStoreStore = defineStore({
const targetItem = this.getComponentList[index]
const swapItem = this.getComponentList[swapIndex]
chartHistoryStoreStore.createLaryerHistory(targetItem)
this.updateComponentList(index, swapItem)
this.updateComponentList(swapIndex, targetItem)
loadingFinish()
return
}
@@ -203,6 +232,57 @@ export const useChartEditStoreStore = defineStore({
setDown() {
this.wrap(true)
},
// * 复制
setCopy() {
try {
loadingStart()
const index:number = this.fetchTargetIndex()
if (index !== -1) {
this.setRecordCharts(this.getComponentList[index])
window['$message'].success('复制成功！')
loadingFinish()
}
} catch(value) {
loadingError()
}
},
// * 粘贴
setParse() {
try {
loadingStart()
const recordCharts = this.getRecordCharts
if (recordCharts === undefined) {
loadingFinish()
return
}
const parseHandle = (e: CreateComponentType) => {
e = cloneDeep(e)
// 生成新 id
e.id = getUUID()
// 偏移位置
e.attr.x = e.attr.x + 30
e.attr.y = e.attr.y + 30
return e
}
if (Array.isArray(recordCharts)) {
recordCharts.forEach((e: CreateComponentType) => {
console.log(parseHandle(e));
this.addComponentList(parseHandle(e), undefined, true)
})
loadingFinish()
return
}
this.addComponentList(parseHandle(recordCharts), undefined, true)
loadingFinish()
} catch(value) {
loadingError()
}
},
// * 设置鼠标位置
setMousePosition(x: number, y: number): void {
this.mousePosition.x = x
this.mousePosition.y = y
},
// * 设置页面变换时候的 Class
setPageSizeClass(): void {
const dom = this.getEditCanvas.editContentDom
@@ -218,11 +298,6 @@ export const useChartEditStoreStore = defineStore({
this.setPageStyle('height', `${this.getEditCanvas.height}px`)
this.setPageStyle('width', `${this.getEditCanvas.width}px`)
},
// * 设置鼠标位置
setMousePosition(x: number, y: number): void {
this.mousePosition.x = x
this.mousePosition.y = y
},
// * 计算缩放
computedScale() {
if (this.getEditCanvas.editLayoutDom) {
src/store/modules/chartHistoryStore/chartHistoryDefine.ts
+16
View File
@@ -0,0 +1,16 @@
import {
HistoryTargetTypeEnum,
HistoryActionTypeEnum
} from './chartHistoryStore.d'
export const historyActionTypeName = {
[HistoryActionTypeEnum.ADD]: '新增图表',
[HistoryActionTypeEnum.DELETE]: '删除图表',
[HistoryActionTypeEnum.UPDATE]: '修改属性',
[HistoryActionTypeEnum.MOVE]: '移动图表',
[HistoryActionTypeEnum.PASTE]: '粘贴图表',
[HistoryActionTypeEnum.LARYER]: '改变层级',
[HistoryActionTypeEnum.SELECT_HISTORY]: '选择记录',
[HistoryTargetTypeEnum.CANVAS]: '画布初始化'
}
src/store/modules/chartHistoryStore/chartHistoryStore.d.ts
Vendored
+36 -8
View File
@@ -1,28 +1,56 @@
import { CreateComponentType } from '@/packages/index.d'
import { ChartLayoutType } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
// 操作类型枚举
export enum HistoryTypeEnum {
export enum HistoryActionTypeEnum {
// 新增
ADD = 'add',
// 删除
DELETE = 'delete',
// 更新（位置，属性）
UPDATE = 'update',
// 移动
MOVE = 'move',
// 粘贴
PASTE = 'paste',
// 改变层级
LARYER = 'laryer',
// 选择历史记录
SELECT_HISTORY = 'selectHistory'
}
// 对象类型
export enum HistoryTargetTypeEnum {
CANVAS = 'canvas',
CHART = 'chart'
}
// 历史栈
export enum HistoryStackEnum {
BACK_STACK= 'backStack',
FORWARD_STACK= 'forwardStack',
BACK_STACK = 'backStack',
FORWARD_STACK = 'forwardStack'
}
// 历史记录项
export enum HistoryStackItemEnum {
ID = 'id',
TARGET_TYPE = 'targetType',
ACTION_TYPE = 'actionType',
HISTORY_DATA = 'historyData'
}
// 历史记录项类型
export interface HistoryItemType extends CreateComponentType {
historyType: HistoryTypeEnum
export interface HistoryItemType {
[HistoryStackItemEnum.ID]: string
[HistoryStackItemEnum.TARGET_TYPE]: HistoryTargetTypeEnum
[HistoryStackItemEnum.ACTION_TYPE]: HistoryActionTypeEnum
[HistoryStackItemEnum.HISTORY_DATA]: CreateComponentType | ChartLayoutType
}
// 历史 Store 类型
export interface ChartHistoryStoreType {
// 后退栈
[HistoryStackEnum.BACK_STACK]: Array<HistoryItemType>,
[HistoryStackEnum.BACK_STACK]: Array<HistoryItemType>
// 前进栈
[HistoryStackEnum.FORWARD_STACK]: Array<HistoryItemType>,
}
[HistoryStackEnum.FORWARD_STACK]: Array<HistoryItemType>
}
src/store/modules/chartHistoryStore/chartHistoryStore.ts
+105
View File
@@ -0,0 +1,105 @@
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 {
HistoryStackEnum,
HistoryStackItemEnum,
HistoryActionTypeEnum,
HistoryTargetTypeEnum,
HistoryItemType,
ChartHistoryStoreType
} from './chartHistoryStore.d'
export const useChartHistoryStoreStore = defineStore({
id: 'useChartHistoryStore',
state: (): ChartHistoryStoreType => ({
// 后退栈（记录栈）
backStack: [],
// 前进栈
forwardStack: []
}),
getters: {
getBackStack(): Array<HistoryItemType> {
return this.backStack
},
getForwardStack(): Array<HistoryItemType> {
return this.forwardStack
}
},
actions: {
/**
* * 新增记录并插入栈
* @param item 图表实例
* @param actionType 动作类型
* @param targetType 对象类型（默认图表）
*/
createStackItem(item: CreateComponentType | ChartLayoutType, 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,
})
},
// * 画布初始化
canvasInit(canvas: ChartLayoutType) {
this.createStackItem(canvas, HistoryActionTypeEnum.ADD, HistoryTargetTypeEnum.CANVAS)
},
// * 推入记录栈
pushBackStackItem(item: HistoryItemType | Array<HistoryItemType>): void {
if (item instanceof Array) this.backStack = [...this.backStack, ...item]
else this.backStack.push(item)
},
// * 推入前进栈
pushForwardStack(item: HistoryItemType | Array<HistoryItemType>): void {
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)
}
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)
}
if (this.forwardStack.length > 0) {
return this.forwardStack.pop()
}
},
// * 新增组件记录
createAddHistory(item: CreateComponentType) {
this.createStackItem(item, HistoryActionTypeEnum.ADD, HistoryTargetTypeEnum.CHART)
},
// * 更新属性记录（大小、图表属性）
createUpdateHistory(item: CreateComponentType) {
this.createStackItem(item, HistoryActionTypeEnum.UPDATE, HistoryTargetTypeEnum.CHART)
},
// * 删除组件记录
createDeleteHistory(item: CreateComponentType) {
this.createStackItem(item, HistoryActionTypeEnum.DELETE, HistoryTargetTypeEnum.CHART)
},
// * 移动组件记录
createMoveHistory(item: CreateComponentType) {
this.createStackItem(item, HistoryActionTypeEnum.MOVE, HistoryTargetTypeEnum.CHART)
},
// * 改变层级组件记录
createLaryerHistory(item: CreateComponentType) {
this.createStackItem(item, HistoryActionTypeEnum.LARYER, HistoryTargetTypeEnum.CHART)
},
// * 粘贴组件记录
createPasteHistory(item: CreateComponentType) {
this.createStackItem(item, HistoryActionTypeEnum.PASTE, HistoryTargetTypeEnum.CHART)
},
}
})
src/store/modules/chartHistoryStore/chartHistoryStore}.ts
-62
View File
@@ -1,62 +0,0 @@
import { defineStore } from 'pinia'
import {
HistoryStackEnum,
HistoryItemType,
ChartHistoryStoreType
} from './chartHistoryStore.d'
import { setLocalStorage, getLocalStorage } from '@/utils'
import { StorageEnum } from '@/enums/storageEnum'
export const useChartHistoryStoreStore = defineStore({
id: 'useChartHistoryStore',
state: (): ChartHistoryStoreType => ({
// 后退栈（记录栈）
backStack: [],
// 前进栈
forwardStack: []
}),
getters: {
getBackStack(): Array<HistoryItemType> {
return this.backStack
},
getForwardStack(): Array<HistoryItemType> {
return this.forwardStack
}
},
actions: {
// * 推入记录栈
addBackStackItem(item: HistoryItemType | Array<HistoryItemType>): void {
if(item instanceof Array) this.backStack = [...this.backStack, ...item]
else this.backStack.push(item)
},
// * 推入前进栈
addForwardStack(item: HistoryItemType | Array<HistoryItemType>): void {
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)
}
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)
}
if (this.forwardStack.length > 0) {
return this.forwardStack.pop()
}
}
}
})
src/store/modules/chartLayoutStore/chartLayoutStore.ts
+1 -3
View File
@@ -8,9 +8,7 @@ const chartEditStore = useChartEditStoreStore()
const { GO_CHART_LAYOUT_STORE } = StorageEnum
const storageChartLayout: ChartLayoutType = getLocalStorage(
GO_CHART_LAYOUT_STORE
)
const storageChartLayout: ChartLayoutType = getLocalStorage( GO_CHART_LAYOUT_STORE)
// 编辑区域布局和静态设置
export const useChartLayoutStore = defineStore({