画布节点创建删除

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

@@ -1,12 +1,16 @@
 import { createId } from '../../tools/tools'
+import card from '../components/cards/index.vue'
+import resultImage from '../components/result/result-image.vue'
+import { NODE_DATATYPE } from '../tools/index.d'
 interface NodeOptions {
 	id?: string
-	type: "InputNode" | "SecondaryNode"
-	class?: string
 	position?: { x: number, y: number }
-	component: any
+	positionX?: number
+	positionY?: number
+	component?: any
 	data?: object
-}
+}// 不可传入type class （内部使用）
+
 export class NodeManager {
 	stateManager: any
 	vueFlow: any
@@ -14,23 +18,60 @@ export class NodeManager {
 		this.stateManager = options.stateManager;
 		this.vueFlow = options.vueFlow
 	}
-	nodes: [
 
-	]
+	/** 删除节点 */
+	deleteNode(id: string) {
+		this.stateManager.nodes.value = this.stateManager.nodes.value.filter((node: any) => node.id !== id)
+	}
+
+	/** 创建节点 */
 	createNode(options: NodeOptions) {
+		const lastNode = this.stateManager.flowManager.getLastNode();
 		const id = options.id || createId()
-		const type = options.type || 'InputNode'
-		const class_ = options.class || 'custom-node'
-		const position = options.position || { x: 0, y: 0 }
+		const positionX = options.positionX || 0
+		const positionY = options.positionY || 0
+		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 || {}
 		data['component'] = options.component
-		this.stateManager.nodes.value.push({
+		const options_ = {
 			id,
-			type,
-			class: class_,
 			position,
 			data
-		})
-		console.log(this.stateManager.nodes.value)
+		}
+		this.stateManager.nodes.value.push(options_)
+		return options_;
+	}
+	/** 创建结果节点 */
+	createResultNode(options?: NodeOptions) {
+		const options_ = {
+			component: resultImage,
+			data: {
+				type: NODE_DATATYPE.RESULT_IMAGE,
+			},
+			...(options ? options : {}),
+		}
+		return this.createNode(options_)
+	}
+	/** 创建卡片选择节点 */
+	createCardsSelect(options?: NodeOptions) {
+		const options_ = {
+			component: card,
+			positionY: 50,
+			data: {
+				type: NODE_DATATYPE.CARDS_SELECT,
+			},
+			...(options ? options : {}),
+		}
+		return this.createNode(options_)
+	}
+	/** 创建卡片节点 */
+	createCardNode(options?: NodeOptions) {
+		const options_ = {
+			component: card,
+			...(options ? options : {}),
+		}
+		return this.createNode(options_)
 	}
 }