From de86c64128a232eb53957bde479c5f6340d4b14c Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 6 May 2024 11:47:45 +0200
Subject: [PATCH] fix(svelte): selection for sub flows

---
 .../NodeSelection/NodeSelection.svelte           | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
index 08a1cd6e..f894d8d9 100644
--- a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
+++ b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { getNodesBounds } from '@xyflow/system';
   import { createEventDispatcher } from 'svelte';
+  import { getInternalNodesBounds, isNumeric, type Rect } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import { Selection } from '$lib/components/Selection';
@@ -8,7 +8,7 @@
   import type { Node, NodeEventMap } from '$lib/types';
 
   const store = useStore();
-  const { selectionRectMode, nodes } = store;
+  const { selectionRectMode, nodes, nodeLookup } = store;
 
   const dispatch = createEventDispatcher<
     NodeEventMap & {
@@ -17,19 +17,25 @@
     }
   >();
 
-  $: selectedNodes = $nodes.filter((n) => n.selected);
-  $: bounds = getNodesBounds(selectedNodes);
+  let bounds: Rect | null = null;
+
+  $: if ($selectionRectMode === 'nodes') {
+    bounds = getInternalNodesBounds($nodeLookup, { filter: (node) => !!node.selected });
+    $nodes;
+  }
 
   function onContextMenu(event: MouseEvent | TouchEvent) {
+    const selectedNodes = $nodes.filter((n) => n.selected);
     dispatch('selectioncontextmenu', { nodes: selectedNodes, event });
   }
 
   function onClick(event: MouseEvent | TouchEvent) {
+    const selectedNodes = $nodes.filter((n) => n.selected);
     dispatch('selectionclick', { nodes: selectedNodes, event });
   }
 </script>
 
-{#if selectedNodes && $selectionRectMode === 'nodes'}
+{#if $selectionRectMode === 'nodes' && bounds && isNumeric(bounds.x) && isNumeric(bounds.y)}
   <div
     class="selection-wrapper nopan"
     style="width: {bounds.width}px; height: {bounds.height}px; transform: translate({bounds.x}px, {bounds.y}px)"