@xyflow/system 0.0.14 → 0.0.16

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019-2023 webkid GmbH
+Copyright (c) 2019-2024 webkid GmbH
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/esm/index.js

@@ -128,7 +128,7 @@ const isNodeBase = (element) => 'id' in element && !('source' in element) && !('
  * @param edges - The array of all edges
  * @returns An array of nodes that are connected over eges where the source is the given node
  */
-const getOutgoersBase = (node, nodes, edges) => {
+const getOutgoers = (node, nodes, edges) => {
     if (!node.id) {
         return [];
     }
@@ -148,7 +148,7 @@ const getOutgoersBase = (node, nodes, edges) => {
  * @param edges - The array of all edges
  * @returns An array of nodes that are connected over eges where the target is the given node
  */
-const getIncomersBase = (node, nodes, edges) => {
+const getIncomers = (node, nodes, edges) => {
     if (!node.id) {
         return [];
     }
@@ -163,8 +163,10 @@ const getIncomersBase = (node, nodes, edges) => {
 const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
     if (!node) {
         return {
-            x: 0,
-            y: 0,
+            position: {
+                x: 0,
+                y: 0,
+            },
             positionAbsolute: {
                 x: 0,
                 y: 0,
@@ -178,7 +180,7 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
         y: node.position.y - offsetY,
     };
     return {
-        ...position,
+        position,
         positionAbsolute: node.computed?.positionAbsolute
             ? {
                 x: node.computed.positionAbsolute.x - offsetX,
@@ -192,18 +194,18 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
  * @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 nodeOrigin - Origin of the nodes: [0, 0] - top left, [0.5, 0.5] - center
+ * @param params.nodeOrigin - Origin of the nodes: [0, 0] - top left, [0.5, 0.5] - center
+ * @param params.useRelativePosition - Whether to use the relative or absolute node positions
  * @returns Bounding box enclosing all nodes
  */
-const getNodesBounds = (nodes, nodeOrigin = [0, 0]) => {
+const getNodesBounds = (nodes, params = { nodeOrigin: [0, 0], useRelativePosition: false }) => {
     if (nodes.length === 0) {
         return { x: 0, y: 0, width: 0, height: 0 };
     }
     const box = nodes.reduce((currBox, node) => {
-        const { x, y } = getNodePositionWithOrigin(node, node.origin || nodeOrigin).positionAbsolute;
+        const nodePos = getNodePositionWithOrigin(node, node.origin || params.nodeOrigin);
         return getBoundsOfBoxes(currBox, rectToBox({
-            x,
-            y,
+            ...nodePos[params.useRelativePosition ? 'position' : 'positionAbsolute'],
             width: node.computed?.width ?? node.width ?? 0,
             height: node.computed?.height ?? node.height ?? 0,
         }));
@@ -243,7 +245,7 @@ excludeNonSelectableNodes = false, nodeOrigin = [0, 0]) => {
  * @param edges - All edges
  * @returns Array of edges that connect any of the given nodes with each other
  */
-const getConnectedEdgesBase = (nodes, edges) => {
+const getConnectedEdges = (nodes, edges) => {
     const nodeIds = new Set();
     nodes.forEach((node) => {
         nodeIds.add(node.id);
@@ -259,64 +261,73 @@ function fitView({ nodes, width, height, panZoom, minZoom, maxZoom, nodeOrigin =
         return isVisible;
     });
     if (filteredNodes.length > 0) {
-        const bounds = getNodesBounds(filteredNodes, nodeOrigin);
+        const bounds = getNodesBounds(filteredNodes, { nodeOrigin });
         const viewport = getViewportForBounds(bounds, width, height, options?.minZoom ?? minZoom, options?.maxZoom ?? maxZoom, options?.padding ?? 0.1);
         panZoom.setViewport(viewport, { duration: options?.duration });
         return true;
     }
     return false;
 }
+/**
+ * This function clamps the passed extend by the node's width and height.
+ * This is needed to prevent the node from being dragged outside of its extent.
+ *
+ * @param node
+ * @param extent
+ * @returns
+ */
 function clampNodeExtent(node, extent) {
     if (!extent || extent === 'parent') {
         return extent;
     }
     return [extent[0], [extent[1][0] - (node.computed?.width ?? 0), extent[1][1] - (node.computed?.height ?? 0)]];
 }
-function calcNextPosition(node, nextPosition, nodes, nodeExtent, nodeOrigin = [0, 0], onError) {
-    const clampedNodeExtent = clampNodeExtent(node, node.extent || nodeExtent);
-    let currentExtent = clampedNodeExtent;
-    let parentNode = null;
-    let parentPos = { x: 0, y: 0 };
-    if (node.parentNode) {
-        parentNode = nodes.find((n) => n.id === node.parentNode) || null;
-        parentPos = parentNode
-            ? getNodePositionWithOrigin(parentNode, parentNode.origin || nodeOrigin).positionAbsolute
-            : parentPos;
-    }
+/**
+ * This function calculates the next position of a node, taking into account the node's extent, parent node, and origin.
+ *
+ * @internal
+ * @returns position, positionAbsolute
+ */
+function calculateNodePosition({ nodeId, nextPosition, nodeLookup, nodeOrigin = [0, 0], nodeExtent, onError, }) {
+    const node = nodeLookup.get(nodeId);
+    const parentNode = node.parentNode ? nodeLookup.get(node.parentNode) : undefined;
+    const { x: parentX, y: parentY } = parentNode
+        ? getNodePositionWithOrigin(parentNode, parentNode.origin || nodeOrigin).positionAbsolute
+        : { x: 0, y: 0 };
+    let currentExtent = clampNodeExtent(node, node.extent || nodeExtent);
     if (node.extent === 'parent' && !node.expandParent) {
-        const nodeWidth = node.computed?.width;
-        const nodeHeight = node.computed?.height;
-        if (node.parentNode && nodeWidth && nodeHeight) {
-            const currNodeOrigin = node.origin || nodeOrigin;
-            currentExtent =
-                parentNode && isNumeric(parentNode.computed?.width) && isNumeric(parentNode.computed?.height)
-                    ? [
-                        [parentPos.x + nodeWidth * currNodeOrigin[0], parentPos.y + nodeHeight * currNodeOrigin[1]],
-                        [
-                            parentPos.x + (parentNode.computed?.width ?? 0) - nodeWidth + nodeWidth * currNodeOrigin[0],
-                            parentPos.y + (parentNode.computed?.height ?? 0) - nodeHeight + nodeHeight * currNodeOrigin[1],
-                        ],
-                    ]
-                    : currentExtent;
+        if (!parentNode) {
+            onError?.('005', errorMessages['error005']());
         }
         else {
-            onError?.('005', errorMessages['error005']());
-            currentExtent = clampedNodeExtent;
+            const nodeWidth = node.computed?.width;
+            const nodeHeight = node.computed?.height;
+            const parentWidth = parentNode?.computed?.width;
+            const parentHeight = parentNode?.computed?.height;
+            if (nodeWidth && nodeHeight && parentWidth && parentHeight) {
+                const currNodeOrigin = node.origin || nodeOrigin;
+                const extentX = parentX + nodeWidth * currNodeOrigin[0];
+                const extentY = parentY + nodeHeight * currNodeOrigin[1];
+                currentExtent = [
+                    [extentX, extentY],
+                    [extentX + parentWidth - nodeWidth, extentY + parentHeight - nodeHeight],
+                ];
+            }
         }
     }
-    else if (node.extent && node.parentNode && node.extent !== 'parent') {
+    else if (parentNode && isCoordinateExtent(node.extent)) {
         currentExtent = [
-            [node.extent[0][0] + parentPos.x, node.extent[0][1] + parentPos.y],
-            [node.extent[1][0] + parentPos.x, node.extent[1][1] + parentPos.y],
+            [node.extent[0][0] + parentX, node.extent[0][1] + parentY],
+            [node.extent[1][0] + parentX, node.extent[1][1] + parentY],
         ];
     }
-    const positionAbsolute = currentExtent && currentExtent !== 'parent'
+    const positionAbsolute = isCoordinateExtent(currentExtent)
         ? clampPosition(nextPosition, currentExtent)
         : nextPosition;
     return {
         position: {
-            x: positionAbsolute.x - parentPos.x,
-            y: positionAbsolute.y - parentPos.y,
+            x: positionAbsolute.x - parentX,
+            y: positionAbsolute.y - parentY,
         },
         positionAbsolute,
     };
@@ -346,7 +357,7 @@ async function getElementsToRemove({ nodesToRemove = [], edgesToRemove = [], nod
     }
     const edgeIds = edgesToRemove.map((edge) => edge.id);
     const deletableEdges = edges.filter((edge) => edge.deletable !== false);
-    const connectedEdges = getConnectedEdgesBase(matchingNodes, deletableEdges);
+    const connectedEdges = getConnectedEdges(matchingNodes, deletableEdges);
     const matchingEdges = connectedEdges;
     for (const edge of deletableEdges) {
         const isIncluded = edgeIds.includes(edge.id);
@@ -503,6 +514,9 @@ const getViewportForBounds = (bounds, width, height, minZoom, maxZoom, padding)
     return { x, y, zoom: clampedZoom };
 };
 const isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.indexOf('Mac') >= 0;
+function isCoordinateExtent(extent) {
+    return extent !== undefined && extent !== 'parent';
+}
 
 function getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = false, transform }) {
     const { x, y } = getEventPosition(event);
@@ -700,7 +714,7 @@ const connectionExists = (edge, edges) => {
  * @param edges -  The array of all current edges
  * @returns A new array of edges with the new edge added
  */
-const addEdgeBase = (edgeParams, edges) => {
+const addEdge = (edgeParams, edges) => {
     if (!edgeParams.source || !edgeParams.target) {
         devWarn('006', errorMessages['error006']());
         return edges;
@@ -734,7 +748,7 @@ const addEdgeBase = (edgeParams, edges) => {
  * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
  * @returns the updated edges array
  */
-const updateEdgeBase = (oldEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
+const updateEdge = (oldEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
     const { id: oldEdgeId, ...rest } = oldEdge;
     if (!newConnection.source || !newConnection.target) {
         devWarn('006', errorMessages['error006']());
@@ -1048,13 +1062,8 @@ function getHandle(bounds, handleId) {
     if (!bounds) {
         return null;
     }
-    if (bounds.length === 1 || !handleId) {
-        return bounds[0];
-    }
-    else if (handleId) {
-        return bounds.find((d) => d.id === handleId) || null;
-    }
-    return null;
+    // if no handleId is given, we use the first handle, otherwise we check for the id
+    return (!handleId ? bounds[0] : bounds.find((d) => d.id === handleId)) || null;
 }
 
 function getMarkerId(marker, id) {
@@ -1070,16 +1079,16 @@ function getMarkerId(marker, id) {
         .map((key) => `${key}=${marker[key]}`)
         .join('&')}`;
 }
-function createMarkerIds(edges, { id, defaultColor }) {
-    const ids = [];
+function createMarkerIds(edges, { id, defaultColor, defaultMarkerStart, defaultMarkerEnd, }) {
+    const ids = new Set();
     return edges
         .reduce((markers, edge) => {
-        [edge.markerStart, edge.markerEnd].forEach((marker) => {
+        [edge.markerStart || defaultMarkerStart, edge.markerEnd || defaultMarkerEnd].forEach((marker) => {
             if (marker && typeof marker === 'object') {
                 const markerId = getMarkerId(marker, id);
-                if (!ids.includes(markerId)) {
+                if (!ids.has(markerId)) {
                     markers.push({ id: markerId, color: marker.color || defaultColor, ...marker });
-                    ids.push(markerId);
+                    ids.add(markerId);
                 }
             }
         });
@@ -1201,7 +1210,7 @@ function calculateXYZPosition(node, nodes, nodeLookup, result, nodeOrigin) {
         return result;
     }
     const parentNode = nodeLookup.get(node.parentNode);
-    const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
+    const { position: parentNodePosition } = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
     return calculateXYZPosition(parentNode, nodes, nodeLookup, {
         x: (result.x ?? 0) + parentNodePosition.x,
         y: (result.y ?? 0) + parentNodePosition.y,
@@ -1351,6 +1360,7 @@ function getEventHandlerParams({ nodeId, dragItems, nodeLookup, }) {
     return [nodeId ? nodesFromDragItems.find((n) => n.id === nodeId) : nodesFromDragItems[0], nodesFromDragItems];
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag, onDragStop, }) {
     let lastPos = { x: null, y: null };
     let autoPanId = 0;
@@ -1364,12 +1374,12 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
     // public functions
     function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId }) {
         function updateNodes({ x, y }) {
-            const { nodes, nodeLookup, nodeExtent, snapGrid, snapToGrid, nodeOrigin, onNodeDrag, onSelectionDrag, onError, updateNodePositions, } = getStoreItems();
+            const { nodeLookup, nodeExtent, snapGrid, snapToGrid, nodeOrigin, onNodeDrag, onSelectionDrag, onError, updateNodePositions, } = getStoreItems();
             lastPos = { x, y };
             let hasChange = false;
             let nodesBox = { x: 0, y: 0, x2: 0, y2: 0 };
             if (dragItems.length > 1 && nodeExtent) {
-                const rect = getNodesBounds(dragItems, nodeOrigin);
+                const rect = getNodesBounds(dragItems, { nodeOrigin });
                 nodesBox = rectToBox(rect);
             }
             dragItems = dragItems.map((n) => {
@@ -1391,11 +1401,18 @@ function XYDrag({ domNode, onNodeMouseDown, getStoreItems, onDragStart, onDrag,
                     adjustedNodeExtent[1][1] =
                         n.computed.positionAbsolute.y + (n.computed?.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
                 }
-                const updatedPos = calcNextPosition(n, nextPosition, nodes, adjustedNodeExtent, nodeOrigin, onError);
+                const { position, positionAbsolute } = calculateNodePosition({
+                    nodeId: n.id,
+                    nextPosition,
+                    nodeLookup,
+                    nodeExtent: adjustedNodeExtent,
+                    nodeOrigin,
+                    onError,
+                });
                 // we want to make sure that we only fire a change event when there is a change
-                hasChange = hasChange || n.position.x !== updatedPos.position.x || n.position.y !== updatedPos.position.y;
-                n.position = updatedPos.position;
-                n.computed.positionAbsolute = updatedPos.positionAbsolute;
+                hasChange = hasChange || n.position.x !== position.x || n.position.y !== position.y;
+                n.position = position;
+                n.computed.positionAbsolute = positionAbsolute;
                 return n;
             });
             if (!hasChange) {
@@ -1610,7 +1627,7 @@ function getConnectionStatus(isInsideConnectionRadius, isHandleValid) {
 
 const alwaysValid = () => true;
 let connectionStartHandle = null;
-function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodes, lib, autoPanOnConnect, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onEdgeUpdateEnd, updateConnection, getTransform, }) {
+function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodes, lib, autoPanOnConnect, flowId, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onEdgeUpdateEnd, updateConnection, getTransform, }) {
     // when xyflow is used inside a shadow root we can't use document
     const doc = getHostForElement(event.target);
     let autoPanId = 0;
@@ -1674,6 +1691,7 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
             isValidConnection,
             doc,
             lib,
+            flowId,
         });
         handleDomNode = result.handleDomNode;
         connection = result.connection;
@@ -1729,9 +1747,11 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
     doc.addEventListener('touchend', onPointerUp);
 }
 // checks if  and returns connection in fom of an object { source: 123, target: 312 }
-function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId, fromType, doc, lib, isValidConnection = alwaysValid, }) {
+function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId, fromType, doc, lib, flowId, isValidConnection = alwaysValid, }) {
     const isTarget = fromType === 'target';
-    const handleDomNode = doc.querySelector(`.${lib}-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`);
+    const handleDomNode = handle
+        ? doc.querySelector(`.${lib}-flow__handle[data-id="${flowId}-${handle?.nodeId}-${handle?.id}-${handle?.type}"]`)
+        : 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,
@@ -2390,4 +2410,4 @@ function XYResizer({ domNode, nodeId, getStoreItems, onChange }) {
     };
 }
 
-export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdgeBase, adoptUserProvidedNodes, areConnectionMapsEqual, boxToRect, calcAutoPan, calcNextPosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdgesBase, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomersBase, getMarkerId, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoersBase, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, infiniteExtent, internalsSymbol, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdgeBase, updateNodeDimensions };
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, ResizeControlVariant, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, XY_RESIZER_HANDLE_POSITIONS, XY_RESIZER_LINE_POSITIONS, addEdge, adoptUserProvidedNodes, areConnectionMapsEqual, boxToRect, calcAutoPan, calculateNodePosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomers, getMarkerId, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoers, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, infiniteExtent, internalsSymbol, isCoordinateExtent, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdge, updateNodeDimensions };