only prevent pointer events when starting selection box on top of node

examples/react/src/examples/Figma/index.tsx

@@ -30,7 +30,7 @@ const BasicFlow = () => {
     <ReactFlow
       defaultNodes={initialNodes}
       defaultEdges={initialEdges}
-      selectionOnDrag
+      selectionOnDrag={true}
       selectionMode={SelectionMode.Partial}
       panOnDrag={panOnDrag}
       panOnScroll
@@ -47,6 +47,9 @@ const BasicFlow = () => {
       onPaneClick={(e) => console.log('pane click', e)}
       onSelectionStart={(e) => console.log('on selection start', e)}
       onSelectionEnd={(e) => console.log('on selection end', e)}
+      onPointerDown={(e) => console.log('pointer down', e)}
+      onPointerUp={(e) => console.log('pointer up', e)}
+      onClick={(e) => console.log('click', e)}
     >
       <Background variant={BackgroundVariant.Cross} />
       <Controls />

packages/react/src/container/Pane/index.tsx

@@ -86,7 +86,6 @@ export function Pane({
 
   // Used to prevent click events when the user lets go of the selectionKey during a selection
   const selectionInProgress = useRef<boolean>(false);
-  const selectionStarted = useRef<boolean>(false);
 
   const onClick = (event: ReactMouseEvent) => {
     // We prevent click events when the user let go of the selectionKey during a selection
@@ -140,7 +139,6 @@ export function Pane({
 
     (event.target as Partial<Element>)?.setPointerCapture?.(event.pointerId);
 
-    selectionStarted.current = true;
     selectionInProgress.current = false;
 
     const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
@@ -156,10 +154,12 @@ export function Pane({
       },
     });
 
-    if (!eventTargetIsContainer || paneClickDistance === 0) {
+    if (!eventTargetIsContainer) {
       event.stopPropagation();
       event.preventDefault();
+    }
 
+    if (!eventTargetIsContainer || paneClickDistance === 0 || !selectionOnDrag) {
       resetSelectedElements();
 
       onSelectionStart?.(event);
@@ -252,7 +252,7 @@ export function Pane({
   };
 
   const onPointerUp = (event: ReactPointerEvent) => {
-    if (event.button !== 0 || !selectionStarted.current) {
+    if (event.button !== 0) {
       return;
     }
 
@@ -275,8 +275,6 @@ export function Pane({
     if (selectionInProgress.current) {
       onSelectionEnd?.(event);
     }
-
-    selectionStarted.current = false;
   };
 
   const draggable = panOnDrag === true || (Array.isArray(panOnDrag) && panOnDrag.includes(0));

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -77,19 +77,18 @@
 
   // Used to prevent click events when the user lets go of the selectionKey during a selection
   let selectionInProgress = false;
-  let selectionStarted = false;
 
   // We start the selection process when the user clicks down on the pane
   function onPointerDownCapture(event: PointerEvent) {
     containerBounds = container?.getBoundingClientRect();
 
+    const eventTargetIsContainer = event.target === container;
+
     const isNoKeyEvent =
-      event.target !== container && !!(event.target as HTMLElement).closest('.nokey');
+      !eventTargetIsContainer && !!(event.target as HTMLElement).closest('.nokey');
 
     const isSelectionActive =
-      (selectionOnDrag && container === event.target) ||
+      (selectionOnDrag && eventTargetIsContainer) || !selectionOnDrag || store.selectionKeyPressed;
-      !selectionOnDrag ||
-      store.selectionKeyPressed;
 
     if (
       !store.elementsSelectable ||
@@ -105,7 +104,6 @@
 
     (event.target as Partial<Element>)?.setPointerCapture?.(event.pointerId);
 
-    selectionStarted = true;
     selectionInProgress = false;
 
     const { x, y } = getEventPosition(event, containerBounds);
@@ -119,10 +117,12 @@
       y
     };
 
-    if (event.target !== container || paneClickDistance === 0) {
+    if (!eventTargetIsContainer) {
       event.stopPropagation();
       event.preventDefault();
+    }
 
+    if (paneClickDistance === 0 || !selectionOnDrag) {
       store.unselectNodesAndEdges();
 
       onselectionstart?.(event);
@@ -203,7 +203,7 @@
   }
 
   function onPointerUp(event: PointerEvent) {
-    if (event.button !== 0 || !selectionStarted) {
+    if (event.button !== 0) {
       return;
     }
 
@@ -225,8 +225,6 @@
     if (selectionInProgress) {
       onselectionend?.(event);
     }
-
-    selectionStarted = false;
   }
 
   const onContextMenu = (event: MouseEvent) => {