react-cosmos-diagram 0.7.0 → 0.7.2

package/dist/esm/index.js

@@ -1,1187 +1,12 @@
-import { select } from 'd3-selection';
-import { drag } from 'd3-drag';
-import { zoom, zoomTransform, zoomIdentity } from 'd3-zoom';
+"use client"
+import { errorMessages, CosmosPanZoom, CosmosDrag, getRectOfNodes, getEventPosition, getNodesInside, Position, internalsSymbol as internalsSymbol$1, MarkerType, getMarkerId, isNumeric, getStraightPath, getStepPath, getBezierPath, CosmosPort, devWarn, isMouseEvent, clampPosition, getNodePositionWithOrigin, getDimensions, getPortBounds } from 'cosmos-diagram';
+export { MarkerType, Position, addEdge, boxToRect, clamp, getBezierEdgeCenter, getBezierPath, getStepPath, getStraightPath, isCoreEdge, isCoreNode, rectToBox, updateEdge } from 'cosmos-diagram';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useContext, useMemo, useState, useEffect, useRef, memo, useCallback, forwardRef } from 'react';
 import { useStore as useStore$1, createStore } from 'zustand';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
-
-var Position;
-(function (Position) {
-    Position["Left"] = "left";
-    Position["Top"] = "top";
-    Position["Right"] = "right";
-    Position["Bottom"] = "bottom";
-})(Position || (Position = {}));
-
-// export const internalsSymbol = Symbol.for('internals');
-const internalsSymbol$1 = 'internals';
-
-var MarkerType;
-(function (MarkerType) {
-    MarkerType["Arrow"] = "arrow";
-})(MarkerType || (MarkerType = {}));
-
-const getDimensions = (node) => ({
-    width: node.offsetWidth,
-    height: node.offsetHeight,
-});
-const getPortBounds = (selector, nodeElement, zoom, nodeOrigin) => {
-    const ports = nodeElement.querySelectorAll(selector);
-    if (!ports || !ports.length) {
-        return null;
-    }
-    const portsArray = Array.from(ports);
-    const nodeBounds = nodeElement.getBoundingClientRect();
-    const nodeOffset = {
-        x: nodeBounds.width * nodeOrigin[0],
-        y: nodeBounds.height * nodeOrigin[1],
-    };
-    return portsArray.map((port) => {
-        const portBounds = port.getBoundingClientRect();
-        return {
-            id: port.getAttribute('data-portid'),
-            position: port.dataset.portPosition,
-            x: (portBounds.left - nodeBounds.left - nodeOffset.x) / zoom,
-            y: (portBounds.top - nodeBounds.top - nodeOffset.y) / zoom,
-            ...getDimensions(port),
-        };
-    });
-};
-const getHostForElement = (element) => element.getRootNode?.() || window?.document;
-const isMouseEvent = (event) => 'clientX' in event;
-const getEventPosition = (event, bounds) => {
-    const isMouseTriggered = isMouseEvent(event);
-    const eventX = isMouseTriggered ? event.clientX : event.touches?.[0].clientX;
-    const eventY = isMouseTriggered ? event.clientY : event.touches?.[0].clientY;
-    return {
-        x: eventX - (bounds?.left ?? 0),
-        y: eventY - (bounds?.top ?? 0),
-    };
-};
-const pointToRendererPoint = ({ x, y }, [tx, ty, tScale]) => {
-    const position = {
-        x: (x - tx) / tScale,
-        y: (y - ty) / tScale,
-    };
-    return position;
-};
-const rendererPointToPoint = ({ x, y }, [tx, ty, tScale]) => {
-    return {
-        x: x * tScale + tx,
-        y: y * tScale + ty,
-    };
-};
-const getPointerPosition = (event, { transform, gridStep, centerStep }) => {
-    const { x, y } = getEventPosition(event);
-    const pointerPos = pointToRendererPoint({ x, y }, transform);
-    const getStepPosition = (params = {
-        position: pointerPos,
-    }) => {
-        const { position, nodeSize } = params;
-        if (!gridStep)
-            return position;
-        let x = gridStep[0] * Math.round(position.x / gridStep[0]), y = gridStep[1] * Math.round(position.y / gridStep[1]);
-        if (centerStep && nodeSize) {
-            const centerX = (gridStep[0] - nodeSize.width) / 2;
-            const centerY = (gridStep[1] - nodeSize.height) / 2;
-            const positionX = position.x - centerX;
-            const positionY = position.y - centerY;
-            x = gridStep[0] * Math.round(positionX / gridStep[0]) + centerX;
-            y = gridStep[1] * Math.round(positionY / gridStep[1]) + centerY;
-        }
-        return {
-            x,
-            y,
-        };
-    };
-    return {
-        getStepPosition,
-        ...pointerPos,
-    };
-};
-
-const errorMessages = {
-    '001': () => 'Seems like you have not used zustand provider as an ancestor',
-    '002': () => 'It looks like you`ve created a new nodeTypes or edgeTypes object. If this wasn`t on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them.',
-    '010': (nodeType) => `Node type "${nodeType}" not found. Using fallback type "default".`,
-    '011': () => 'Only child nodes can use a parent extent',
-    '020': () => 'Can`t create edge. An edge needs a source and a target.',
-    '021': (id) => `The old edge with id=${id} does not exist.`,
-    '022': (type) => `Marker type "${type}" doesn't exist.`,
-};
-
-const clamp = (val, min = 0, max = 1) => Math.min(Math.max(val, min), max);
-const calcAutoPanVelocity = (value, bound, radius, velocity) => {
-    const maxRadius = bound - radius;
-    if (value < radius) {
-        return (clamp(Math.abs(value - radius), 1, 50) / 50) * velocity;
-    }
-    else if (value > maxRadius) {
-        return (-clamp(Math.abs(value - maxRadius), 1, 50) / 50) * velocity;
-    }
-    return 0;
-};
-const calcAutoPanPosition = (pos, bounds) => {
-    const xMovement = calcAutoPanVelocity(pos.x, bounds.width, 30, 10);
-    const yMovement = calcAutoPanVelocity(pos.y, bounds.height, 30, 10);
-    return [xMovement, yMovement];
-};
-const devWarn = (id, value = '') => {
-    if (process.env.NODE_ENV === 'development') {
-        console.warn(`[React Diagram]: ${id}-${errorMessages[id](value)}`);
-    }
-};
-const rectToBox = ({ x, y, width, height }) => ({
-    x,
-    y,
-    x2: x + width,
-    y2: y + height,
-});
-const boxToRect = ({ x, y, x2, y2 }) => ({
-    x,
-    y,
-    width: x2 - x,
-    height: y2 - y,
-});
-const getBoundsOfBoxes = (box1, box2) => ({
-    x: Math.min(box1.x, box2.x),
-    y: Math.min(box1.y, box2.y),
-    x2: Math.max(box1.x2, box2.x2),
-    y2: Math.max(box1.y2, box2.y2),
-});
-const isNumeric = (n) => !isNaN(n) && isFinite(n);
-const getOverlappingArea = (rectA, rectB) => {
-    const xOverlap = Math.max(0, Math.min(rectA.x + rectA.width, rectB.x + rectB.width) -
-        Math.max(rectA.x, rectB.x));
-    const yOverlap = Math.max(0, Math.min(rectA.y + rectA.height, rectB.y + rectB.height) -
-        Math.max(rectA.y, rectB.y));
-    return Math.ceil(xOverlap * yOverlap);
-};
-const clampPosition = (position = { x: 0, y: 0 }, extent) => ({
-    x: clamp(position.x, extent[0][0], extent[1][0]),
-    y: clamp(position.y, extent[0][1], extent[1][1]),
-});
-
-const isCoreNode = (element) => 'id' in element && !('source' in element) && !('target' in element);
-const isCoreEdge = (element) => 'source' in element && 'target' in element;
-const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
-    if (!node) {
-        return {
-            x: 0,
-            y: 0,
-            positionAbsolute: {
-                x: 0,
-                y: 0,
-            },
-        };
-    }
-    const offsetX = (node.width ?? 0) * nodeOrigin[0];
-    const offsetY = (node.height ?? 0) * nodeOrigin[1];
-    const position = {
-        x: node.position.x - offsetX,
-        y: node.position.y - offsetY,
-    };
-    return {
-        ...position,
-        positionAbsolute: node.positionAbsolute
-            ? {
-                x: node.positionAbsolute.x - offsetX,
-                y: node.positionAbsolute.y - offsetY,
-            }
-            : position,
-    };
-};
-const getNodesInside = (nodeInternals, rect, [tx, ty, tScale] = [0, 0, 1], partially = false, excludeNonSelectableNodes = false, nodeOrigin = [0, 0]) => {
-    const paneRect = {
-        x: (rect.x - tx) / tScale,
-        y: (rect.y - ty) / tScale,
-        width: rect.width / tScale,
-        height: rect.height / tScale,
-    };
-    const visibleNodes = [];
-    nodeInternals.forEach((node) => {
-        const { width, height, selectable = true, hidden = false } = node;
-        if ((excludeNonSelectableNodes && !selectable) || hidden) {
-            return false;
-        }
-        const { positionAbsolute } = getNodePositionWithOrigin(node, nodeOrigin);
-        const nodeRect = {
-            x: positionAbsolute.x,
-            y: positionAbsolute.y,
-            width: width || 0,
-            height: height || 0,
-        };
-        const overlappingArea = getOverlappingArea(paneRect, nodeRect);
-        const notInitialized = typeof width === 'undefined' ||
-            typeof height === 'undefined' ||
-            width === null ||
-            height === null;
-        const partiallyVisible = partially && overlappingArea > 0;
-        const area = (width || 0) * (height || 0);
-        const isVisible = notInitialized || partiallyVisible || overlappingArea >= area;
-        if (isVisible || node.dragging) {
-            visibleNodes.push(node);
-        }
-    });
-    return visibleNodes;
-};
-const getRectOfNodes = (nodes, nodeOrigin = [0, 0]) => {
-    if (nodes.length === 0) {
-        return { x: 0, y: 0, width: 0, height: 0 };
-    }
-    const box = nodes.reduce((currentBox, node) => {
-        const { x, y } = getNodePositionWithOrigin(node, nodeOrigin).positionAbsolute;
-        const nextBox = rectToBox({
-            x,
-            y,
-            width: node.width || 0,
-            height: node.height || 0,
-        });
-        return getBoundsOfBoxes(currentBox, nextBox);
-    }, { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity });
-    return boxToRect(box);
-};
-const calcNextPosition = (node, nextPosition, nodeInternals, nodeExtent, nodeOrigin = [0, 0]) => {
-    let currentExtent = node.extent || nodeExtent;
-    if (node.extent && node.parentNode) {
-        const parent = nodeInternals.get(node.parentNode);
-        const { x: parentX, y: parentY } = getNodePositionWithOrigin(parent, nodeOrigin).positionAbsolute;
-        currentExtent = [
-            [node.extent[0][0] + parentX, node.extent[0][1] + parentY],
-            [node.extent[1][0] + parentX, node.extent[1][1] + parentY],
-        ];
-    }
-    let parentPosition = { x: 0, y: 0 };
-    if (node.parentNode) {
-        const parentNode = nodeInternals.get(node.parentNode);
-        parentPosition = getNodePositionWithOrigin(parentNode, nodeOrigin).positionAbsolute;
-    }
-    const positionAbsolute = currentExtent
-        ? clampPosition(nextPosition, currentExtent)
-        : nextPosition;
-    return {
-        position: {
-            x: positionAbsolute.x - parentPosition.x,
-            y: positionAbsolute.y - parentPosition.y,
-        },
-        positionAbsolute,
-    };
-};
-
-const getMarkerId = (marker, id) => {
-    if (typeof marker === 'undefined')
-        return '';
-    if (typeof marker === 'string')
-        return marker;
-    const idPrefix = id ? `${id}__` : '';
-    const markerKeys = Object.keys(marker);
-    return `${idPrefix}${markerKeys
-        .sort()
-        .map((key) => `${key}=${marker[key]}`)
-        .join('&')}`;
-};
-// export function createMarkerIds(
-//    edges: EdgeBase[],
-//    {
-//       id,
-//       defaultColor,
-//       defaultMarkerStart,
-//       defaultMarkerEnd,
-//    }: {
-//       id?: string | null;
-//       defaultColor?: string;
-//       defaultMarkerStart?: EdgeMarker;
-//       defaultMarkerEnd?: EdgeMarker;
-//    },
-// ) {
-//    const ids = new Set<string>();
-//    return edges
-//       .reduce<(EdgeMarker & { id: string })[]>((markers, edge) => {
-//          [
-//             edge.markerStart || defaultMarkerStart,
-//             edge.markerEnd || defaultMarkerEnd,
-//          ].forEach((marker) => {
-//             if (marker && typeof marker === 'object') {
-//                const markerId = getMarkerId(marker, id);
-//                if (!ids.has(markerId)) {
-//                   markers.push({
-//                      id: markerId,
-//                      color: marker.color || defaultColor,
-//                      ...marker,
-//                   });
-//                   ids.add(markerId);
-//                }
-//             }
-//          });
-//          return markers;
-//       }, [])
-//       .sort((a, b) => a.id.localeCompare(b.id));
-// }
-
-const getEdgeCenter = ({ sourceX, sourceY, targetX, targetY, }) => {
-    const xOffset = Math.abs(targetX - sourceX) / 2;
-    const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
-    const yOffset = Math.abs(targetY - sourceY) / 2;
-    const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
-    return [centerX, centerY, xOffset, yOffset];
-};
-const getEdgeId = ({ source, sourcePort, target, targetPort, }) => `react-diagram__edge-${source}${sourcePort}-${target}${targetPort}`;
-const isExistsConnection = (edge, edges) => edges.some((el) => el.source === edge.source &&
-    el.target === edge.target &&
-    (el.sourcePort === edge.sourcePort ||
-        (!el.sourcePort && !edge.sourcePort)) &&
-    (el.targetPort === edge.targetPort ||
-        (!el.targetPort && !edge.targetPort)));
-const addEdge = (edgeParams, edges) => {
-    if (!isCoreEdge(edgeParams)) {
-        devWarn('020');
-        return edges;
-    }
-    if (isExistsConnection(edgeParams, edges)) {
-        return edges;
-    }
-    let edge;
-    if (edgeParams.sourcePort === null) {
-        delete edgeParams.sourcePort;
-    }
-    if (edgeParams.targetPort === null) {
-        delete edgeParams.targetPort;
-    }
-    if (edgeParams.id)
-        edge = { ...edgeParams };
-    else
-        edge = {
-            ...edgeParams,
-            id: getEdgeId(edgeParams),
-        };
-    return edges.concat(edge);
-};
-const updateEdge = (originEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
-    const { id: oldEdgeId, ...rest } = originEdge;
-    if (!newConnection.source || !newConnection.target)
-        devWarn('020');
-    const foundEdge = edges.find((e) => e.id === oldEdgeId);
-    if (!foundEdge)
-        devWarn('021', oldEdgeId);
-    const edge = {
-        ...rest,
-        id: options.shouldReplaceId ? getEdgeId(newConnection) : oldEdgeId,
-        source: newConnection.source,
-        target: newConnection.target,
-    };
-    return edges.filter((e) => e.id !== oldEdgeId).concat(edge);
-};
-
-const HANDLE_DIRECTIONS = {
-    [Position.Left]: { x: -1, y: 0 },
-    [Position.Right]: { x: 1, y: 0 },
-    [Position.Top]: { x: 0, y: -1 },
-    [Position.Bottom]: { x: 0, y: 1 },
-};
-const getDirection = ({ source, sourcePosition = Position.Bottom, target, }) => {
-    if (sourcePosition === Position.Left || sourcePosition === Position.Right) {
-        // when source Node position is on the left side of a Port of target Node => x = 1
-        return source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 };
-    }
-    //when source Node position is above of a Port of target Node => y = 1
-    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));
-const getPoints = ({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset, }) => {
-    const sourceDir = HANDLE_DIRECTIONS[sourcePosition];
-    const targetDir = HANDLE_DIRECTIONS[targetPosition];
-    const sourceGapped = {
-        x: source.x + sourceDir.x * offset,
-        y: source.y + sourceDir.y * offset,
-    };
-    const targetGapped = {
-        x: target.x + targetDir.x * offset,
-        y: target.y + targetDir.y * offset,
-    };
-    const direction = getDirection({
-        source: sourceGapped,
-        sourcePosition,
-        target: targetGapped,
-    });
-    const dirAccessor = direction.x !== 0 ? 'x' : 'y';
-    const currentDirection = direction[dirAccessor];
-    let points = [];
-    let centerX = 0, centerY = 0;
-    const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getEdgeCenter({
-        sourceX: source.x,
-        sourceY: source.y,
-        targetX: target.x,
-        targetY: target.y,
-    });
-    const isSourceAndTargetPositionsParallel = sourceDir[dirAccessor] * targetDir[dirAccessor] === -1;
-    if (isSourceAndTargetPositionsParallel) {
-        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 },
-        ];
-        const centerLineIsBent = sourceDir[dirAccessor] !== currentDirection;
-        if (centerLineIsBent) {
-            points = dirAccessor === 'x' ? horizontalSplit : verticalSplit;
-        }
-        else {
-            points = dirAccessor === 'x' ? verticalSplit : horizontalSplit;
-        }
-    }
-    const pathPoints = [source, sourceGapped, ...points, targetGapped, target];
-    return [pathPoints, centerX, centerY, defaultOffsetX, defaultOffsetY];
-};
-const getBend = (a, b, c, size) => {
-    const bendSize = Math.min(distance(a, b) / 2, distance(b, c) / 2, size);
-    const { x, y } = b;
-    // no bend
-    if ((a.x === x && x === c.x) || (a.y === y && y === c.y)) {
-        return `L${x} ${y}`;
-    }
-    // first segment is horizontal
-    if (a.y === y) {
-        const xDir = a.x < c.x ? -1 : 1;
-        const yDir = a.y < c.y ? 1 : -1;
-        return `L ${x + bendSize * xDir},${y}Q ${x},${y} ${x},${y + bendSize * yDir}`;
-    }
-    const xDir = a.x < c.x ? 1 : -1;
-    const yDir = a.y < c.y ? -1 : 1;
-    return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;
-};
-const getStepPath = ({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, borderRadius = 5, centerX, centerY, offset = 20, }) => {
-    const [points, labelX, labelY, offsetX, offsetY] = getPoints({
-        source: { x: sourceX, y: sourceY },
-        sourcePosition,
-        target: { x: targetX, y: targetY },
-        targetPosition,
-        center: { x: centerX, y: centerY },
-        offset,
-    });
-    const path = points.reduce((res, p, i) => {
-        let segment = '';
-        if (i > 0 && i < points.length - 1) {
-            segment = getBend(points[i - 1], p, points[i + 1], borderRadius);
-        }
-        else {
-            segment = `${i === 0 ? 'M' : 'L'}${p.x} ${p.y}`;
-        }
-        res += segment;
-        return res;
-    }, '');
-    return [path, labelX, labelY, offsetX, offsetY];
-};
-
-/**
- * Get a straight path from source to target port
- * @param params.sourceX - The x position of the source port
- * @param params.sourceY - The y position of the source port
- * @param params.targetX - The x position of the target port
- * @param params.targetY - The y position of the target port
- * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source port and label
- * @example
- *  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 getStraightPath = ({ sourceX, sourceY, targetX, targetY, }) => {
-    const [labelX, labelY, offsetX, offsetY] = getEdgeCenter({
-        sourceX,
-        sourceY,
-        targetX,
-        targetY,
-    });
-    return [
-        `M ${sourceX},${sourceY}L ${targetX},${targetY}`,
-        labelX,
-        labelY,
-        offsetX,
-        offsetY,
-    ];
-};
-
-const 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
-    const midPoint = 0.5;
-    const point = 0.125;
-    const controlPoint = midPoint - point;
-    const centerX = sourceX * point +
-        sourceControlX * controlPoint +
-        targetControlX * controlPoint +
-        targetX * point;
-    const centerY = sourceY * point +
-        sourceControlY * controlPoint +
-        targetControlY * controlPoint +
-        targetY * point;
-    const offsetX = Math.abs(centerX - sourceX);
-    const offsetY = Math.abs(centerY - sourceY);
-    return [centerX, centerY, offsetX, offsetY];
-};
-const calculateControlOffset = (distance, curvature) => {
-    if (distance >= 0) {
-        return 0.5 * distance;
-    }
-    return curvature * 25 * Math.sqrt(-distance);
-};
-const getControlWithCurvature = ({ pos, x1, y1, x2, y2, c, }) => {
-    switch (pos) {
-        case Position.Left:
-            return [x1 - calculateControlOffset(x1 - x2, c), y1];
-        case Position.Right:
-            return [x1 + calculateControlOffset(x2 - x1, c), y1];
-        case Position.Top:
-            return [x1, y1 - calculateControlOffset(y1 - y2, c)];
-        case Position.Bottom:
-            return [x1, y1 + calculateControlOffset(y2 - y1, c)];
-    }
-};
-/**
- * Get a bezier path from source to target port
- * @param params.sourceX - The x position of the source port
- * @param params.sourceY - The y position of the source port
- * @param params.sourcePosition - The position of the source port (default: Position.Bottom)
- * @param params.targetX - The x position of the target port
- * @param params.targetY - The y position of the target port
- * @param params.targetPosition - The position of the target port (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 port and label
- * @example
- *  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 getBezierPath = ({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, curvature = 0.25, }) => {
-    const [sourceControlX, sourceControlY] = getControlWithCurvature({
-        pos: sourcePosition,
-        x1: sourceX,
-        y1: sourceY,
-        x2: targetX,
-        y2: targetY,
-        c: curvature,
-    });
-    const [targetControlX, targetControlY] = getControlWithCurvature({
-        pos: targetPosition,
-        x1: targetX,
-        y1: targetY,
-        x2: sourceX,
-        y2: sourceY,
-        c: curvature,
-    });
-    const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
-        sourceX,
-        sourceY,
-        targetX,
-        targetY,
-        sourceControlX,
-        sourceControlY,
-        targetControlX,
-        targetControlY,
-    });
-    return [
-        `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
-        labelX,
-        labelY,
-        offsetX,
-        offsetY,
-    ];
-};
-
-const getPorts = (node, portBounds, type, currentPort) => (portBounds[type] || []).reduce((res, h) => {
-    if (`${node.id}-${h.id}-${type}` !== currentPort) {
-        res.push({
-            portId: h.id || null,
-            portType: type,
-            nodeId: node.id,
-            x: (node.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
-            y: (node.positionAbsolute?.y ?? 0) + h.y + h.height / 2,
-        });
-    }
-    return res;
-}, []);
-const getPortType = (PortDomNode) => {
-    if (PortDomNode?.classList.contains('target')) {
-        return 'target';
-    }
-    else if (PortDomNode?.classList.contains('source')) {
-        return 'source';
-    }
-    return null;
-};
-const getAllPort = ({ nodes, nodeId, portId, portType, }) => nodes.reduce((res, node) => {
-    if (node[internalsSymbol$1]) {
-        const { portBounds } = node[internalsSymbol$1];
-        let sourcePorts = [];
-        let targetPorts = [];
-        if (portBounds) {
-            sourcePorts = getPorts(node, portBounds, 'source', `${nodeId}-${portId}-${portType}`);
-            targetPorts = getPorts(node, portBounds, 'target', `${nodeId}-${portId}-${portType}`);
-        }
-        res.push(...sourcePorts, ...targetPorts);
-    }
-    return res;
-}, []);
-const getClosestPort = (pos, connectionRadius, ports) => {
-    let closestPort = null;
-    let minDistance = Infinity;
-    ports.forEach((port) => {
-        const distance = Math.sqrt(Math.pow(port.x - pos.x, 2) + Math.pow(port.y - pos.y, 2));
-        if (distance <= connectionRadius && distance < minDistance) {
-            minDistance = distance;
-            closestPort = port;
-        }
-    });
-    return closestPort;
-};
-const getConnection = (event, port, fromNodeId, fromPortId, fromType, doc) => {
-    const isTarget = fromType === 'target';
-    const result = {
-        isValid: false,
-        connection: null,
-        endPort: null,
-    };
-    const PortDomNode = doc.querySelector(`.react-diagram__port[data-id="${port?.nodeId}-${port?.portId}-${port?.portType}"]`);
-    const { x, y } = getEventPosition(event);
-    const ElementFromPoint = doc.elementFromPoint(x, y);
-    const Port = ElementFromPoint?.classList.contains('react-diagram__port')
-        ? ElementFromPoint
-        : PortDomNode;
-    if (Port) {
-        const portType = getPortType(Port);
-        const toNodeId = Port.getAttribute('data-nodeid');
-        const toPortId = Port.getAttribute('data-portid');
-        const connection = {
-            source: isTarget ? toNodeId : fromNodeId,
-            target: isTarget ? fromNodeId : toNodeId,
-            sourcePort: isTarget ? port?.portId || null : fromPortId,
-            targetPort: isTarget ? fromPortId : port?.portId || null,
-        };
-        result.connection = connection;
-        const isValid = (isTarget && portType === 'source') ||
-            (!isTarget && portType === 'target');
-        if (isValid) {
-            result.isValid = true;
-            result.endPort = {
-                nodeId: toNodeId,
-                portId: toPortId,
-                portType,
-            };
-        }
-    }
-    return result;
-};
-
-let connectionStartPort = null;
-const onPointerDown = ({ isAnchor = false, event, nodeId, portId, portType, domNode, autoPanOnConnect, connectionRadius, nodes, getTransform, cancelConnection, onConnectStart, onConnect, onConnectEnd, onEdgeUpdateEnd, panBy, updateConnection, }) => {
-    const doc = getHostForElement(event.target);
-    const containerBounds = domNode?.getBoundingClientRect();
-    const { x, y } = getEventPosition(event);
-    const clickedPort = doc?.elementFromPoint(x, y);
-    const clickedPortType = isAnchor ? portType : getPortType(clickedPort);
-    const allPort = getAllPort({
-        nodes,
-        nodeId,
-        portId,
-        portType,
-    });
-    let connectionPosition = getEventPosition(event, containerBounds);
-    let closestPort = null;
-    let isValid = false;
-    let connection = null;
-    let autoPanId = 0;
-    let autoPanStarted = false;
-    if (!containerBounds || !portType) {
-        return;
-    }
-    const autoPan = () => {
-        if (!autoPanOnConnect) {
-            return;
-        }
-        const [xMovement, yMovement] = calcAutoPanPosition(connectionPosition, containerBounds);
-        panBy({ x: xMovement, y: yMovement });
-        autoPanId = requestAnimationFrame(autoPan);
-    };
-    connectionStartPort = {
-        nodeId,
-        portId,
-        portType: clickedPortType,
-    };
-    updateConnection({
-        connectionPosition,
-        connectionStartPort,
-        connectionEndPort: null,
-    });
-    onConnectStart?.(event, { nodeId, portId, portType });
-    const onPointerMove = (event) => {
-        const transform = getTransform();
-        connectionPosition = getEventPosition(event, containerBounds);
-        closestPort = getClosestPort(pointToRendererPoint(connectionPosition, transform), connectionRadius, allPort);
-        if (!autoPanStarted) {
-            autoPan();
-            autoPanStarted = true;
-        }
-        const result = getConnection(event, closestPort, nodeId, portId, portType, doc);
-        isValid = result.isValid;
-        connection = result.connection;
-        updateConnection({
-            connectionPosition: closestPort && isValid
-                ? rendererPointToPoint(closestPort, transform)
-                : connectionPosition,
-            connectionStartPort,
-            connectionEndPort: result.endPort,
-        });
-    };
-    const onPointerUp = (event) => {
-        if (isValid && connection)
-            onConnect?.(connection);
-        onConnectEnd?.(event);
-        if (portType) {
-            onEdgeUpdateEnd?.(event);
-        }
-        cancelConnection();
-        cancelAnimationFrame(autoPanId);
-        isValid = false;
-        connection = null;
-        autoPanStarted = false;
-        doc.removeEventListener('mousemove', onPointerMove);
-        doc.removeEventListener('mouseup', onPointerUp);
-        doc.removeEventListener('touchmove', onPointerMove);
-        doc.removeEventListener('touchend', onPointerUp);
-    };
-    doc.addEventListener('mousemove', onPointerMove);
-    doc.addEventListener('mouseup', onPointerUp);
-    doc.addEventListener('touchmove', onPointerMove);
-    doc.addEventListener('touchend', onPointerUp);
-};
-const CosmosPort = {
-    onPointerDown,
-};
-
-const isParentSelected = (node, nodeInternals) => {
-    if (!node.parentNode) {
-        return false;
-    }
-    const parentNode = nodeInternals.get(node.parentNode);
-    if (!parentNode) {
-        return false;
-    }
-    if (parentNode.selected) {
-        return true;
-    }
-    return isParentSelected(parentNode, nodeInternals);
-};
-const hasSelector = (target, selector, domNode) => {
-    let current = target;
-    do {
-        if (current?.matches(selector))
-            return true;
-        if (current === domNode)
-            return false;
-        current = current.parentElement;
-    } while (current);
-    return false;
-};
-const hasChangedPosition = (beforePositions, currentPosition) => beforePositions.x !== currentPosition.x ||
-    beforePositions.y !== currentPosition.y;
-const getDragItems = (nodeInternals, nodesDraggable, mousePosition, nodeId) => {
-    const filteredNode = Array.from(nodeInternals.values()).filter((n) => {
-        const hasSize = n.width && n.height;
-        const isSelected = n.selected || n.id === nodeId;
-        const hasNoParent = !n.parentNode || !isParentSelected(n, nodeInternals);
-        const isDraggable = n.draggable || (nodesDraggable && typeof n.draggable === 'undefined');
-        return hasSize && isSelected && hasNoParent && isDraggable;
-    });
-    return filteredNode.map((n) => ({
-        id: n.id,
-        position: n.position || { x: 0, y: 0 },
-        positionAbsolute: n.positionAbsolute || { x: 0, y: 0 },
-        distance: {
-            x: mousePosition.x - (n.positionAbsolute?.x ?? 0),
-            y: mousePosition.y - (n.positionAbsolute?.y ?? 0),
-        },
-        extent: n.extent,
-        parentNode: n.parentNode,
-        width: n.width || 0,
-        height: n.height || 0,
-    }));
-};
-const getEventHandlerParams = ({ nodeId, dragItems, nodeInternals, }) => {
-    const extentedDragItems = dragItems.map((n) => {
-        const node = nodeInternals.get(n.id);
-        return {
-            ...node,
-            position: n.position,
-            positionAbsolute: n.positionAbsolute,
-        };
-    });
-    return [
-        nodeId
-            ? extentedDragItems.find((n) => n.id === nodeId)
-            : extentedDragItems[0],
-        extentedDragItems,
-    ];
-};
-
-const isDragItem = (node) => 'distance' in node;
-const CosmosDrag = ({ getStore, onNodeMouseDown, onDragStart, onDrag, onDragEnd, }) => {
-    let dragItems = [];
-    let containerBounds = null;
-    let mousePosition = { x: 0, y: 0 };
-    let lastPosition = { x: 0, y: 0 };
-    let dragEvent = null;
-    let autoPanStarted = false;
-    let autoPanId = 0;
-    let d3Selection = null;
-    const update = ({ domNode, nodeId, noDragClassName }) => {
-        const updateNodePosition = (pointerPositions, dragEnd = false) => (dragItem) => {
-            if (!isDragItem(dragItem))
-                return;
-            const { nodeInternals, nodeExtent, nodeOrigin, smoothStep, gridStep, } = getStore();
-            const { distance, width, height } = dragItem;
-            const { x, y, getStepPosition } = pointerPositions;
-            let nextPosition = {
-                x: x - distance.x,
-                y: y - distance.y,
-            };
-            if (gridStep && getStepPosition) {
-                const nodeSize = { width, height };
-                const stepPosition = getStepPosition({
-                    position: nextPosition,
-                    nodeSize,
-                });
-                if (!smoothStep || (smoothStep && dragEnd)) {
-                    nextPosition = stepPosition;
-                }
-            }
-            const updatedPosition = calcNextPosition(dragItem, nextPosition, nodeInternals, nodeExtent, nodeOrigin);
-            const hasChange = hasChangedPosition(dragItem.position, updatedPosition.position);
-            if (!hasChange)
-                return;
-            dragItem.position = updatedPosition.position;
-            dragItem.positionAbsolute = updatedPosition.positionAbsolute;
-        };
-        d3Selection = select(domNode);
-        const updateNodes = (pointerPosition) => {
-            const { nodeInternals, updateNodesPosition } = getStore();
-            const { x, y } = pointerPosition;
-            lastPosition = { x, y };
-            updateNodesPosition(dragItems, true, updateNodePosition(pointerPosition));
-            if (onDrag && dragEvent) {
-                const [currentNode, nodes] = getEventHandlerParams({
-                    nodeId,
-                    dragItems: dragItems,
-                    nodeInternals,
-                });
-                onDrag(dragEvent, dragItems, currentNode, nodes);
-            }
-        };
-        const autoPan = () => {
-            if (!containerBounds) {
-                return;
-            }
-            const [xMovement, yMovement] = calcAutoPanPosition(mousePosition, containerBounds);
-            if (xMovement !== 0 || yMovement !== 0) {
-                const { transform, panBy } = getStore();
-                lastPosition.x -= xMovement / transform[2];
-                lastPosition.y -= yMovement / transform[2];
-                updateNodes(lastPosition);
-                panBy({ x: xMovement, y: yMovement });
-            }
-            autoPanId = requestAnimationFrame(autoPan);
-        };
-        const startDrag = (event) => {
-            const { nodeInternals, nodesDraggable, domNode, transform, gridStep, centerStep, } = getStore();
-            if (nodeId) {
-                onNodeMouseDown?.(nodeId);
-            }
-            const pointerPosition = getPointerPosition(event.sourceEvent, {
-                transform,
-                gridStep,
-                centerStep,
-            });
-            dragItems = getDragItems(nodeInternals, nodesDraggable, pointerPosition, nodeId);
-            if (onDragStart && dragItems) {
-                const [currentNode, nodes] = getEventHandlerParams({
-                    nodeId,
-                    dragItems: dragItems,
-                    nodeInternals,
-                });
-                onDragStart?.(event.sourceEvent, dragItems, currentNode, nodes);
-            }
-            containerBounds = domNode?.getBoundingClientRect() || null;
-            mousePosition = getEventPosition(event.sourceEvent, containerBounds);
-        };
-        const dragHandle = drag()
-            .on('start', (event) => {
-            startDrag(event);
-        })
-            .on('drag', (event) => {
-            const { transform, gridStep, centerStep, autoPanOnNodeDrag, updateNodesIntersection, } = getStore();
-            const pointerPosition = getPointerPosition(event.sourceEvent, {
-                transform,
-                gridStep,
-                centerStep,
-            });
-            if (!autoPanStarted && autoPanOnNodeDrag) {
-                autoPanStarted = true;
-                autoPan();
-            }
-            const isChanged = hasChangedPosition(lastPosition, pointerPosition.getStepPosition());
-            if (isChanged && dragItems) {
-                dragEvent = event.sourceEvent;
-                mousePosition = getEventPosition(event.sourceEvent, containerBounds);
-                updateNodes(pointerPosition);
-                updateNodesIntersection();
-            }
-        })
-            .on('end', (event) => {
-            autoPanStarted = false;
-            cancelAnimationFrame(autoPanId);
-            if (dragItems) {
-                const { nodeInternals, transform, gridStep, centerStep, smoothStep, updateNodesPosition, updateNodesIntersection, } = getStore();
-                const isSmoothStep = !!gridStep && smoothStep;
-                if (isSmoothStep) {
-                    const pointerPosition = getPointerPosition(event.sourceEvent, {
-                        transform,
-                        gridStep,
-                        centerStep,
-                    });
-                    updateNodesPosition(dragItems, false, updateNodePosition(pointerPosition, true));
-                    updateNodesIntersection();
-                }
-                else {
-                    updateNodesPosition(dragItems, false);
-                }
-                if (onDragEnd) {
-                    const [currentNode, nodes] = getEventHandlerParams({
-                        nodeId,
-                        dragItems: dragItems,
-                        nodeInternals,
-                    });
-                    onDragEnd(event.sourceEvent, dragItems, currentNode, nodes);
-                }
-            }
-        })
-            .filter((event) => {
-            const target = event.target;
-            if (!domNode)
-                return false;
-            const isDraggable = !event.button &&
-                (!noDragClassName ||
-                    !hasSelector(target, `.${noDragClassName}`, domNode));
-            return isDraggable;
-        });
-        d3Selection.call(dragHandle);
-    };
-    const destroy = () => {
-        d3Selection?.on('.drag', null);
-    };
-    return {
-        update,
-        destroy,
-    };
-};
-
-const transformToViewport = (transform) => {
-    const { x, y, k } = transform;
-    return {
-        x,
-        y,
-        zoom: k,
-    };
-};
-const viewportToTransform = ({ x, y, zoom }) => zoomIdentity.translate(x, y).scale(zoom);
-const isWrappedWithClass = (event, className) => event.target.closest(`.${className}`);
-const isViewChanged = (prevViewport, eventViewport) => {
-    const { x: prevX, y: prevY, zoom: prevZoom } = prevViewport;
-    const { x, y, k } = eventViewport;
-    return prevX !== x || prevY !== y || prevZoom !== k;
-};
-const getD3Transition = (selection, duration = 0) => typeof duration === 'number' && duration > 0
-    ? selection.transition().duration(duration)
-    : selection;
-
-const createPanZoomStartHandler = ({ zoomPanValues, onPanningChange, onPanZoomStart, }) => {
-    return (event) => {
-        if (event.sourceEvent?.internal) {
-            return;
-        }
-        const viewport = transformToViewport(event.transform);
-        // we need to remember it here, because it's always 0 in the "zoom" event
-        zoomPanValues.mouseButton = event.sourceEvent?.button || 0;
-        zoomPanValues.isZoomingOrPanning = true;
-        zoomPanValues.prevViewport = viewport;
-        if (event.sourceEvent?.type === 'mousedown') {
-            onPanningChange(true);
-        }
-        if (onPanZoomStart) {
-            onPanZoomStart?.(event.sourceEvent, viewport);
-        }
-    };
-};
-const createPanZoomHandler = ({ onPanZoom, onTransformChange, }) => {
-    return (event) => {
-        if (!event.sourceEvent?.sync) {
-            onTransformChange([
-                event.transform.x,
-                event.transform.y,
-                event.transform.k,
-            ]);
-        }
-        if (onPanZoom && !event.sourceEvent?.internal) {
-            onPanZoom?.(event.sourceEvent, transformToViewport(event.transform));
-        }
-    };
-};
-const createPanZoomEndHandler = ({ zoomPanValues, onPanningChange, onPanZoomEnd, }) => {
-    return (event) => {
-        if (event.sourceEvent?.internal) {
-            return;
-        }
-        zoomPanValues.isZoomingOrPanning = false;
-        onPanningChange(false);
-        if (onPanZoomEnd &&
-            isViewChanged(zoomPanValues.prevViewport, event.transform)) {
-            const viewport = transformToViewport(event.transform);
-            zoomPanValues.prevViewport = viewport;
-            clearTimeout(zoomPanValues.timerId);
-            zoomPanValues.timerId = setTimeout(() => {
-                onPanZoomEnd?.(event.sourceEvent, viewport);
-            }, 0);
-        }
-    };
-};
-function createZoomOnScrollHandler({ d3ZoomHandler, }) {
-    return function (event, d) {
-        event.preventDefault();
-        d3ZoomHandler.call(this, event, d);
-    };
-}
-
-const CosmosPanZoom = ({ domNode, panning, 
-// selection,
-minZoom, maxZoom, viewport, translateExtent, 
-// children,
-onTransformChange, onPanningChange, onPanZoom, onPanZoomStart, onPanZoomEnd, }) => {
-    const zoomPanValues = {
-        isZoomingOrPanning: false,
-        timerId: undefined,
-        prevViewport: { x: 0, y: 0, zoom: 0 },
-        // usedRightMouseButton: false,
-        mouseButton: 0,
-        // panScrollTimeout: undefined,
-        isPanScrolling: false,
-    };
-    const bbox = domNode.getBoundingClientRect();
-    const d3ZoomInstance = zoom()
-        .scaleExtent([minZoom, maxZoom])
-        .translateExtent(translateExtent);
-    const d3Selection = select(domNode).call(d3ZoomInstance);
-    const d3ZoomHandler = d3Selection.on('wheel.zoom');
-    const setTransform = (transform, options) => {
-        if (d3Selection) {
-            d3ZoomInstance?.transform(getD3Transition(d3Selection, options?.duration), transform);
-        }
-    };
-    const setViewportConstrained = (viewport, extent, translateExtent) => {
-        const updatedTransform = viewportToTransform(viewport);
-        const constrainedTransform = d3ZoomInstance.constrain()(updatedTransform, extent, translateExtent);
-        if (constrainedTransform) {
-            setTransform(constrainedTransform);
-        }
-        return constrainedTransform;
-    };
-    setViewportConstrained({
-        x: viewport.x,
-        y: viewport.y,
-        zoom: clamp(viewport.zoom, minZoom, maxZoom),
-    }, [
-        [0, 0],
-        [bbox.width, bbox.height],
-    ], translateExtent);
-    const destroy = () => {
-        d3ZoomInstance.on('zoom', null);
-        // d3ZoomInstance.on('start', null);
-        // d3ZoomInstance.on('end', null);
-        // d3Selection.on('wheel.zoom', null);
-    };
-    const update = ({ noPanClassName, selection }) => {
-        if (selection && !zoomPanValues.isZoomingOrPanning) {
-            destroy();
-        }
-        const filter = (event) => {
-            if (selection) {
-                return false;
-            }
-            if (isWrappedWithClass(event, noPanClassName) &&
-                event.type !== 'wheel') {
-                return false;
-            }
-            if (!panning)
-                return false;
-            const buttonAllowed = !event.button || event.button <= 1;
-            if (!buttonAllowed)
-                return false;
-            return true;
-        };
-        const wheelZoomHandler = createZoomOnScrollHandler({ d3ZoomHandler });
-        d3Selection.on('wheel.zoom', wheelZoomHandler, { passive: false });
-        if (!selection) {
-            const panZoomStartHandler = createPanZoomStartHandler({
-                zoomPanValues,
-                onPanningChange,
-                onPanZoomStart,
-            });
-            const panZoomHandler = createPanZoomHandler({
-                onPanZoom,
-                onTransformChange,
-            });
-            const panZoomEndHandler = createPanZoomEndHandler({
-                zoomPanValues,
-                onPanningChange,
-                onPanZoomEnd,
-            });
-            d3ZoomInstance.on('start', panZoomStartHandler);
-            d3ZoomInstance.on('zoom', panZoomHandler);
-            d3ZoomInstance.on('end', panZoomEndHandler);
-        }
-        d3ZoomInstance.filter(filter);
-    };
-    const getViewport = () => {
-        const transform = d3Selection
-            ? zoomTransform(d3Selection.node())
-            : { x: 0, y: 0, k: 1 };
-        return { x: transform.x, y: transform.y, zoom: transform.k };
-    };
-    return {
-        update,
-        destroy,
-        getViewport,
-        setViewportConstrained,
-    };
-};
+import { zoomIdentity } from 'd3-zoom';
 
 const StoreContext = createContext(null);
 const Provider$1 = StoreContext.Provider;
@@ -2709,7 +1534,7 @@ const initialState = {
     onError: devWarn,
 };
 
-const createRFStore = () => createStore((set, get) => ({
+const createRCDStore = () => createStore((set, get) => ({
     ...initialState,
     setNodes: (nodes) => {
         const { nodeInternals, nodeOrigin, elevateNodesOnSelect } = get();
@@ -2907,7 +1732,7 @@ const createRFStore = () => createStore((set, get) => ({
 const ReactDiagramProvider = ({ children }) => {
     const storeRef = useRef(null);
     if (!storeRef.current) {
-        storeRef.current = createRFStore();
+        storeRef.current = createRCDStore();
     }
     return jsx(Provider$1, { value: storeRef.current, children: children });
 };
@@ -2983,4 +1808,4 @@ function Background({ gap, lineWidth = 1, color = '#000000', }) {
 Background.displayName = 'Background';
 var index = memo(Background);
 
-export { index as Background, BaseEdge, BezierEdge, MarkerType, Port$1 as Port, Position, ReactDiagramProvider, StepEdge, addEdge, boxToRect, clamp, ReactDiagram as default, getBezierEdgeCenter, getBezierPath, getStepPath, getStraightPath, internalsSymbol, isCoreEdge, isCoreNode, rectToBox, updateEdge, useEdgesState, useNodesState };
+export { index as Background, BaseEdge, BezierEdge, Port$1 as Port, ReactDiagramProvider, StepEdge, ReactDiagram as default, internalsSymbol, useEdgesState, useNodesState };