From a16fc575c84d3bb1db9bafc84931f95bdebbfc98 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 16 Oct 2025 10:33:47 +0200
Subject: [PATCH] chore(pane): cleanup

---
 packages/react/src/container/Pane/index.tsx        | 10 ++++------
 packages/svelte/src/lib/container/Pane/Pane.svelte |  4 ++--
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index 81a8345d..9caea305 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -1,7 +1,3 @@
-/**
- * The user selection rectangle gets displayed when a user drags the mouse while pressing shift
- */
-
 import {
   useRef,
   type MouseEvent as ReactMouseEvent,
@@ -121,7 +117,9 @@ export function Pane({
 
   const onClickCapture = (event: ReactMouseEvent) => event.stopPropagation();
 
-  const onPointerDown = (event: ReactPointerEvent): void => {
+  // We are using capture here in order to prevent other pointer events
+  // to be able to create a selection above a node or an edge
+  const onPointerDownCapture = (event: ReactPointerEvent): void => {
     const { resetSelectedElements, domNode } = store.getState();
     containerBounds.current = domNode?.getBoundingClientRect();
 
@@ -272,7 +270,7 @@ export function Pane({
       onPointerEnter={hasActiveSelection ? undefined : onPaneMouseEnter}
       onPointerMove={hasActiveSelection ? onPointerMove : onPaneMouseMove}
       onPointerUp={hasActiveSelection ? onPointerUp : undefined}
-      onPointerDownCapture={hasActiveSelection ? onPointerDown : undefined}
+      onPointerDownCapture={hasActiveSelection ? onPointerDownCapture : undefined}
       onClickCapture={hasActiveSelection ? onClickCapture : undefined}
       onPointerLeave={onPaneMouseLeave}
       ref={container}
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index 49ed27fb..bf271e08 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -91,7 +91,7 @@
   }
 
   // We start the selection process when the user clicks down on the pane
-  function onPointerDown(event: PointerEvent) {
+  function onPointerDownCapture(event: PointerEvent) {
     containerBounds = container?.getBoundingClientRect();
 
     const isNoKeyEvent =
@@ -235,7 +235,7 @@
   class:dragging={store.dragging}
   class:selection={isSelecting}
   onclick={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
-  onpointerdowncapture={hasActiveSelection ? onPointerDown : undefined}
+  onpointerdowncapture={hasActiveSelection ? onPointerDownCapture : undefined}
   onpointermove={hasActiveSelection ? onPointerMove : undefined}
   onpointerup={hasActiveSelection ? onPointerUp : undefined}
   oncontextmenu={wrapHandler(onContextMenu, container)}