mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-09 22:24:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor): Change selection to be default canvas behaviour (no-changelog) (#10668)
Some checks are pending
Test Master / install-and-build (push) Waiting to run
Details
Test Master / Unit tests (18.x) (push) Blocked by required conditions
Details
Test Master / Unit tests (20.x) (push) Blocked by required conditions
Details
Test Master / Unit tests (22.4) (push) Blocked by required conditions
Details
Test Master / Lint (push) Blocked by required conditions
Details
Test Master / Notify Slack on failure (push) Blocked by required conditions
Details

Browse source
This commit is contained in:
Alex Grozav 2024-09-04 22:01:23 +03:00 committed by GitHub
parent 66ddb4a6f3
commit 8ef9d53167
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 40 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
packages/editor-ui/src/components/canvas/Canvas.vue
View file

@ -30,6 +30,7 @@ import type { PinDataSource } from '@/composables/usePinnedData';
import { isPresent } from '@/utils/typesUtils';
import { GRID_SIZE } from '@/utils/nodeViewUtils';
import { CanvasKey } from '@/constants';
import { onKeyDown, onKeyUp } from '@vueuse/core';
const $style = useCssModule();
@ -107,12 +108,31 @@ const {
findNode,
} = useVueFlow({ id: props.id, deleteKeyCode: null });
const isPaneReady = ref(false);
const classes = computed(() => ({
[$style.canvas]: true,
[$style.ready]: isPaneReady.value,
[$style.draggable]: isPanningEnabled.value,
}));
/**
* Key bindings
*/
const disableKeyBindings = computed(() => !props.keyBindings);
const panningKeyCode = 'Shift';
const isPanningEnabled = ref(false);
onKeyDown(panningKeyCode, () => {
isPanningEnabled.value = true;
});
onKeyUp(panningKeyCode, () => {
isPanningEnabled.value = false;
});
useKeybindings(
{
ctrl_c: emitWithSelectedNodes((ids) => emit('copy:nodes', ids)),
@ -138,20 +158,15 @@ useKeybindings(
{ disabled: disableKeyBindings },
);
const contextMenu = useContextMenu();
const lastSelectedNode = computed(() => selectedNodes.value[selectedNodes.value.length - 1]);
const hasSelection = computed(() => selectedNodes.value.length > 0);
const selectedNodeIds = computed(() => selectedNodes.value.map((node) => node.id));
const paneReady = ref(false);
/**
* Nodes
*/
const selectionKeyCode = computed(() => (isPanningEnabled.value ? null : true));
const lastSelectedNode = computed(() => selectedNodes.value[selectedNodes.value.length - 1]);
const hasSelection = computed(() => selectedNodes.value.length > 0);
const selectedNodeIds = computed(() => selectedNodes.value.map((node) => node.id));
function onClickNodeAdd(id: string, handle: string) {
emit('click:node:add', id, handle);
}
@ -343,6 +358,8 @@ function setReadonly(value: boolean) {
* Context menu
*/
const contextMenu = useContextMenu();
function onOpenContextMenu(event: MouseEvent) {
contextMenu.open(event, {
source: 'canvas',
@ -417,7 +434,7 @@ onUnmounted(() => {
onPaneReady(async () => {
await onFitView();
paneReady.value = true;
isPaneReady.value = true;
});
watch(() => props.readOnly, setReadonly, {
@ -444,7 +461,9 @@ provide(CanvasKey, {
:snap-grid="[GRID_SIZE, GRID_SIZE]"
:min-zoom="0.2"
:max-zoom="4"
:class="[$style.canvas, { [$style.visible]: paneReady }]"
:class="classes"
:selection-key-code="selectionKeyCode"
:pan-activation-key-code="panningKeyCode"
data-test-id="canvas"
@edge-mouse-enter="onMouseEnterEdge"
@edge-mouse-leave="onMouseLeaveEdge"
@ -524,8 +543,16 @@ provide(CanvasKey, {
.canvas {
opacity: 0;
&.visible {
&.ready {
opacity: 1;
}
&.draggable :global(.vue-flow__pane) {
cursor: grab;
}
:global(.vue-flow__pane.dragging) {
cursor: grabbing;
}
}
</style>

4
packages/editor-ui/src/styles/plugins/_vueflow.scss
View file

@ -29,10 +29,6 @@
&.draggable {
cursor: default;
}
&.dragging {
cursor: grabbing;
}
}
.vue-flow__node {