@dschz/solid-flow 0.1.4 → 0.2.0

package/dist/index/index.js

@@ -1,7 +1,7 @@
-import { delegateEvents, createComponent, Portal, template, spread, mergeProps as mergeProps$1, insert, effect, setAttribute, className, style, use, Dynamic, memo, addEventListener } from 'solid-js/web';
-import { createContext, Show, mergeProps, splitProps, createSignal, createMemo, For, createEffect, onCleanup, onMount, batch, Index, useContext, createComputed, mapArray, untrack } from 'solid-js';
+import { delegateEvents, createComponent, Portal, template, spread, mergeProps as mergeProps$1, insert, effect, setAttribute, className, style, use, Dynamic, addEventListener, memo } from 'solid-js/web';
+import { createContext, Show, mergeProps, splitProps, createSignal, createMemo, For, createEffect, onCleanup, onMount, batch, Index, useContext, untrack, createComputed, mapArray } from 'solid-js';
 import clsx, { clsx as clsx$1 } from 'clsx';
-import { infiniteExtent, getMarkerId, getSmoothStepPath, getStraightPath, createMarkerIds, nodeHasDimensions, XYPanZoom, getConnectionStatus, XYMinimap, getNodeDimensions, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, areConnectionMapsEqual, shallowNodeData, getNodesBounds, rendererPointToPoint, pointToRendererPoint, getElementsToRemove, isRectObject, getOverlappingArea, nodeToRect, getViewportForBounds, isNumeric, devWarn, isMacOs, isNodeBase, evaluateAbsolutePosition, isEdgeBase, getBezierPath, XYHandle, elementSelectionKeys, getNodesInside, isInputDOMNode, getEventPosition, getHostForElement, getNodeToolbarTransform, getInternalNodesBounds, getBoundsOfRects, XYDrag, SelectionMode, handleConnectionChange, initialConnection, clampPosition, getNodePositionWithOrigin, isCoordinateExtent, isEdgeVisible, getEdgePosition, getElevatedEdgeZIndex, mergeAriaLabelConfig, panBy, snapPosition, calculateNodePosition, fitViewport, addEdge, updateNodeInternals, updateAbsolutePositions, clampPositionToParent } from '@xyflow/system';
+import { infiniteExtent, getMarkerId, getSmoothStepPath, getStraightPath, createMarkerIds, nodeHasDimensions, XYPanZoom, getConnectionStatus, getEdgeToolbarTransform, XYMinimap, getNodeDimensions, XYResizer, XY_RESIZER_LINE_POSITIONS, XY_RESIZER_HANDLE_POSITIONS, areConnectionMapsEqual, shallowNodeData, getNodesBounds, rendererPointToPoint, pointToRendererPoint, getElementsToRemove, isRectObject, getOverlappingArea, nodeToRect, getViewportForBounds, isNumeric, createDevWarn, isMacOs, isNodeBase, evaluateAbsolutePosition, isEdgeBase, getBezierPath, XYHandle, elementSelectionKeys, getNodesInside, isInputDOMNode, getEventPosition, getHostForElement, getNodeToolbarTransform, getInternalNodesBounds, getBoundsOfRects, XYDrag, handleConnectionChange, initialConnection, clampPosition, getNodePositionWithOrigin, isCoordinateExtent, isEdgeVisible, getEdgePosition, getElevatedEdgeZIndex, calcAutoPan, SelectionMode, mergeAriaLabelConfig, panBy, snapPosition, calculateNodePosition, fitViewport, addEdge, updateNodeInternals, updateAbsolutePositions, clampPositionToParent } from '@xyflow/system';
 export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, addEdge, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds } from '@xyflow/system';
 import { produce, unwrap, createStore } from 'solid-js/store';
 import { createResizeObserver } from '@solid-primitives/resize-observer';
@@ -1490,16 +1490,26 @@ var Pane = (props) => {
   } = useInternalSolidFlow();
   let container;
   let containerBounds = null;
+  let connectionEndedOnPane = false;
   let selectionInProgress = false;
   let selectedNodeIds = /* @__PURE__ */ new Set();
   let selectedEdgeIds = /* @__PURE__ */ new Set();
+  let autoPanId = 0;
+  let position = {
+    x: 0,
+    y: 0
+  };
+  let autoPanStarted = false;
+  const autoPanOnSelection = () => props.autoPanOnSelection ?? true;
+  const paneClickDistance = () => props.paneClickDistance ?? 1;
   const _panOnDrag = () => store.panActivationKeyPressed || props.panOnDrag;
-  const isSelecting = () => store.selectionKeyPressed || store.selectionRect || props.selectionOnDrag && _panOnDrag() !== true;
-  const hasActiveSelection = () => store.elementsSelectable && (isSelecting() || store.selectionRectMode === "user");
+  const isSelecting = () => store.selectionKeyPressed || !!store.selectionRect || props.selectionOnDrag && _panOnDrag() !== true;
+  const isSelectionEnabled = () => store.elementsSelectable && (isSelecting() || store.selectionRectMode === "user");
   const onClick = (event) => {
     if (event.target !== container) return;
-    if (selectionInProgress) {
+    if (selectionInProgress || store.connection.inProgress || connectionEndedOnPane) {
       selectionInProgress = false;
+      connectionEndedOnPane = false;
       return;
     }
     props.onPaneClick?.({
@@ -1508,46 +1518,62 @@ var Pane = (props) => {
     batch(() => {
       actions.unselectNodesAndEdges();
       actions.setSelectionRectMode(void 0);
+      actions.setSelectionRect(void 0);
     });
   };
-  const onPointerDown = (event) => {
+  const onPointerDownCapture = (event) => {
+    if (event.pointerType === "touch" && _panOnDrag() !== false && !store.selectionKeyPressed) {
+      return;
+    }
     containerBounds = container?.getBoundingClientRect() ?? null;
-    if (!store.elementsSelectable || !isSelecting() || event.button !== 0 || event.target !== container || !containerBounds) {
+    if (!containerBounds) return;
+    const eventTargetIsContainer = event.target === container;
+    const isNoKeyEvent = !eventTargetIsContainer && !!event.target.closest(".nokey");
+    const isSelectionActive = props.selectionOnDrag && eventTargetIsContainer || store.selectionKeyPressed;
+    if (isNoKeyEvent || !isSelecting() || !isSelectionActive || event.button !== 0 || !event.isPrimary) {
       return;
     }
     event.target?.setPointerCapture?.(event.pointerId);
+    selectionInProgress = false;
+    autoPanStarted = false;
     const {
       x,
       y
     } = getEventPosition(event, containerBounds);
-    batch(() => {
-      actions.unselectNodesAndEdges();
-      actions.setSelectionRect({
-        width: 0,
-        height: 0,
-        startX: x,
-        startY: y,
-        x,
-        y
-      });
+    const userSelectionFlowOrigin = pointToRendererPoint({
+      x,
+      y
+    }, store.transform);
+    actions.setSelectionRect({
+      width: 0,
+      height: 0,
+      startX: userSelectionFlowOrigin.x,
+      startY: userSelectionFlowOrigin.y,
+      x,
+      y
     });
+    if (!eventTargetIsContainer) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
   };
-  const onPointerMove = (event) => {
-    if (!isSelecting() || !containerBounds || !store.selectionRect) {
+  const commitUserSelectionRect = (mouseX, mouseY) => {
+    const selectionRect = store.selectionRect;
+    if (selectionRect?.startX === void 0 || selectionRect.startY === void 0) {
       return;
     }
-    selectionInProgress = true;
-    const mousePos = getEventPosition(event, containerBounds);
-    const {
-      startX = 0,
-      startY = 0
-    } = store.selectionRect;
+    const userStartPosition = {
+      x: selectionRect.startX,
+      y: selectionRect.startY
+    };
+    const screenStart = rendererPointToPoint(userStartPosition, store.transform);
     const nextUserSelectRect = {
-      ...store.selectionRect,
-      x: mousePos.x < startX ? mousePos.x : startX,
-      y: mousePos.y < startY ? mousePos.y : startY,
-      width: Math.abs(mousePos.x - startX),
-      height: Math.abs(mousePos.y - startY)
+      startX: userStartPosition.x,
+      startY: userStartPosition.y,
+      x: mouseX < screenStart.x ? mouseX : screenStart.x,
+      y: mouseY < screenStart.y ? mouseY : screenStart.y,
+      width: Math.abs(mouseX - screenStart.x),
+      height: Math.abs(mouseY - screenStart.y)
     };
     const prevSelectedNodeIds = selectedNodeIds;
     const prevSelectedEdgeIds = selectedEdgeIds;
@@ -1591,22 +1617,93 @@ var Pane = (props) => {
       actions.setSelectionRect(nextUserSelectRect);
     });
   };
+  const autoPan = () => {
+    if (!autoPanOnSelection() || !containerBounds) {
+      return;
+    }
+    const [x = 0, y = 0] = calcAutoPan(position, containerBounds, store.autoPanSpeed);
+    void actions.panBy({
+      x,
+      y
+    }).then((panned) => {
+      if (!selectionInProgress || !panned) {
+        autoPanId = requestAnimationFrame(autoPan);
+        return;
+      }
+      commitUserSelectionRect(position.x, position.y);
+      autoPanId = requestAnimationFrame(autoPan);
+    });
+  };
+  const cleanupAutoPan = () => {
+    cancelAnimationFrame(autoPanId);
+    autoPanId = 0;
+    autoPanStarted = false;
+  };
+  onCleanup(() => {
+    cleanupAutoPan();
+  });
+  const onPointerMove = (event) => {
+    if (!isSelecting() || !containerBounds || !store.selectionRect) {
+      return;
+    }
+    const mousePos = getEventPosition(event, containerBounds);
+    position = {
+      x: mousePos.x,
+      y: mousePos.y
+    };
+    const userStartPosition = {
+      x: store.selectionRect.startX ?? 0,
+      y: store.selectionRect.startY ?? 0
+    };
+    const screenStart = rendererPointToPoint(userStartPosition, store.transform);
+    if (!selectionInProgress) {
+      const requiredDistance = store.selectionKeyPressed ? 0 : paneClickDistance();
+      const distance = Math.hypot(mousePos.x - screenStart.x, mousePos.y - screenStart.y);
+      if (distance <= requiredDistance) {
+        return;
+      }
+      actions.unselectNodesAndEdges();
+      props.onSelectionStart?.(event);
+    }
+    selectionInProgress = true;
+    if (!autoPanStarted) {
+      autoPan();
+      autoPanStarted = true;
+    }
+    commitUserSelectionRect(mousePos.x, mousePos.y);
+  };
   const onPointerUp = (event) => {
+    if (!isSelectionEnabled()) {
+      if (event.target === container && store.connection.inProgress) {
+        connectionEndedOnPane = true;
+      }
+      return;
+    }
     if (event.button !== 0) return;
     event.target?.releasePointerCapture?.(event.pointerId);
-    if (!isSelecting() && store.selectionRectMode === "user" && event.target === container) {
+    if (!selectionInProgress && event.target === container) {
       onClick(event);
     }
     batch(() => {
       actions.setSelectionRect(void 0);
-      if (selectedNodeIds.size > 0) {
-        actions.setSelectionRectMode("nodes");
+      if (selectionInProgress) {
+        actions.setSelectionRectMode(selectedNodeIds.size > 0 ? "nodes" : void 0);
       }
     });
-    if (store.selectionKeyPressed) {
+    if (selectionInProgress) {
+      props.onSelectionEnd?.(event);
+    }
+    cleanupAutoPan();
+  };
+  const onPointerCancel = (event) => {
+    event.target?.releasePointerCapture?.(event.pointerId);
+    cleanupAutoPan();
+  };
+  const onClickCapture = (event) => {
+    if (selectionInProgress) {
+      event.stopPropagation();
       selectionInProgress = false;
     }
-    props.onSelectionEnd?.(event);
   };
   const onContextMenu = (event) => {
     if (event.target !== container) return;
@@ -1622,12 +1719,24 @@ var Pane = (props) => {
   return (() => {
     var _el$ = _tmpl$11();
     _el$.$$contextmenu = onContextMenu;
-    _el$.$$pointerup = (e) => hasActiveSelection() ? onPointerUp(e) : void 0;
-    _el$.$$pointermove = (e) => hasActiveSelection() ? onPointerMove(e) : void 0;
-    _el$.$$pointerdown = (e) => hasActiveSelection() ? onPointerDown(e) : void 0;
-    _el$.$$click = (e) => hasActiveSelection() ? void 0 : onClick(e);
-    var _ref$ = container;
-    typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
+    _el$.addEventListener("pointercancel", (e) => isSelectionEnabled() ? onPointerCancel(e) : void 0);
+    _el$.$$pointerup = onPointerUp;
+    _el$.$$pointermove = (e) => isSelectionEnabled() ? onPointerMove(e) : void 0;
+    addEventListener(_el$, "pointerdown", {
+      capture: true,
+      handleEvent: (e) => {
+        if (isSelectionEnabled()) onPointerDownCapture(e);
+      }
+    });
+    _el$.$$click = (e) => isSelectionEnabled() ? void 0 : onClick(e);
+    use((el) => {
+      container = el;
+      el.addEventListener("click", (e) => {
+        if (isSelectionEnabled()) onClickCapture(e);
+      }, {
+        capture: true
+      });
+    }, _el$);
     insert(_el$, () => props.children);
     effect(() => className(_el$, clsx("solid-flow__container solid-flow__pane", {
       selection: isSelecting(),
@@ -1637,7 +1746,7 @@ var Pane = (props) => {
     return _el$;
   })();
 };
-delegateEvents(["click", "pointerdown", "pointermove", "pointerup", "contextmenu"]);
+delegateEvents(["click", "pointermove", "pointerup", "contextmenu"]);
 var _tmpl$12 = /* @__PURE__ */ template(`<div>`);
 var Panel = (props) => {
   const {
@@ -1724,7 +1833,6 @@ var Zoom = (props) => {
       maxZoom: store.maxZoom,
       translateExtent: store.translateExtent,
       viewport: viewPort(),
-      paneClickDistance: props.paneClickDistance,
       onDraggingChange: actions.setDragging,
       onPanZoomStart: props.onMoveStart,
       onPanZoom: props.onMove,
@@ -1742,11 +1850,12 @@ var Zoom = (props) => {
     createEffect(() => {
       panZoomInstance.update({
         lib: store.lib,
+        panActivationKeyPressed: store.panActivationKeyPressed,
         zoomActivationKeyPressed: store.zoomActivationKeyPressed,
         noPanClassName: store.noPanClass,
         noWheelClassName: store.noWheelClass,
         userSelectionActive: !!store.selectionRect,
-        panOnScrollSpeed: 0.5,
+        panOnScrollSpeed: props.panOnScrollSpeed,
         panOnDrag: panOnDrag(),
         panOnScroll: panOnScroll(),
         zoomOnScroll: props.zoomOnScroll,
@@ -1754,6 +1863,9 @@ var Zoom = (props) => {
         zoomOnPinch: props.zoomOnPinch,
         panOnScrollMode: props.panOnScrollMode,
         preventScrolling: typeof props.preventScrolling === "boolean" ? props.preventScrolling : true,
+        paneClickDistance: props.paneClickDistance,
+        selectionOnDrag: props.selectionOnDrag,
+        connectionInProgress: store.connection.inProgress,
         onTransformChange
       });
     });
@@ -2470,7 +2582,51 @@ var Controls = (props) => {
     }
   }));
 };
-var _tmpl$31 = /* @__PURE__ */ template(`<svg><rect></svg>`, false, true, false);
+var _tmpl$31 = /* @__PURE__ */ template(`<div>`);
+var EdgeToolbar = (props) => {
+  const [local, rest] = splitProps(props, ["x", "y", "alignX", "alignY", "isVisible", "selectEdgeOnClick", "class", "children"]);
+  const {
+    store,
+    edgeLookup
+  } = useInternalSolidFlow();
+  const edgeId = useEdgeId();
+  const isActive = () => typeof local.isVisible === "boolean" ? local.isVisible : !!edgeLookup.get(edgeId())?.selected;
+  const transform = () => getEdgeToolbarTransform(local.x, local.y, store.viewport.zoom, local.alignX ?? "center", local.alignY ?? "center");
+  return createComponent(Show, {
+    get when() {
+      return isActive();
+    },
+    get children() {
+      return createComponent(EdgeLabel, {
+        get selectEdgeOnClick() {
+          return local.selectEdgeOnClick;
+        },
+        transparent: true,
+        get children() {
+          var _el$ = _tmpl$31();
+          spread(_el$, mergeProps$1({
+            get ["class"]() {
+              return clsx("solid-flow__edge-toolbar", local.class);
+            },
+            get style() {
+              return {
+                position: "absolute",
+                transform: transform(),
+                "transform-origin": "0 0"
+              };
+            },
+            get ["data-id"]() {
+              return edgeId();
+            }
+          }, rest), false, true);
+          insert(_el$, () => local.children);
+          return _el$;
+        }
+      });
+    }
+  });
+};
+var _tmpl$33 = /* @__PURE__ */ template(`<svg><rect></svg>`, false, true, false);
 var MiniMapNode = (props) => {
   const _props = mergeProps({
     borderRadius: 5,
@@ -2486,7 +2642,7 @@ var MiniMapNode = (props) => {
     return acc;
   }, {});
   return (() => {
-    var _el$ = _tmpl$31();
+    var _el$ = _tmpl$33();
     effect((_p$) => {
       var _v$ = clsx("solid-flow__minimap-node", {
         selected: _props.selected
@@ -2517,7 +2673,7 @@ var MiniMapNode = (props) => {
 };
 
 // src/components/graph/plugins/minimap/MiniMap.tsx
-var _tmpl$33 = /* @__PURE__ */ template(`<svg class=solid-flow__minimap-svg role=img><title></title><path class=solid-flow__minimap-mask fill-rule=evenodd pointer-events=none>`);
+var _tmpl$34 = /* @__PURE__ */ template(`<svg class=solid-flow__minimap-svg role=img><title></title><path class=solid-flow__minimap-mask fill-rule=evenodd pointer-events=none>`);
 var getAttrFunction = (func) => func instanceof Function ? func : () => func;
 var MiniMap = (props) => {
   const {
@@ -2626,7 +2782,7 @@ var MiniMap = (props) => {
             });
           });
           return (() => {
-            var _el$ = _tmpl$33(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+            var _el$ = _tmpl$34(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
             use(setRef, _el$);
             insert(_el$2, () => store.ariaLabelConfig["minimap.ariaLabel"]);
             insert(_el$, createComponent(Index, {
@@ -2709,7 +2865,7 @@ var MiniMap = (props) => {
     }
   }));
 };
-var _tmpl$34 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$35 = /* @__PURE__ */ template(`<div>`);
 var ResizeControl = (props) => {
   const _props = mergeProps({
     variant: "handle",
@@ -2792,7 +2948,7 @@ var ResizeControl = (props) => {
     });
   });
   return (() => {
-    var _el$ = _tmpl$34();
+    var _el$ = _tmpl$35();
     var _ref$ = resizeControlRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : resizeControlRef = _el$;
     spread(_el$, mergeProps$1({
@@ -2853,6 +3009,12 @@ var NodeResizer = (props) => {
   });
 };
 
+// src/hooks/useColorMode.ts
+function useColorMode() {
+  const { store } = useInternalSolidFlow();
+  return () => store.colorMode;
+}
+
 // src/hooks/useConnection.tsx
 function useConnection() {
   const {
@@ -2904,6 +3066,16 @@ function useHandleEdgeSelect() {
   };
 }
 
+// src/hooks/useInitialized.ts
+function useNodesInitialized() {
+  const { store } = useInternalSolidFlow();
+  return () => store.nodesInitialized;
+}
+function useViewportInitialized() {
+  const { store } = useInternalSolidFlow();
+  return () => store.viewportInitialized;
+}
+
 // src/hooks/useInternalNode.tsx
 function useInternalNode(id) {
   const {
@@ -3227,7 +3399,7 @@ function useUpdateNodeInternals() {
 }
 
 // src/components/graph/plugins/NodeToolbar.tsx
-var _tmpl$35 = /* @__PURE__ */ template(`<div class=solid-flow__node-toolbar>`);
+var _tmpl$36 = /* @__PURE__ */ template(`<div class=solid-flow__node-toolbar>`);
 var NodeToolbar = (props) => {
   const {
     store
@@ -3280,7 +3452,7 @@ var NodeToolbar = (props) => {
           return store.domNode;
         },
         get children() {
-          var _el$ = _tmpl$35();
+          var _el$ = _tmpl$36();
           spread(_el$, mergeProps$1({
             get ["data-id"]() {
               return toolbarNodes().reduce((acc, node) => `${acc}${node.id} `, "").trim();
@@ -3302,7 +3474,7 @@ var NodeToolbar = (props) => {
     }
   });
 };
-var _tmpl$36 = /* @__PURE__ */ template(`<div class=solid-flow__selection>`);
+var _tmpl$37 = /* @__PURE__ */ template(`<div class=solid-flow__selection>`);
 var Selection = (props) => {
   const _props = mergeProps({
     isVisible: true
@@ -3323,7 +3495,7 @@ var Selection = (props) => {
       return _props.isVisible;
     },
     get children() {
-      var _el$ = _tmpl$36();
+      var _el$ = _tmpl$37();
       effect((_$p) => style(_el$, styles(), _$p));
       return _el$;
     }
@@ -3331,7 +3503,7 @@ var Selection = (props) => {
 };
 
 // src/components/graph/selection/NodeSelection.tsx
-var _tmpl$37 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$38 = /* @__PURE__ */ template(`<div>`);
 var NodeSelection = (props) => {
   const {
     store,
@@ -3403,7 +3575,7 @@ var NodeSelection = (props) => {
       return memo(() => !!(store.selectionRectMode === "nodes" && bounds() && isNumeric(bounds()?.x)))() && isNumeric(bounds()?.y);
     },
     get children() {
-      var _el$ = _tmpl$37();
+      var _el$ = _tmpl$38();
       addEventListener(_el$, "keydown", store.disableKeyboardA11y ? void 0 : onKeyDown, true);
       _el$.$$contextmenu = onContextMenu;
       _el$.$$click = onClick;
@@ -3436,7 +3608,7 @@ var NodeSelection = (props) => {
   });
 };
 delegateEvents(["click", "contextmenu", "keydown"]);
-var _tmpl$38 = /* @__PURE__ */ template(`<a href=https://solidflow.dev target=_blank rel="noopener noreferrer"aria-label="Solid Flow attribution">Solid Flow`);
+var _tmpl$39 = /* @__PURE__ */ template(`<a href=https://solidflow.dev target=_blank rel="noopener noreferrer"aria-label="Solid Flow attribution">Solid Flow`);
 var Attribution = (props) => {
   return createComponent(Show, {
     get when() {
@@ -3450,7 +3622,7 @@ var Attribution = (props) => {
         "class": "solid-flow__attribution",
         "data-message": "Feel free to remove the attribution or check out how you could support us: https://solidflow.dev/support-us",
         get children() {
-          return _tmpl$38();
+          return _tmpl$39();
         }
       });
     }
@@ -3618,6 +3790,7 @@ var getDefaultFlowStateProps = () => ({
   autoPanOnNodeDrag: true,
   autoPanOnConnect: true,
   autoPanOnNodeFocus: true,
+  autoPanOnSelection: true,
   autoPanSpeed: 15,
   elevateEdgesOnSelect: true,
   nodesDraggable: true,
@@ -3627,20 +3800,27 @@ var getDefaultFlowStateProps = () => ({
   elementsSelectable: true,
   selectNodesOnDrag: true,
   elevateNodesOnSelect: true,
+  zIndexMode: "basic",
   onlyRenderVisibleElements: false,
   disableKeyboardA11y: false,
   defaultMarkerColor: "#b1b1b7",
   ariaLiveMessage: "",
   style: {},
-  isValidConnection: () => true,
-  onFlowError: devWarn
+  isValidConnection: (() => true),
+  onFlowError: createDevWarn("Solid Flow", "https://solidflow.dev/")
 });
+var SELECTED_NODE_Z = 1e3;
+var ROOT_PARENT_Z_INCREMENT = 10;
 var defaultOptions = {
   nodeOrigin: [0, 0],
   nodeExtent: infiniteExtent,
   elevateNodesOnSelect: true,
-  defaults: {}
+  defaults: {},
+  zIndexMode: "basic"
 };
+function isManualZIndexMode(zIndexMode) {
+  return zIndexMode === "manual";
+}
 var adoptUserNodesDefaultOptions = {
   ...defaultOptions,
   checkEquality: true
@@ -3657,8 +3837,9 @@ function mergeObjects(base, incoming) {
 function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
   const _options = mergeObjects(adoptUserNodesDefaultOptions, options);
   let nodesInitialized = nodes.length > 0;
+  const rootParentIndex = { i: 0 };
   const tmpLookup = new Map(nodeLookup);
-  const selectedNodeZ = _options?.elevateNodesOnSelect ? 1e3 : 0;
+  const selectedNodeZ = _options?.elevateNodesOnSelect && !isManualZIndexMode(_options.zIndexMode) ? SELECTED_NODE_Z : 0;
   nodeLookup.clear();
   parentLookup.clear();
   for (const userNode of nodes) {
@@ -3684,7 +3865,7 @@ function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
           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 ? void 0 : internalNode?.internals.handleBounds,
-          z: calculateZ(userNode, selectedNodeZ),
+          z: calculateZ(userNode, selectedNodeZ, _options.zIndexMode),
           userNode
         }
       };
@@ -3694,7 +3875,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;
@@ -3710,16 +3891,33 @@ function updateParentLookup(node, parentLookup) {
     parentLookup.set(node.parentId, /* @__PURE__ */ new Map([[node.id, node]]));
   }
 }
-function updateChildNode(node, nodeLookup, parentLookup, options) {
-  const { elevateNodesOnSelect, nodeOrigin, nodeExtent } = mergeObjects(defaultOptions, options);
+function updateChildNode(node, nodeLookup, parentLookup, options, rootParentIndex) {
+  const { elevateNodesOnSelect, nodeOrigin, nodeExtent, zIndexMode } = mergeObjects(
+    defaultOptions,
+    options
+  );
   const parentId = node.parentId;
   const parentNode = nodeLookup.get(parentId);
   if (!parentNode) {
     return;
   }
   updateParentLookup(node, parentLookup);
-  const selectedNodeZ = elevateNodesOnSelect ? 1e3 : 0;
-  const { x, y, z } = calculateChildXYZ(node, parentNode, nodeOrigin, nodeExtent, selectedNodeZ);
+  if (rootParentIndex && !parentNode.parentId && parentNode.internals.rootParentIndex === void 0 && zIndexMode === "auto") {
+    parentNode.internals.rootParentIndex = ++rootParentIndex.i;
+    parentNode.internals.z = parentNode.internals.z + rootParentIndex.i * ROOT_PARENT_Z_INCREMENT;
+  }
+  if (rootParentIndex && parentNode.internals.rootParentIndex !== void 0) {
+    rootParentIndex.i = parentNode.internals.rootParentIndex;
+  }
+  const selectedNodeZ = elevateNodesOnSelect && !isManualZIndexMode(zIndexMode) ? SELECTED_NODE_Z : 0;
+  const { x, y, z } = calculateChildXYZ(
+    node,
+    parentNode,
+    nodeOrigin,
+    nodeExtent,
+    selectedNodeZ,
+    zIndexMode
+  );
   const { positionAbsolute } = node.internals;
   const positionChanged = x !== positionAbsolute.x || y !== positionAbsolute.y;
   if (positionChanged || z !== node.internals.z) {
@@ -3733,10 +3931,14 @@ function updateChildNode(node, nodeLookup, parentLookup, options) {
     });
   }
 }
-function calculateZ(node, selectedNodeZ) {
-  return (isNumeric(node.zIndex) ? node.zIndex : 0) + (node.selected ? selectedNodeZ : 0);
+function calculateZ(node, selectedNodeZ, zIndexMode) {
+  const zIndex = isNumeric(node.zIndex) ? node.zIndex : 0;
+  if (isManualZIndexMode(zIndexMode)) {
+    return zIndex;
+  }
+  return zIndex + (node.selected ? selectedNodeZ : 0);
 }
-function calculateChildXYZ(childNode, parentNode, nodeOrigin, nodeExtent, selectedNodeZ) {
+function calculateChildXYZ(childNode, parentNode, nodeOrigin, nodeExtent, selectedNodeZ, zIndexMode) {
   const { x: parentX, y: parentY } = parentNode.internals.positionAbsolute;
   const childDimensions = getNodeDimensions(childNode);
   const positionWithOrigin = getNodePositionWithOrigin(childNode, nodeOrigin);
@@ -3749,7 +3951,7 @@ function calculateChildXYZ(childNode, parentNode, nodeOrigin, nodeExtent, select
   if (childNode.extent === "parent") {
     absolutePosition = clampPositionToParent(absolutePosition, childDimensions, parentNode);
   }
-  const childZ = calculateZ(childNode, selectedNodeZ);
+  const childZ = calculateZ(childNode, selectedNodeZ, zIndexMode);
   const parentZ = parentNode.internals.z ?? 0;
   return {
     x: absolutePosition.x,
@@ -3835,6 +4037,8 @@ var createSolidFlow = (props) => {
       nodeOrigin: _props.nodeOrigin,
       // eslint-disable-next-line solid/reactivity
       elevateNodesOnSelect: _props.elevateNodesOnSelect,
+      // eslint-disable-next-line solid/reactivity
+      zIndexMode: _props.zIndexMode,
       checkEquality: true
     });
   });
@@ -3882,6 +4086,17 @@ var createSolidFlow = (props) => {
   const edgesMemo = createWritableStore(() => config().edges);
   const viewportMemo = createWritableStore(() => config().viewport ?? initialViewport);
   const transform = createMemo(() => [viewportMemo.get().x, viewportMemo.get().y, viewportMemo.get().zoom]);
+  const nodesInitialized = createMemo(() => {
+    const nodes = nodesMemo.get();
+    if (nodes.length === 0) return false;
+    for (const node of nodes) {
+      if (node.hidden) continue;
+      if (node.measured?.width === void 0 || node.measured?.height === void 0) {
+        return false;
+      }
+    }
+    return true;
+  });
   const store = mergeProps({
     width: 0,
     height: 0
@@ -3917,7 +4132,6 @@ var createSolidFlow = (props) => {
       const state = connection();
       return {
         ...state,
-        from: state.inProgress ? pointToRendererPoint(state.from, this.transform) : state.from,
         to: state.inProgress ? pointToRendererPoint(state.to, this.transform) : state.to
       };
     },
@@ -3970,10 +4184,10 @@ var createSolidFlow = (props) => {
       return panZoom();
     },
     get selectedNodes() {
-      return config().nodes.filter((node) => node.selected);
+      return nodesMemo.get().filter((node) => node.selected);
     },
     get selectedEdges() {
-      return config().edges.filter((edge) => edge.selected);
+      return edgesMemo.get().filter((edge) => edge.selected);
     },
     get selectionRect() {
       return selectionRect();
@@ -3990,6 +4204,9 @@ var createSolidFlow = (props) => {
     get viewportInitialized() {
       return panZoom() !== null;
     },
+    get nodesInitialized() {
+      return nodesInitialized();
+    },
     get visibleEdgeIds() {
       return visibleEdgeIds();
     },
@@ -4037,7 +4254,7 @@ var createSolidFlow = (props) => {
   const getEdge = (id) => layoutedEdgesMap.get(id);
   const fitView = async (options) => {
     if (!store.panZoom) return false;
-    return fitViewport({
+    const result = await fitViewport({
       nodes: nodeLookup,
       width: store.width,
       height: store.height,
@@ -4045,6 +4262,7 @@ var createSolidFlow = (props) => {
       minZoom: store.minZoom,
       maxZoom: store.maxZoom
     }, options ?? config().fitViewOptions);
+    return result;
   };
   const resetStoreValues = () => {
     setDragging(false);
@@ -4071,9 +4289,16 @@ var createSolidFlow = (props) => {
     edgesMemo.set((edges) => addEdge(edgeParams, edges));
   };
   let initialFitViewApplied = false;
+  let initialNodesMeasured = false;
   const applyInitialFitView = (initialFitView) => {
     initialFitViewApplied = !initialFitView;
   };
+  const tryInitialFitView = () => {
+    if (initialFitViewApplied || !initialNodesMeasured) return;
+    if (!untrack(() => store.panZoom && store.width && store.height)) return;
+    initialFitViewApplied = true;
+    void untrack(() => fitView());
+  };
   const updateNodePositions = (nodeDragItems, dragging2 = false) => {
     nodesMemo.set((node) => nodeDragItems.has(node.id), produce((node) => {
       node.dragging = dragging2;
@@ -4098,7 +4323,8 @@ var createSolidFlow = (props) => {
         if (!updatedInternals) return;
         updateAbsolutePositions(nodeLookup, parentLookup, {
           nodeOrigin: store.nodeOrigin,
-          nodeExtent: store.nodeExtent
+          nodeExtent: store.nodeExtent,
+          zIndexMode: store.zIndexMode
         });
         const nodeToChange = changes.reduce((acc, change) => {
           const node = nodeLookup.get(change.id)?.internals.userNode;
@@ -4125,10 +4351,8 @@ var createSolidFlow = (props) => {
               break;
           }
         }));
-        if (!initialFitViewApplied) {
-          initialFitViewApplied = true;
-          void fitView();
-        }
+        initialNodesMeasured = true;
+        tryInitialFitView();
       });
     });
   };
@@ -4307,6 +4531,9 @@ var createSolidFlow = (props) => {
     resetStoreValues();
     unselectNodesAndEdges();
   };
+  createEffect(() => {
+    if (width() && height() && panZoom()) tryInitialFitView();
+  });
   createEffect(() => {
     store.panZoom?.syncViewport(store.viewport);
   });
@@ -4323,7 +4550,7 @@ var createSolidFlow = (props) => {
   createComputed(mapArray(() => store.nodes, (userNode) => {
     createComputed(() => {
       const internalNode = untrack(() => nodeLookup.get(userNode.id));
-      const selectedNodeZ = store.elevateNodesOnSelect ? 1e3 : 0;
+      const selectedNodeZ = store.elevateNodesOnSelect && store.zIndexMode !== "manual" ? 1e3 : 0;
       const clampedPosition = clampPosition(getNodePositionWithOrigin(userNode, store.nodeOrigin), isCoordinateExtent(userNode.extent) ? userNode.extent : store.nodeExtent, getNodeDimensions(userNode));
       const preservedMeasured = {
         width: userNode.measured?.width ?? internalNode?.measured?.width,
@@ -4337,7 +4564,7 @@ var createSolidFlow = (props) => {
           // If there is neither a user-provided nor a previously measured size,
           // reset handleBounds so that the node gets re-measured.
           handleBounds: !userNode.measured && !internalNode?.measured ? void 0 : internalNode?.internals.handleBounds,
-          z: calculateZ(userNode, selectedNodeZ),
+          z: calculateZ(userNode, selectedNodeZ, store.zIndexMode),
           userNode
         }
       };
@@ -4347,6 +4574,7 @@ var createSolidFlow = (props) => {
           nodeOrigin: store.nodeOrigin,
           nodeExtent: store.nodeExtent,
           elevateNodesOnSelect: store.elevateNodesOnSelect,
+          zIndexMode: store.zIndexMode,
           checkEquality: true
         });
       }
@@ -4420,7 +4648,8 @@ var createSolidFlow = (props) => {
           zIndex: edge.zIndex ?? store.defaultEdgeOptions.zIndex,
           sourceNode,
           targetNode,
-          elevateOnSelect: store.elevateEdgesOnSelect
+          elevateOnSelect: store.elevateEdgesOnSelect,
+          zIndexMode: store.zIndexMode
         }),
         sourceNode,
         targetNode,
@@ -4508,7 +4737,7 @@ var createSolidFlow = (props) => {
 };
 
 // src/components/SolidFlow/component.tsx
-var _tmpl$39 = /* @__PURE__ */ template(`<div class="solid-flow__container solid-flow__viewport-back">`);
+var _tmpl$40 = /* @__PURE__ */ template(`<div class="solid-flow__container solid-flow__viewport-back">`);
 var _tmpl$210 = /* @__PURE__ */ template(`<div class="solid-flow__container solid-flow__edge-labels">`);
 var _tmpl$310 = /* @__PURE__ */ template(`<div role=application data-testid=solid-flow__wrapper>`);
 var SolidFlow = (props) => {
@@ -4557,6 +4786,7 @@ var SolidFlow = (props) => {
     "nodeClickDistance",
     "minZoom",
     "maxZoom",
+    "zIndexMode",
     "initialViewport",
     "viewport",
     "translateExtent",
@@ -4581,6 +4811,7 @@ var SolidFlow = (props) => {
     "autoPanOnConnect",
     "autoPanOnNodeDrag",
     "autoPanOnNodeFocus",
+    "autoPanOnSelection",
     "autoPanSpeed",
     // Connection and validation
     "connectionRadius",
@@ -4697,6 +4928,16 @@ var SolidFlow = (props) => {
       actions.reset();
     });
   });
+  const selectedElements = createMemo(() => ({
+    nodes: store.selectedNodes,
+    edges: store.selectedEdges
+  }), void 0, {
+    equals: (a, b) => a.nodes.length === b.nodes.length && a.edges.length === b.edges.length && a.nodes.every((node, i) => node.id === b.nodes[i].id) && a.edges.every((edge, i) => edge.id === b.edges[i].id)
+  });
+  createEffect(() => {
+    const params = selectedElements();
+    untrack(() => flowProps.onSelectionChange)?.(params);
+  });
   const rootStyle = () => ({
     width: toPxString(flowProps.width),
     height: toPxString(flowProps.height),
@@ -4759,12 +5000,18 @@ var SolidFlow = (props) => {
           get panOnScroll() {
             return flowProps.panOnScroll;
           },
+          get panOnScrollSpeed() {
+            return flowProps.panOnScrollSpeed;
+          },
           get panOnDrag() {
             return flowProps.panOnDrag;
           },
           get paneClickDistance() {
             return flowProps.paneClickDistance;
           },
+          get selectionOnDrag() {
+            return flowProps.selectionOnDrag;
+          },
           get onMoveStart() {
             return flowProps.onMoveStart;
           },
@@ -4800,10 +5047,16 @@ var SolidFlow = (props) => {
               get selectionOnDrag() {
                 return flowProps.selectionOnDrag;
               },
+              get paneClickDistance() {
+                return flowProps.paneClickDistance;
+              },
+              get autoPanOnSelection() {
+                return flowProps.autoPanOnSelection;
+              },
               get children() {
                 return [createComponent(Viewport, {
                   get children() {
-                    return [_tmpl$39(), createComponent(EdgeRenderer, {
+                    return [_tmpl$40(), createComponent(EdgeRenderer, {
                       get reconnectRadius() {
                         return flowProps.reconnectRadius;
                       },
@@ -4937,4 +5190,4 @@ var createNodeStore = (nodes) => {
   return [store, setStore];
 };
 
-export { Background, BaseEdge, BezierEdge, BezierEdgeInternal, ConnectionLine_default as ConnectionLine, ControlButton, Controls, DefaultNode, EdgeLabel, EdgeLabelRenderer, EdgeReconnectAnchor, EdgeRenderer, EdgeWrapper, GroupNode, Handle, InputNode, Marker, MarkerDefinition, MiniMap, NodeRenderer, NodeResizer, NodeSelection, NodeToolbar, NodeWrapper, OutputNode, Pane, Panel, ResizeControl, Selection, SmoothStepEdge, SmoothStepEdgeInternal, SolidFlow, SolidFlowProvider, StepEdge, StepEdgeInternal, StraightEdge, StraightEdgeInternal, Viewport, ViewportPortal, Zoom, createEdgeStore, createNodeStore, useConnection, useEdges, useHandleEdgeSelect, useInternalNode, useNodeConnections, useNodes, useNodesData, useSolidFlow, useUpdateNodeInternals, useViewport };
+export { Background, BaseEdge, BezierEdge, BezierEdgeInternal, ConnectionLine_default as ConnectionLine, ControlButton, Controls, DefaultNode, EdgeLabel, EdgeLabelRenderer, EdgeReconnectAnchor, EdgeRenderer, EdgeToolbar, EdgeWrapper, GroupNode, Handle, InputNode, Marker, MarkerDefinition, MiniMap, NodeRenderer, NodeResizer, NodeSelection, NodeToolbar, NodeWrapper, OutputNode, Pane, Panel, ResizeControl, Selection, SmoothStepEdge, SmoothStepEdgeInternal, SolidFlow, SolidFlowProvider, StepEdge, StepEdgeInternal, StraightEdge, StraightEdgeInternal, Viewport, ViewportPortal, Zoom, createEdgeStore, createNodeStore, useColorMode, useConnection, useEdges, useHandleEdgeSelect, useInternalNode, useNodeConnections, useNodes, useNodesData, useNodesInitialized, useSolidFlow, useUpdateNodeInternals, useViewport, useViewportInitialized };