@dschz/solid-flow 0.1.4 → 0.2.1

package/dist/index/index.jsx

@@ -1232,7 +1232,7 @@ var OutputNode = (props) => {
 
 // src/data/defaults.ts
 import {
-  devWarn,
+  createDevWarn,
   infiniteExtent
 } from "@xyflow/system";
 var getDefaultFlowStateProps = () => ({
@@ -1258,6 +1258,7 @@ var getDefaultFlowStateProps = () => ({
   autoPanOnNodeDrag: true,
   autoPanOnConnect: true,
   autoPanOnNodeFocus: true,
+  autoPanOnSelection: true,
   autoPanSpeed: 15,
   elevateEdgesOnSelect: true,
   nodesDraggable: true,
@@ -1267,13 +1268,14 @@ 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/")
 });
 
 // src/data/xyflow.ts
@@ -1290,12 +1292,18 @@ import {
   isNumeric,
   nodeToRect
 } from "@xyflow/system";
+var SELECTED_NODE_Z = 1e3;
+var ROOT_PARENT_Z_INCREMENT = 10;
 var defaultOptions = {
   nodeOrigin: [0, 0],
   nodeExtent: infiniteExtent2,
   elevateNodesOnSelect: true,
-  defaults: {}
+  defaults: {},
+  zIndexMode: "basic"
 };
+function isManualZIndexMode(zIndexMode) {
+  return zIndexMode === "manual";
+}
 var adoptUserNodesDefaultOptions = {
   ...defaultOptions,
   checkEquality: true
@@ -1312,8 +1320,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) {
@@ -1339,7 +1348,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
         }
       };
@@ -1349,7 +1358,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;
@@ -1365,16 +1374,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) {
@@ -1388,10 +1414,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);
@@ -1404,7 +1434,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,
@@ -1486,6 +1516,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
     });
   });
@@ -1541,6 +1573,17 @@ var createSolidFlow = (props) => {
   const transform = createMemo5(
     () => [viewportMemo.get().x, viewportMemo.get().y, viewportMemo.get().zoom]
   );
+  const nodesInitialized = createMemo5(() => {
+    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 = mergeProps8({ width: 0, height: 0 }, config, {
     get _colorMode() {
       return config().colorMode;
@@ -1573,7 +1616,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
       };
     },
@@ -1620,10 +1662,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();
@@ -1640,6 +1682,9 @@ var createSolidFlow = (props) => {
     get viewportInitialized() {
       return panZoom() !== null;
     },
+    get nodesInitialized() {
+      return nodesInitialized();
+    },
     get visibleEdgeIds() {
       return visibleEdgeIds();
     },
@@ -1687,7 +1732,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,
@@ -1698,6 +1743,7 @@ var createSolidFlow = (props) => {
       },
       options ?? config().fitViewOptions
     );
+    return result;
   };
   const resetStoreValues = () => {
     setDragging(false);
@@ -1718,9 +1764,16 @@ var createSolidFlow = (props) => {
     edgesMemo.set((edges) => systemAddEdge(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),
@@ -1751,7 +1804,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) => {
@@ -1781,10 +1835,8 @@ var createSolidFlow = (props) => {
             }
           })
         );
-        if (!initialFitViewApplied) {
-          initialFitViewApplied = true;
-          void fitView();
-        }
+        initialNodesMeasured = true;
+        tryInitialFitView();
       });
     });
   };
@@ -1955,6 +2007,9 @@ var createSolidFlow = (props) => {
     resetStoreValues();
     unselectNodesAndEdges();
   };
+  createEffect4(() => {
+    if (width() && height() && panZoom()) tryInitialFitView();
+  });
   createEffect4(() => {
     store.panZoom?.syncViewport(store.viewport);
   });
@@ -1974,7 +2029,7 @@ var createSolidFlow = (props) => {
       (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 = clampPosition2(
             getNodePositionWithOrigin2(userNode, store.nodeOrigin),
             isCoordinateExtent2(userNode.extent) ? userNode.extent : store.nodeExtent,
@@ -1992,7 +2047,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
             }
           };
@@ -2002,6 +2057,7 @@ var createSolidFlow = (props) => {
               nodeOrigin: store.nodeOrigin,
               nodeExtent: store.nodeExtent,
               elevateNodesOnSelect: store.elevateNodesOnSelect,
+              zIndexMode: store.zIndexMode,
               checkEquality: true
             });
           }
@@ -2094,7 +2150,8 @@ var createSolidFlow = (props) => {
               zIndex: edge.zIndex ?? store.defaultEdgeOptions.zIndex,
               sourceNode,
               targetNode,
-              elevateOnSelect: store.elevateEdgesOnSelect
+              elevateOnSelect: store.elevateEdgesOnSelect,
+              zIndexMode: store.zIndexMode
             }),
             sourceNode,
             targetNode,
@@ -2343,9 +2400,16 @@ var NodeRenderer = (props) => {
 };
 
 // src/components/container/Pane.tsx
-import { getEventPosition, getNodesInside as getNodesInside3, SelectionMode } from "@xyflow/system";
+import {
+  calcAutoPan,
+  getEventPosition,
+  getNodesInside as getNodesInside3,
+  pointToRendererPoint as pointToRendererPoint2,
+  rendererPointToPoint,
+  SelectionMode
+} from "@xyflow/system";
 import clsx7 from "clsx";
-import { batch as batch3 } from "solid-js";
+import { batch as batch3, onCleanup as onCleanup4 } from "solid-js";
 import { produce as produce2 } from "solid-js/store";
 var isSetEqual = (a, b) => {
   if (a.size !== b.size) return false;
@@ -2360,56 +2424,76 @@ var Pane = (props) => {
   const { store, nodeLookup, edgeLookup, connectionLookup, actions } = 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?.({ event });
     batch3(() => {
       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);
-    batch3(() => {
-      actions.unselectNodesAndEdges();
-      actions.setSelectionRect({
-        width: 0,
-        height: 0,
-        startX: x,
-        startY: y,
-        x,
-        y
-      });
+    const userSelectionFlowOrigin = pointToRendererPoint2({ 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;
@@ -2465,22 +2549,87 @@ 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;
+  };
+  onCleanup4(() => {
+    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);
     }
     batch3(() => {
       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;
@@ -2492,16 +2641,31 @@ var Pane = (props) => {
     props.onPaneContextMenu?.({ event });
   };
   return <div
-    ref={container}
+    ref={(el) => {
+      container = el;
+      el.addEventListener(
+        "click",
+        (e) => {
+          if (isSelectionEnabled()) onClickCapture(e);
+        },
+        { capture: true }
+      );
+    }}
     class={clsx7("solid-flow__container solid-flow__pane", {
       selection: isSelecting(),
       dragging: store.dragging,
       draggable: props.panOnDrag === true || Array.isArray(props.panOnDrag) && props.panOnDrag.includes(0)
     })}
-    onClick={(e) => hasActiveSelection() ? void 0 : onClick(e)}
-    onPointerDown={(e) => hasActiveSelection() ? onPointerDown(e) : void 0}
-    onPointerMove={(e) => hasActiveSelection() ? onPointerMove(e) : void 0}
-    onPointerUp={(e) => hasActiveSelection() ? onPointerUp(e) : void 0}
+    onClick={(e) => isSelectionEnabled() ? void 0 : onClick(e)}
+    on:pointerdown={{
+      capture: true,
+      handleEvent: (e) => {
+        if (isSelectionEnabled()) onPointerDownCapture(e);
+      }
+    }}
+    onPointerMove={(e) => isSelectionEnabled() ? onPointerMove(e) : void 0}
+    onPointerUp={onPointerUp}
+    onPointerCancel={(e) => isSelectionEnabled() ? onPointerCancel(e) : void 0}
     onContextMenu={onContextMenu}
   >
       {props.children}
@@ -2580,7 +2744,6 @@ var Zoom = (props) => {
       maxZoom: store.maxZoom,
       translateExtent: store.translateExtent,
       viewport: viewPort(),
-      paneClickDistance: props.paneClickDistance,
       onDraggingChange: actions.setDragging,
       onPanZoomStart: props.onMoveStart,
       onPanZoom: props.onMove,
@@ -2598,11 +2761,12 @@ var Zoom = (props) => {
     createEffect5(() => {
       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,
@@ -2610,6 +2774,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
       });
     });
@@ -2971,6 +3138,49 @@ var Controls = (props) => {
     </Panel>;
 };
 
+// src/components/graph/plugins/EdgeToolbar.tsx
+import { getEdgeToolbarTransform } from "@xyflow/system";
+import clsx15 from "clsx";
+import { Show as Show13, splitProps as splitProps8 } from "solid-js";
+var EdgeToolbar = (props) => {
+  const [local, rest] = splitProps8(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 <Show13 when={isActive()}>
+      <EdgeLabel selectEdgeOnClick={local.selectEdgeOnClick} transparent>
+        <div
+    class={clsx15("solid-flow__edge-toolbar", local.class)}
+    style={{
+      position: "absolute",
+      transform: transform(),
+      "transform-origin": "0 0"
+    }}
+    data-id={edgeId()}
+    {...rest}
+  >
+          {local.children}
+        </div>
+      </EdgeLabel>
+    </Show13>;
+};
+
 // src/components/graph/plugins/minimap/MiniMap.tsx
 import {
   getBoundsOfRects as getBoundsOfRects2,
@@ -2979,21 +3189,21 @@ import {
   nodeHasDimensions as nodeHasDimensions2,
   XYMinimap
 } from "@xyflow/system";
-import clsx16 from "clsx";
+import clsx17 from "clsx";
 import {
   createEffect as createEffect6,
   createMemo as createMemo7,
   createSignal as createSignal6,
   Index,
   mergeProps as mergeProps16,
-  onCleanup as onCleanup4,
+  onCleanup as onCleanup5,
   onMount as onMount3,
-  Show as Show13,
-  splitProps as splitProps8
+  Show as Show14,
+  splitProps as splitProps9
 } from "solid-js";
 
 // src/components/graph/plugins/minimap/MiniMapNode.tsx
-import clsx15 from "clsx";
+import clsx16 from "clsx";
 import { mergeProps as mergeProps15 } from "solid-js";
 var MiniMapNode = (props) => {
   const _props = mergeProps15(
@@ -3013,7 +3223,7 @@ var MiniMapNode = (props) => {
     return acc;
   }, {});
   return <rect
-    class={clsx15("solid-flow__minimap-node", { selected: _props.selected }, _props.class)}
+    class={clsx16("solid-flow__minimap-node", { selected: _props.selected }, _props.class)}
     x={_props.x}
     y={_props.y}
     rx={_props.borderRadius}
@@ -3044,7 +3254,7 @@ var MiniMap = (props) => {
     },
     props
   );
-  const [local, paneProps] = splitProps8(_props, [
+  const [local, paneProps] = splitProps9(_props, [
     "class",
     "style",
     "position",
@@ -3111,14 +3321,14 @@ var MiniMap = (props) => {
   return <Panel
     position={local.position}
     data-testid="solid-flow__minimap"
-    class={clsx16(["solid-flow__minimap", local.class])}
+    class={clsx17(["solid-flow__minimap", local.class])}
     style={{
       "--xy-minimap-background-color-props": local.bgColor,
       ...local.style
     }}
     {...paneProps}
   >
-      <Show13 when={store.panZoom}>
+      <Show14 when={store.panZoom}>
         {(panZoom) => {
     const [ref, setRef] = createSignal6();
     onMount3(() => {
@@ -3139,7 +3349,7 @@ var MiniMap = (props) => {
           zoomable: local.zoomable
         });
       });
-      onCleanup4(() => {
+      onCleanup5(() => {
         minimap.destroy();
       });
     });
@@ -3162,7 +3372,7 @@ var MiniMap = (props) => {
                 {(nodeId) => {
       const node = createMemo7(() => nodeLookup.get(nodeId()));
       const nodeVisible = () => Boolean(node() && nodeHasDimensions2(node()) && !node().hidden);
-      return <Show13 when={nodeVisible() && getNodeDimensions3(node())}>
+      return <Show14 when={nodeVisible() && getNodeDimensions3(node())}>
                       {(nodeDimensions) => <MiniMapNode
         x={node().internals.positionAbsolute.x}
         y={node().internals.positionAbsolute.y}
@@ -3176,7 +3386,7 @@ var MiniMap = (props) => {
         strokeColor={nodeStrokeColorFunc().call(null, node())}
         class={nodeClassFunc().call(null, node())}
       />}
-                    </Show13>;
+                    </Show14>;
     }}
               </Index>
               <path
@@ -3188,7 +3398,7 @@ var MiniMap = (props) => {
     />
             </svg>;
   }}
-      </Show13>
+      </Show14>
     </Panel>;
 };
 
@@ -3197,19 +3407,19 @@ import {
   XY_RESIZER_HANDLE_POSITIONS,
   XY_RESIZER_LINE_POSITIONS
 } from "@xyflow/system";
-import { For as For4, mergeProps as mergeProps18, Show as Show14, splitProps as splitProps10 } from "solid-js";
+import { For as For4, mergeProps as mergeProps18, Show as Show15, splitProps as splitProps11 } from "solid-js";
 
 // src/components/graph/plugins/nodeResizer/ResizeControl.tsx
 import {
   XYResizer
 } from "@xyflow/system";
-import clsx17 from "clsx";
+import clsx18 from "clsx";
 import {
   createEffect as createEffect7,
   mergeProps as mergeProps17,
-  onCleanup as onCleanup5,
+  onCleanup as onCleanup6,
   onMount as onMount4,
-  splitProps as splitProps9
+  splitProps as splitProps10
 } from "solid-js";
 import { produce as produce3 } from "solid-js/store";
 var ResizeControl = (props) => {
@@ -3226,7 +3436,7 @@ var ResizeControl = (props) => {
     },
     props
   );
-  const [local, rest] = splitProps9(_props, [
+  const [local, rest] = splitProps10(_props, [
     "nodeId",
     "variant",
     "position",
@@ -3303,13 +3513,13 @@ var ResizeControl = (props) => {
         shouldResize: local.shouldResize
       });
     });
-    onCleanup5(() => {
+    onCleanup6(() => {
       resizer.destroy();
     });
   });
   return <div
     ref={resizeControlRef}
-    class={clsx17([
+    class={clsx18([
       "solid-flow__resize-control",
       local.variant,
       store.noDragClass,
@@ -3337,8 +3547,8 @@ var NodeResizer = (props) => {
     },
     props
   );
-  const [local, rest] = splitProps10(props, ["handleClass", "handleStyle", "lineClass", "lineStyle"]);
-  return <Show14 when={_props.visible}>
+  const [local, rest] = splitProps11(props, ["handleClass", "handleStyle", "lineClass", "lineStyle"]);
+  return <Show15 when={_props.visible}>
       <For4 each={XY_RESIZER_LINE_POSITIONS}>
         {(position) => <ResizeControl
     variant="line"
@@ -3356,14 +3566,20 @@ var NodeResizer = (props) => {
     {...rest}
   />}
       </For4>
-    </Show14>;
+    </Show15>;
 };
 
 // src/components/graph/plugins/NodeToolbar.tsx
 import { getNodeToolbarTransform } from "@xyflow/system";
-import { mergeProps as mergeProps19, Show as Show15, splitProps as splitProps11, useContext as useContext6 } from "solid-js";
+import { mergeProps as mergeProps19, Show as Show16, splitProps as splitProps12, useContext as useContext6 } from "solid-js";
 import { Portal as Portal3 } from "solid-js/web";
 
+// src/hooks/useColorMode.ts
+function useColorMode() {
+  const { store } = useInternalSolidFlow();
+  return () => store.colorMode;
+}
+
 // src/hooks/useConnection.tsx
 function useConnection() {
   const { store } = useInternalSolidFlow();
@@ -3410,6 +3626,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 { nodeLookup } = useInternalSolidFlow();
@@ -3478,8 +3704,8 @@ import {
   getViewportForBounds as getViewportForBounds2,
   isRectObject,
   nodeToRect as nodeToRect2,
-  pointToRendererPoint as pointToRendererPoint2,
-  rendererPointToPoint
+  pointToRendererPoint as pointToRendererPoint3,
+  rendererPointToPoint as rendererPointToPoint2
 } from "@xyflow/system";
 import { batch as batch7 } from "solid-js";
 import { unwrap as unwrap2 } from "solid-js/store";
@@ -3648,7 +3874,7 @@ function useSolidFlow() {
         x: position.x - domX,
         y: position.y - domY
       };
-      return pointToRendererPoint2(
+      return pointToRendererPoint3(
         correctedPosition,
         [x, y, zoom],
         _snapGrid !== null,
@@ -3666,7 +3892,7 @@ function useSolidFlow() {
       }
       const { x, y, zoom } = store.viewport;
       const { x: domX, y: domY } = store.domNode.getBoundingClientRect();
-      const rendererPosition = rendererPointToPoint(position, [x, y, zoom]);
+      const rendererPosition = rendererPointToPoint2(position, [x, y, zoom]);
       return {
         x: rendererPosition.x + domX,
         y: rendererPosition.y + domY
@@ -3741,7 +3967,7 @@ var NodeToolbar = (props) => {
     },
     props
   );
-  const [local, divProps] = splitProps11(_props, [
+  const [local, divProps] = splitProps12(_props, [
     "nodeId",
     "position",
     "align",
@@ -3782,7 +4008,7 @@ var NodeToolbar = (props) => {
     return typeof local.isVisible === "boolean" ? local.isVisible : nodes.length === 1 && Boolean(nodes[0].selected) && selectedNodesCount() === 1;
   };
   const showPortal = () => Boolean(store.domNode && isActive() && toolbarNodes().length > 0);
-  return <Show15 when={showPortal()}>
+  return <Show16 when={showPortal()}>
       <Portal3 mount={store.domNode}>
         <div
     class="solid-flow__node-toolbar"
@@ -3799,16 +4025,16 @@ var NodeToolbar = (props) => {
           {local.children}
         </div>
       </Portal3>
-    </Show15>;
+    </Show16>;
 };
 
 // src/components/graph/selection/NodeSelection.tsx
 import { getInternalNodesBounds as getInternalNodesBounds3, isNumeric as isNumeric2 } from "@xyflow/system";
-import clsx18 from "clsx";
-import { createEffect as createEffect9, createSignal as createSignal8, Show as Show17 } from "solid-js";
+import clsx19 from "clsx";
+import { createEffect as createEffect9, createSignal as createSignal8, Show as Show18 } from "solid-js";
 
 // src/components/graph/selection/Selection.tsx
-import { mergeProps as mergeProps20, Show as Show16 } from "solid-js";
+import { mergeProps as mergeProps20, Show as Show17 } from "solid-js";
 var Selection = (props) => {
   const _props = mergeProps20({ isVisible: true }, props);
   const styles = () => ({
@@ -3822,9 +4048,9 @@ var Selection = (props) => {
       transform: `translate(${props.x}px, ${props.y}px)`
     }
   });
-  return <Show16 when={_props.isVisible}>
+  return <Show17 when={_props.isVisible}>
       <div class="solid-flow__selection" style={styles()} />
-    </Show16>;
+    </Show17>;
 };
 
 // src/components/graph/selection/NodeSelection.tsx
@@ -3870,12 +4096,12 @@ var NodeSelection = (props) => {
     event.preventDefault();
     actions.moveSelectedNodes(diff, event.shiftKey ? 4 : 1);
   };
-  return <Show17
+  return <Show18
     when={store.selectionRectMode === "nodes" && bounds() && isNumeric2(bounds()?.x) && isNumeric2(bounds()?.y)}
   >
       <div
     ref={setRef}
-    class={clsx18("solid-flow__selection-wrapper", store.noPanClass)}
+    class={clsx19("solid-flow__selection-wrapper", store.noPanClass)}
     style={{
       width: toPxString(bounds()?.width),
       height: toPxString(bounds()?.height),
@@ -3889,27 +4115,29 @@ var NodeSelection = (props) => {
   >
         <Selection width="100%" height="100%" x={0} y={0} />
       </div>
-    </Show17>;
+    </Show18>;
 };
 
 // src/components/SolidFlow/component.tsx
 import { createResizeObserver } from "@solid-primitives/resize-observer";
 import { infiniteExtent as infiniteExtent4, isMacOs as isMacOs2 } from "@xyflow/system";
-import clsx19 from "clsx";
+import clsx20 from "clsx";
 import {
   batch as batch9,
   createEffect as createEffect10,
+  createMemo as createMemo9,
   mergeProps as mergeProps22,
-  onCleanup as onCleanup7,
+  onCleanup as onCleanup8,
   onMount as onMount6,
-  splitProps as splitProps12,
+  splitProps as splitProps13,
+  untrack as untrack2,
   useContext as useContext7
 } from "solid-js";
 
 // src/components/utility/Attribution.tsx
-import { Show as Show18 } from "solid-js";
+import { Show as Show19 } from "solid-js";
 var Attribution = (props) => {
-  return <Show18 when={!props.proOptions?.hideAttribution}>
+  return <Show19 when={!props.proOptions?.hideAttribution}>
       <Panel
     position={props.position ?? "bottom-right"}
     class="solid-flow__attribution"
@@ -3924,12 +4152,12 @@ var Attribution = (props) => {
           Solid Flow
         </a>
       </Panel>
-    </Show18>;
+    </Show19>;
 };
 
 // src/components/utility/KeyHandler.tsx
 import { isInputDOMNode as isInputDOMNode2, isMacOs } from "@xyflow/system";
-import { batch as batch8, mergeProps as mergeProps21, onCleanup as onCleanup6, onMount as onMount5 } from "solid-js";
+import { batch as batch8, mergeProps as mergeProps21, onCleanup as onCleanup7, onMount as onMount5 } from "solid-js";
 function isKeyObject(key) {
   return key !== null && typeof key === "object";
 }
@@ -4055,7 +4283,7 @@ var KeyHandler = (props) => {
     window.addEventListener("keyup", handleKeyUp);
     window.addEventListener("blur", resetKeysAndSelection);
     window.addEventListener("contextmenu", resetKeysAndSelection);
-    onCleanup6(() => {
+    onCleanup7(() => {
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("keyup", handleKeyUp);
       window.removeEventListener("blur", resetKeysAndSelection);
@@ -4094,7 +4322,7 @@ var SolidFlow = (props) => {
     },
     props
   );
-  const [flowProps, htmlProps] = splitProps12(_props, [
+  const [flowProps, htmlProps] = splitProps13(_props, [
     // Core flow props
     "nodes",
     "edges",
@@ -4111,6 +4339,7 @@ var SolidFlow = (props) => {
     "nodeClickDistance",
     "minZoom",
     "maxZoom",
+    "zIndexMode",
     "initialViewport",
     "viewport",
     "translateExtent",
@@ -4135,6 +4364,7 @@ var SolidFlow = (props) => {
     "autoPanOnConnect",
     "autoPanOnNodeDrag",
     "autoPanOnNodeFocus",
+    "autoPanOnSelection",
     "autoPanSpeed",
     // Connection and validation
     "connectionRadius",
@@ -4244,10 +4474,21 @@ var SolidFlow = (props) => {
     createEffect10(() => {
       actions.setPaneClickDistance(flowProps.paneClickDistance);
     });
-    onCleanup7(() => {
+    onCleanup8(() => {
       actions.reset();
     });
   });
+  const selectedElements = createMemo9(
+    () => ({ 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)
+    }
+  );
+  createEffect10(() => {
+    const params = selectedElements();
+    untrack2(() => flowProps.onSelectionChange)?.(params);
+  });
   const rootStyle = () => ({
     width: toPxString(flowProps.width),
     height: toPxString(flowProps.height),
@@ -4257,7 +4498,7 @@ var SolidFlow = (props) => {
     role="application"
     data-testid="solid-flow__wrapper"
     ref={domNode}
-    class={clsx19(["solid-flow", "solid-flow__container", flowProps.class, store.colorMode])}
+    class={clsx20(["solid-flow", "solid-flow__container", flowProps.class, store.colorMode])}
     style={rootStyle()}
     onScroll={(e) => {
       e.currentTarget.scrollTo({ top: 0, left: 0, behavior: "auto" });
@@ -4279,8 +4520,10 @@ var SolidFlow = (props) => {
     zoomOnDoubleClick={flowProps.zoomOnDoubleClick}
     zoomOnPinch={flowProps.zoomOnPinch}
     panOnScroll={flowProps.panOnScroll}
+    panOnScrollSpeed={flowProps.panOnScrollSpeed}
     panOnDrag={flowProps.panOnDrag}
     paneClickDistance={flowProps.paneClickDistance}
+    selectionOnDrag={flowProps.selectionOnDrag}
     onMoveStart={flowProps.onMoveStart}
     onMove={flowProps.onMove}
     onMoveEnd={flowProps.onMoveEnd}
@@ -4294,6 +4537,8 @@ var SolidFlow = (props) => {
     onSelectionEnd={flowProps.onSelectionEnd}
     panOnDrag={flowProps.panOnDrag}
     selectionOnDrag={flowProps.selectionOnDrag}
+    paneClickDistance={flowProps.paneClickDistance}
+    autoPanOnSelection={flowProps.autoPanOnSelection}
   >
             <Viewport>
               <div class="solid-flow__container solid-flow__viewport-back" />
@@ -4348,11 +4593,11 @@ var SolidFlow = (props) => {
 };
 
 // src/components/SolidFlow/provider.tsx
-import { mergeProps as mergeProps23, onCleanup as onCleanup8 } from "solid-js";
+import { mergeProps as mergeProps23, onCleanup as onCleanup9 } from "solid-js";
 var SolidFlowProvider = (props) => {
   const _props = mergeProps23(getDefaultFlowStateProps(), props);
   const solidFlow = createSolidFlow(_props);
-  onCleanup8(() => {
+  onCleanup9(() => {
     solidFlow.actions.reset();
   });
   const ContextProvider = SolidFlowContext.Provider;
@@ -4411,6 +4656,7 @@ export {
   EdgeLabelRenderer,
   EdgeReconnectAnchor,
   EdgeRenderer,
+  EdgeToolbar,
   EdgeWrapper,
   GroupNode,
   Handle,
@@ -4457,6 +4703,7 @@ export {
   getSmoothStepPath6 as getSmoothStepPath,
   getStraightPath4 as getStraightPath,
   getViewportForBounds3 as getViewportForBounds,
+  useColorMode,
   useConnection,
   useEdges,
   useHandleEdgeSelect,
@@ -4464,7 +4711,9 @@ export {
   useNodeConnections,
   useNodes,
   useNodesData,
+  useNodesInitialized,
   useSolidFlow,
   useUpdateNodeInternals,
-  useViewport
+  useViewport,
+  useViewportInitialized
 };