添加鼠标中间拖拽事件

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) {
+			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) {