diff --git a/packages/editor-ui/src/mixins/mouseSelect.ts b/packages/editor-ui/src/mixins/mouseSelect.ts index ef062c699a..c412a91b9f 100644 --- a/packages/editor-ui/src/mixins/mouseSelect.ts +++ b/packages/editor-ui/src/mixins/mouseSelect.ts @@ -141,8 +141,8 @@ export const mouseSelect = mixins(deviceSupportHelpers).extend({ return returnNodes; }, - mouseDownMouseSelect(e: MouseEvent) { - if (this.isCtrlKeyPressed(e) === true) { + mouseDownMouseSelect(e: MouseEvent, moveButtonPressed: boolean) { + if (this.isCtrlKeyPressed(e) === true || moveButtonPressed) { // We only care about it when the ctrl key is not pressed at the same time. // So we exit when it is pressed. return; diff --git a/packages/editor-ui/src/mixins/moveNodeWorkflow.ts b/packages/editor-ui/src/mixins/moveNodeWorkflow.ts index 81aa6ce414..c72264767c 100644 --- a/packages/editor-ui/src/mixins/moveNodeWorkflow.ts +++ b/packages/editor-ui/src/mixins/moveNodeWorkflow.ts @@ -27,8 +27,8 @@ export const moveNodeWorkflow = mixins(deviceSupportHelpers).extend({ this.moveLastPosition[0] = x; this.moveLastPosition[1] = y; }, - mouseDownMoveWorkflow(e: MouseEvent) { - if (this.isCtrlKeyPressed(e) === false) { + mouseDownMoveWorkflow(e: MouseEvent, moveButtonPressed: boolean) { + if (this.isCtrlKeyPressed(e) === false && !moveButtonPressed) { // We only care about it when the ctrl key is pressed at the same time. // So we exit when it is not pressed. return; @@ -39,7 +39,10 @@ export const moveNodeWorkflow = mixins(deviceSupportHelpers).extend({ return; } - this.uiStore.nodeViewMoveInProgress = true; + // Don't indicate move start just yet if middle button is pressed + if (e.button !== 1) { + this.uiStore.nodeViewMoveInProgress = true; + } const [x, y] = getMousePosition(e); @@ -73,6 +76,11 @@ export const moveNodeWorkflow = mixins(deviceSupportHelpers).extend({ return; } + // Signal that moving canvas is active if middle button is pressed and mouse is moved + if (e.button === 1) { + this.uiStore.nodeViewMoveInProgress = true; + } + if (e.buttons === 0) { // Mouse button is not pressed anymore so stop selection mode // Happens normally when mouse leave the view pressed and then diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue index 86461bc09b..89bc959a13 100644 --- a/packages/editor-ui/src/views/NodeView.vue +++ b/packages/editor-ui/src/views/NodeView.vue @@ -537,14 +537,14 @@ export default mixins( }, workflowClasses() { const returnClasses = []; - if (this.ctrlKeyPressed) { + if (this.ctrlKeyPressed || this.moveCanvasKeyPressed) { if (this.uiStore.nodeViewMoveInProgress === true) { returnClasses.push('move-in-process'); } else { returnClasses.push('move-active'); } } - if (this.selectActive || this.ctrlKeyPressed) { + if (this.selectActive || this.ctrlKeyPressed || this.moveCanvasKeyPressed) { // Makes sure that nothing gets selected while select or move is active returnClasses.push('do-not-select'); } @@ -595,6 +595,7 @@ export default mixins( lastSelectedConnection: null as null | Connection, lastClickPosition: [450, 450] as XYPosition, ctrlKeyPressed: false, + moveCanvasKeyPressed: false, stopExecutionInProgress: false, blankRedirect: false, credentialsUpdated: false, @@ -971,14 +972,20 @@ export default mixins( mouseDown(e: MouseEvent | TouchEvent) { // Save the location of the mouse click this.lastClickPosition = this.getMousePositionWithinNodeView(e); + if (e instanceof MouseEvent && e.button === 1) { + this.moveCanvasKeyPressed = true; + } - this.mouseDownMouseSelect(e as MouseEvent); - this.mouseDownMoveWorkflow(e as MouseEvent); + this.mouseDownMouseSelect(e as MouseEvent, this.moveCanvasKeyPressed); + this.mouseDownMoveWorkflow(e as MouseEvent, this.moveCanvasKeyPressed); // Hide the node-creator this.createNodeActive = false; }, mouseUp(e: MouseEvent) { + if (e.button === 1) { + this.moveCanvasKeyPressed = false; + } this.mouseUpMouseSelect(e); this.mouseUpMoveWorkflow(e); }, @@ -986,6 +993,9 @@ export default mixins( if (e.key === this.controlKeyCode) { this.ctrlKeyPressed = false; } + if (e.key === ' ') { + this.moveCanvasKeyPressed = false; + } }, async keyDown(e: KeyboardEvent) { // @ts-ignore @@ -1037,6 +1047,8 @@ export default mixins( }); } else if (e.key === this.controlKeyCode) { this.ctrlKeyPressed = true; + } else if (e.key === ' ') { + this.moveCanvasKeyPressed = true; } else if (e.key === 'F2' && !this.isReadOnly) { const lastSelectedNode = this.lastSelectedNode; if (lastSelectedNode !== null && lastSelectedNode.type !== STICKY_NODE_TYPE) {