Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/FiDA_Front

src/components/Canvas/FlowCanvas/components/nodes/cards/index.vue

@@ -139,11 +139,10 @@
 		// if (!subordNode) {
 		taskList.forEach((item,index) => {
 			nodeManager.createResultNode({
-				positionY: (index + subordNodes.length) * (50 + 250),
 				data: {
 					superiorID: attrs.node.id,
 					superiorNodeType: attrs.node?.data?.type,
-					createIndexPosition: index,
+					createIndexPosition: index + subordNodes.length,
 					tier: currentComponent.value.tier,
 					isActive: index == 0 && subordNodes.length == 0,
 					data: {

src/components/Canvas/FlowCanvas/components/nodes/result-image.vue

@@ -91,6 +91,7 @@
 	const clickTaskId = ref('')
 	const generateManager = inject('generateManager') as any
 	const stateManager = inject('stateManager') as any
+	const eventManager = inject('eventManager') as any
 	const clickimageProcessTaskItem = (taskId: string) => {
 		if(clickTaskId.value == taskId){
 			showMenu.value = !showMenu.value
@@ -196,8 +197,33 @@
 		showMenu.value = false
 		clickTaskId.value = ''
 	}
+
+	const depthCanvasClose = ()=>{
+		eventManager.registerEvents()
+	}
+	const depthCanvasWorkbench = (options)=>{
+		data.imageProcessTasks.forEach((item) => {
+			if(item.taskId == options.taskId){
+				item.url = options.url
+			}
+		})
+	}
+
 	const onEdit = (item: any) => {
-		myEvent.emit('openDepthCanvas', { url:item.url,id: item.taskId })
+		const data = { 
+			url:item.url,
+			id: item.taskId,
+			onWorkbench:(options)=>{
+				let workbenchData = {
+					...item,
+					...options,
+				}
+				depthCanvasWorkbench(workbenchData)
+			},
+			onClose:depthCanvasClose 
+		}
+		eventManager.removeEvents()
+		myEvent.emit('openDepthCanvas', data)
 	}
 	document.addEventListener('mousedown', hideMenu)
 	onBeforeUnmount(() => {

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

@@ -12,6 +12,8 @@
 			@node-drag-stop="(e) => eventManager.handleNodeDragStop(e)"
 			@viewport-change="(e) => eventManager.handleViewportChange(e)"
 			@pane-click="(e) => eventManager.handleClick(e)"
+			@mousedown="(e) => eventManager.mousedown(e)"
+			@mouseup="(e) => eventManager.mouseup(e)"
 			@node-click="(e) => clickNode(e)"
 			:class="{ 'custom-cursor': !!stateManager.cursor.value }"
 			:style="{ '--custom-cursor': stateManager.cursor.value }"

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

@@ -3,11 +3,24 @@ export class EventManager {
 	stateManager: any
 	vueFlow: any
 	zoom: any
+	originalPosition: any
+	vueFlowPosition: any
 	constructor(options) {
 		this.stateManager = options.stateManager;
 		this.vueFlow = options.vueFlow
 		this.zoom = this.stateManager.zoom
 		this._handleKeyDown = this.handleKeyDown.bind(this)
+		this.mousemove_ = this.mousemove.bind(this)
+		this.originalPosition = {
+			x: 0,
+			y: 0,
+			zoom: 1,
+		}
+		this.vueFlowPosition = {
+			x: 0,
+			y: 0,
+			zoom: 1,
+		}
 	}
 	/** 处理视口变化 */
 	handleViewportChange(e: any) {
@@ -40,6 +53,35 @@ export class EventManager {
 			this.stateManager.toolManager.setTool(TOOLS.SELECT)
 		}
 	}
+	mousemove_:any
+	/** 处理鼠标中间点击 */
+	mousedown(event:any) {
+		if (event.button === 1 && !event.target.classList.contains('dragging')) {
+			this.vueFlowPosition = this.vueFlow.value.getTransform()
+			event.target.classList.add('dragging')
+			this.originalPosition = {
+				x: event.clientX,
+				y: event.clientY,
+				zoom: this.vueFlow.value.getTransform().zoom,
+			}
+			document.addEventListener('mousemove', this.mousemove_)
+		}
+	}
+	/** 处理鼠标移动 */
+	mousemove(event:any) {
+		const deltaX = event.clientX - this.originalPosition.x
+		const deltaY = event.clientY - this.originalPosition.y
+		const newX = this.vueFlowPosition.x + deltaX
+		const newY = this.vueFlowPosition.y + deltaY
+		this.vueFlow.value.setTransform({x: newX, y: newY, zoom: this.vueFlowPosition.zoom})
+	}
+	/** 处理鼠标中间抬起 */
+	mouseup(event:any) {
+		if (event.button === 1) {
+			event.target.classList.remove('dragging')
+			document.removeEventListener('mousemove', this.mousemove_)
+		}
+	}
 
 	/** 处理复制 */
 	handleCopy(event: any, activeNodeID: string) {

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

@@ -46,16 +46,28 @@ export class NodeManager {
 	createNode(options: NodeOptions) {
 		const superiorID = options?.data?.superiorID
 		const snode = superiorID ? this.stateManager.flowManager.getNodeById(superiorID) : this.stateManager.flowManager.getLastNode();
+		//获取上级节点所生成的最后一个node，设置位置为最后一个节点的xy 加上 节点间距
+		const superiorGenerateNodes = this.stateManager.getSubordNodes(superiorID)
+		const endGenerateNode = superiorGenerateNodes.reduce((max, current) => {
+			return current.data.createIndexPosition > max.data.createIndexPosition ? current : max
+		}, superiorGenerateNodes[0])
 		const id = options.id || createId()
 		const positionX = options.positionX || 0
 		const positionY = options.positionY || 0
 		const position = options.position ||
-			(!snode ?
+			(
+				endGenerateNode?
+				{
+					x: endGenerateNode.position.x + positionX,
+					y: endGenerateNode.position.y + positionY + this.ranksep + 200
+				} :
+				!snode ?
 				{ x: positionX, y: positionY } :
 				{
 					x: snode.position.x + snode.dimensions.width + this.nodesep + positionX,
 					y: snode.position.y + positionY
-				})
+				}
+			)
 		const data = options?.data || {}
 		data['component'] = options.component
 		const options_ = {