feat(editor): Move canvas by holding Space or Middle mouse button (#5719

) * ⚡ Implemented canvas move on space+drag * ⚡ Added middle mouse key canvas move * ⚡ Handling cursor changes when moving canvas with middle mouse button * 💄 Consolidate naming
n8n-io · Mar 17, 2023 · 19dded1 · 19dded1
1 parent 6242cac
commit 19dded1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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,21 +972,30 @@ 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);
 		},
 		keyUp(e: KeyboardEvent) {
 			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) {