mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-24 20:24:05 -08:00
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
This commit is contained in:
parent
6242cac53b
commit
19dded18c9
|
@ -141,8 +141,8 @@ export const mouseSelect = mixins(deviceSupportHelpers).extend({
|
||||||
|
|
||||||
return returnNodes;
|
return returnNodes;
|
||||||
},
|
},
|
||||||
mouseDownMouseSelect(e: MouseEvent) {
|
mouseDownMouseSelect(e: MouseEvent, moveButtonPressed: boolean) {
|
||||||
if (this.isCtrlKeyPressed(e) === true) {
|
if (this.isCtrlKeyPressed(e) === true || moveButtonPressed) {
|
||||||
// We only care about it when the ctrl key is not pressed at the same time.
|
// We only care about it when the ctrl key is not pressed at the same time.
|
||||||
// So we exit when it is pressed.
|
// So we exit when it is pressed.
|
||||||
return;
|
return;
|
||||||
|
|
|
@ -27,8 +27,8 @@ export const moveNodeWorkflow = mixins(deviceSupportHelpers).extend({
|
||||||
this.moveLastPosition[0] = x;
|
this.moveLastPosition[0] = x;
|
||||||
this.moveLastPosition[1] = y;
|
this.moveLastPosition[1] = y;
|
||||||
},
|
},
|
||||||
mouseDownMoveWorkflow(e: MouseEvent) {
|
mouseDownMoveWorkflow(e: MouseEvent, moveButtonPressed: boolean) {
|
||||||
if (this.isCtrlKeyPressed(e) === false) {
|
if (this.isCtrlKeyPressed(e) === false && !moveButtonPressed) {
|
||||||
// We only care about it when the ctrl key is pressed at the same time.
|
// We only care about it when the ctrl key is pressed at the same time.
|
||||||
// So we exit when it is not pressed.
|
// So we exit when it is not pressed.
|
||||||
return;
|
return;
|
||||||
|
@ -39,7 +39,10 @@ export const moveNodeWorkflow = mixins(deviceSupportHelpers).extend({
|
||||||
return;
|
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);
|
const [x, y] = getMousePosition(e);
|
||||||
|
|
||||||
|
@ -73,6 +76,11 @@ export const moveNodeWorkflow = mixins(deviceSupportHelpers).extend({
|
||||||
return;
|
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) {
|
if (e.buttons === 0) {
|
||||||
// Mouse button is not pressed anymore so stop selection mode
|
// Mouse button is not pressed anymore so stop selection mode
|
||||||
// Happens normally when mouse leave the view pressed and then
|
// Happens normally when mouse leave the view pressed and then
|
||||||
|
|
|
@ -537,14 +537,14 @@ export default mixins(
|
||||||
},
|
},
|
||||||
workflowClasses() {
|
workflowClasses() {
|
||||||
const returnClasses = [];
|
const returnClasses = [];
|
||||||
if (this.ctrlKeyPressed) {
|
if (this.ctrlKeyPressed || this.moveCanvasKeyPressed) {
|
||||||
if (this.uiStore.nodeViewMoveInProgress === true) {
|
if (this.uiStore.nodeViewMoveInProgress === true) {
|
||||||
returnClasses.push('move-in-process');
|
returnClasses.push('move-in-process');
|
||||||
} else {
|
} else {
|
||||||
returnClasses.push('move-active');
|
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
|
// Makes sure that nothing gets selected while select or move is active
|
||||||
returnClasses.push('do-not-select');
|
returnClasses.push('do-not-select');
|
||||||
}
|
}
|
||||||
|
@ -595,6 +595,7 @@ export default mixins(
|
||||||
lastSelectedConnection: null as null | Connection,
|
lastSelectedConnection: null as null | Connection,
|
||||||
lastClickPosition: [450, 450] as XYPosition,
|
lastClickPosition: [450, 450] as XYPosition,
|
||||||
ctrlKeyPressed: false,
|
ctrlKeyPressed: false,
|
||||||
|
moveCanvasKeyPressed: false,
|
||||||
stopExecutionInProgress: false,
|
stopExecutionInProgress: false,
|
||||||
blankRedirect: false,
|
blankRedirect: false,
|
||||||
credentialsUpdated: false,
|
credentialsUpdated: false,
|
||||||
|
@ -971,14 +972,20 @@ export default mixins(
|
||||||
mouseDown(e: MouseEvent | TouchEvent) {
|
mouseDown(e: MouseEvent | TouchEvent) {
|
||||||
// Save the location of the mouse click
|
// Save the location of the mouse click
|
||||||
this.lastClickPosition = this.getMousePositionWithinNodeView(e);
|
this.lastClickPosition = this.getMousePositionWithinNodeView(e);
|
||||||
|
if (e instanceof MouseEvent && e.button === 1) {
|
||||||
|
this.moveCanvasKeyPressed = true;
|
||||||
|
}
|
||||||
|
|
||||||
this.mouseDownMouseSelect(e as MouseEvent);
|
this.mouseDownMouseSelect(e as MouseEvent, this.moveCanvasKeyPressed);
|
||||||
this.mouseDownMoveWorkflow(e as MouseEvent);
|
this.mouseDownMoveWorkflow(e as MouseEvent, this.moveCanvasKeyPressed);
|
||||||
|
|
||||||
// Hide the node-creator
|
// Hide the node-creator
|
||||||
this.createNodeActive = false;
|
this.createNodeActive = false;
|
||||||
},
|
},
|
||||||
mouseUp(e: MouseEvent) {
|
mouseUp(e: MouseEvent) {
|
||||||
|
if (e.button === 1) {
|
||||||
|
this.moveCanvasKeyPressed = false;
|
||||||
|
}
|
||||||
this.mouseUpMouseSelect(e);
|
this.mouseUpMouseSelect(e);
|
||||||
this.mouseUpMoveWorkflow(e);
|
this.mouseUpMoveWorkflow(e);
|
||||||
},
|
},
|
||||||
|
@ -986,6 +993,9 @@ export default mixins(
|
||||||
if (e.key === this.controlKeyCode) {
|
if (e.key === this.controlKeyCode) {
|
||||||
this.ctrlKeyPressed = false;
|
this.ctrlKeyPressed = false;
|
||||||
}
|
}
|
||||||
|
if (e.key === ' ') {
|
||||||
|
this.moveCanvasKeyPressed = false;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
async keyDown(e: KeyboardEvent) {
|
async keyDown(e: KeyboardEvent) {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
@ -1037,6 +1047,8 @@ export default mixins(
|
||||||
});
|
});
|
||||||
} else if (e.key === this.controlKeyCode) {
|
} else if (e.key === this.controlKeyCode) {
|
||||||
this.ctrlKeyPressed = true;
|
this.ctrlKeyPressed = true;
|
||||||
|
} else if (e.key === ' ') {
|
||||||
|
this.moveCanvasKeyPressed = true;
|
||||||
} else if (e.key === 'F2' && !this.isReadOnly) {
|
} else if (e.key === 'F2' && !this.isReadOnly) {
|
||||||
const lastSelectedNode = this.lastSelectedNode;
|
const lastSelectedNode = this.lastSelectedNode;
|
||||||
if (lastSelectedNode !== null && lastSelectedNode.type !== STICKY_NODE_TYPE) {
|
if (lastSelectedNode !== null && lastSelectedNode.type !== STICKY_NODE_TYPE) {
|
||||||
|
|
Loading…
Reference in a new issue