@railtownai/railtracks-visualizer 0.0.34 → 0.0.35

package/dist/cjs/index.js

@@ -3358,27 +3358,25 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [
  * Determines a bounding box that contains all given nodes in an array
  * @internal
  */ const getInternalNodesBounds = (nodeLookup, params = {})=>{
-    if (nodeLookup.size === 0) {
-        return {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
-        };
-    }
     let box = {
         x: Infinity,
         y: Infinity,
         x2: -Infinity,
         y2: -Infinity
     };
+    let hasVisibleNodes = false;
     nodeLookup.forEach((node)=>{
         if (params.filter === undefined || params.filter(node)) {
-            const nodeBox = nodeToBox(node);
-            box = getBoundsOfBoxes(box, nodeBox);
+            box = getBoundsOfBoxes(box, nodeToBox(node));
+            hasVisibleNodes = true;
         }
     });
-    return boxToRect(box);
+    return hasVisibleNodes ? boxToRect(box) : {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+    };
 };
 const getNodesInside = (nodes, rect, [tx, ty, tScale] = [
     0,
@@ -4123,7 +4121,7 @@ function getEdgeCenter({ sourceX, sourceY, targetX, targetY }) {
         return zIndex;
     }
     const edgeZ = elevateOnSelect && selected ? 1000 : 0;
-    const nodeZ = Math.max(sourceNode.parentId ? sourceNode.internals.z : 0, targetNode.parentId ? targetNode.internals.z : 0);
+    const nodeZ = Math.max(sourceNode.parentId || elevateOnSelect && sourceNode.selected ? sourceNode.internals.z : 0, targetNode.parentId || elevateOnSelect && targetNode.selected ? targetNode.internals.z : 0);
     return edgeZ + nodeZ;
 }
 function isEdgeVisible({ sourceNode, targetNode, width, height, transform }) {
@@ -4639,6 +4637,8 @@ function createMarkerIds(edges, { id, defaultColor, defaultMarkerStart, defaultM
         return markers;
     }, []).sort((a, b)=>a.id.localeCompare(b.id));
 }
+const SELECTED_NODE_Z = 1000;
+const ROOT_PARENT_Z_INCREMENT = 10;
 const defaultOptions = {
     nodeOrigin: [
         0,
@@ -4677,11 +4677,42 @@ function updateAbsolutePositions(nodeLookup, parentLookup, options) {
         }
     }
 }
+function parseHandles(userNode, internalNode) {
+    if (!userNode.handles) {
+        return !userNode.measured ? undefined : internalNode?.internals.handleBounds;
+    }
+    const source = [];
+    const target = [];
+    for (const handle of userNode.handles){
+        const handleBounds = {
+            id: handle.id,
+            width: handle.width ?? 1,
+            height: handle.height ?? 1,
+            nodeId: userNode.id,
+            x: handle.x,
+            y: handle.y,
+            position: handle.position,
+            type: handle.type
+        };
+        if (handle.type === 'source') {
+            source.push(handleBounds);
+        } else if (handle.type === 'target') {
+            target.push(handleBounds);
+        }
+    }
+    return {
+        source,
+        target
+    };
+}
 function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
     const _options = mergeObjects(adoptUserNodesDefaultOptions, options);
+    let rootParentIndex = {
+        i: -1
+    };
     let nodesInitialized = nodes.length > 0;
     const tmpLookup = new Map(nodeLookup);
-    const selectedNodeZ = _options?.elevateNodesOnSelect ? 1000 : 0;
+    const selectedNodeZ = _options?.elevateNodesOnSelect ? SELECTED_NODE_Z : 0;
     nodeLookup.clear();
     parentLookup.clear();
     for (const userNode of nodes){
@@ -4702,7 +4733,7 @@ function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
                 internals: {
                     positionAbsolute: clampedPosition,
                     // if user re-initializes the node or removes `measured` for whatever reason, we reset the handleBounds so that the node gets re-measured
-                    handleBounds: !userNode.measured ? undefined : internalNode?.internals.handleBounds,
+                    handleBounds: parseHandles(userNode, internalNode),
                     z: calculateZ(userNode, selectedNodeZ),
                     userNode
                 }
@@ -4713,7 +4744,7 @@ function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
             nodesInitialized = false;
         }
         if (userNode.parentId) {
-            updateChildNode(internalNode, nodeLookup, parentLookup, options);
+            updateChildNode(internalNode, nodeLookup, parentLookup, options, rootParentIndex);
         }
     }
     return nodesInitialized;
@@ -4736,7 +4767,7 @@ function updateParentLookup(node, parentLookup) {
 }
 /**
  * Updates positionAbsolute and zIndex of a child node and the parentLookup.
- */ function updateChildNode(node, nodeLookup, parentLookup, options) {
+ */ function updateChildNode(node, nodeLookup, parentLookup, options, rootParentIndex) {
     const { elevateNodesOnSelect, nodeOrigin, nodeExtent } = mergeObjects(defaultOptions, options);
     const parentId = node.parentId;
     const parentNode = nodeLookup.get(parentId);
@@ -4745,7 +4776,16 @@ function updateParentLookup(node, parentLookup) {
         return;
     }
     updateParentLookup(node, parentLookup);
-    const selectedNodeZ = elevateNodesOnSelect ? 1000 : 0;
+    // We just want to set the rootParentIndex for the first child
+    if (rootParentIndex && !parentNode.parentId && parentNode.internals.rootParentIndex === undefined) {
+        parentNode.internals.rootParentIndex = ++rootParentIndex.i;
+        parentNode.internals.z = parentNode.internals.z + rootParentIndex.i * ROOT_PARENT_Z_INCREMENT;
+    }
+    // But we need to update rootParentIndex.i also when parent has not been updated
+    if (rootParentIndex && parentNode.internals.rootParentIndex !== undefined) {
+        rootParentIndex.i = parentNode.internals.rootParentIndex;
+    }
+    const selectedNodeZ = elevateNodesOnSelect ? SELECTED_NODE_Z : 0;
     const { x, y, z } = calculateChildXYZ(node, parentNode, nodeOrigin, nodeExtent, selectedNodeZ);
     const { positionAbsolute } = node.internals;
     const positionChanged = x !== positionAbsolute.x || y !== positionAbsolute.y;
@@ -5319,8 +5359,10 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                 autoPan();
             }
             if (!dragStarted) {
-                const x = pointerPos.xSnapped - (lastPos.x ?? 0);
-                const y = pointerPos.ySnapped - (lastPos.y ?? 0);
+                // Calculate distance in client coordinates for consistent drag threshold behavior across zoom levels
+                const currentMousePosition = getEventPosition(event.sourceEvent, containerBounds);
+                const x = currentMousePosition.x - mousePosition.x;
+                const y = currentMousePosition.y - mousePosition.y;
                 const distance = Math.sqrt(x * x + y * y);
                 if (distance > nodeDragThreshold) {
                     startDrag(event);
@@ -5604,6 +5646,10 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
         previousConnection = newConnection;
     }
     function onPointerUp(event) {
+        // Prevent multi-touch aborting connection
+        if ('touches' in event && event.touches.length > 0) {
+            return;
+        }
         if (connectionStarted) {
             if ((closestHandle || resultHandleDomNode) && connection && isValid) {
                 onConnect?.(connection);
@@ -5761,8 +5807,7 @@ function XYMinimap({ domNode, panZoom, getTransform, getViewScale }) {
         pointer
     };
 }
-/* eslint-disable @typescript-eslint/no-explicit-any */ const viewChanged = (prevViewport, eventViewport)=>prevViewport.x !== eventViewport.x || prevViewport.y !== eventViewport.y || prevViewport.zoom !== eventViewport.k;
-const transformToViewport = (transform)=>({
+/* eslint-disable @typescript-eslint/no-explicit-any */ const transformToViewport = (transform)=>({
         x: transform.x,
         y: transform.y,
         zoom: transform.k
@@ -5786,6 +5831,9 @@ const wheelDelta = (event)=>{
 function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection, d3Zoom, panOnScrollMode, panOnScrollSpeed, zoomOnPinch, onPanZoomStart, onPanZoom, onPanZoomEnd }) {
     return (event)=>{
         if (isWrappedWithClass(event, noWheelClassName)) {
+            if (event.ctrlKey) {
+                event.preventDefault(); // stop native page zoom for pinch zooming
+            }
             return false;
         }
         event.preventDefault();
@@ -5824,8 +5872,7 @@ function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection
          */ if (!zoomPanValues.isPanScrolling) {
             zoomPanValues.isPanScrolling = true;
             onPanZoomStart?.(event, nextViewport);
-        }
-        if (zoomPanValues.isPanScrolling) {
+        } else {
             onPanZoom?.(event, nextViewport);
             zoomPanValues.panScrollTimeout = setTimeout(()=>{
                 onPanZoomEnd?.(event, nextViewport);
@@ -5895,7 +5942,7 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
         }
         zoomPanValues.usedRightMouseButton = false;
         onDraggingChange(false);
-        if (onPanZoomEnd && viewChanged(zoomPanValues.prevViewport, event.transform)) {
+        if (onPanZoomEnd) {
             const viewport = transformToViewport(event.transform);
             zoomPanValues.prevViewport = viewport;
             clearTimeout(zoomPanValues.timerId);
@@ -5906,10 +5953,11 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
         }
     };
 }
-/* eslint-disable @typescript-eslint/no-explicit-any */ function createFilter({ zoomActivationKeyPressed, zoomOnScroll, zoomOnPinch, panOnDrag, panOnScroll, zoomOnDoubleClick, userSelectionActive, noWheelClassName, noPanClassName, lib }) {
+/* eslint-disable @typescript-eslint/no-explicit-any */ function createFilter({ zoomActivationKeyPressed, zoomOnScroll, zoomOnPinch, panOnDrag, panOnScroll, zoomOnDoubleClick, userSelectionActive, noWheelClassName, noPanClassName, lib, connectionInProgress }) {
     return (event)=>{
         const zoomScroll = zoomActivationKeyPressed || zoomOnScroll;
         const pinchZoom = zoomOnPinch && event.ctrlKey;
+        const isWheelEvent = event.type === 'wheel';
         if (event.button === 1 && event.type === 'mousedown' && (isWrappedWithClass(event, `${lib}-flow__node`) || isWrappedWithClass(event, `${lib}-flow__edge`))) {
             return true;
         }
@@ -5921,15 +5969,19 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
         if (userSelectionActive) {
             return false;
         }
+        // we want to disable pinch-zooming while making a connection
+        if (connectionInProgress && !isWheelEvent) {
+            return false;
+        }
         // if the target element is inside an element with the nowheel class, we prevent zooming
-        if (isWrappedWithClass(event, noWheelClassName) && event.type === 'wheel') {
+        if (isWrappedWithClass(event, noWheelClassName) && isWheelEvent) {
             return false;
         }
         // if the target element is inside an element with the nopan class, we prevent panning
-        if (isWrappedWithClass(event, noPanClassName) && (event.type !== 'wheel' || panOnScroll && event.type === 'wheel' && !zoomActivationKeyPressed)) {
+        if (isWrappedWithClass(event, noPanClassName) && (!isWheelEvent || panOnScroll && isWheelEvent && !zoomActivationKeyPressed)) {
             return false;
         }
-        if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') {
+        if (!zoomOnPinch && event.ctrlKey && isWheelEvent) {
             return false;
         }
         if (!zoomOnPinch && event.type === 'touchstart' && event.touches?.length > 1) {
@@ -5937,7 +5989,7 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
             return false;
         }
         // when there is no scroll handling enabled, we prevent all wheel events
-        if (!zoomScroll && !panOnScroll && !pinchZoom && event.type === 'wheel') {
+        if (!zoomScroll && !panOnScroll && !pinchZoom && isWheelEvent) {
             return false;
         }
         // if the pane is not movable, we prevent dragging it with mousestart or touchstart
@@ -5951,7 +6003,7 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
         // We only allow right clicks if pan on drag is set to right click
         const buttonAllowed = Array.isArray(panOnDrag) && panOnDrag.includes(event.button) || !event.button || event.button <= 1;
         // default filter for d3-zoom
-        return (!event.ctrlKey || event.type === 'wheel') && buttonAllowed;
+        return (!event.ctrlKey || isWheelEvent) && buttonAllowed;
     };
 }
 function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExtent, viewport, onPanZoom, onPanZoomStart, onPanZoomEnd, onDraggingChange }) {
@@ -5959,10 +6011,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
         isZoomingOrPanning: false,
         usedRightMouseButton: false,
         prevViewport: {
-            x: 0,
-            y: 0,
-            zoom: 0
-        },
+            },
         mouseButton: 0,
         timerId: undefined,
         panScrollTimeout: undefined,
@@ -6000,7 +6049,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
         return Promise.resolve(false);
     }
     // public functions
-    function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib, onTransformChange }) {
+    function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib, onTransformChange, connectionInProgress }) {
         if (userSelectionActive && !zoomPanValues.isZoomingOrPanning) {
             destroy();
         }
@@ -6062,7 +6111,8 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
             userSelectionActive,
             noPanClassName,
             noWheelClassName,
-            lib
+            lib,
+            connectionInProgress
         });
         d3ZoomInstance.filter(filter);
         /*
@@ -6408,6 +6458,17 @@ function nodeToChildExtent(child, parent, nodeOrigin) {
 }
 function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
     const selection = select(domNode);
+    let params = {
+        controlDirection: getControlDirection('bottom-right'),
+        boundaries: {
+            minWidth: 0,
+            minHeight: 0,
+            maxWidth: Number.MAX_VALUE,
+            maxHeight: Number.MAX_VALUE
+        },
+        resizeDirection: undefined,
+        keepAspectRatio: false
+    };
     function update({ controlPosition, boundaries, keepAspectRatio, resizeDirection, onResizeStart, onResize, onResizeEnd, shouldResize }) {
         let prevValues = {
             ...initPrevValues$1
@@ -6415,13 +6476,20 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
         let startValues = {
             ...initStartValues
         };
-        const controlDirection = getControlDirection(controlPosition);
+        params = {
+            boundaries,
+            resizeDirection,
+            keepAspectRatio,
+            controlDirection: getControlDirection(controlPosition)
+        };
         let node = undefined;
         let containerBounds = null;
         let childNodes = [];
         let parentNode = undefined; // Needed to fix expandParent
         let parentExtent = undefined;
         let childExtent = undefined;
+        // we only want to trigger onResizeEnd if onResize was actually called
+        let resizeDetected = false;
         const dragHandler = drag().on('start', (event)=>{
             const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin, paneDomNode } = getStoreItems();
             node = nodeLookup.get(nodeId);
@@ -6503,7 +6571,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
             const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
             const change = {};
             const nodeOrigin = node.origin ?? storeNodeOrigin;
-            const { width, height, x, y } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio, nodeOrigin, parentExtent, childExtent);
+            const { width, height, x, y } = getDimensionsAfterResize(startValues, params.controlDirection, pointerPosition, params.boundaries, params.keepAspectRatio, nodeOrigin, parentExtent, childExtent);
             const isWidthChange = width !== prevWidth;
             const isHeightChange = height !== prevHeight;
             const isXPosChange = x !== prevX && isWidthChange;
@@ -6532,8 +6600,8 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
                 }
             }
             if (isWidthChange || isHeightChange) {
-                change.width = isWidthChange && (!resizeDirection || resizeDirection === 'horizontal') ? width : prevValues.width;
-                change.height = isHeightChange && (!resizeDirection || resizeDirection === 'vertical') ? height : prevValues.height;
+                change.width = isWidthChange && (!params.resizeDirection || params.resizeDirection === 'horizontal') ? width : prevValues.width;
+                change.height = isHeightChange && (!params.resizeDirection || params.resizeDirection === 'vertical') ? height : prevValues.height;
                 prevValues.width = change.width;
                 prevValues.height = change.height;
             }
@@ -6555,8 +6623,8 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
                 prevWidth,
                 height: prevValues.height,
                 prevHeight,
-                affectsX: controlDirection.affectsX,
-                affectsY: controlDirection.affectsY
+                affectsX: params.controlDirection.affectsX,
+                affectsY: params.controlDirection.affectsY
             });
             const nextValues = {
                 ...prevValues,
@@ -6566,15 +6634,20 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
             if (callResize === false) {
                 return;
             }
+            resizeDetected = true;
             onResize?.(event, nextValues);
             onChange(change, childChanges);
         }).on('end', (event)=>{
+            if (!resizeDetected) {
+                return;
+            }
             onResizeEnd?.(event, {
                 ...prevValues
             });
             onEnd?.({
                 ...prevValues
             });
+            resizeDetected = false;
         });
         selection.call(dragHandler);
     }
@@ -8195,7 +8268,11 @@ const selector$k = (s)=>!!s.panZoom;
                     deletedEdges: matchingEdges
                 };
             },
-            getIntersectingNodes: (nodeOrRect, partially = true, nodes)=>{
+            /**
+             * Partial is defined as "the 2 nodes/areas are intersecting partially".
+             * If a is contained in b or b is contained in a, they are both
+             * considered fully intersecting.
+             */ getIntersectingNodes: (nodeOrRect, partially = true, nodes)=>{
                 const isRect = isRectObject(nodeOrRect);
                 const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
                 const hasNodesOption = nodes !== undefined;
@@ -8221,7 +8298,7 @@ const selector$k = (s)=>!!s.panZoom;
                 }
                 const overlappingArea = getOverlappingArea(nodeRect, area);
                 const partiallyVisible = partially && overlappingArea > 0;
-                return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
+                return partiallyVisible || overlappingArea >= area.width * area.height || overlappingArea >= nodeRect.width * nodeRect.height;
             },
             updateNode,
             updateNodeData: (id, dataUpdate, options = {
@@ -8340,7 +8417,7 @@ const win$1 = typeof window !== 'undefined' ? window : undefined;
     const store = useStoreApi();
     React.useEffect(()=>{
         const updateDimensions = ()=>{
-            if (!domNode.current) {
+            if (!domNode.current || !(domNode.current.checkVisibility?.() ?? true)) {
                 return false;
             }
             const size = getDimensions$1(domNode.current);
@@ -8375,12 +8452,13 @@ const containerStyle = {
 };
 const selector$j = (s)=>({
         userSelectionActive: s.userSelectionActive,
-        lib: s.lib
+        lib: s.lib,
+        connectionInProgress: s.connection.inProgress
     });
 function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance }) {
     const store = useStoreApi();
     const zoomPane = React.useRef(null);
-    const { userSelectionActive, lib } = useStore(selector$j, shallow$1);
+    const { userSelectionActive, lib, connectionInProgress } = useStore(selector$j, shallow$1);
     const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode);
     const panZoom = React.useRef();
     useResizeHandler(zoomPane);
@@ -8458,7 +8536,8 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
             userSelectionActive,
             noWheelClassName,
             lib,
-            onTransformChange
+            onTransformChange,
+            connectionInProgress
         });
     }, [
         onPaneContextMenu,
@@ -8475,7 +8554,8 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
         userSelectionActive,
         noWheelClassName,
         lib,
-        onTransformChange
+        onTransformChange,
+        connectionInProgress
     ]);
     return jsxRuntime.jsx("div", {
         className: "react-flow__renderer",
@@ -8549,12 +8629,25 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
         onPaneContextMenu?.(event);
     };
     const onWheel = onPaneScroll ? (event)=>onPaneScroll(event) : undefined;
-    const onPointerDown = (event)=>{
+    const onClickCapture = (event)=>{
+        const isSelectionOnDragActive = selectionOnDrag && container.current === event.target || !selectionOnDrag || selectionKeyPressed;
+        if (!isSelectionOnDragActive) {
+            return;
+        }
+        event.stopPropagation();
+    };
+    // 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)=>{
         const { resetSelectedElements, domNode } = store.getState();
         containerBounds.current = domNode?.getBoundingClientRect();
-        if (!elementsSelectable || !isSelecting || event.button !== 0 || event.target !== container.current || !containerBounds.current) {
+        const isNoKeyEvent = event.target !== container.current && !!event.target.closest('.nokey');
+        const isSelectionActive = selectionOnDrag && container.current === event.target || !selectionOnDrag || selectionKeyPressed;
+        if (!elementsSelectable || !isSelecting || event.button !== 0 || !containerBounds.current || isNoKeyEvent || !isSelectionActive || !event.isPrimary) {
             return;
         }
+        event.stopPropagation();
+        event.preventDefault();
         event.target?.setPointerCapture?.(event.pointerId);
         selectionStarted.current = true;
         selectionInProgress.current = false;
@@ -8658,9 +8751,10 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
         onContextMenu: wrapHandler(onContextMenu, container),
         onWheel: wrapHandler(onWheel, container),
         onPointerEnter: hasActiveSelection ? undefined : onPaneMouseEnter,
-        onPointerDown: hasActiveSelection ? onPointerDown : onPaneMouseMove,
         onPointerMove: hasActiveSelection ? onPointerMove : onPaneMouseMove,
         onPointerUp: hasActiveSelection ? onPointerUp : undefined,
+        onPointerDownCapture: hasActiveSelection ? onPointerDownCapture : undefined,
+        onClickCapture: hasActiveSelection ? onClickCapture : undefined,
         onPointerLeave: onPaneMouseLeave,
         ref: container,
         style: containerStyle,
@@ -9549,6 +9643,7 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
         })
     });
 }
+var NodeWrapper$1 = React.memo(NodeWrapper);
 const selector$b = (s)=>({
         nodesDraggable: s.nodesDraggable,
         nodesConnectable: s.nodesConnectable,
@@ -9588,7 +9683,7 @@ function NodeRendererComponent(props) {
              *   moved into `NodeComponentWrapper`. This ensures they are
              *   memorized – so if `NodeRenderer` *has* to rerender, it only
              *   needs to regenerate the list of nodes, nothing else.
-             */ jsxRuntime.jsx(NodeWrapper, {
+             */ jsxRuntime.jsx(NodeWrapper$1, {
                 id: nodeId,
                 nodeTypes: props.nodeTypes,
                 nodeExtent: props.nodeExtent,
@@ -10582,6 +10677,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesReconnectable, elementsSelectabl
         })
     });
 }
+var EdgeWrapper$1 = React.memo(EdgeWrapper);
 const selector$a = (s)=>({
         edgesFocusable: s.edgesFocusable,
         edgesReconnectable: s.edgesReconnectable,
@@ -10600,7 +10696,7 @@ function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements,
                 rfId: rfId
             }),
             edgeIds.map((id)=>{
-                return jsxRuntime.jsx(EdgeWrapper, {
+                return jsxRuntime.jsx(EdgeWrapper$1, {
                     id: id,
                     edgesFocusable: edgesFocusable,
                     edgesReconnectable: edgesReconnectable,
@@ -10985,8 +11081,8 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
     }
     return {
         rfId: '1',
-        width: 0,
-        height: 0,
+        width: width ?? 0,
+        height: height ?? 0,
         transform,
         nodes: storeNodes,
         nodesInitialized,
@@ -12600,7 +12696,7 @@ var css_248z = "/* this gets exported as style.css and can be used for the defau
 styleInject(css_248z);
 
 /**
- * @license lucide-react v0.542.0 - ISC
+ * @license lucide-react v0.546.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -12622,7 +12718,7 @@ const hasA11yProp = (props)=>{
 };
 
 /**
- * @license lucide-react v0.542.0 - ISC
+ * @license lucide-react v0.546.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -19632,7 +19728,7 @@ var correctTargets = function(parent, targets) {
 };
 
 var DIALOG_NAME = "Dialog";
-var [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
+var [createDialogContext] = createContextScope(DIALOG_NAME);
 var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
 var Dialog = (props)=>{
     const { __scopeDialog, children, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
@@ -23372,7 +23468,7 @@ var SELECTION_KEYS = [
 ];
 var SELECT_NAME = "Select";
 var [Collection, useCollection, createCollectionScope] = createCollection(SELECT_NAME);
-var [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME, [
+var [createSelectContext] = createContextScope(SELECT_NAME, [
     createCollectionScope,
     createPopperScope
 ]);
@@ -24888,7 +24984,7 @@ const FileSelector = ({ files, currentFile, onFileSelect, onRefresh, loading = f
 };
 
 var CHECKBOX_NAME = "Checkbox";
-var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
+var [createCheckboxContext] = createContextScope(CHECKBOX_NAME);
 var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
 function CheckboxProvider(props) {
     const { __scopeCheckbox, checked: checkedProp, children, defaultChecked, disabled, form, name, onCheckedChange, required, value = "on", // @ts-expect-error

package/dist/esm/index.js

@@ -3338,27 +3338,25 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [
  * Determines a bounding box that contains all given nodes in an array
  * @internal
  */ const getInternalNodesBounds = (nodeLookup, params = {})=>{
-    if (nodeLookup.size === 0) {
-        return {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
-        };
-    }
     let box = {
         x: Infinity,
         y: Infinity,
         x2: -Infinity,
         y2: -Infinity
     };
+    let hasVisibleNodes = false;
     nodeLookup.forEach((node)=>{
         if (params.filter === undefined || params.filter(node)) {
-            const nodeBox = nodeToBox(node);
-            box = getBoundsOfBoxes(box, nodeBox);
+            box = getBoundsOfBoxes(box, nodeToBox(node));
+            hasVisibleNodes = true;
         }
     });
-    return boxToRect(box);
+    return hasVisibleNodes ? boxToRect(box) : {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+    };
 };
 const getNodesInside = (nodes, rect, [tx, ty, tScale] = [
     0,
@@ -4103,7 +4101,7 @@ function getEdgeCenter({ sourceX, sourceY, targetX, targetY }) {
         return zIndex;
     }
     const edgeZ = elevateOnSelect && selected ? 1000 : 0;
-    const nodeZ = Math.max(sourceNode.parentId ? sourceNode.internals.z : 0, targetNode.parentId ? targetNode.internals.z : 0);
+    const nodeZ = Math.max(sourceNode.parentId || elevateOnSelect && sourceNode.selected ? sourceNode.internals.z : 0, targetNode.parentId || elevateOnSelect && targetNode.selected ? targetNode.internals.z : 0);
     return edgeZ + nodeZ;
 }
 function isEdgeVisible({ sourceNode, targetNode, width, height, transform }) {
@@ -4619,6 +4617,8 @@ function createMarkerIds(edges, { id, defaultColor, defaultMarkerStart, defaultM
         return markers;
     }, []).sort((a, b)=>a.id.localeCompare(b.id));
 }
+const SELECTED_NODE_Z = 1000;
+const ROOT_PARENT_Z_INCREMENT = 10;
 const defaultOptions = {
     nodeOrigin: [
         0,
@@ -4657,11 +4657,42 @@ function updateAbsolutePositions(nodeLookup, parentLookup, options) {
         }
     }
 }
+function parseHandles(userNode, internalNode) {
+    if (!userNode.handles) {
+        return !userNode.measured ? undefined : internalNode?.internals.handleBounds;
+    }
+    const source = [];
+    const target = [];
+    for (const handle of userNode.handles){
+        const handleBounds = {
+            id: handle.id,
+            width: handle.width ?? 1,
+            height: handle.height ?? 1,
+            nodeId: userNode.id,
+            x: handle.x,
+            y: handle.y,
+            position: handle.position,
+            type: handle.type
+        };
+        if (handle.type === 'source') {
+            source.push(handleBounds);
+        } else if (handle.type === 'target') {
+            target.push(handleBounds);
+        }
+    }
+    return {
+        source,
+        target
+    };
+}
 function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
     const _options = mergeObjects(adoptUserNodesDefaultOptions, options);
+    let rootParentIndex = {
+        i: -1
+    };
     let nodesInitialized = nodes.length > 0;
     const tmpLookup = new Map(nodeLookup);
-    const selectedNodeZ = _options?.elevateNodesOnSelect ? 1000 : 0;
+    const selectedNodeZ = _options?.elevateNodesOnSelect ? SELECTED_NODE_Z : 0;
     nodeLookup.clear();
     parentLookup.clear();
     for (const userNode of nodes){
@@ -4682,7 +4713,7 @@ function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
                 internals: {
                     positionAbsolute: clampedPosition,
                     // if user re-initializes the node or removes `measured` for whatever reason, we reset the handleBounds so that the node gets re-measured
-                    handleBounds: !userNode.measured ? undefined : internalNode?.internals.handleBounds,
+                    handleBounds: parseHandles(userNode, internalNode),
                     z: calculateZ(userNode, selectedNodeZ),
                     userNode
                 }
@@ -4693,7 +4724,7 @@ function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
             nodesInitialized = false;
         }
         if (userNode.parentId) {
-            updateChildNode(internalNode, nodeLookup, parentLookup, options);
+            updateChildNode(internalNode, nodeLookup, parentLookup, options, rootParentIndex);
         }
     }
     return nodesInitialized;
@@ -4716,7 +4747,7 @@ function updateParentLookup(node, parentLookup) {
 }
 /**
  * Updates positionAbsolute and zIndex of a child node and the parentLookup.
- */ function updateChildNode(node, nodeLookup, parentLookup, options) {
+ */ function updateChildNode(node, nodeLookup, parentLookup, options, rootParentIndex) {
     const { elevateNodesOnSelect, nodeOrigin, nodeExtent } = mergeObjects(defaultOptions, options);
     const parentId = node.parentId;
     const parentNode = nodeLookup.get(parentId);
@@ -4725,7 +4756,16 @@ function updateParentLookup(node, parentLookup) {
         return;
     }
     updateParentLookup(node, parentLookup);
-    const selectedNodeZ = elevateNodesOnSelect ? 1000 : 0;
+    // We just want to set the rootParentIndex for the first child
+    if (rootParentIndex && !parentNode.parentId && parentNode.internals.rootParentIndex === undefined) {
+        parentNode.internals.rootParentIndex = ++rootParentIndex.i;
+        parentNode.internals.z = parentNode.internals.z + rootParentIndex.i * ROOT_PARENT_Z_INCREMENT;
+    }
+    // But we need to update rootParentIndex.i also when parent has not been updated
+    if (rootParentIndex && parentNode.internals.rootParentIndex !== undefined) {
+        rootParentIndex.i = parentNode.internals.rootParentIndex;
+    }
+    const selectedNodeZ = elevateNodesOnSelect ? SELECTED_NODE_Z : 0;
     const { x, y, z } = calculateChildXYZ(node, parentNode, nodeOrigin, nodeExtent, selectedNodeZ);
     const { positionAbsolute } = node.internals;
     const positionChanged = x !== positionAbsolute.x || y !== positionAbsolute.y;
@@ -5299,8 +5339,10 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
                 autoPan();
             }
             if (!dragStarted) {
-                const x = pointerPos.xSnapped - (lastPos.x ?? 0);
-                const y = pointerPos.ySnapped - (lastPos.y ?? 0);
+                // Calculate distance in client coordinates for consistent drag threshold behavior across zoom levels
+                const currentMousePosition = getEventPosition(event.sourceEvent, containerBounds);
+                const x = currentMousePosition.x - mousePosition.x;
+                const y = currentMousePosition.y - mousePosition.y;
                 const distance = Math.sqrt(x * x + y * y);
                 if (distance > nodeDragThreshold) {
                     startDrag(event);
@@ -5584,6 +5626,10 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
         previousConnection = newConnection;
     }
     function onPointerUp(event) {
+        // Prevent multi-touch aborting connection
+        if ('touches' in event && event.touches.length > 0) {
+            return;
+        }
         if (connectionStarted) {
             if ((closestHandle || resultHandleDomNode) && connection && isValid) {
                 onConnect?.(connection);
@@ -5741,8 +5787,7 @@ function XYMinimap({ domNode, panZoom, getTransform, getViewScale }) {
         pointer
     };
 }
-/* eslint-disable @typescript-eslint/no-explicit-any */ const viewChanged = (prevViewport, eventViewport)=>prevViewport.x !== eventViewport.x || prevViewport.y !== eventViewport.y || prevViewport.zoom !== eventViewport.k;
-const transformToViewport = (transform)=>({
+/* eslint-disable @typescript-eslint/no-explicit-any */ const transformToViewport = (transform)=>({
         x: transform.x,
         y: transform.y,
         zoom: transform.k
@@ -5766,6 +5811,9 @@ const wheelDelta = (event)=>{
 function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection, d3Zoom, panOnScrollMode, panOnScrollSpeed, zoomOnPinch, onPanZoomStart, onPanZoom, onPanZoomEnd }) {
     return (event)=>{
         if (isWrappedWithClass(event, noWheelClassName)) {
+            if (event.ctrlKey) {
+                event.preventDefault(); // stop native page zoom for pinch zooming
+            }
             return false;
         }
         event.preventDefault();
@@ -5804,8 +5852,7 @@ function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection
          */ if (!zoomPanValues.isPanScrolling) {
             zoomPanValues.isPanScrolling = true;
             onPanZoomStart?.(event, nextViewport);
-        }
-        if (zoomPanValues.isPanScrolling) {
+        } else {
             onPanZoom?.(event, nextViewport);
             zoomPanValues.panScrollTimeout = setTimeout(()=>{
                 onPanZoomEnd?.(event, nextViewport);
@@ -5875,7 +5922,7 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
         }
         zoomPanValues.usedRightMouseButton = false;
         onDraggingChange(false);
-        if (onPanZoomEnd && viewChanged(zoomPanValues.prevViewport, event.transform)) {
+        if (onPanZoomEnd) {
             const viewport = transformToViewport(event.transform);
             zoomPanValues.prevViewport = viewport;
             clearTimeout(zoomPanValues.timerId);
@@ -5886,10 +5933,11 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
         }
     };
 }
-/* eslint-disable @typescript-eslint/no-explicit-any */ function createFilter({ zoomActivationKeyPressed, zoomOnScroll, zoomOnPinch, panOnDrag, panOnScroll, zoomOnDoubleClick, userSelectionActive, noWheelClassName, noPanClassName, lib }) {
+/* eslint-disable @typescript-eslint/no-explicit-any */ function createFilter({ zoomActivationKeyPressed, zoomOnScroll, zoomOnPinch, panOnDrag, panOnScroll, zoomOnDoubleClick, userSelectionActive, noWheelClassName, noPanClassName, lib, connectionInProgress }) {
     return (event)=>{
         const zoomScroll = zoomActivationKeyPressed || zoomOnScroll;
         const pinchZoom = zoomOnPinch && event.ctrlKey;
+        const isWheelEvent = event.type === 'wheel';
         if (event.button === 1 && event.type === 'mousedown' && (isWrappedWithClass(event, `${lib}-flow__node`) || isWrappedWithClass(event, `${lib}-flow__edge`))) {
             return true;
         }
@@ -5901,15 +5949,19 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
         if (userSelectionActive) {
             return false;
         }
+        // we want to disable pinch-zooming while making a connection
+        if (connectionInProgress && !isWheelEvent) {
+            return false;
+        }
         // if the target element is inside an element with the nowheel class, we prevent zooming
-        if (isWrappedWithClass(event, noWheelClassName) && event.type === 'wheel') {
+        if (isWrappedWithClass(event, noWheelClassName) && isWheelEvent) {
             return false;
         }
         // if the target element is inside an element with the nopan class, we prevent panning
-        if (isWrappedWithClass(event, noPanClassName) && (event.type !== 'wheel' || panOnScroll && event.type === 'wheel' && !zoomActivationKeyPressed)) {
+        if (isWrappedWithClass(event, noPanClassName) && (!isWheelEvent || panOnScroll && isWheelEvent && !zoomActivationKeyPressed)) {
             return false;
         }
-        if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') {
+        if (!zoomOnPinch && event.ctrlKey && isWheelEvent) {
             return false;
         }
         if (!zoomOnPinch && event.type === 'touchstart' && event.touches?.length > 1) {
@@ -5917,7 +5969,7 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
             return false;
         }
         // when there is no scroll handling enabled, we prevent all wheel events
-        if (!zoomScroll && !panOnScroll && !pinchZoom && event.type === 'wheel') {
+        if (!zoomScroll && !panOnScroll && !pinchZoom && isWheelEvent) {
             return false;
         }
         // if the pane is not movable, we prevent dragging it with mousestart or touchstart
@@ -5931,7 +5983,7 @@ function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDrag
         // We only allow right clicks if pan on drag is set to right click
         const buttonAllowed = Array.isArray(panOnDrag) && panOnDrag.includes(event.button) || !event.button || event.button <= 1;
         // default filter for d3-zoom
-        return (!event.ctrlKey || event.type === 'wheel') && buttonAllowed;
+        return (!event.ctrlKey || isWheelEvent) && buttonAllowed;
     };
 }
 function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExtent, viewport, onPanZoom, onPanZoomStart, onPanZoomEnd, onDraggingChange }) {
@@ -5939,10 +5991,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
         isZoomingOrPanning: false,
         usedRightMouseButton: false,
         prevViewport: {
-            x: 0,
-            y: 0,
-            zoom: 0
-        },
+            },
         mouseButton: 0,
         timerId: undefined,
         panScrollTimeout: undefined,
@@ -5980,7 +6029,7 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
         return Promise.resolve(false);
     }
     // public functions
-    function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib, onTransformChange }) {
+    function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib, onTransformChange, connectionInProgress }) {
         if (userSelectionActive && !zoomPanValues.isZoomingOrPanning) {
             destroy();
         }
@@ -6042,7 +6091,8 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
             userSelectionActive,
             noPanClassName,
             noWheelClassName,
-            lib
+            lib,
+            connectionInProgress
         });
         d3ZoomInstance.filter(filter);
         /*
@@ -6388,6 +6438,17 @@ function nodeToChildExtent(child, parent, nodeOrigin) {
 }
 function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
     const selection = select(domNode);
+    let params = {
+        controlDirection: getControlDirection('bottom-right'),
+        boundaries: {
+            minWidth: 0,
+            minHeight: 0,
+            maxWidth: Number.MAX_VALUE,
+            maxHeight: Number.MAX_VALUE
+        },
+        resizeDirection: undefined,
+        keepAspectRatio: false
+    };
     function update({ controlPosition, boundaries, keepAspectRatio, resizeDirection, onResizeStart, onResize, onResizeEnd, shouldResize }) {
         let prevValues = {
             ...initPrevValues$1
@@ -6395,13 +6456,20 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
         let startValues = {
             ...initStartValues
         };
-        const controlDirection = getControlDirection(controlPosition);
+        params = {
+            boundaries,
+            resizeDirection,
+            keepAspectRatio,
+            controlDirection: getControlDirection(controlPosition)
+        };
         let node = undefined;
         let containerBounds = null;
         let childNodes = [];
         let parentNode = undefined; // Needed to fix expandParent
         let parentExtent = undefined;
         let childExtent = undefined;
+        // we only want to trigger onResizeEnd if onResize was actually called
+        let resizeDetected = false;
         const dragHandler = drag().on('start', (event)=>{
             const { nodeLookup, transform, snapGrid, snapToGrid, nodeOrigin, paneDomNode } = getStoreItems();
             node = nodeLookup.get(nodeId);
@@ -6483,7 +6551,7 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
             const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues;
             const change = {};
             const nodeOrigin = node.origin ?? storeNodeOrigin;
-            const { width, height, x, y } = getDimensionsAfterResize(startValues, controlDirection, pointerPosition, boundaries, keepAspectRatio, nodeOrigin, parentExtent, childExtent);
+            const { width, height, x, y } = getDimensionsAfterResize(startValues, params.controlDirection, pointerPosition, params.boundaries, params.keepAspectRatio, nodeOrigin, parentExtent, childExtent);
             const isWidthChange = width !== prevWidth;
             const isHeightChange = height !== prevHeight;
             const isXPosChange = x !== prevX && isWidthChange;
@@ -6512,8 +6580,8 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
                 }
             }
             if (isWidthChange || isHeightChange) {
-                change.width = isWidthChange && (!resizeDirection || resizeDirection === 'horizontal') ? width : prevValues.width;
-                change.height = isHeightChange && (!resizeDirection || resizeDirection === 'vertical') ? height : prevValues.height;
+                change.width = isWidthChange && (!params.resizeDirection || params.resizeDirection === 'horizontal') ? width : prevValues.width;
+                change.height = isHeightChange && (!params.resizeDirection || params.resizeDirection === 'vertical') ? height : prevValues.height;
                 prevValues.width = change.width;
                 prevValues.height = change.height;
             }
@@ -6535,8 +6603,8 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
                 prevWidth,
                 height: prevValues.height,
                 prevHeight,
-                affectsX: controlDirection.affectsX,
-                affectsY: controlDirection.affectsY
+                affectsX: params.controlDirection.affectsX,
+                affectsY: params.controlDirection.affectsY
             });
             const nextValues = {
                 ...prevValues,
@@ -6546,15 +6614,20 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
             if (callResize === false) {
                 return;
             }
+            resizeDetected = true;
             onResize?.(event, nextValues);
             onChange(change, childChanges);
         }).on('end', (event)=>{
+            if (!resizeDetected) {
+                return;
+            }
             onResizeEnd?.(event, {
                 ...prevValues
             });
             onEnd?.({
                 ...prevValues
             });
+            resizeDetected = false;
         });
         selection.call(dragHandler);
     }
@@ -8175,7 +8248,11 @@ const selector$k = (s)=>!!s.panZoom;
                     deletedEdges: matchingEdges
                 };
             },
-            getIntersectingNodes: (nodeOrRect, partially = true, nodes)=>{
+            /**
+             * Partial is defined as "the 2 nodes/areas are intersecting partially".
+             * If a is contained in b or b is contained in a, they are both
+             * considered fully intersecting.
+             */ getIntersectingNodes: (nodeOrRect, partially = true, nodes)=>{
                 const isRect = isRectObject(nodeOrRect);
                 const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
                 const hasNodesOption = nodes !== undefined;
@@ -8201,7 +8278,7 @@ const selector$k = (s)=>!!s.panZoom;
                 }
                 const overlappingArea = getOverlappingArea(nodeRect, area);
                 const partiallyVisible = partially && overlappingArea > 0;
-                return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
+                return partiallyVisible || overlappingArea >= area.width * area.height || overlappingArea >= nodeRect.width * nodeRect.height;
             },
             updateNode,
             updateNodeData: (id, dataUpdate, options = {
@@ -8320,7 +8397,7 @@ const win$1 = typeof window !== 'undefined' ? window : undefined;
     const store = useStoreApi();
     useEffect(()=>{
         const updateDimensions = ()=>{
-            if (!domNode.current) {
+            if (!domNode.current || !(domNode.current.checkVisibility?.() ?? true)) {
                 return false;
             }
             const size = getDimensions$1(domNode.current);
@@ -8355,12 +8432,13 @@ const containerStyle = {
 };
 const selector$j = (s)=>({
         userSelectionActive: s.userSelectionActive,
-        lib: s.lib
+        lib: s.lib,
+        connectionInProgress: s.connection.inProgress
     });
 function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true, panOnScroll = false, panOnScrollSpeed = 0.5, panOnScrollMode = PanOnScrollMode.Free, zoomOnDoubleClick = true, panOnDrag = true, defaultViewport, translateExtent, minZoom, maxZoom, zoomActivationKeyCode, preventScrolling = true, children, noWheelClassName, noPanClassName, onViewportChange, isControlledViewport, paneClickDistance }) {
     const store = useStoreApi();
     const zoomPane = useRef(null);
-    const { userSelectionActive, lib } = useStore(selector$j, shallow$1);
+    const { userSelectionActive, lib, connectionInProgress } = useStore(selector$j, shallow$1);
     const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode);
     const panZoom = useRef();
     useResizeHandler(zoomPane);
@@ -8438,7 +8516,8 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
             userSelectionActive,
             noWheelClassName,
             lib,
-            onTransformChange
+            onTransformChange,
+            connectionInProgress
         });
     }, [
         onPaneContextMenu,
@@ -8455,7 +8534,8 @@ function ZoomPane({ onPaneContextMenu, zoomOnScroll = true, zoomOnPinch = true,
         userSelectionActive,
         noWheelClassName,
         lib,
-        onTransformChange
+        onTransformChange,
+        connectionInProgress
     ]);
     return jsx("div", {
         className: "react-flow__renderer",
@@ -8529,12 +8609,25 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
         onPaneContextMenu?.(event);
     };
     const onWheel = onPaneScroll ? (event)=>onPaneScroll(event) : undefined;
-    const onPointerDown = (event)=>{
+    const onClickCapture = (event)=>{
+        const isSelectionOnDragActive = selectionOnDrag && container.current === event.target || !selectionOnDrag || selectionKeyPressed;
+        if (!isSelectionOnDragActive) {
+            return;
+        }
+        event.stopPropagation();
+    };
+    // 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)=>{
         const { resetSelectedElements, domNode } = store.getState();
         containerBounds.current = domNode?.getBoundingClientRect();
-        if (!elementsSelectable || !isSelecting || event.button !== 0 || event.target !== container.current || !containerBounds.current) {
+        const isNoKeyEvent = event.target !== container.current && !!event.target.closest('.nokey');
+        const isSelectionActive = selectionOnDrag && container.current === event.target || !selectionOnDrag || selectionKeyPressed;
+        if (!elementsSelectable || !isSelecting || event.button !== 0 || !containerBounds.current || isNoKeyEvent || !isSelectionActive || !event.isPrimary) {
             return;
         }
+        event.stopPropagation();
+        event.preventDefault();
         event.target?.setPointerCapture?.(event.pointerId);
         selectionStarted.current = true;
         selectionInProgress.current = false;
@@ -8638,9 +8731,10 @@ function Pane({ isSelecting, selectionKeyPressed, selectionMode = SelectionMode.
         onContextMenu: wrapHandler(onContextMenu, container),
         onWheel: wrapHandler(onWheel, container),
         onPointerEnter: hasActiveSelection ? undefined : onPaneMouseEnter,
-        onPointerDown: hasActiveSelection ? onPointerDown : onPaneMouseMove,
         onPointerMove: hasActiveSelection ? onPointerMove : onPaneMouseMove,
         onPointerUp: hasActiveSelection ? onPointerUp : undefined,
+        onPointerDownCapture: hasActiveSelection ? onPointerDownCapture : undefined,
+        onClickCapture: hasActiveSelection ? onClickCapture : undefined,
         onPointerLeave: onPaneMouseLeave,
         ref: container,
         style: containerStyle,
@@ -9529,6 +9623,7 @@ function NodeWrapper({ id, onClick, onMouseEnter, onMouseMove, onMouseLeave, onC
         })
     });
 }
+var NodeWrapper$1 = memo(NodeWrapper);
 const selector$b = (s)=>({
         nodesDraggable: s.nodesDraggable,
         nodesConnectable: s.nodesConnectable,
@@ -9568,7 +9663,7 @@ function NodeRendererComponent(props) {
              *   moved into `NodeComponentWrapper`. This ensures they are
              *   memorized – so if `NodeRenderer` *has* to rerender, it only
              *   needs to regenerate the list of nodes, nothing else.
-             */ jsx(NodeWrapper, {
+             */ jsx(NodeWrapper$1, {
                 id: nodeId,
                 nodeTypes: props.nodeTypes,
                 nodeExtent: props.nodeExtent,
@@ -10562,6 +10657,7 @@ function EdgeWrapper({ id, edgesFocusable, edgesReconnectable, elementsSelectabl
         })
     });
 }
+var EdgeWrapper$1 = memo(EdgeWrapper);
 const selector$a = (s)=>({
         edgesFocusable: s.edgesFocusable,
         edgesReconnectable: s.edgesReconnectable,
@@ -10580,7 +10676,7 @@ function EdgeRendererComponent({ defaultMarkerColor, onlyRenderVisibleElements,
                 rfId: rfId
             }),
             edgeIds.map((id)=>{
-                return jsx(EdgeWrapper, {
+                return jsx(EdgeWrapper$1, {
                     id: id,
                     edgesFocusable: edgesFocusable,
                     edgesReconnectable: edgesReconnectable,
@@ -10965,8 +11061,8 @@ const getInitialState = ({ nodes, edges, defaultNodes, defaultEdges, width, heig
     }
     return {
         rfId: '1',
-        width: 0,
-        height: 0,
+        width: width ?? 0,
+        height: height ?? 0,
         transform,
         nodes: storeNodes,
         nodesInitialized,
@@ -12580,7 +12676,7 @@ var css_248z = "/* this gets exported as style.css and can be used for the defau
 styleInject(css_248z);
 
 /**
- * @license lucide-react v0.542.0 - ISC
+ * @license lucide-react v0.546.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -12602,7 +12698,7 @@ const hasA11yProp = (props)=>{
 };
 
 /**
- * @license lucide-react v0.542.0 - ISC
+ * @license lucide-react v0.546.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -19612,7 +19708,7 @@ var correctTargets = function(parent, targets) {
 };
 
 var DIALOG_NAME = "Dialog";
-var [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
+var [createDialogContext] = createContextScope(DIALOG_NAME);
 var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
 var Dialog = (props)=>{
     const { __scopeDialog, children, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
@@ -23352,7 +23448,7 @@ var SELECTION_KEYS = [
 ];
 var SELECT_NAME = "Select";
 var [Collection, useCollection, createCollectionScope] = createCollection(SELECT_NAME);
-var [createSelectContext, createSelectScope] = createContextScope(SELECT_NAME, [
+var [createSelectContext] = createContextScope(SELECT_NAME, [
     createCollectionScope,
     createPopperScope
 ]);
@@ -24868,7 +24964,7 @@ const FileSelector = ({ files, currentFile, onFileSelect, onRefresh, loading = f
 };
 
 var CHECKBOX_NAME = "Checkbox";
-var [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
+var [createCheckboxContext] = createContextScope(CHECKBOX_NAME);
 var [CheckboxProviderImpl, useCheckboxContext] = createCheckboxContext(CHECKBOX_NAME);
 function CheckboxProvider(props) {
     const { __scopeCheckbox, checked: checkedProp, children, defaultChecked, disabled, form, name, onCheckedChange, required, value = "on", // @ts-expect-error

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@railtownai/railtracks-visualizer",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "license": "MIT",
   "author": "Railtown AI",
   "description": "A visualizer for RailTracks agentic flows",
@@ -37,15 +37,15 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@ant-design/plots": "2.6.4",
+    "@ant-design/plots": "2.6.5",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@radix-ui/react-checkbox": "1.3.3",
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-select": "2.2.6",
-    "@railtownai/railtracks-timeline": "latest",
-    "@xyflow/react": "12.8.4",
-    "lucide-react": "0.542.0",
+    "@railtownai/railtracks-timeline": "0.0.13",
+    "@xyflow/react": "12.9.0",
+    "lucide-react": "0.546.0",
     "moment": "2.30.1",
     "react-countup": "6.5.3",
     "react-textarea-autosize": "8.5.9",
@@ -68,44 +68,44 @@
     "storybook:preview": "npx http-server ./storybook-static",
     "test:ui": "vitest --ui",
     "test": "vitest run --silent",
-    "up": "ncu -u -x react -x react-dom -x @types/react -x @types/react-dom && npm install"
+    "up": "ncu -u -x react -x react-dom -x @types/react -x @types/react-dom"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "4.1.1",
-    "@rollup/plugin-commonjs": "28.0.6",
+    "@rollup/plugin-commonjs": "28.0.8",
     "@rollup/plugin-json": "6.1.0",
-    "@rollup/plugin-node-resolve": "16.0.1",
+    "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/plugin-swc": "0.4.0",
     "@rollup/plugin-terser": "0.4.4",
-    "@storybook/addon-a11y": "9.1.10",
-    "@storybook/addon-docs": "9.1.10",
-    "@storybook/addon-onboarding": "9.1.10",
-    "@storybook/addon-vitest": "9.1.10",
-    "@storybook/react-vite": "9.1.10",
-    "@testing-library/jest-dom": "6.8.0",
+    "@storybook/addon-a11y": "9.1.13",
+    "@storybook/addon-docs": "9.1.13",
+    "@storybook/addon-onboarding": "9.1.13",
+    "@storybook/addon-vitest": "9.1.13",
+    "@storybook/react-vite": "9.1.13",
+    "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
-    "@types/node": "24.3.1",
+    "@types/node": "24.9.0",
     "@types/react": "18.2.79",
     "@types/react-dom": "18.2.25",
-    "@vitejs/plugin-react-swc": "4.0.1",
+    "@vitejs/plugin-react-swc": "4.1.0",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "3.2.4",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
-    "cross-env": "^10.0.0",
+    "cross-env": "^10.1.0",
     "gh-pages": "6.3.0",
-    "jsdom": "26.1.0",
+    "jsdom": "27.0.1",
     "license-checker": "25.0.1",
-    "npm-check-updates": "18.1.0",
-    "playwright": "^1.55.0",
+    "npm-check-updates": "19.1.1",
+    "playwright": "^1.56.1",
     "prettier": "3.6.2",
-    "rollup": "4.50.1",
+    "rollup": "4.52.5",
     "rollup-plugin-postcss": "4.0.2",
-    "storybook": "9.1.10",
+    "storybook": "9.1.13",
     "tslib": "2.8.1",
-    "typescript": "5.9.2",
-    "vite": "7.1.5",
+    "typescript": "5.9.3",
+    "vite": "7.1.11",
     "vitest": "3.2.4"
   },
   "prettier": {