mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-24 04:04:06 -08:00
Code Issues Actions 2 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/editor-ui/src/mixins/mouseSelect.ts
View file

@ -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;

14
packages/editor-ui/src/mixins/moveNodeWorkflow.ts
View file

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

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