From 601c7f1c15377d56de68be4d9a26e6eda64258f8 Mon Sep 17 00:00:00 2001 From: peterkogo Date: Mon, 22 Jan 2024 11:26:02 +0100 Subject: [PATCH 1/2] Selection process is not interrupted by selectionKey being let go --- packages/react/src/container/FlowRenderer/index.tsx | 8 +++++--- packages/svelte/src/lib/container/Pane/Pane.svelte | 3 ++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/react/src/container/FlowRenderer/index.tsx b/packages/react/src/container/FlowRenderer/index.tsx index 06d6fab6..2670be70 100644 --- a/packages/react/src/container/FlowRenderer/index.tsx +++ b/packages/react/src/container/FlowRenderer/index.tsx @@ -28,7 +28,9 @@ export type FlowRendererProps = Omit< children: ReactNode; }; -const selector = (s: ReactFlowState) => s.nodesSelectionActive; +const selector = (s: ReactFlowState) => { + return { nodesSelectionActive: s.nodesSelectionActive, userSelectionActive: s.userSelectionActive }; +}; const FlowRendererComponent = ({ children, @@ -67,13 +69,13 @@ const FlowRendererComponent = ({ onViewportChange, isControlledViewport, }: FlowRendererProps) => { - const nodesSelectionActive = useStore(selector); + const { nodesSelectionActive, userSelectionActive } = useStore(selector); const selectionKeyPressed = useKeyPress(selectionKeyCode); const panActivationKeyPressed = useKeyPress(panActivationKeyCode); const panOnDrag = panActivationKeyPressed || _panOnDrag; const panOnScroll = panActivationKeyPressed || _panOnScroll; - const isSelecting = selectionKeyPressed || (selectionOnDrag && panOnDrag !== true); + const isSelecting = selectionKeyPressed || userSelectionActive || (selectionOnDrag && panOnDrag !== true); useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode }); diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte index cce95636..f0df0980 100644 --- a/packages/svelte/src/lib/container/Pane/Pane.svelte +++ b/packages/svelte/src/lib/container/Pane/Pane.svelte @@ -73,7 +73,8 @@ let selectedNodes: Node[] = []; $: _panOnDrag = $panActivationKeyPressed || panOnDrag; - $: isSelecting = $selectionKeyPressed || (selectionOnDrag && _panOnDrag !== true); + $: isSelecting = + $selectionKeyPressed || $selectionRect || (selectionOnDrag && _panOnDrag !== true); $: hasActiveSelection = $elementsSelectable && (isSelecting || $selectionRectMode === 'user'); function onClick(event: MouseEvent | TouchEvent) { From 33bf6b0e46162c6d0a76721650e5a241ac33b2bc Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 23 Jan 2024 10:08:10 +0100 Subject: [PATCH 2/2] chore(packages): update changelog --- packages/react/CHANGELOG.md | 1 + packages/svelte/CHANGELOG.md | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 70a3de11..57f65c83 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -4,6 +4,7 @@ ### Patch changes +- selection box is not interrupted by selectionKey being let go - fix `OnNodeDrag` type ## 12.0.0-next.7 diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index 6b9e940a..0b9350a6 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -8,6 +8,7 @@ ## Patch changes +- selection box is not interrupted by selectionKey being let go - Edge label has a default background and is clickable ## 0.0.34