111

src/components/Canvas/FlowCanvas/components/node-el.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="node" :class="{ center: posCenter, mask: mask }">
+	<div class="node-el" :class="{ center: posCenter, mask: mask }">
 		<Handle
 			v-for="handle in handles[type] || []"
 			:key="handle.id"
@@ -19,8 +19,7 @@
 </template>
 <script lang="ts" setup>
 	import { Handle, Position } from '@vue-flow/core'
-	import { NODE_TYPE } from '../tools/index.d'
-	import { NODE_DATATYPE, NODE_DATATIER } from '../tools/index.d'
+	import { NODE_DATATYPE, NODE_DATATIER, NODE_TYPE } from '../tools/index.d'
 	import { computed, ref, inject } from 'vue'
 	const handles = ref({
 		[NODE_TYPE.INPUT]: [{ id: 'Right', type: 'source', position: Position.Right }],
@@ -54,7 +53,10 @@
 	const isSubord = computed(() => nodes.value.some((v) => v.data.superiorID === props.node.id))
 	const tier = computed(() => Number(props.node?.data?.tier || 0))
 	const isReturned = computed(() => {
-		return props.node.data.type == NODE_DATATYPE.RESULT_IMAGE && props.node.data.data.imageProcessTasks[0].status == 'RETURNED'
+		return (
+			props.node.data.type == NODE_DATATYPE.RESULT_IMAGE &&
+			props.node.data.data.imageProcessTasks[0].status == 'RETURNED'
+		)
 	})
 	const isAdd = computed(
 		() =>
@@ -66,9 +68,11 @@
 	const onAdd = () => {
 		const tier_ = tier.value + 1
 		// 从data中获取originalImage
-		let nodeData = props.node?.data?.data.imageProcessTasks.filter((v) => v.taskId === props.node?.data?.data.selectTaskId)
+		let nodeData = props.node?.data?.data.imageProcessTasks.filter(
+			(v) => v.taskId === props.node?.data?.data.selectTaskId
+		)
 		const originalImage = nodeData[0]?.url
-		if(!originalImage)console.log('originalImage 找不到原始图片')
+		if (!originalImage) console.log('originalImage 找不到原始图片')
 		props.stateManager.nodeManager.createCardsSelect({
 			data: { tier: tier_, superiorID: props.node.id, originalImage }
 		})
@@ -80,7 +84,7 @@
 </script>
 
 <style lang="less" scoped>
-	.node {
+	.node-el {
 		position: relative;
 		--top: 50px;
 		&.mask *,

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) => {
@@ -221,9 +221,9 @@
 		// 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()