1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00

feat(editor): Update panning and selection keybindings on new canvas ()

This commit is contained in:
Alex Grozav 2024-11-04 14:36:54 +02:00 committed by GitHub
parent 5f3deea60f
commit 5e2e205394
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 60 additions and 123 deletions
packages/editor-ui
pnpm-lock.yaml

View file

@ -39,9 +39,9 @@
"@n8n/codemirror-lang-sql": "^1.0.2",
"@n8n/permissions": "workspace:*",
"@sentry/vue": "catalog:frontend",
"@vue-flow/background": "^1.3.0",
"@vue-flow/background": "^1.3.1",
"@vue-flow/controls": "^1.1.2",
"@vue-flow/core": "^1.41.2",
"@vue-flow/core": "^1.41.4",
"@vue-flow/minimap": "^1.5.0",
"@vue-flow/node-resizer": "^1.4.0",
"@vueuse/components": "^10.11.0",

View file

@ -220,20 +220,4 @@ describe('Canvas', () => {
expect(container.querySelector('#diagonalHatch')).toBeInTheDocument();
});
});
describe('pane', () => {
describe('onPaneMouseDown', () => {
it('should enable panning when middle mouse button is pressed', async () => {
const { getByTestId } = renderComponent();
const canvas = getByTestId('canvas');
const pane = canvas.querySelector('.vue-flow__pane');
if (!pane) throw new Error('VueFlow pane not in the document');
await fireEvent.mouseDown(canvas, { button: 1, view: window });
expect(canvas).toHaveClass('draggable');
});
});
});
});

View file

@ -18,19 +18,9 @@ import { Background } from '@vue-flow/background';
import { MiniMap } from '@vue-flow/minimap';
import Node from './elements/nodes/CanvasNode.vue';
import Edge from './elements/edges/CanvasEdge.vue';
import {
computed,
nextTick,
onMounted,
onUnmounted,
provide,
ref,
toRef,
useCssModule,
watch,
} from 'vue';
import { computed, onMounted, onUnmounted, provide, ref, toRef, useCssModule, watch } from 'vue';
import type { EventBus } from 'n8n-design-system';
import { createEventBus } from 'n8n-design-system';
import { createEventBus, useDeviceSupport } from 'n8n-design-system';
import { useContextMenu, type ContextMenuAction } from '@/composables/useContextMenu';
import { useKeybindings } from '@/composables/useKeybindings';
import ContextMenu from '@/components/ContextMenu/ContextMenu.vue';
@ -42,7 +32,6 @@ import { CanvasKey } from '@/constants';
import { onKeyDown, onKeyUp, useDebounceFn } from '@vueuse/core';
import CanvasArrowHeadMarker from './elements/edges/CanvasArrowHeadMarker.vue';
import CanvasBackgroundStripedPattern from './elements/CanvasBackgroundStripedPattern.vue';
import { isMiddleMouseButton } from '@/utils/eventUtils';
const $style = useCssModule();
@ -106,8 +95,9 @@ const props = withDefaults(
},
);
const { controlKeyCode } = useDeviceSupport();
const {
vueFlowRef,
getSelectedNodes: selectedNodes,
addSelectedNodes,
removeSelectedNodes,
@ -130,7 +120,6 @@ const isPaneReady = ref(false);
const classes = computed(() => ({
[$style.canvas]: true,
[$style.ready]: isPaneReady.value,
[$style.draggable]: isPanningEnabled.value,
}));
/**
@ -143,16 +132,16 @@ const disableKeyBindings = computed(() => !props.keyBindings);
* @see https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#whitespace_keys
*/
const panningKeyCode = ' ';
const isPanningEnabled = ref(false);
const panningKeyCode = ref<string[]>([' ', controlKeyCode]);
const panningMouseButton = ref<number[]>([1]);
const selectionKeyCode = ref<true | null>(true);
onKeyDown(panningKeyCode, () => {
setPanningEnabled(true);
onKeyDown(panningKeyCode.value, () => {
selectionKeyCode.value = null;
});
onKeyUp(panningKeyCode, () => {
setPanningEnabled(false);
onKeyUp(panningKeyCode.value, () => {
selectionKeyCode.value = true;
});
const keyMap = computed(() => ({
@ -184,29 +173,6 @@ const keyMap = computed(() => ({
useKeybindings(keyMap, { disabled: disableKeyBindings });
function setPanningEnabled(value: boolean) {
if (value) {
isPanningEnabled.value = true;
selectionKeyCode.value = null;
} else {
isPanningEnabled.value = false;
selectionKeyCode.value = true;
}
}
/**
* When the window is focused, the selection key code is lost.
* We trigger a value refresh to ensure that the selection key code is set correctly again.
*
* @issue https://linear.app/n8n/issue/N8N-7843/selection-keycode-gets-unset-when-changing-tabs
*/
function resetSelectionKeyCode() {
selectionKeyCode.value = null;
void nextTick(() => {
selectionKeyCode.value = true;
});
}
/**
* Nodes
*/
@ -392,28 +358,12 @@ function setReadonly(value: boolean) {
elementsSelectable.value = true;
}
function onPaneMouseDown(event: MouseEvent) {
if (isMiddleMouseButton(event)) {
setPanningEnabled(true);
// Re-emit the event to start panning after setting the panning state to true
// This workaround is necessary because the Vue Flow library does not provide a way to
// start panning programmatically
void nextTick(() =>
vueFlowRef.value
?.querySelector('.vue-flow__pane')
?.dispatchEvent(new MouseEvent('mousedown', event)),
);
}
}
function onPaneMoveStart() {
isPaneMoving.value = true;
}
function onPaneMoveEnd() {
isPaneMoving.value = false;
setPanningEnabled(false);
}
/**
@ -522,13 +472,11 @@ function onMinimapMouseLeave() {
onMounted(() => {
props.eventBus.on('fitView', onFitView);
props.eventBus.on('nodes:select', onSelectNodes);
window.addEventListener('focus', resetSelectionKeyCode);
});
onUnmounted(() => {
props.eventBus.off('fitView', onFitView);
props.eventBus.off('nodes:select', onSelectNodes);
window.removeEventListener('focus', resetSelectionKeyCode);
});
onPaneReady(async () => {
@ -560,6 +508,7 @@ provide(CanvasKey, {
:apply-changes="false"
:connection-line-options="{ markerEnd: MarkerType.ArrowClosed }"
:connection-radius="60"
:pan-on-drag="panningMouseButton"
pan-on-scroll
snap-to-grid
:snap-grid="[GRID_SIZE, GRID_SIZE]"
@ -578,7 +527,6 @@ provide(CanvasKey, {
@nodes-change="onNodesChange"
@move-start="onPaneMoveStart"
@move-end="onPaneMoveEnd"
@mousedown="onPaneMouseDown"
>
<template #node-canvas-node="canvasNodeProps">
<Node
@ -663,16 +611,16 @@ provide(CanvasKey, {
opacity: 1;
}
&.draggable :global(.vue-flow__pane) {
cursor: grab;
}
:global(.vue-flow__pane) {
cursor: default;
}
cursor: grab;
:global(.vue-flow__pane.dragging) {
cursor: grabbing;
&:global(.selection) {
cursor: default;
}
&:global(.dragging) {
cursor: grabbing;
}
}
}
</style>

View file

@ -690,7 +690,7 @@ importers:
version: 8.57.0
eslint-config-airbnb-typescript:
specifier: ^18.0.0
version: 18.0.0(@typescript-eslint/eslint-plugin@7.2.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2))(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0))(eslint@8.57.0)
version: 18.0.0(@typescript-eslint/eslint-plugin@7.2.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2))(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-plugin-import@2.29.1)(eslint@8.57.0)
eslint-config-prettier:
specifier: ^9.1.0
version: 9.1.0(eslint@8.57.0)
@ -1376,20 +1376,20 @@ importers:
specifier: catalog:frontend
version: 8.33.1(vue@3.5.11(typescript@5.6.2))
'@vue-flow/background':
specifier: ^1.3.0
version: 1.3.0(@vue-flow/core@1.41.2(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))
specifier: ^1.3.1
version: 1.3.1(@vue-flow/core@1.41.4(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))
'@vue-flow/controls':
specifier: ^1.1.2
version: 1.1.2(@vue-flow/core@1.41.2(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))
version: 1.1.2(@vue-flow/core@1.41.4(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))
'@vue-flow/core':
specifier: ^1.41.2
version: 1.41.2(vue@3.5.11(typescript@5.6.2))
specifier: ^1.41.4
version: 1.41.4(vue@3.5.11(typescript@5.6.2))
'@vue-flow/minimap':
specifier: ^1.5.0
version: 1.5.0(@vue-flow/core@1.41.2(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))
version: 1.5.0(@vue-flow/core@1.41.4(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))
'@vue-flow/node-resizer':
specifier: ^1.4.0
version: 1.4.0(@vue-flow/core@1.41.2(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))
version: 1.4.0(@vue-flow/core@1.41.4(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))
'@vueuse/components':
specifier: ^10.11.0
version: 10.11.0(vue@3.5.11(typescript@5.6.2))
@ -5333,8 +5333,8 @@ packages:
'@volar/typescript@2.4.6':
resolution: {integrity: sha512-NMIrA7y5OOqddL9VtngPWYmdQU03htNKFtAYidbYfWA0TOhyGVd9tfcP4TsLWQ+RBWDZCbBqsr8xzU0ZOxYTCQ==}
'@vue-flow/background@1.3.0':
resolution: {integrity: sha512-fu/8s9wzSOQIitnSTI10XT3bzTtagh4h8EF2SWwtlDklOZjAaKy75lqv4htHa3wigy/r4LGCOGwLw3Pk88/AxA==}
'@vue-flow/background@1.3.1':
resolution: {integrity: sha512-8q0lTbvA3A9s0bDnpUIHMZj/HUTdMa3ChGSAw7EBaTKy7qJB21EnKbTIgC2lYweprzxk94vop4YmGfUO1jiqqQ==}
peerDependencies:
'@vue-flow/core': ^1.23.0
vue: ^3.3.0
@ -5345,8 +5345,8 @@ packages:
'@vue-flow/core': ^1.23.0
vue: ^3.3.0
'@vue-flow/core@1.41.2':
resolution: {integrity: sha512-nRGMXPH4oOyC5I1W8HLqGarBFYZZMNhuHlLaai7+LkDmzvGark+c/ucnJfwYaI2ho/CzQQ8q1J3jMcr+Np2kFA==}
'@vue-flow/core@1.41.4':
resolution: {integrity: sha512-OEGI+56DSJ/00fm9SjWgGXtgKJO3Un2/tOEKlCTvL13567VBtdtvNci7f9+6upaR9Eu3oFgbEsF1NiyoQjvB9A==}
peerDependencies:
vue: ^3.3.0
@ -12117,6 +12117,9 @@ packages:
typescript:
optional: true
vue-component-type-helpers@2.1.10:
resolution: {integrity: sha512-lfgdSLQKrUmADiSV6PbBvYgQ33KF3Ztv6gP85MfGaGaSGMTXORVaHT1EHfsqCgzRNBstPKYDmvAV9Do5CmJ07A==}
vue-component-type-helpers@2.1.6:
resolution: {integrity: sha512-ng11B8B/ZADUMMOsRbqv0arc442q7lifSubD0v8oDXIFoMg/mXwAPUunrroIDkY+mcD0dHKccdaznSVp8EoX3w==}
@ -16259,7 +16262,7 @@ snapshots:
ts-dedent: 2.2.0
type-fest: 2.19.0
vue: 3.5.11(typescript@5.6.2)
vue-component-type-helpers: 2.1.8
vue-component-type-helpers: 2.1.10
'@supabase/auth-js@2.65.0':
dependencies:
@ -17082,17 +17085,17 @@ snapshots:
path-browserify: 1.0.1
vscode-uri: 3.0.8
'@vue-flow/background@1.3.0(@vue-flow/core@1.41.2(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))':
'@vue-flow/background@1.3.1(@vue-flow/core@1.41.4(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))':
dependencies:
'@vue-flow/core': 1.41.2(vue@3.5.11(typescript@5.6.2))
'@vue-flow/core': 1.41.4(vue@3.5.11(typescript@5.6.2))
vue: 3.5.11(typescript@5.6.2)
'@vue-flow/controls@1.1.2(@vue-flow/core@1.41.2(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))':
'@vue-flow/controls@1.1.2(@vue-flow/core@1.41.4(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))':
dependencies:
'@vue-flow/core': 1.41.2(vue@3.5.11(typescript@5.6.2))
'@vue-flow/core': 1.41.4(vue@3.5.11(typescript@5.6.2))
vue: 3.5.11(typescript@5.6.2)
'@vue-flow/core@1.41.2(vue@3.5.11(typescript@5.6.2))':
'@vue-flow/core@1.41.4(vue@3.5.11(typescript@5.6.2))':
dependencies:
'@vueuse/core': 10.11.0(vue@3.5.11(typescript@5.6.2))
d3-drag: 3.0.0
@ -17102,16 +17105,16 @@ snapshots:
transitivePeerDependencies:
- '@vue/composition-api'
'@vue-flow/minimap@1.5.0(@vue-flow/core@1.41.2(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))':
'@vue-flow/minimap@1.5.0(@vue-flow/core@1.41.4(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))':
dependencies:
'@vue-flow/core': 1.41.2(vue@3.5.11(typescript@5.6.2))
'@vue-flow/core': 1.41.4(vue@3.5.11(typescript@5.6.2))
d3-selection: 3.0.0
d3-zoom: 3.0.0
vue: 3.5.11(typescript@5.6.2)
'@vue-flow/node-resizer@1.4.0(@vue-flow/core@1.41.2(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))':
'@vue-flow/node-resizer@1.4.0(@vue-flow/core@1.41.4(vue@3.5.11(typescript@5.6.2)))(vue@3.5.11(typescript@5.6.2))':
dependencies:
'@vue-flow/core': 1.41.2(vue@3.5.11(typescript@5.6.2))
'@vue-flow/core': 1.41.4(vue@3.5.11(typescript@5.6.2))
d3-drag: 3.0.0
d3-selection: 3.0.0
vue: 3.5.11(typescript@5.6.2)
@ -19264,7 +19267,7 @@ snapshots:
optionalDependencies:
source-map: 0.6.1
eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0))(eslint@8.57.0):
eslint-config-airbnb-base@15.0.0(eslint-plugin-import@2.29.1)(eslint@8.57.0):
dependencies:
confusing-browser-globals: 1.0.11
eslint: 8.57.0
@ -19273,12 +19276,12 @@ snapshots:
object.entries: 1.1.5
semver: 7.6.0
eslint-config-airbnb-typescript@18.0.0(@typescript-eslint/eslint-plugin@7.2.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2))(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0))(eslint@8.57.0):
eslint-config-airbnb-typescript@18.0.0(@typescript-eslint/eslint-plugin@7.2.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2))(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-plugin-import@2.29.1)(eslint@8.57.0):
dependencies:
'@typescript-eslint/eslint-plugin': 7.2.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint@8.57.0)(typescript@5.6.2)
'@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.6.2)
eslint: 8.57.0
eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0))(eslint@8.57.0)
eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.29.1)(eslint@8.57.0)
transitivePeerDependencies:
- eslint-plugin-import
@ -19290,7 +19293,7 @@ snapshots:
eslint-import-resolver-node@0.3.9:
dependencies:
debug: 3.2.7(supports-color@8.1.1)
debug: 3.2.7(supports-color@5.5.0)
is-core-module: 2.13.1
resolve: 1.22.8
transitivePeerDependencies:
@ -19301,7 +19304,7 @@ snapshots:
debug: 4.3.4
enhanced-resolve: 5.13.0
eslint: 8.57.0
eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
fast-glob: 3.3.2
get-tsconfig: 4.5.0
@ -19313,9 +19316,9 @@ snapshots:
- eslint-import-resolver-webpack
- supports-color
eslint-module-utils@2.8.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0):
eslint-module-utils@2.8.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
dependencies:
debug: 3.2.7(supports-color@8.1.1)
debug: 3.2.7(supports-color@5.5.0)
optionalDependencies:
'@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.6.2)
eslint: 8.57.0
@ -19335,11 +19338,11 @@ snapshots:
array.prototype.findlastindex: 1.2.3
array.prototype.flat: 1.3.2
array.prototype.flatmap: 1.3.2
debug: 3.2.7(supports-color@8.1.1)
debug: 3.2.7(supports-color@5.5.0)
doctrine: 2.1.0
eslint: 8.57.0
eslint-import-resolver-node: 0.3.9
eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-plugin-import@2.29.1)(eslint@8.57.0))(eslint@8.57.0)
eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.6.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
hasown: 2.0.2
is-core-module: 2.13.1
is-glob: 4.0.3
@ -20133,7 +20136,7 @@ snapshots:
array-parallel: 0.1.3
array-series: 0.1.5
cross-spawn: 4.0.2
debug: 3.2.7(supports-color@8.1.1)
debug: 3.2.7(supports-color@5.5.0)
transitivePeerDependencies:
- supports-color
@ -22996,7 +22999,7 @@ snapshots:
pdf-parse@1.1.1:
dependencies:
debug: 3.2.7(supports-color@8.1.1)
debug: 3.2.7(supports-color@5.5.0)
node-ensure: 0.0.0
transitivePeerDependencies:
- supports-color
@ -23825,7 +23828,7 @@ snapshots:
rhea@1.0.24:
dependencies:
debug: 3.2.7(supports-color@8.1.1)
debug: 3.2.7(supports-color@5.5.0)
transitivePeerDependencies:
- supports-color
@ -25411,6 +25414,8 @@ snapshots:
optionalDependencies:
typescript: 5.6.2
vue-component-type-helpers@2.1.10: {}
vue-component-type-helpers@2.1.6: {}
vue-component-type-helpers@2.1.8: {}