@xyflow/system 0.0.49 → 0.0.51

package/dist/esm/index.mjs

@@ -24,11 +24,26 @@ const infiniteExtent = [
 ];
 const elementSelectionKeys = ['Enter', ' ', 'Escape'];
 
+/**
+ * The `ConnectionMode` is used to set the mode of connection between nodes.
+ * The `Strict` mode is the default one and only allows source to target edges.
+ * `Loose` mode allows source to source and target to target edges as well.
+ *
+ * @public
+ */
 var ConnectionMode;
 (function (ConnectionMode) {
     ConnectionMode["Strict"] = "strict";
     ConnectionMode["Loose"] = "loose";
 })(ConnectionMode || (ConnectionMode = {}));
+/**
+ * This enum is used to set the different modes of panning the viewport when the
+ * user scrolls. The `Free` mode allows the user to pan in any direction by scrolling
+ * with a device like a trackpad. The `Vertical` and `Horizontal` modes restrict
+ * scroll panning to only the vertical or horizontal axis, respectively.
+ *
+ * @public
+ */
 var PanOnScrollMode;
 (function (PanOnScrollMode) {
     PanOnScrollMode["Free"] = "free";
@@ -53,6 +68,16 @@ const initialConnection = {
     toNode: null,
 };
 
+/**
+ * If you set the `connectionLineType` prop on your [`<ReactFlow />`](/api-reference/react-flow#connection-connectionLineType)
+ *component, it will dictate the style of connection line rendered when creating
+ *new edges.
+ *
+ * @public
+ *
+ * @remarks If you choose to render a custom connection line component, this value will be
+ *passed to your component as part of its [`ConnectionLineComponentProps`](/api-reference/types/connection-line-component-props).
+ */
 var ConnectionLineType;
 (function (ConnectionLineType) {
     ConnectionLineType["Bezier"] = "default";
@@ -61,12 +86,25 @@ var ConnectionLineType;
     ConnectionLineType["SmoothStep"] = "smoothstep";
     ConnectionLineType["SimpleBezier"] = "simplebezier";
 })(ConnectionLineType || (ConnectionLineType = {}));
+/**
+ * Edges may optionally have a marker on either end. The MarkerType type enumerates
+ * the options available to you when configuring a given marker.
+ *
+ * @public
+ */
 var MarkerType;
 (function (MarkerType) {
     MarkerType["Arrow"] = "arrow";
     MarkerType["ArrowClosed"] = "arrowclosed";
 })(MarkerType || (MarkerType = {}));
 
+/**
+ * While [`PanelPosition`](/api-reference/types/panel-position) can be used to place a
+ * component in the corners of a container, the `Position` enum is less precise and used
+ * primarily in relation to edges and handles.
+ *
+ * @public
+ */
 var Position;
 (function (Position) {
     Position["Left"] = "left";
@@ -143,12 +181,27 @@ const isEdgeBase = (element) => 'id' in element && 'source' in element && 'targe
 const isNodeBase = (element) => 'id' in element && 'position' in element && !('source' in element) && !('target' in element);
 const isInternalNodeBase = (element) => 'id' in element && 'internals' in element && !('source' in element) && !('target' in element);
 /**
- * Pass in a node, and get connected nodes where edge.source === node.id
+ * This util is used to tell you what nodes, if any, are connected to the given node
+ * as the _target_ of an edge.
  * @public
  * @param node - The node to get the connected nodes from
  * @param nodes - The array of all nodes
  * @param edges - The array of all edges
  * @returns An array of nodes that are connected over eges where the source is the given node
+ *
+ * @example
+ * ```ts
+ *import { getOutgoers } from '@xyflow/react';
+ *
+ *const nodes = [];
+ *const edges = [];
+ *
+ *const outgoers = getOutgoers(
+ *  { id: '1', position: { x: 0, y: 0 }, data: { label: 'node' } },
+ *  nodes,
+ *  edges,
+ *);
+ *```
  */
 const getOutgoers = (node, nodes, edges) => {
     if (!node.id) {
@@ -163,12 +216,27 @@ const getOutgoers = (node, nodes, edges) => {
     return nodes.filter((n) => outgoerIds.has(n.id));
 };
 /**
- * Pass in a node, and get connected nodes where edge.target === node.id
+ * This util is used to tell you what nodes, if any, are connected to the given node
+ * as the _source_ of an edge.
  * @public
  * @param node - The node to get the connected nodes from
  * @param nodes - The array of all nodes
  * @param edges - The array of all edges
  * @returns An array of nodes that are connected over eges where the target is the given node
+ *
+ * @example
+ * ```ts
+ *import { getIncomers } from '@xyflow/react';
+ *
+ *const nodes = [];
+ *const edges = [];
+ *
+ *const incomers = getIncomers(
+ *  { id: '1', position: { x: 0, y: 0 }, data: { label: 'node' } },
+ *  nodes,
+ *  edges,
+ *);
+ *```
  */
 const getIncomers = (node, nodes, edges) => {
     if (!node.id) {
@@ -193,12 +261,40 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
     };
 };
 /**
- * Internal function for determining a bounding box that contains all given nodes in an array.
+ * Returns the bounding box that contains all the given nodes in an array. This can
+ * be useful when combined with [`getViewportForBounds`](/api-reference/utils/get-viewport-for-bounds)
+ * to calculate the correct transform to fit the given nodes in a viewport.
  * @public
  * @remarks Useful when combined with {@link getViewportForBounds} to calculate the correct transform to fit the given nodes in a viewport.
  * @param nodes - Nodes to calculate the bounds for
  * @param params.nodeOrigin - Origin of the nodes: [0, 0] - top left, [0.5, 0.5] - center
  * @returns Bounding box enclosing all nodes
+ *
+ * @remarks This function was previously called `getRectOfNodes`
+ *
+ * @example
+ * ```js
+ *import { getNodesBounds } from '@xyflow/react';
+ *
+ *const nodes = [
+ *  {
+ *    id: 'a',
+ *    position: { x: 0, y: 0 },
+ *    data: { label: 'a' },
+ *    width: 50,
+ *    height: 25,
+ *  },
+ *  {
+ *    id: 'b',
+ *    position: { x: 100, y: 100 },
+ *    data: { label: 'b' },
+ *    width: 50,
+ *    height: 25,
+ *  },
+ *];
+ *
+ *const bounds = getNodesBounds(nodes);
+ *```
  */
 const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0], nodeLookup: undefined }) => {
     if (process.env.NODE_ENV === 'development' && !params.nodeLookup) {
@@ -267,10 +363,30 @@ excludeNonSelectableNodes = false) => {
     return visibleNodes;
 };
 /**
- * Get all connecting edges for a given set of nodes
+ * This utility filters an array of edges, keeping only those where either the source or target
+ * node is present in the given array of nodes.
+ * @public
  * @param nodes - Nodes you want to get the connected edges for
  * @param edges - All edges
  * @returns Array of edges that connect any of the given nodes with each other
+ *
+ * @example
+ * ```js
+ *import { getConnectedEdges } from '@xyflow/react';
+ *
+ *const nodes = [
+ *  { id: 'a', position: { x: 0, y: 0 } },
+ *  { id: 'b', position: { x: 100, y: 0 } },
+ *];
+ *
+ *const edges = [
+ *  { id: 'a->c', source: 'a', target: 'c' },
+ *  { id: 'c->d', source: 'c', target: 'd' },
+ *];
+ *
+ *const connectedEdges = getConnectedEdges(nodes, edges);
+ * // => [{ id: 'a->c', source: 'a', target: 'c' }]
+ *```
  */
 const getConnectedEdges = (nodes, edges) => {
     const nodeIds = new Set();
@@ -515,8 +631,8 @@ const rendererPointToPoint = ({ x, y }, [tx, ty, tScale]) => {
  * @returns A transforned {@link Viewport} that encloses the given bounds which you can pass to e.g. {@link setViewport}
  * @example
  * const { x, y, zoom } = getViewportForBounds(
-  { x: 0, y: 0, width: 100, height: 100},
-  1200, 800, 0.5, 2);
+ *{ x: 0, y: 0, width: 100, height: 100},
+ *1200, 800, 0.5, 2);
  */
 const getViewportForBounds = (bounds, width, height, minZoom, maxZoom, padding) => {
     const xZoom = width / (bounds.width * (1 + padding));
@@ -611,9 +727,11 @@ const getEventPosition = (event, bounds) => {
         y: evtY - (bounds?.top ?? 0),
     };
 };
-// The handle bounds are calculated relative to the node element.
-// We store them in the internals object of the node in order to avoid
-// unnecessary recalculations.
+/*
+ * The handle bounds are calculated relative to the node element.
+ * We store them in the internals object of the node in order to avoid
+ * unnecessary recalculations.
+ */
 const getHandleBounds = (type, nodeElement, nodeBounds, zoom, nodeId) => {
     const handles = nodeElement.querySelectorAll(`.${type}`);
     if (!handles || !handles.length) {
@@ -634,8 +752,10 @@ const getHandleBounds = (type, nodeElement, nodeBounds, zoom, nodeId) => {
 };
 
 function getBezierEdgeCenter({ sourceX, sourceY, targetX, targetY, sourceControlX, sourceControlY, targetControlX, targetControlY, }) {
-    // cubic bezier t=0.5 mid point, not the actual mid point, but easy to calculate
-    // https://stackoverflow.com/questions/67516101/how-to-find-distance-mid-point-of-bezier-curve
+    /*
+     * cubic bezier t=0.5 mid point, not the actual mid point, but easy to calculate
+     * https://stackoverflow.com/questions/67516101/how-to-find-distance-mid-point-of-bezier-curve
+     */
     const centerX = sourceX * 0.125 + sourceControlX * 0.375 + targetControlX * 0.375 + targetX * 0.125;
     const centerY = sourceY * 0.125 + sourceControlY * 0.375 + targetControlY * 0.375 + targetY * 0.125;
     const offsetX = Math.abs(centerX - sourceX);
@@ -661,7 +781,9 @@ function getControlWithCurvature({ pos, x1, y1, x2, y2, c }) {
     }
 }
 /**
- * Get a bezier path from source to target handle
+ * The `getBezierPath` util returns everything you need to render a bezier edge
+ *between two nodes.
+ * @public
  * @param params.sourceX - The x position of the source handle
  * @param params.sourceY - The y position of the source handle
  * @param params.sourcePosition - The position of the source handle (default: Position.Bottom)
@@ -671,17 +793,22 @@ function getControlWithCurvature({ pos, x1, y1, x2, y2, c }) {
  * @param params.curvature - The curvature of the bezier edge
  * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
  * @example
+ * ```js
  *  const source = { x: 0, y: 20 };
-    const target = { x: 150, y: 100 };
-    
-    const [path, labelX, labelY, offsetX, offsetY] = getBezierPath({
-      sourceX: source.x,
-      sourceY: source.y,
-      sourcePosition: Position.Right,
-      targetX: target.x,
-      targetY: target.y,
-      targetPosition: Position.Left,
-});
+ *  const target = { x: 150, y: 100 };
+ *
+ *  const [path, labelX, labelY, offsetX, offsetY] = getBezierPath({
+ *    sourceX: source.x,
+ *    sourceY: source.y,
+ *    sourcePosition: Position.Right,
+ *    targetX: target.x,
+ *    targetY: target.y,
+ *    targetPosition: Position.Left,
+ *});
+ *```
+ *
+ * @remarks This function returns a tuple (aka a fixed-size array) to make it easier to
+ *work with multiple edge paths at once.
  */
 function getBezierPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, curvature = 0.25, }) {
     const [sourceControlX, sourceControlY] = getControlWithCurvature({
@@ -759,12 +886,16 @@ const connectionExists = (edge, edges) => {
         (el.targetHandle === edge.targetHandle || (!el.targetHandle && !edge.targetHandle)));
 };
 /**
- * This util is a convenience function to add a new Edge to an array of edges
- * @remarks It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
+ * This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
  * @public
  * @param edgeParams - Either an Edge or a Connection you want to add
  * @param edges -  The array of all current edges
  * @returns A new array of edges with the new edge added
+ *
+ * @remarks If an edge with the same `target` and `source` already exists (and the same
+ *`targetHandle` and `sourceHandle` if those are set), then this util won't add
+ *a new edge even if the `id` property is different.
+ *
  */
 const addEdge = (edgeParams, edges) => {
     if (!edgeParams.source || !edgeParams.target) {
@@ -793,12 +924,21 @@ const addEdge = (edgeParams, edges) => {
     return edges.concat(edge);
 };
 /**
- * A handy utility to reconnect an existing edge with new properties
+ * A handy utility to update an existing [`Edge`](/api-reference/types/edge) with new properties.
+ *This searches your edge array for an edge with a matching `id` and updates its
+ *properties with the connection you provide.
+ * @public
  * @param oldEdge - The edge you want to update
  * @param newConnection - The new connection you want to update the edge with
  * @param edges - The array of all current edges
  * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
  * @returns the updated edges array
+ *
+ * @example
+ * ```js
+ *const onReconnect = useCallback(
+ *  (oldEdge: Edge, newConnection: Connection) => setEdges((els) => reconnectEdge(oldEdge, newConnection, els)),[]);
+ *```
  */
 const reconnectEdge = (oldEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
     const { id: oldEdgeId, ...rest } = oldEdge;
@@ -824,24 +964,28 @@ const reconnectEdge = (oldEdge, newConnection, edges, options = { shouldReplaceI
 };
 
 /**
- * Get a straight path from source to target handle
+ * Calculates the straight line path between two points.
+ * @public
  * @param params.sourceX - The x position of the source handle
  * @param params.sourceY - The y position of the source handle
  * @param params.targetX - The x position of the target handle
  * @param params.targetY - The y position of the target handle
  * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
  * @example
+ * ```js
  *  const source = { x: 0, y: 20 };
-    const target = { x: 150, y: 100 };
-    
-    const [path, labelX, labelY, offsetX, offsetY] = getStraightPath({
-      sourceX: source.x,
-      sourceY: source.y,
-      sourcePosition: Position.Right,
-      targetX: target.x,
-      targetY: target.y,
-      targetPosition: Position.Left,
-    });
+ *  const target = { x: 150, y: 100 };
+ *
+ *  const [path, labelX, labelY, offsetX, offsetY] = getStraightPath({
+ *    sourceX: source.x,
+ *    sourceY: source.y,
+ *    sourcePosition: Position.Right,
+ *    targetX: target.x,
+ *    targetY: target.y,
+ *    targetPosition: Position.Left,
+ *  });
+ * ```
+ * @remarks This function returns a tuple (aka a fixed-size array) to make it easier to work with multiple edge paths at once.
  */
 function getStraightPath({ sourceX, sourceY, targetX, targetY, }) {
     const [labelX, labelY, offsetX, offsetY] = getEdgeCenter({
@@ -866,8 +1010,10 @@ const getDirection = ({ source, sourcePosition = Position.Bottom, target, }) =>
     return source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 };
 };
 const distance = (a, b) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
-// ith this function we try to mimic a orthogonal edge routing behaviour
-// It's not as good as a real orthogonal edge routing but it's faster and good enough as a default for step and smooth step edges
+/*
+ * ith this function we try to mimic a orthogonal edge routing behaviour
+ * It's not as good as a real orthogonal edge routing but it's faster and good enough as a default for step and smooth step edges
+ */
 function getPoints({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset, }) {
     const sourceDir = handleDirections[sourcePosition];
     const targetDir = handleDirections[targetPosition];
@@ -894,16 +1040,20 @@ function getPoints({ source, sourcePosition = Position.Bottom, target, targetPos
     if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
         centerX = center.x ?? defaultCenterX;
         centerY = center.y ?? defaultCenterY;
-        //    --->
-        //    |
-        // >---
+        /*
+         *    --->
+         *    |
+         * >---
+         */
         const verticalSplit = [
             { x: centerX, y: sourceGapped.y },
             { x: centerX, y: targetGapped.y },
         ];
-        //    |
-        //  ---
-        //  |
+        /*
+         *    |
+         *  ---
+         *  |
+         */
         const horizontalSplit = [
             { x: sourceGapped.x, y: centerY },
             { x: targetGapped.x, y: centerY },
@@ -992,7 +1142,10 @@ function getBend(a, b, c, size) {
     return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;
 }
 /**
- * Get a smooth step path from source to target handle
+ * The `getSmoothStepPath` util returns everything you need to render a stepped path
+ *between two nodes. The `borderRadius` property can be used to choose how rounded
+ *the corners of those steps are.
+ * @public
  * @param params.sourceX - The x position of the source handle
  * @param params.sourceY - The y position of the source handle
  * @param params.sourcePosition - The position of the source handle (default: Position.Bottom)
@@ -1001,17 +1154,20 @@ function getBend(a, b, c, size) {
  * @param params.targetPosition - The position of the target handle (default: Position.Top)
  * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
  * @example
+ * ```js
  *  const source = { x: 0, y: 20 };
-    const target = { x: 150, y: 100 };
-    
-    const [path, labelX, labelY, offsetX, offsetY] = getSmoothStepPath({
-      sourceX: source.x,
-      sourceY: source.y,
-      sourcePosition: Position.Right,
-      targetX: target.x,
-      targetY: target.y,
-      targetPosition: Position.Left,
-    });
+ *  const target = { x: 150, y: 100 };
+ *
+ *  const [path, labelX, labelY, offsetX, offsetY] = getSmoothStepPath({
+ *    sourceX: source.x,
+ *    sourceY: source.y,
+ *    sourcePosition: Position.Right,
+ *    targetX: target.x,
+ *    targetY: target.y,
+ *    targetPosition: Position.Left,
+ *  });
+ * ```
+ * @remarks This function returns a tuple (aka a fixed-size array) to make it easier to work with multiple edge paths at once.
  */
 function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, borderRadius = 5, centerX, centerY, offset = 20, }) {
     const [points, labelX, labelY, offsetX, offsetY] = getPoints({
@@ -1162,8 +1318,10 @@ function getNodeToolbarTransform(nodeRect, viewport, position, offset, align) {
     else if (align === 'end') {
         alignmentOffset = 1;
     }
-    // position === Position.Top
-    // we set the x any y position of the toolbar based on the nodes position
+    /*
+     * position === Position.Top
+     * we set the x any y position of the toolbar based on the nodes position
+     */
     let pos = [
         (nodeRect.x + nodeRect.width * alignmentOffset) * viewport.zoom + viewport.x,
         nodeRect.y * viewport.zoom + viewport.y - offset,
@@ -1293,11 +1451,15 @@ function updateChildNode(node, nodeLookup, parentLookup, options) {
     const { positionAbsolute } = node.internals;
     const positionChanged = x !== positionAbsolute.x || y !== positionAbsolute.y;
     if (positionChanged || z !== node.internals.z) {
-        node.internals = {
-            ...node.internals,
-            positionAbsolute: positionChanged ? { x, y } : positionAbsolute,
-            z,
-        };
+        // we create a new object to mark the node as updated
+        nodeLookup.set(node.id, {
+            ...node,
+            internals: {
+                ...node.internals,
+                positionAbsolute: positionChanged ? { x, y } : positionAbsolute,
+                z,
+            },
+        });
     }
 }
 function calculateZ(node, selectedNodeZ) {
@@ -1358,8 +1520,10 @@ function handleExpandParent(children, nodeLookup, parentLookup, nodeOrigin = [0,
                         y: parent.position.y - yChange + heightChange,
                     },
                 });
-                // We move all child nodes in the oppsite direction
-                // so the x,y changes of the parent do not move the children
+                /*
+                 * We move all child nodes in the oppsite direction
+                 * so the x,y changes of the parent do not move the children
+                 */
                 parentLookup.get(parentId)?.forEach((childNode) => {
                     if (!children.some((child) => child.id === childNode.id)) {
                         changes.push({
@@ -1406,54 +1570,60 @@ function updateNodeInternals(updates, nodeLookup, parentLookup, domNode, nodeOri
             continue;
         }
         if (node.hidden) {
-            node.internals = {
-                ...node.internals,
-                handleBounds: undefined,
-            };
+            nodeLookup.set(node.id, {
+                ...node,
+                internals: {
+                    ...node.internals,
+                    handleBounds: undefined,
+                },
+            });
             updatedInternals = true;
+            continue;
         }
-        else {
-            const dimensions = getDimensions(update.nodeElement);
-            const dimensionChanged = node.measured.width !== dimensions.width || node.measured.height !== dimensions.height;
-            const doUpdate = !!(dimensions.width &&
-                dimensions.height &&
-                (dimensionChanged || !node.internals.handleBounds || update.force));
-            if (doUpdate) {
-                const nodeBounds = update.nodeElement.getBoundingClientRect();
-                const extent = isCoordinateExtent(node.extent) ? node.extent : nodeExtent;
-                let { positionAbsolute } = node.internals;
-                if (node.parentId && node.extent === 'parent') {
-                    positionAbsolute = clampPositionToParent(positionAbsolute, dimensions, nodeLookup.get(node.parentId));
-                }
-                else if (extent) {
-                    positionAbsolute = clampPosition(positionAbsolute, extent, dimensions);
-                }
-                node.measured = dimensions;
-                node.internals = {
+        const dimensions = getDimensions(update.nodeElement);
+        const dimensionChanged = node.measured.width !== dimensions.width || node.measured.height !== dimensions.height;
+        const doUpdate = !!(dimensions.width &&
+            dimensions.height &&
+            (dimensionChanged || !node.internals.handleBounds || update.force));
+        if (doUpdate) {
+            const nodeBounds = update.nodeElement.getBoundingClientRect();
+            const extent = isCoordinateExtent(node.extent) ? node.extent : nodeExtent;
+            let { positionAbsolute } = node.internals;
+            if (node.parentId && node.extent === 'parent') {
+                positionAbsolute = clampPositionToParent(positionAbsolute, dimensions, nodeLookup.get(node.parentId));
+            }
+            else if (extent) {
+                positionAbsolute = clampPosition(positionAbsolute, extent, dimensions);
+            }
+            const newNode = {
+                ...node,
+                measured: dimensions,
+                internals: {
                     ...node.internals,
                     positionAbsolute,
                     handleBounds: {
                         source: getHandleBounds('source', update.nodeElement, nodeBounds, zoom, node.id),
                         target: getHandleBounds('target', update.nodeElement, nodeBounds, zoom, node.id),
                     },
-                };
-                if (node.parentId) {
-                    updateChildNode(node, nodeLookup, parentLookup, { nodeOrigin });
-                }
-                updatedInternals = true;
-                if (dimensionChanged) {
-                    changes.push({
+                },
+            };
+            nodeLookup.set(node.id, newNode);
+            if (node.parentId) {
+                updateChildNode(newNode, nodeLookup, parentLookup, { nodeOrigin });
+            }
+            updatedInternals = true;
+            if (dimensionChanged) {
+                changes.push({
+                    id: node.id,
+                    type: 'dimensions',
+                    dimensions,
+                });
+                if (node.expandParent && node.parentId) {
+                    parentExpandChildren.push({
                         id: node.id,
-                        type: 'dimensions',
-                        dimensions,
+                        parentId: node.parentId,
+                        rect: nodeToRect(newNode, nodeOrigin),
                     });
-                    if (node.expandParent && node.parentId) {
-                        parentExpandChildren.push({
-                            id: node.id,
-                            parentId: node.parentId,
-                            rect: nodeToRect(node, nodeOrigin),
-                        });
-                    }
                 }
             }
         }
@@ -1491,9 +1661,11 @@ async function panBy({ delta, panZoom, transform, translateExtent, width, height
  * @param handleId handleId of the conneciton
  */
 function addConnectionToLookup(type, connection, connectionKey, connectionLookup, nodeId, handleId) {
-    // We add the connection to the connectionLookup at the following keys
-    // 1. nodeId, 2. nodeId-type, 3. nodeId-type-handleId
-    // If the key already exists, we add the connection to the existing map
+    /*
+     * We add the connection to the connectionLookup at the following keys
+     * 1. nodeId, 2. nodeId-type, 3. nodeId-type-handleId
+     * If the key already exists, we add the connection to the existing map
+     */
     let key = nodeId;
     const nodeMap = connectionLookup.get(key) || new Map();
     connectionLookup.set(key, nodeMap.set(connectionKey, connection));
@@ -1594,9 +1766,11 @@ function getDragItems(nodeLookup, nodesDraggable, mousePos, nodeId) {
     }
     return dragItems;
 }
-// returns two params:
-// 1. the dragged node (or the first of the list, if we are dragging a node selection)
-// 2. array of selected nodes (for multi selections)
+/*
+ * returns two params:
+ * 1. the dragged node (or the first of the list, if we are dragging a node selection)
+ * 2. array of selected nodes (for multi selections)
+ */
 function getEventHandlerParams({ nodeId, dragItems, nodeLookup, dragging = true, }) {
     const nodesFromDragItems = [];
     for (const [id, dragItem] of dragItems) {
@@ -1650,16 +1824,20 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             }
             for (const [id, dragItem] of dragItems) {
                 if (!nodeLookup.has(id)) {
-                    // if the node is not in the nodeLookup anymore, it was probably deleted while dragging
-                    // and we don't need to update it anymore
+                    /*
+                     * if the node is not in the nodeLookup anymore, it was probably deleted while dragging
+                     * and we don't need to update it anymore
+                     */
                     continue;
                 }
                 let nextPosition = { x: x - dragItem.distance.x, y: y - dragItem.distance.y };
                 if (snapToGrid) {
                     nextPosition = snapPosition(nextPosition, snapGrid);
                 }
-                // if there is selection with multiple nodes and a node extent is set, we need to adjust the node extent for each node
-                // based on its position so that the node stays at it's position relative to the selection.
+                /*
+                 * if there is selection with multiple nodes and a node extent is set, we need to adjust the node extent for each node
+                 * based on its position so that the node stays at it's position relative to the selection.
+                 */
                 let adjustedNodeExtent = [
                     [nodeExtent[0][0], nodeExtent[0][1]],
                     [nodeExtent[1][0], nodeExtent[1][1]],
@@ -1709,7 +1887,12 @@ function XYDrag({ onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragSto
             if (!containerBounds) {
                 return;
             }
-            const { transform, panBy, autoPanSpeed } = getStoreItems();
+            const { transform, panBy, autoPanSpeed, autoPanOnNodeDrag } = getStoreItems();
+            if (!autoPanOnNodeDrag) {
+                autoPanStarted = false;
+                cancelAnimationFrame(autoPanId);
+                return;
+            }
             const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds, autoPanSpeed);
             if (xMovement !== 0 || yMovement !== 0) {
                 lastPos.x = (lastPos.x ?? 0) - xMovement / transform[2];
@@ -1849,8 +2032,10 @@ function getNodesWithinDistance(position, nodeLookup, distance) {
     }
     return nodes;
 }
-// this distance is used for the area around the user pointer
-// while doing a connection for finding the closest nodes
+/*
+ * this distance is used for the area around the user pointer
+ * while doing a connection for finding the closest nodes
+ */
 const ADDITIONAL_DISTANCE = 250;
 function getClosestHandle(position, connectionRadius, nodeLookup, fromHandle) {
     let closestHandles = [];
@@ -2018,8 +2203,10 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
             toPosition: isValid && result.toHandle ? result.toHandle.position : oppositePosition[fromHandle.position],
             toNode: result.toHandle ? nodeLookup.get(result.toHandle.nodeId) : null,
         };
-        // we don't want to trigger an update when the connection
-        // is snapped to the same handle as before
+        /*
+         * we don't want to trigger an update when the connection
+         * is snapped to the same handle as before
+         */
         if (isValid &&
             closestHandle &&
             previousConnection.toHandle &&
@@ -2038,8 +2225,10 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
         if ((closestHandle || handleDomNode) && connection && isValid) {
             onConnect?.(connection);
         }
-        // it's important to get a fresh reference from the store here
-        // in order to get the latest state of onConnectEnd
+        /*
+         * it's important to get a fresh reference from the store here
+         * in order to get the latest state of onConnectEnd
+         */
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { inProgress, ...connectionState } = previousConnection;
         const finalConnectionState = {
@@ -2074,8 +2263,10 @@ function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId
         : null;
     const { x, y } = getEventPosition(event);
     const handleBelow = doc.elementFromPoint(x, y);
-    // we always want to prioritize the handle below the mouse cursor over the closest distance handle,
-    // because it could be that the center of another handle is closer to the mouse pointer than the handle below the cursor
+    /*
+     * we always want to prioritize the handle below the mouse cursor over the closest distance handle,
+     * because it could be that the center of another handle is closer to the mouse pointer than the handle below the cursor
+     */
     const handleToCheck = handleBelow?.classList.contains(`${lib}-flow__handle`) ? handleBelow : handleDomNode;
     const result = {
         handleDomNode: handleToCheck,
@@ -2226,8 +2417,10 @@ function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection
             d3Zoom.scaleTo(d3Selection, zoom, point, event);
             return;
         }
-        // increase scroll speed in firefox
-        // firefox: deltaMode === 1; chrome: deltaMode === 0
+        /*
+         * increase scroll speed in firefox
+         * firefox: deltaMode === 1; chrome: deltaMode === 0
+         */
         const deltaNormalize = event.deltaMode === 1 ? 20 : 1;
         let deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize;
         let deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize;
@@ -2241,9 +2434,11 @@ function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection
         { internal: true });
         const nextViewport = transformToViewport(d3Selection.property('__zoom'));
         clearTimeout(zoomPanValues.panScrollTimeout);
-        // for pan on scroll we need to handle the event calls on our own
-        // we can't use the start, zoom and end events from d3-zoom
-        // because start and move gets called on every scroll event and not once at the beginning
+        /*
+         * for pan on scroll we need to handle the event calls on our own
+         * we can't use the start, zoom and end events from d3-zoom
+         * because start and move gets called on every scroll event and not once at the beginning
+         */
         if (!zoomPanValues.isPanScrolling) {
             zoomPanValues.isPanScrolling = true;
             onPanZoomStart?.(event, nextViewport);
@@ -2478,9 +2673,11 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
             lib,
         });
         d3ZoomInstance.filter(filter);
-        // We cannot add zoomOnDoubleClick to the filter above because
-        // double tapping on touch screens circumvents the filter and
-        // dblclick.zoom is fired on the selection directly
+        /*
+         * We cannot add zoomOnDoubleClick to the filter above because
+         * double tapping on touch screens circumvents the filter and
+         * dblclick.zoom is fired on the selection directly
+         */
         if (zoomOnDoubleClick) {
             d3Selection.on('dblclick.zoom', d3DblClickZoomHandler);
         }
@@ -2562,6 +2759,11 @@ function XYPanZoom({ domNode, minZoom, maxZoom, paneClickDistance, translateExte
     };
 }
 
+/**
+ * Used to determine the variant of the resize control
+ *
+ * @public
+ */
 var ResizeControlVariant;
 (function (ResizeControlVariant) {
     ResizeControlVariant["Line"] = "line";
@@ -2857,8 +3059,10 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
                 parentNode = nodeLookup.get(node.parentId);
                 parentExtent = parentNode && node.extent === 'parent' ? nodeToParentExtent(parentNode) : undefined;
             }
-            // Collect all child nodes to correct their relative positions when top/left changes
-            // Determine largest minimal extent the parent node is allowed to resize to
+            /*
+             * Collect all child nodes to correct their relative positions when top/left changes
+             * Determine largest minimal extent the parent node is allowed to resize to
+             */
             childNodes = [];
             childExtent = undefined;
             for (const [childId, child] of nodeLookup) {
@@ -2912,8 +3116,10 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
                 change.y = isYPosChange ? y : prevValues.y;
                 prevValues.x = change.x;
                 prevValues.y = change.y;
-                // when top/left changes, correct the relative positions of child nodes
-                // so that they stay in the same position
+                /*
+                 * when top/left changes, correct the relative positions of child nodes
+                 * so that they stay in the same position
+                 */
                 if (childNodes.length > 0) {
                     const xChange = x - prevX;
                     const yChange = y - prevY;