画布

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

@@ -21,7 +21,11 @@ export class NodeManager {
 
 	/** 删除节点 */
 	deleteNode(id: string) {
-		this.stateManager.nodes.value = this.stateManager.nodes.value.filter((node: any) => node.id !== id)
+		this.stateManager.deleteNode(id)
+	}
+	/** 添加节点 */
+	addNode(node: any) {
+		this.stateManager.addNode(node)
 	}
 
 	/** 创建节点 */
@@ -33,46 +37,47 @@ export class NodeManager {
 		const position = options.position ||
 			!lastNode ? { x: positionX, y: positionY } :
 			{ x: lastNode.position.x + lastNode.dimensions.width + 50 + positionX, y: lastNode.position.y + positionY }
-		const data = { ...(options?.data || {}) }
+		const data = options?.data || {}
 		data['component'] = options.component
 		const options_ = {
 			id,
 			position,
 			data
 		}
-		this.stateManager.nodes.value.push(options_)
+		this.addNode(options_)
 		return options_;
 	}
 	/** 创建结果节点 */
 	createResultNode(options?: NodeOptions) {
 		const options_ = {
+			...(options ? options : {}),
 			component: resultImage,
 			data: {
 				type: NODE_DATATYPE.RESULT_IMAGE,
+				isHeader: true,
 				...(options?.data || {}),
 			},
-			...(options ? options : {}),
 		}
 		return this.createNode(options_)
 	}
 	/** 创建卡片选择节点 */
 	createCardsSelect(options?: NodeOptions) {
 		const options_ = {
+			...(options ? options : {}),
 			component: card,
 			positionY: 50,
 			data: {
 				type: NODE_DATATYPE.CARDS_SELECT,
 				...(options?.data || {}),
 			},
-			...(options ? options : {}),
 		}
 		return this.createNode(options_)
 	}
 	/** 创建卡片节点 */
 	createCardNode(options?: NodeOptions) {
 		const options_ = {
-			component: card,
 			...(options ? options : {}),
+			component: card,
 		}
 		return this.createNode(options_)
 	}

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]
 	}