From 9b8486b39f6e9a478700e1e87a328562c0c41103 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 15 Jul 2024 14:38:46 +0200 Subject: [PATCH 1/2] fix(selection): dont trigger onSelectionEnd on click --- packages/react/src/container/FlowRenderer/index.tsx | 4 +++- packages/react/src/container/Pane/index.tsx | 11 +++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/react/src/container/FlowRenderer/index.tsx b/packages/react/src/container/FlowRenderer/index.tsx index 34c0be13..727970e3 100644 --- a/packages/react/src/container/FlowRenderer/index.tsx +++ b/packages/react/src/container/FlowRenderer/index.tsx @@ -77,7 +77,8 @@ function FlowRendererComponent({ const panOnDrag = panActivationKeyPressed || _panOnDrag; const panOnScroll = panActivationKeyPressed || _panOnScroll; - const isSelecting = selectionKeyPressed || userSelectionActive || (selectionOnDrag && panOnDrag !== true); + const _selectionOnDrag = selectionOnDrag && panOnDrag !== true; + const isSelecting = selectionKeyPressed || userSelectionActive || _selectionOnDrag; useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }); @@ -117,6 +118,7 @@ function FlowRendererComponent({ isSelecting={!!isSelecting} selectionMode={selectionMode} selectionKeyPressed={selectionKeyPressed} + selectionOnDrag={_selectionOnDrag} > {children} {nodesSelectionActive && ( diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx index a0bd5ba3..3fd1d079 100644 --- a/packages/react/src/container/Pane/index.tsx +++ b/packages/react/src/container/Pane/index.tsx @@ -35,6 +35,7 @@ type PaneProps = { | 'onPaneMouseEnter' | 'onPaneMouseMove' | 'onPaneMouseLeave' + | 'selectionOnDrag' > >; @@ -61,6 +62,7 @@ export function Pane({ selectionKeyPressed, selectionMode = SelectionMode.Full, panOnDrag, + selectionOnDrag, onSelectionStart, onSelectionEnd, onPaneClick, @@ -83,6 +85,7 @@ export function Pane({ // Used to prevent click events when the user lets go of the selectionKey during a selection const selectionInProgress = useRef(false); + const selectionStarted = useRef(false); const resetUserSelection = () => { store.setState({ userSelectionActive: false, userSelectionRect: null }); @@ -129,6 +132,8 @@ export function Pane({ return; } + selectionStarted.current = true; + selectionInProgress.current = false; edgeIdLookup.current = new Map(); for (const [id, edge] of edgeLookup) { @@ -219,7 +224,7 @@ export function Pane({ }; const onPointerUp = (event: ReactPointerEvent) => { - if (event.button !== 0) { + if (event.button !== 0 || !selectionStarted.current) { return; } @@ -240,9 +245,11 @@ export function Pane({ // If the user kept holding the selectionKey during the selection, // we need to reset the selectionInProgress, so the next click event is not prevented - if (selectionKeyPressed) { + if (selectionKeyPressed || selectionOnDrag) { selectionInProgress.current = false; } + + selectionStarted.current = false; }; return ( From 18a1266131e7c2bdd9a15268dbf871cdf17cad9a Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 15 Jul 2024 14:41:38 +0200 Subject: [PATCH 2/2] chore(changeset): add --- .changeset/modern-pumpkins-juggle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/modern-pumpkins-juggle.md diff --git a/.changeset/modern-pumpkins-juggle.md b/.changeset/modern-pumpkins-juggle.md new file mode 100644 index 00000000..67ce0ba5 --- /dev/null +++ b/.changeset/modern-pumpkins-juggle.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +fix(selection): dont trigger onSelectionEnd on click