画布

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

@@ -1,5 +1,13 @@
 import { ref, computed } from "vue";
+import { NODE_TYPE } from '../tools/index.d'
 
+export interface NodesItem {
+	id: string
+	type: string
+	class: string
+	position: { x: number, y: number }
+	data: { component: any, type: string }
+}
 export class StateManager {
 	vueFlow: any
 	nodes: any
@@ -18,15 +26,7 @@ export class StateManager {
 	}
 	constructor(options) {
 		this.vueFlow = options.vueFlow
-		this.nodes = ref<any[]>([
-			// {
-			// 	id: '8',
-			// 	type: 'SecondaryNode',
-			// 	class: 'custom-node',
-			// 	position: { x: 0, y: 0 },
-			// 	data: { component: card, type: 'edit-material' }
-			// }
-		]);
+		this.nodes = ref<NodesItem[]>([]);
 		this.nodes_ = computed(() => {
 			return this.nodes.value.map((node, index) => {
 				const obj = {
@@ -34,10 +34,13 @@ export class StateManager {
 				}
 				if (index === 0) {
 					obj.class = 'custom-node start';
-					obj.type = 'InputNode';
+					obj.type = NODE_TYPE.INPUT;
+				} else if (index === this.nodes.value.length - 1) {
+					obj.class = 'custom-node end';
+					obj.type = NODE_TYPE.OUTPUT;
 				} else {
 					obj.class = 'custom-node';
-					obj.type = 'SecondaryNode';
+					obj.type = NODE_TYPE.SECONDARY;
 				}
 				return obj
 			})
@@ -53,7 +56,7 @@ export class StateManager {
 						id: `el-${id}-${target}`,
 						source: id,
 						target: target,
-						type: 'smoothstep'
+						type: 'output'
 					})
 				}
 			})
@@ -62,6 +65,14 @@ export class StateManager {
 
 		this.zoom = ref(1)
 	}
+	/** 添加节点 */
+	addNode(node: NodesItem) {
+		this.nodes.value.push(node)
+	}
+	/** 删除节点 */
+	deleteNode(id: string) {
+		this.nodes.value = this.nodes.value.filter((node: NodesItem) => node.id !== id)
+	}
 	getLastNode() {
 		return this.nodes.value[this.nodes.value.length - 1]
 	}