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

fix(editor): Support middle click to scroll when using a mouse on new canvas (#11384)

Browse Source
This commit is contained in:
Alex Grozav
2024-10-24 16:51:37 +03:00
committed by GitHub
parent 74d870530b
commit 46f3b4a258
4 changed files with 55 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/editor-ui/src/components/canvas/Canvas.vue
View File

@@ -43,6 +43,7 @@ import { onKeyDown, onKeyUp, useDebounceFn } from '@vueuse/core';
import CanvasArrowHeadMarker from './elements/edges/CanvasArrowHeadMarker.vue';
import { CanvasNodeRenderType } from '@/types';
import CanvasBackgroundStripedPattern from './elements/CanvasBackgroundStripedPattern.vue';
import { isMiddleMouseButton } from '@/utils/eventUtils';
const $style = useCssModule();
@@ -107,6 +108,7 @@ const props = withDefaults(
);
const {
vueFlowRef,
getSelectedNodes: selectedNodes,
addSelectedNodes,
removeSelectedNodes,
@@ -143,18 +145,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 isPanningEnabled = ref(false);
const panningKeyCode = ' ';
const isPanningEnabled = ref(false);
const selectionKeyCode = ref<true | null>(true);
onKeyDown(panningKeyCode, () => {
isPanningEnabled.value = true;
selectionKeyCode.value = null;
setPanningEnabled(true);
});
onKeyUp(panningKeyCode, () => {
isPanningEnabled.value = false;
selectionKeyCode.value = true;
setPanningEnabled(false);
});
const keyMap = computed(() => ({
@@ -186,6 +186,16 @@ 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.
@@ -384,12 +394,28 @@ 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);
}
/**
@@ -559,6 +585,7 @@ provide(CanvasKey, {
@nodes-change="onNodesChange"
@move-start="onPaneMoveStart"
@move-end="onPaneMoveEnd"
@mousedown="onPaneMouseDown"
>
<template #node-canvas-node="canvasNodeProps">
<Node
@@ -647,6 +674,10 @@ provide(CanvasKey, {
cursor: grab;
}
:global(.vue-flow__pane) {
cursor: default;
}
:global(.vue-flow__pane.dragging) {
cursor: grabbing;
}