111

src/components/Canvas/FlowCanvas/flow-canvas.vue

@@ -17,7 +17,7 @@
 			:style="{ '--custom-cursor': stateManager.cursor.value }"
 		>
 			<template v-for="v in nodeTypes" :key="v" #[`node-${v}`]="node">
-				<node
+				<node-el
 					:type="v"
 					:stateManager="stateManager"
 					:node="node"
@@ -36,12 +36,12 @@
 						:data="node.data.data"
 						v-bind="node.data"
 						@delete-node="deleteNode(node.id)"
-						@copy-node="copyNode($event,node.id)"
+						@copy-node="copyNode($event, node.id)"
 						@update-data="(v) => (node.data.data = v)"
 						@bring-to-font="bringToFont(node.id)"
 						@send-to-back="sendToBack(node.id)"
 					/>
-				</node>
+				</node-el>
 			</template>
 		</VueFlow>
 	</div>
@@ -55,7 +55,7 @@
 		@home="() => fitView({ maxZoom: 1 })"
 	/>
 	<image-preview ref="imagePreviewRef" />
-	<baseModal ref="threeModelRef" >
+	<baseModal ref="threeModelRef">
 		<threeModel />
 	</baseModal>
 </template>
@@ -73,13 +73,13 @@
 	// 工具
 	import threeModel from './components/tools/threeModel/index.vue'
 	// 节点
-	import node from './components/node.vue'
+	import nodeEl from './components/node-el.vue'
 	import resultImage from './components/nodes/result-image.vue'
 	import card from './components/nodes/cards/index.vue'
 	import text from './components/nodes/text.vue'
 
 	const components = {
-		[NODE_COMPONENT.RESULT_IMAGE]: text,
+		[NODE_COMPONENT.RESULT_IMAGE]: resultImage,
 		[NODE_COMPONENT.CARD]: card,
 		[NODE_COMPONENT.TEXT]: text
 	}
@@ -144,7 +144,7 @@
 	const { layout } = useLayout()
 	const index = ref(0)
 	async function layoutGraph(direction) {
-		if(props.config.json > 0)return
+		if (props.config.json > 0) return
 		if (index.value > 0) return
 		index.value++
 		setTimeout(() => {
@@ -173,8 +173,8 @@
 		nodeManager.deleteNode(id)
 	}
 	/** 复制节点 */
-	const copyNode = (clickTaskId,id) => {
-		nodeManager.copyNodeById(clickTaskId,id)
+	const copyNode = (clickTaskId, id) => {
+		nodeManager.copyNodeById(clickTaskId, id)
 	}
 	/** 节点zIndex设置最大 */
 	const bringToFont = (id) => {
@@ -220,10 +220,10 @@
 	onMounted(async () => {
 		// window['vueFlow'] = vueFlow
 		// window['nodes'] = nodes
-		
-		if(props.config.json.length > 0){
+
+		if (props.config.json.length > 0) {
 			importFlow(props.config.json)
-		}else{
+		} else {
 			const timestamp = Date.now()
 			nodeManager.createResultNode({
 				data: {
@@ -231,20 +231,19 @@
 					isHeader: false,
 					data: {
 						selectable: false,
-						imageProcessTasks:[
+						imageProcessTasks: [
 							{
 								id: props.config.imgId,
 								url: props.config.url,
-								status:'RETURNED',
-								taskId: timestamp + '',
-							},
+								status: 'RETURNED',
+								taskId: timestamp + ''
+							}
 						],
-						selectTaskId: timestamp + '',
+						selectTaskId: timestamp + ''
 					}
 				}
 			})
 		}
-		
 	})
 	onBeforeMount(() => {
 		stateManager.dispose()