admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 18:12:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* ⚡ Implemented canvas move on space+drag
* ⚡ Added middle mouse key canvas move
* ⚡ Handling cursor changes when moving canvas with middle mouse button
* 💄 Consolidate naming
This commit is contained in:
Milorad FIlipović
2023-03-17 17:38:54 +01:00
committed by GitHub
parent 6242cac53b
commit 19dded18c9
3 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/editor-ui/src/views/NodeView.vue
View File

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