From 0d2cda7dff46faa373c918ebe5a0db85ac75cbba Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 30 Oct 2025 12:42:55 +0100 Subject: [PATCH 1/5] also postpone starting selection when clicking on a node --- packages/react/src/container/Pane/index.tsx | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx index 94f23c35..43c55383 100644 --- a/packages/react/src/container/Pane/index.tsx +++ b/packages/react/src/container/Pane/index.tsx @@ -121,7 +121,7 @@ export function Pane({ // We are using capture here in order to prevent other pointer events // to be able to create a selection above a node or an edge const onPointerDownCapture = (event: ReactPointerEvent): void => { - const { resetSelectedElements, domNode } = store.getState(); + const { domNode } = store.getState(); containerBounds.current = domNode?.getBoundingClientRect(); if (!containerBounds.current) return; @@ -155,13 +155,6 @@ export function Pane({ event.stopPropagation(); event.preventDefault(); } - - if (paneClickDistance === 0 || selectionKeyPressed) { - resetSelectedElements(); - - onSelectionStart?.(event); - selectionInProgress.current = true; - } }; const onPointerMove = (event: ReactPointerEvent): void => { @@ -184,14 +177,10 @@ export function Pane({ const { x: mouseX, y: mouseY } = getEventPosition(event.nativeEvent, containerBounds.current); const { startX, startY } = userSelectionRect; - if ( - !selectionInProgress.current && - event.target === container.current && - !selectionKeyPressed && - paneClickDistance > 0 - ) { + if (!selectionInProgress.current) { + const requiredDistance = selectionKeyPressed ? 0 : paneClickDistance; const distance = Math.hypot(mouseX - startX, mouseY - startY); - if (distance <= paneClickDistance) { + if (distance <= requiredDistance) { return; } resetSelectedElements(); From 07fbc7e34ad858cb7d96b48af8af44b5e222d6aa Mon Sep 17 00:00:00 2001 From: peterkogo Date: Thu, 30 Oct 2025 12:53:40 +0100 Subject: [PATCH 2/5] also postpone starting selection when clicking on a node --- .../src/routes/examples/figma/+page.svelte | 1 + .../svelte/src/lib/container/Pane/Pane.svelte | 17 +++-------------- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/examples/svelte/src/routes/examples/figma/+page.svelte b/examples/svelte/src/routes/examples/figma/+page.svelte index 9c448353..33de11ea 100644 --- a/examples/svelte/src/routes/examples/figma/+page.svelte +++ b/examples/svelte/src/routes/examples/figma/+page.svelte @@ -39,6 +39,7 @@ bind:edges fitView selectionMode={SelectionMode.Partial} + multiSelectionKey={['Meta', 'Shift']} selectionOnDrag panOnScroll paneClickDistance={100} diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte index d2fdec9d..b7de8cfa 100644 --- a/packages/svelte/src/lib/container/Pane/Pane.svelte +++ b/packages/svelte/src/lib/container/Pane/Pane.svelte @@ -120,13 +120,6 @@ event.stopPropagation(); event.preventDefault(); } - - if (paneClickDistance === 0 || store.selectionKeyPressed) { - store.unselectNodesAndEdges(); - - onselectionstart?.(event); - selectionInProgress = true; - } } function onPointerMove(event: PointerEvent) { @@ -137,14 +130,10 @@ const mousePos = getEventPosition(event, containerBounds); const { startX = 0, startY = 0 } = store.selectionRect; - if ( - !selectionInProgress && - event.target === container && - !store.selectionKeyPressed && - paneClickDistance > 0 - ) { + if (!selectionInProgress) { + const requiredDistance = store.selectionKeyPressed ? 0 : paneClickDistance; const distance = Math.hypot(mousePos.x - startX, mousePos.y - startY); - if (distance <= paneClickDistance) { + if (distance <= requiredDistance) { return; } store.unselectNodesAndEdges(); From b298819062a2c1a8927333133a7055eee8d3c2b4 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 30 Oct 2025 14:01:46 +0100 Subject: [PATCH 3/5] chore(pane): handle nodes selection --- packages/react/src/container/Pane/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx index 43c55383..32a0e6df 100644 --- a/packages/react/src/container/Pane/index.tsx +++ b/packages/react/src/container/Pane/index.tsx @@ -257,11 +257,14 @@ export function Pane({ store.setState({ userSelectionActive: false, userSelectionRect: null, - nodesSelectionActive: selectedNodeIds.current.size > 0, }); if (selectionInProgress.current) { onSelectionEnd?.(event); + + store.setState({ + nodesSelectionActive: selectedNodeIds.current.size > 0, + }); } }; From a8ee089d7689d9a58113690c8e90e1c1e109602a Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 30 Oct 2025 15:23:56 +0100 Subject: [PATCH 4/5] chore(changesets): add --- .changeset/red-cycles-wonder.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/red-cycles-wonder.md diff --git a/.changeset/red-cycles-wonder.md b/.changeset/red-cycles-wonder.md new file mode 100644 index 00000000..db7dfd20 --- /dev/null +++ b/.changeset/red-cycles-wonder.md @@ -0,0 +1,6 @@ +--- +'@xyflow/react': patch +'@xyflow/svelte': patch +--- + +Reset selection box when user selects a node From a343807361e2a38f36818942fb0980f349bbe768 Mon Sep 17 00:00:00 2001 From: Moritz Klack Date: Thu, 30 Oct 2025 15:24:47 +0100 Subject: [PATCH 5/5] Update changeset for selection box reset Reset the selection box when a user selects a node. --- .changeset/red-cycles-wonder.md | 1 - 1 file changed, 1 deletion(-) diff --git a/.changeset/red-cycles-wonder.md b/.changeset/red-cycles-wonder.md index db7dfd20..6241d126 100644 --- a/.changeset/red-cycles-wonder.md +++ b/.changeset/red-cycles-wonder.md @@ -1,6 +1,5 @@ --- '@xyflow/react': patch -'@xyflow/svelte': patch --- Reset selection box when user selects a node