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;
|
||||
},
|
||||
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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue