chore(pane): cleanup

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}

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)}