添加鼠标中间拖拽事件

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