diff --git a/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue b/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue index c74fbe1..6da82cf 100644 --- a/src/components/Canvas/FlowCanvas/components/nodes/result-image.vue +++ b/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(() => { diff --git a/src/components/Canvas/FlowCanvas/flow-canvas.vue b/src/components/Canvas/FlowCanvas/flow-canvas.vue index 14f5ed0..2589073 100644 --- a/src/components/Canvas/FlowCanvas/flow-canvas.vue +++ b/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 }" diff --git a/src/components/Canvas/FlowCanvas/manager/EventManager.ts b/src/components/Canvas/FlowCanvas/manager/EventManager.ts index f38c781..d86a38e 100644 --- a/src/components/Canvas/FlowCanvas/manager/EventManager.ts +++ b/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) {