完善菜单功能

src/components/Canvas/FlowCanvas/manager/StateManager.ts

@@ -16,9 +16,16 @@ export class StateManager {
 	zoom: any
 	tool: any
 	cursor: any
+	// 节点是否可拖动
 	nodesDraggable: any
+	// 拖动时是否可以平移画布
 	panOnDrag: any
 
+	// 历史记录-撤回/重做
+	mxHistory: any
+	historyList: any
+	historyIndex: any
+
 	// 管理器	
 	eventManager: any
 	flowManager: any
@@ -38,17 +45,14 @@ export class StateManager {
 		this.cursor = ref("")
 		this.nodesDraggable = ref(false)
 		this.panOnDrag = ref(false)
+		this.mxHistory = ref(50)
+		this.historyList = ref([])
+		this.historyIndex = ref(0)
+
 		this.nodes = ref<NodesItem[]>([]);
 		this.nodes_ = computed(() => {
 			return this.nodes.value.map((node, index) => {
 				const obj = node;
-				// if (index === 0) {
-				// 	obj.type = NODE_TYPE.INPUT;
-				// } else if (index === this.nodes.value.length - 1) {
-				// 	obj.type = NODE_TYPE.OUTPUT;
-				// } else {
-				// 	obj.type = NODE_TYPE.SECONDARY;
-				// }
 				const superiorID = node.data.superiorID;
 				const isSuperior = this.nodes.value.some((v) => v.id === superiorID)
 				const isSubord = this.nodes.value.some((v) => v.data.superiorID === node.id)
@@ -68,17 +72,6 @@ export class StateManager {
 		this.edges = computed(() => {
 			const arr = []
 			this.nodes.value.forEach((node, index) => {
-				// if (index < this.nodes.value.length - 1) {
-				// 	const source = node.id
-				// 	const target = this.nodes.value[index + 1].id
-				// 	arr.push({
-				// 		id: `el-${source}-${target}`,
-				// 		source: source,
-				// 		target: target,
-				// 		selectable: false,
-				// 		type: 'default'
-				// 	})
-				// }
 				const superiorID = node.data.superiorID;
 				const isSuperior = this.nodes.value.some((v) => v.id === superiorID)
 				if (superiorID && isSuperior) {
@@ -99,28 +92,21 @@ export class StateManager {
 	}
 	/** 添加节点 */
 	addNode(node: NodesItem) {
-		this.nodes.value.push(node)
+		this.nodes.value.push(node);
+		this.recordState()
 	}
 	/** 删除节点 */
 	deleteNode(id: string) {
 		this.nodes.value = this.nodes.value.filter((node: NodesItem) => node.id !== id)
+		this.recordState()
 	}
 	/** 获取节点 */
-	getNodeById(id: string) {
-		return this.nodes.value.find((node: NodesItem) => node.id === id)
-	}
+	getNodeById(id: string) { return this.nodes.value.find((node: NodesItem) => node.id === id) }
 	/** 获取下级节点 */
-	getSubordNodeByID(id: string) {
-		return this.nodes.value.find((node: NodesItem) => node.data.superiorID === id)
-	}
-	getLastNode() {
-		return this.nodes.value[this.nodes.value.length - 1]
-	}
+	getSubordNodeByID(id: string) { return this.nodes.value.find((node: NodesItem) => node.data.superiorID === id) }
+	getLastNode() { return this.nodes.value[this.nodes.value.length - 1] }
 	/** 设置工具 */
-	setTool(tool: string) {
-		this.tool.value = tool
-	}
-
+	setTool(tool: string) { this.tool.value = tool }
 	/** 设置光标 */
 	setCursor(v: string) { this.cursor.value = v }
 	/** 设置节点是否可拖动 */
@@ -139,15 +125,34 @@ export class StateManager {
 		if (fromIndex === -1) return console.warn(`没有找到指定id:${id}`)
 		this.nodes.value.splice(0, 0, ...this.nodes.value.splice(fromIndex, 1))
 	}
-	/** 设置水平或者垂直翻转 */
-	setNodeFlip(id,direction) {
-		const node = this.getNodeById(id)
-		if (!node) return console.warn(`没有找到指定id:${id}`)
-		if (direction === 'X') {
-			node.data.scale.x = -node.data.scale.x
-		} else if (direction === 'Y') {
-			node.data.scale.y = -node.data.scale.y
+	/** 记录状态 */
+	recordState() {
+		if (this.historyIndex.value < this.historyList.value.length - 1) {
+			this.historyList.value.splice(this.historyIndex.value)
 		}
-		console.log(node,direction)
+		const state = {
+			nodes: JSON.stringify(this.nodes.value)
+		}
+		this.historyList.value.push(state)
+		const size = this.historyList.value.length - this.mxHistory.value
+		if (size > 0) this.historyList.value.splice(0, size)
+		this.historyIndex.value = this.historyList.value.length - 1
 	}
+	/** 撤回状态 */
+	undoState() {
+		var index = this.historyIndex.value - 1
+		const state = this.historyList.value[index]
+		if (!state) return
+		this.historyIndex.value = index
+		this.nodes.value = JSON.parse(state.nodes)
+	}
+	/** 重做状态 */
+	redoState() {
+		var index = this.historyIndex.value + 1
+		const state = this.historyList.value[index]
+		if (!state) return
+		this.historyIndex.value = index
+		this.nodes.value = JSON.parse(state.nodes)
+	}
+
 }