diff --git a/examples/react/src/examples/Figma/index.tsx b/examples/react/src/examples/Figma/index.tsx index 136d0629..28e21179 100644 --- a/examples/react/src/examples/Figma/index.tsx +++ b/examples/react/src/examples/Figma/index.tsx @@ -45,6 +45,8 @@ const BasicFlow = () => { onMove={onMove} onMoveEnd={onMoveEnd} onPaneClick={(e) => console.log('pane click', e)} + onSelectionStart={(e) => console.log('on selection start', e)} + onSelectionEnd={(e) => console.log('on selection end', e)} > diff --git a/examples/svelte/src/routes/examples/figma/+page.svelte b/examples/svelte/src/routes/examples/figma/+page.svelte index 0b4c0b6a..9c448353 100644 --- a/examples/svelte/src/routes/examples/figma/+page.svelte +++ b/examples/svelte/src/routes/examples/figma/+page.svelte @@ -47,6 +47,8 @@ {onmove} {onmoveend} onpaneclick={(e) => console.log('on pane click', e)} + onselectionend={(e) => console.log('on selection end', e)} + onselectionstart={(e) => console.log('on selection start', e)} > diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx index f952434b..32dcdb9a 100644 --- a/packages/react/src/container/Pane/index.tsx +++ b/packages/react/src/container/Pane/index.tsx @@ -120,6 +120,7 @@ export function Pane({ const onClickCapture = (event: ReactMouseEvent) => { if (selectionInProgress.current) { event.stopPropagation(); + selectionInProgress.current = false; } }; @@ -202,6 +203,7 @@ export function Pane({ if (distance <= paneClickDistance) { return; } + onSelectionStart?.(event); } selectionInProgress.current = true; @@ -277,14 +279,9 @@ export function Pane({ userSelectionRect: null, nodesSelectionActive: selectedNodeIds.current.size > 0, }); - onSelectionEnd?.(event); - /* - * 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 || selectionOnDrag) { - selectionInProgress.current = false; + if (selectionInProgress.current) { + onSelectionEnd?.(event); } selectionStarted.current = false; diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte index fed9d005..46c48625 100644 --- a/packages/svelte/src/lib/container/Pane/Pane.svelte +++ b/packages/svelte/src/lib/container/Pane/Pane.svelte @@ -147,6 +147,7 @@ if (distance <= paneClickDistance) { return; } + onselectionstart?.(event); } selectionInProgress = true; @@ -220,7 +221,9 @@ store.selectionRectMode = 'nodes'; } - onselectionend?.(event); + if (selectionInProgress) { + onselectionend?.(event); + } selectionStarted = false; }