From a30484413deac40ff047d83f162475d37de3f1c7 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Thu, 9 Jan 2025 11:42:43 +0100
Subject: [PATCH] fix selection boxes

---
 packages/svelte/src/lib/container/Pane/Pane.svelte | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index 3290c631..bbe9e4b2 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -85,8 +85,9 @@
     store.selectionRectMode = null;
   }
 
+  // We start the selection process when the user clicks down on the pane
   function onPointerDown(event: PointerEvent) {
-    containerBounds = container.getBoundingClientRect();
+    containerBounds = container?.getBoundingClientRect();
 
     if (
       !store.elementsSelectable ||
@@ -147,15 +148,15 @@
       ).map((n) => n.id)
     );
 
-    let edgesSelectable = store.defaultEdgeOptions.selectable ?? true;
+    const edgesSelectable = store.defaultEdgeOptions.selectable ?? true;
     selectedEdgeIds = new Set();
 
     // We look for all edges connected to the selected nodes
-    for (let nodeId of selectedNodeIds) {
-      let connections = store.connectionLookup.get(nodeId);
+    for (const nodeId of selectedNodeIds) {
+      const connections = store.connectionLookup.get(nodeId);
       if (!connections) continue;
-      for (let { edgeId } of connections.values()) {
-        let edge = store.edgeLookup.get(edgeId);
+      for (const { edgeId } of connections.values()) {
+        const edge = store.edgeLookup.get(edgeId);
         if (edge && (edge.selectable ?? edgesSelectable)) {
           selectedEdgeIds.add(edgeId);
         }