@xyflow/system 0.0.54 → 0.0.56

package/dist/esm/index.js

@@ -165,7 +165,7 @@ function getConnectionStatus(isValid) {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
- * Test whether an object is useable as an Edge
+ * Test whether an object is usable as an Edge
  * @public
  * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true
  * @param element - The element to test
@@ -173,7 +173,7 @@ function getConnectionStatus(isValid) {
  */
 const isEdgeBase = (element) => 'id' in element && 'source' in element && 'target' in element;
 /**
- * Test whether an object is useable as a Node
+ * Test whether an object is usable as a Node
  * @public
  * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true
  * @param element - The element to test
@@ -185,10 +185,10 @@ const isInternalNodeBase = (element) => 'id' in element && 'internals' in elemen
  * 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
+ * @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 edges where the source is the given node.
  *
  * @example
  * ```ts
@@ -220,10 +220,10 @@ const getOutgoers = (node, nodes, edges) => {
  * 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
+ * @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 edges where the target is the given node.
  *
  * @example
  * ```ts
@@ -267,9 +267,8 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
  * 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
+ * @param nodes - Nodes to calculate the bounds for.
+ * @returns Bounding box enclosing all nodes.
  *
  * @remarks This function was previously called `getRectOfNodes`
  *
@@ -297,7 +296,7 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
  *const bounds = getNodesBounds(nodes);
  *```
  */
-const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0], nodeLookup: undefined }) => {
+const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0] }) => {
     if (process.env.NODE_ENV === 'development' && !params.nodeLookup) {
         console.warn('Please use `getNodesBounds` from `useReactFlow`/`useSvelteFlow` hook to ensure correct values for sub flows. If not possible, you have to provide a nodeLookup to support sub flows.');
     }
@@ -367,9 +366,9 @@ excludeNonSelectableNodes = false) => {
  * 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
+ * @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
@@ -632,7 +631,7 @@ const rendererPointToPoint = ({ x, y }, [tx, ty, tScale]) => {
  */
 function parsePadding(padding, viewport) {
     if (typeof padding === 'number') {
-        return Math.floor(viewport - viewport / (1 + padding));
+        return Math.floor((viewport - viewport / (1 + padding)) * 0.5);
     }
     if (typeof padding === 'string' && padding.endsWith('px')) {
         const paddingValue = parseFloat(padding);
@@ -703,16 +702,16 @@ function calculateAppliedPaddings(bounds, x, y, zoom, width, height) {
     };
 }
 /**
- * Returns a viewport that encloses the given bounds with optional padding.
+ * Returns a viewport that encloses the given bounds with padding.
  * @public
  * @remarks You can determine bounds of nodes with {@link getNodesBounds} and {@link getBoundsOfRects}
- * @param bounds - Bounds to fit inside viewport
- * @param width - Width of the viewport
- * @param height  - Height of the viewport
- * @param minZoom - Minimum zoom level of the resulting viewport
- * @param maxZoom - Maximum zoom level of the resulting viewport
- * @param padding - Optional padding around the bounds
- * @returns A transforned {@link Viewport} that encloses the given bounds which you can pass to e.g. {@link setViewport}
+ * @param bounds - Bounds to fit inside viewport.
+ * @param width - Width of the viewport.
+ * @param height  - Height of the viewport.
+ * @param minZoom - Minimum zoom level of the resulting viewport.
+ * @param maxZoom - Maximum zoom level of the resulting viewport.
+ * @param padding - Padding around the bounds.
+ * @returns A transformed {@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},
@@ -790,6 +789,19 @@ function areSetsEqual(a, b) {
     }
     return true;
 }
+/**
+ * Polyfill for Promise.withResolvers until we can use it in all browsers
+ * @internal
+ */
+function withResolvers() {
+    let resolve;
+    let reject;
+    const promise = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    return { promise, resolve, reject };
+}
 
 function getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = false, transform, containerBounds }) {
     const { x, y } = getEventPosition(event);
@@ -884,14 +896,15 @@ function getControlWithCurvature({ pos, x1, y1, x2, y2, c }) {
  * 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)
- * @param params.targetX - The x position of the target handle
- * @param params.targetY - The y position of the target handle
- * @param params.targetPosition - The position of the target handle (default: Position.Top)
- * @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
+ * @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.
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  * @example
  * ```js
  *  const source = { x: 0, y: 20 };
@@ -988,9 +1001,9 @@ const connectionExists = (edge, edges) => {
 /**
  * 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
+ * @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
@@ -1028,11 +1041,10 @@ const addEdge = (edgeParams, edges) => {
  *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
+ * @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.
+ * @returns The updated edges array.
  *
  * @example
  * ```js
@@ -1066,11 +1078,16 @@ const reconnectEdge = (oldEdge, newConnection, edges, options = { shouldReplaceI
 /**
  * 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
+ * @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.
+ *
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  * @example
  * ```js
  *  const source = { x: 0, y: 20 };
@@ -1111,8 +1128,8 @@ const getDirection = ({ source, sourcePosition = Position.Bottom, target, }) =>
 };
 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
+ * With this function we try to mimic an 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];
@@ -1243,16 +1260,19 @@ function getBend(a, b, c, size) {
 }
 /**
  * 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.
+ * 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)
- * @param params.targetX - The x position of the target handle
- * @param params.targetY - The y position of the target handle
- * @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
+ * @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.
+ *
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  * @example
  * ```js
  *  const source = { x: 0, y: 20 };
@@ -1487,7 +1507,7 @@ function updateAbsolutePositions(nodeLookup, parentLookup, options) {
 }
 function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
     const _options = mergeObjects(adoptUserNodesDefaultOptions, options);
-    let nodesInitialized = true;
+    let nodesInitialized = nodes.length > 0;
     const tmpLookup = new Map(nodeLookup);
     const selectedNodeZ = _options?.elevateNodesOnSelect ? 1000 : 0;
     nodeLookup.clear();
@@ -3294,4 +3314,4 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
     };
 }
 
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, adoptUserNodes, areConnectionMapsEqual, areSetsEqual, boxToRect, calcAutoPan, calculateNodePosition, clamp, clampPosition, clampPositionToParent, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHandlePosition, getHostForElement, getIncomers, getInternalNodesBounds, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoers, getOverlappingArea, getPointerPosition, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, handleExpandParent, infiniteExtent, initialConnection, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isInternalNodeBase, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeHasDimensions, nodeToBox, nodeToRect, oppositePosition, panBy, pointToRendererPoint, reconnectEdge, rectToBox, rendererPointToPoint, shallowNodeData, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateNodeInternals };
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, adoptUserNodes, areConnectionMapsEqual, areSetsEqual, boxToRect, calcAutoPan, calculateNodePosition, clamp, clampPosition, clampPositionToParent, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHandlePosition, getHostForElement, getIncomers, getInternalNodesBounds, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoers, getOverlappingArea, getPointerPosition, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, handleExpandParent, infiniteExtent, initialConnection, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isInternalNodeBase, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeHasDimensions, nodeToBox, nodeToRect, oppositePosition, panBy, pointToRendererPoint, reconnectEdge, rectToBox, rendererPointToPoint, shallowNodeData, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateNodeInternals, withResolvers };

package/dist/esm/index.mjs

@@ -165,7 +165,7 @@ function getConnectionStatus(isValid) {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
- * Test whether an object is useable as an Edge
+ * Test whether an object is usable as an Edge
  * @public
  * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true
  * @param element - The element to test
@@ -173,7 +173,7 @@ function getConnectionStatus(isValid) {
  */
 const isEdgeBase = (element) => 'id' in element && 'source' in element && 'target' in element;
 /**
- * Test whether an object is useable as a Node
+ * Test whether an object is usable as a Node
  * @public
  * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true
  * @param element - The element to test
@@ -185,10 +185,10 @@ const isInternalNodeBase = (element) => 'id' in element && 'internals' in elemen
  * 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
+ * @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 edges where the source is the given node.
  *
  * @example
  * ```ts
@@ -220,10 +220,10 @@ const getOutgoers = (node, nodes, edges) => {
  * 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
+ * @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 edges where the target is the given node.
  *
  * @example
  * ```ts
@@ -267,9 +267,8 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
  * 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
+ * @param nodes - Nodes to calculate the bounds for.
+ * @returns Bounding box enclosing all nodes.
  *
  * @remarks This function was previously called `getRectOfNodes`
  *
@@ -297,7 +296,7 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
  *const bounds = getNodesBounds(nodes);
  *```
  */
-const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0], nodeLookup: undefined }) => {
+const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0] }) => {
     if (process.env.NODE_ENV === 'development' && !params.nodeLookup) {
         console.warn('Please use `getNodesBounds` from `useReactFlow`/`useSvelteFlow` hook to ensure correct values for sub flows. If not possible, you have to provide a nodeLookup to support sub flows.');
     }
@@ -367,9 +366,9 @@ excludeNonSelectableNodes = false) => {
  * 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
+ * @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
@@ -632,7 +631,7 @@ const rendererPointToPoint = ({ x, y }, [tx, ty, tScale]) => {
  */
 function parsePadding(padding, viewport) {
     if (typeof padding === 'number') {
-        return Math.floor(viewport - viewport / (1 + padding));
+        return Math.floor((viewport - viewport / (1 + padding)) * 0.5);
     }
     if (typeof padding === 'string' && padding.endsWith('px')) {
         const paddingValue = parseFloat(padding);
@@ -703,16 +702,16 @@ function calculateAppliedPaddings(bounds, x, y, zoom, width, height) {
     };
 }
 /**
- * Returns a viewport that encloses the given bounds with optional padding.
+ * Returns a viewport that encloses the given bounds with padding.
  * @public
  * @remarks You can determine bounds of nodes with {@link getNodesBounds} and {@link getBoundsOfRects}
- * @param bounds - Bounds to fit inside viewport
- * @param width - Width of the viewport
- * @param height  - Height of the viewport
- * @param minZoom - Minimum zoom level of the resulting viewport
- * @param maxZoom - Maximum zoom level of the resulting viewport
- * @param padding - Optional padding around the bounds
- * @returns A transforned {@link Viewport} that encloses the given bounds which you can pass to e.g. {@link setViewport}
+ * @param bounds - Bounds to fit inside viewport.
+ * @param width - Width of the viewport.
+ * @param height  - Height of the viewport.
+ * @param minZoom - Minimum zoom level of the resulting viewport.
+ * @param maxZoom - Maximum zoom level of the resulting viewport.
+ * @param padding - Padding around the bounds.
+ * @returns A transformed {@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},
@@ -790,6 +789,19 @@ function areSetsEqual(a, b) {
     }
     return true;
 }
+/**
+ * Polyfill for Promise.withResolvers until we can use it in all browsers
+ * @internal
+ */
+function withResolvers() {
+    let resolve;
+    let reject;
+    const promise = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    return { promise, resolve, reject };
+}
 
 function getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = false, transform, containerBounds }) {
     const { x, y } = getEventPosition(event);
@@ -884,14 +896,15 @@ function getControlWithCurvature({ pos, x1, y1, x2, y2, c }) {
  * 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)
- * @param params.targetX - The x position of the target handle
- * @param params.targetY - The y position of the target handle
- * @param params.targetPosition - The position of the target handle (default: Position.Top)
- * @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
+ * @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.
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  * @example
  * ```js
  *  const source = { x: 0, y: 20 };
@@ -988,9 +1001,9 @@ const connectionExists = (edge, edges) => {
 /**
  * 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
+ * @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
@@ -1028,11 +1041,10 @@ const addEdge = (edgeParams, edges) => {
  *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
+ * @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.
+ * @returns The updated edges array.
  *
  * @example
  * ```js
@@ -1066,11 +1078,16 @@ const reconnectEdge = (oldEdge, newConnection, edges, options = { shouldReplaceI
 /**
  * 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
+ * @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.
+ *
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  * @example
  * ```js
  *  const source = { x: 0, y: 20 };
@@ -1111,8 +1128,8 @@ const getDirection = ({ source, sourcePosition = Position.Bottom, target, }) =>
 };
 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
+ * With this function we try to mimic an 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];
@@ -1243,16 +1260,19 @@ function getBend(a, b, c, size) {
 }
 /**
  * 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.
+ * 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)
- * @param params.targetX - The x position of the target handle
- * @param params.targetY - The y position of the target handle
- * @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
+ * @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.
+ *
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  * @example
  * ```js
  *  const source = { x: 0, y: 20 };
@@ -1487,7 +1507,7 @@ function updateAbsolutePositions(nodeLookup, parentLookup, options) {
 }
 function adoptUserNodes(nodes, nodeLookup, parentLookup, options) {
     const _options = mergeObjects(adoptUserNodesDefaultOptions, options);
-    let nodesInitialized = true;
+    let nodesInitialized = nodes.length > 0;
     const tmpLookup = new Map(nodeLookup);
     const selectedNodeZ = _options?.elevateNodesOnSelect ? 1000 : 0;
     nodeLookup.clear();
@@ -3294,4 +3314,4 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange, onEnd }) {
     };
 }
 
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, adoptUserNodes, areConnectionMapsEqual, areSetsEqual, boxToRect, calcAutoPan, calculateNodePosition, clamp, clampPosition, clampPositionToParent, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHandlePosition, getHostForElement, getIncomers, getInternalNodesBounds, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoers, getOverlappingArea, getPointerPosition, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, handleExpandParent, infiniteExtent, initialConnection, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isInternalNodeBase, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeHasDimensions, nodeToBox, nodeToRect, oppositePosition, panBy, pointToRendererPoint, reconnectEdge, rectToBox, rendererPointToPoint, shallowNodeData, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateNodeInternals };
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, adoptUserNodes, areConnectionMapsEqual, areSetsEqual, boxToRect, calcAutoPan, calculateNodePosition, clamp, clampPosition, clampPositionToParent, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHandlePosition, getHostForElement, getIncomers, getInternalNodesBounds, getMarkerId, getNodeDimensions, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoers, getOverlappingArea, getPointerPosition, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, handleExpandParent, infiniteExtent, initialConnection, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isInternalNodeBase, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeHasDimensions, nodeToBox, nodeToRect, oppositePosition, panBy, pointToRendererPoint, reconnectEdge, rectToBox, rendererPointToPoint, shallowNodeData, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateNodeInternals, withResolvers };

package/dist/esm/utils/edges/bezier-edge.d.ts

@@ -1,11 +1,27 @@
 import { Position } from '../../types';
 export type GetBezierPathParams = {
+    /** The `x` position of the source handle. */
     sourceX: number;
+    /** The `y` position of the source handle. */
     sourceY: number;
+    /**
+     * The position of the source handle.
+     * @default Position.Bottom
+     */
     sourcePosition?: Position;
+    /** The `x` position of the target handle. */
     targetX: number;
+    /** The `y` position of the target handle. */
     targetY: number;
+    /**
+     * The position of the target handle.
+     * @default Position.Top
+     */
     targetPosition?: Position;
+    /**
+     * The curvature of the bezier edge.
+     * @default 0.25
+     */
     curvature?: number;
 };
 export type GetControlWithCurvatureParams = {
@@ -30,14 +46,15 @@ export declare function getBezierEdgeCenter({ sourceX, sourceY, targetX, targetY
  * 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)
- * @param params.targetX - The x position of the target handle
- * @param params.targetY - The y position of the target handle
- * @param params.targetPosition - The position of the target handle (default: Position.Top)
- * @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
+ * @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.
+ * - `path`: the path to use in an SVG `<path>` element.
+ * - `labelX`: the `x` position you can use to render a label for this edge.
+ * - `labelY`: the `y` position you can use to render a label for this edge.
+ * - `offsetX`: the absolute difference between the source `x` position and the `x` position of the
+ * middle of this path.
+ * - `offsetY`: the absolute difference between the source `y` position and the `y` position of the
+ * middle of this path.
  * @example
  * ```js
  *  const source = { x: 0, y: 20 };

package/dist/esm/utils/edges/bezier-edge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bezier-edge.d.ts","sourceRoot":"","sources":["../../../src/utils/edges/bezier-edge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,GAAG,EAAE,QAAQ,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,GACf,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;CACxB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAWnC;AAuBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,OAAO,EACP,cAAgC,EAChC,OAAO,EACP,OAAO,EACP,cAA6B,EAC7B,SAAgB,GACjB,EAAE,mBAAmB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAmCxG"}
+{"version":3,"file":"bezier-edge.d.ts","sourceRoot":"","sources":["../../../src/utils/edges/bezier-edge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,mBAAmB,GAAG;IAChC,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,GAAG,EAAE,QAAQ,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,GACf,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;CACxB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAWnC;AAuBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,OAAO,EACP,cAAgC,EAChC,OAAO,EACP,OAAO,EACP,cAA6B,EAC7B,SAAgB,GACjB,EAAE,mBAAmB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAmCxG"}