@xyflow/system 0.0.1

package/dist/esm/index.js

@@ -0,0 +1,1741 @@
+import { drag } from 'd3-drag';
+import { select, pointer } from 'd3-selection';
+import { zoom, zoomIdentity, zoomTransform } from 'd3-zoom';
+
+// @todo: update URLs to xyflow
+const errorMessages = {
+    error001: () => '[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#001',
+    error002: () => "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.",
+    error003: (nodeType) => `Node type "${nodeType}" not found. Using fallback type "default".`,
+    error004: () => 'The React Flow parent container needs a width and a height to render the graph.',
+    error005: () => 'Only child nodes can use a parent extent.',
+    error006: () => "Can't create edge. An edge needs a source and a target.",
+    error007: (id) => `The old edge with id=${id} does not exist.`,
+    error009: (type) => `Marker type "${type}" doesn't exist.`,
+    error008: (handleType, { id, sourceHandle, targetHandle }) => `Couldn't create edge for ${handleType} handle id: "${!sourceHandle ? sourceHandle : targetHandle}", edge id: ${id}.`,
+    error010: () => 'Handle: No node id found. Make sure to only use a Handle inside a custom Node.',
+    error011: (edgeType) => `Edge type "${edgeType}" not found. Using fallback type "default".`,
+};
+const internalsSymbol = Symbol.for('internals');
+const infiniteExtent = [
+    [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+    [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
+];
+const elementSelectionKeys = ['Enter', ' ', 'Escape'];
+
+var ConnectionMode;
+(function (ConnectionMode) {
+    ConnectionMode["Strict"] = "strict";
+    ConnectionMode["Loose"] = "loose";
+})(ConnectionMode || (ConnectionMode = {}));
+var PanOnScrollMode;
+(function (PanOnScrollMode) {
+    PanOnScrollMode["Free"] = "free";
+    PanOnScrollMode["Vertical"] = "vertical";
+    PanOnScrollMode["Horizontal"] = "horizontal";
+})(PanOnScrollMode || (PanOnScrollMode = {}));
+var SelectionMode;
+(function (SelectionMode) {
+    SelectionMode["Partial"] = "partial";
+    SelectionMode["Full"] = "full";
+})(SelectionMode || (SelectionMode = {}));
+
+var ConnectionLineType;
+(function (ConnectionLineType) {
+    ConnectionLineType["Bezier"] = "default";
+    ConnectionLineType["Straight"] = "straight";
+    ConnectionLineType["Step"] = "step";
+    ConnectionLineType["SmoothStep"] = "smoothstep";
+    ConnectionLineType["SimpleBezier"] = "simplebezier";
+})(ConnectionLineType || (ConnectionLineType = {}));
+var MarkerType;
+(function (MarkerType) {
+    MarkerType["Arrow"] = "arrow";
+    MarkerType["ArrowClosed"] = "arrowclosed";
+})(MarkerType || (MarkerType = {}));
+
+var Position;
+(function (Position) {
+    Position["Left"] = "left";
+    Position["Top"] = "top";
+    Position["Right"] = "right";
+    Position["Bottom"] = "bottom";
+})(Position || (Position = {}));
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const isEdgeBase = (element) => 'id' in element && 'source' in element && 'target' in element;
+const isNodeBase = (element) => 'id' in element && !('source' in element) && !('target' in element);
+const getOutgoersBase = (node, nodes, edges) => {
+    if (!isNodeBase(node)) {
+        return [];
+    }
+    const outgoerIds = edges.filter((e) => e.source === node.id).map((e) => e.target);
+    return nodes.filter((n) => outgoerIds.includes(n.id));
+};
+const getIncomersBase = (node, nodes, edges) => {
+    if (!isNodeBase(node)) {
+        return [];
+    }
+    const incomersIds = edges.filter((e) => e.target === node.id).map((e) => e.source);
+    return nodes.filter((n) => incomersIds.includes(n.id));
+};
+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 getRectOfNodes = (nodes, nodeOrigin = [0, 0]) => {
+    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;
+        return getBoundsOfBoxes(currBox, rectToBox({
+            x,
+            y,
+            width: node.width || 0,
+            height: node.height || 0,
+        }));
+    }, { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity });
+    return boxToRect(box);
+};
+const getNodesInside = (nodes, rect, [tx, ty, tScale] = [0, 0, 1], partially = false, 
+// set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
+excludeNonSelectableNodes = false, nodeOrigin = [0, 0]) => {
+    const paneRect = {
+        ...pointToRendererPoint(rect, [tx, ty, tScale]),
+        width: rect.width / tScale,
+        height: rect.height / tScale,
+    };
+    const visibleNodes = nodes.reduce((res, node) => {
+        const { width, height, selectable = true, hidden = false } = node;
+        if ((excludeNonSelectableNodes && !selectable) || hidden) {
+            return res;
+        }
+        const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node, nodeOrigin));
+        const notInitialized = width === undefined || 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) {
+            res.push(node);
+        }
+        return res;
+    }, []);
+    return visibleNodes;
+};
+const getConnectedEdgesBase = (nodes, edges) => {
+    const nodeIds = nodes.map((node) => node.id);
+    return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target));
+};
+function fitView({ nodes, width, height, panZoom, minZoom, maxZoom, nodeOrigin = [0, 0] }, options) {
+    const filteredNodes = nodes.filter((n) => {
+        const isVisible = options?.includeHiddenNodes ? n.width && n.height : !n.hidden;
+        if (options?.nodes?.length) {
+            return isVisible && options?.nodes.some((optionNode) => optionNode.id === n.id);
+        }
+        return isVisible;
+    });
+    const nodesInitialized = filteredNodes.every((n) => n.width && n.height);
+    if (nodes.length > 0 && nodesInitialized) {
+        const bounds = getRectOfNodes(nodes, nodeOrigin);
+        const [x, y, zoom] = getTransformForBounds(bounds, width, height, options?.minZoom ?? minZoom, options?.maxZoom ?? maxZoom, options?.padding ?? 0.1);
+        panZoom.setViewport({ x, y, zoom }, { duration: options?.duration });
+        return true;
+    }
+    return false;
+}
+function calcNextPosition(node, nextPosition, nodes, nodeExtent, nodeOrigin = [0, 0], onError) {
+    let currentExtent = node.extent || nodeExtent;
+    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;
+    }
+    if (node.extent === 'parent') {
+        if (node.parentNode && node.width && node.height) {
+            const currNodeOrigin = node.origin || nodeOrigin;
+            currentExtent =
+                parentNode && isNumeric(parentNode.width) && isNumeric(parentNode.height)
+                    ? [
+                        [parentPos.x + node.width * currNodeOrigin[0], parentPos.y + node.height * currNodeOrigin[1]],
+                        [
+                            parentPos.x + parentNode.width - node.width + node.width * currNodeOrigin[0],
+                            parentPos.y + parentNode.height - node.height + node.height * currNodeOrigin[1],
+                        ],
+                    ]
+                    : currentExtent;
+        }
+        else {
+            onError?.('005', errorMessages['error005']());
+            currentExtent = nodeExtent;
+        }
+    }
+    else if (node.extent && node.parentNode) {
+        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],
+        ];
+    }
+    const positionAbsolute = currentExtent
+        ? clampPosition(nextPosition, currentExtent)
+        : nextPosition;
+    return {
+        position: {
+            x: positionAbsolute.x - parentPos.x,
+            y: positionAbsolute.y - parentPos.y,
+        },
+        positionAbsolute,
+    };
+}
+// helper function to get arrays of nodes and edges that can be deleted
+// you can pass in a list of nodes and edges that should be deleted
+// and the function only returns elements that are deletable and also handles connected nodes and child nodes
+function getElementsToRemove({ nodesToRemove, edgesToRemove, nodes, edges, }) {
+    const nodeIds = nodesToRemove.map((node) => node.id);
+    const edgeIds = edgesToRemove.map((edge) => edge.id);
+    const matchingNodes = nodes.reduce((res, node) => {
+        const parentHit = !nodeIds.includes(node.id) && node.parentNode && res.find((n) => n.id === node.parentNode);
+        const deletable = typeof node.deletable === 'boolean' ? node.deletable : true;
+        if (deletable && (nodeIds.includes(node.id) || parentHit)) {
+            res.push(node);
+        }
+        return res;
+    }, []);
+    const deletableEdges = edges.filter((e) => (typeof e.deletable === 'boolean' ? e.deletable : true));
+    const initialHitEdges = deletableEdges.filter((e) => edgeIds.includes(e.id));
+    const connectedEdges = getConnectedEdgesBase(matchingNodes, deletableEdges);
+    const matchingEdges = [...initialHitEdges, ...connectedEdges];
+    return {
+        matchingEdges,
+        matchingNodes,
+    };
+}
+
+const clamp = (val, min = 0, max = 1) => Math.min(Math.max(val, min), max);
+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]),
+});
+// returns a number between 0 and 1 that represents the velocity of the movement
+// when the mouse is close to the edge of the canvas
+const calcAutoPanVelocity = (value, min, max) => {
+    if (value < min) {
+        return clamp(Math.abs(value - min), 1, 50) / 50;
+    }
+    else if (value > max) {
+        return -clamp(Math.abs(value - max), 1, 50) / 50;
+    }
+    return 0;
+};
+const calcAutoPan = (pos, bounds) => {
+    const xMovement = calcAutoPanVelocity(pos.x, 35, bounds.width - 35) * 20;
+    const yMovement = calcAutoPanVelocity(pos.y, 35, bounds.height - 35) * 20;
+    return [xMovement, yMovement];
+};
+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 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 nodeToRect = (node, nodeOrigin = [0, 0]) => {
+    const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
+    return {
+        ...positionAbsolute,
+        width: node.width || 0,
+        height: node.height || 0,
+    };
+};
+const nodeToBox = (node, nodeOrigin = [0, 0]) => {
+    const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
+    return {
+        ...positionAbsolute,
+        x2: positionAbsolute.x + (node.width || 0),
+        y2: positionAbsolute.y + (node.height || 0),
+    };
+};
+const getBoundsOfRects = (rect1, rect2) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
+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);
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isRectObject = (obj) => isNumeric(obj.width) && isNumeric(obj.height) && isNumeric(obj.x) && isNumeric(obj.y);
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+const isNumeric = (n) => !isNaN(n) && isFinite(n);
+// used for a11y key board controls for nodes and edges
+const devWarn = (id, message) => {
+    if (process.env.NODE_ENV === 'development') {
+        console.warn(`[React Flow]: ${message} Help: https://reactflow.dev/error#${id}`);
+    }
+};
+const getPositionWithOrigin = ({ x, y, width, height, origin = [0, 0], }) => {
+    if (!width || !height || origin[0] < 0 || origin[1] < 0 || origin[0] > 1 || origin[1] > 1) {
+        return { x, y };
+    }
+    return {
+        x: x - width * origin[0],
+        y: y - height * origin[1],
+    };
+};
+function snapPosition(position, snapGrid = [1, 1]) {
+    return {
+        x: snapGrid[0] * Math.round(position.x / snapGrid[0]),
+        y: snapGrid[1] * Math.round(position.y / snapGrid[1]),
+    };
+}
+const pointToRendererPoint = ({ x, y }, [tx, ty, tScale], snapToGrid = false, snapGrid = [1, 1]) => {
+    const position = {
+        x: (x - tx) / tScale,
+        y: (y - ty) / tScale,
+    };
+    return snapToGrid ? snapPosition(position, snapGrid) : position;
+};
+const rendererPointToPoint = ({ x, y }, [tx, ty, tScale]) => {
+    return {
+        x: x * tScale + tx,
+        y: y * tScale + ty,
+    };
+};
+const getTransformForBounds = (bounds, width, height, minZoom, maxZoom, padding = 0.1) => {
+    const xZoom = width / (bounds.width * (1 + padding));
+    const yZoom = height / (bounds.height * (1 + padding));
+    const zoom = Math.min(xZoom, yZoom);
+    const clampedZoom = clamp(zoom, minZoom, maxZoom);
+    const boundsCenterX = bounds.x + bounds.width / 2;
+    const boundsCenterY = bounds.y + bounds.height / 2;
+    const x = width / 2 - boundsCenterX * clampedZoom;
+    const y = height / 2 - boundsCenterY * clampedZoom;
+    return [x, y, clampedZoom];
+};
+
+function getPointerPosition(event, { snapGrid = [0, 0], snapToGrid = false, transform }) {
+    const { x, y } = getEventPosition(event);
+    const pointerPos = pointToRendererPoint({ x, y }, transform);
+    const { x: xSnapped, y: ySnapped } = snapToGrid ? snapPosition(pointerPos, snapGrid) : pointerPos;
+    // we need the snapped position in order to be able to skip unnecessary drag events
+    return {
+        xSnapped,
+        ySnapped,
+        ...pointerPos,
+    };
+}
+const getDimensions = (node) => ({
+    width: node.offsetWidth,
+    height: node.offsetHeight,
+});
+const getHostForElement = (element) => element.getRootNode?.() || window?.document;
+const inputTags = ['INPUT', 'SELECT', 'TEXTAREA'];
+function isInputDOMNode(event) {
+    // using composed path for handling shadow dom
+    const target = (event.composedPath?.()?.[0] || event.target);
+    const isInput = inputTags.includes(target?.nodeName) || target?.hasAttribute('contenteditable');
+    // we want to be able to do a multi selection event if we are in an input field
+    const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey;
+    // when an input field is focused we don't want to trigger deletion or movement of nodes
+    return (isInput && !isModifierKey) || !!target?.closest('.nokey');
+}
+const isMouseEvent = (event) => 'clientX' in event;
+const getEventPosition = (event, bounds) => {
+    const isMouse = isMouseEvent(event);
+    const evtX = isMouse ? event.clientX : event.touches?.[0].clientX;
+    const evtY = isMouse ? event.clientY : event.touches?.[0].clientY;
+    return {
+        x: evtX - (bounds?.left ?? 0),
+        y: evtY - (bounds?.top ?? 0),
+    };
+};
+const getHandleBounds = (selector, nodeElement, zoom, nodeOrigin = [0, 0]) => {
+    const handles = nodeElement.querySelectorAll(selector);
+    if (!handles || !handles.length) {
+        return null;
+    }
+    const handlesArray = Array.from(handles);
+    const nodeBounds = nodeElement.getBoundingClientRect();
+    const nodeOffset = {
+        x: nodeBounds.width * nodeOrigin[0],
+        y: nodeBounds.height * nodeOrigin[1],
+    };
+    return handlesArray.map((handle) => {
+        const handleBounds = handle.getBoundingClientRect();
+        return {
+            id: handle.getAttribute('data-handleid'),
+            position: handle.getAttribute('data-handlepos'),
+            x: (handleBounds.left - nodeBounds.left - nodeOffset.x) / zoom,
+            y: (handleBounds.top - nodeBounds.top - nodeOffset.y) / zoom,
+            ...getDimensions(handle),
+        };
+    });
+};
+
+function getBezierEdgeCenter({ sourceX, sourceY, targetX, targetY, sourceControlX, sourceControlY, targetControlX, targetControlY, }) {
+    // cubic bezier t=0.5 mid point, not the actual mid point, but easy to calculate
+    // https://stackoverflow.com/questions/67516101/how-to-find-distance-mid-point-of-bezier-curve
+    const centerX = sourceX * 0.125 + sourceControlX * 0.375 + targetControlX * 0.375 + targetX * 0.125;
+    const centerY = sourceY * 0.125 + sourceControlY * 0.375 + targetControlY * 0.375 + targetY * 0.125;
+    const offsetX = Math.abs(centerX - sourceX);
+    const offsetY = Math.abs(centerY - sourceY);
+    return [centerX, centerY, offsetX, offsetY];
+}
+function calculateControlOffset(distance, curvature) {
+    if (distance >= 0) {
+        return 0.5 * distance;
+    }
+    return curvature * 25 * Math.sqrt(-distance);
+}
+function 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)];
+    }
+}
+function 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,
+    ];
+}
+
+// this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB)
+function 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 defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }];
+function groupEdgesByZLevel(edges, nodes, elevateEdgesOnSelect = false) {
+    let maxLevel = -1;
+    const levelLookup = edges.reduce((tree, edge) => {
+        const hasZIndex = isNumeric(edge.zIndex);
+        let z = hasZIndex ? edge.zIndex : 0;
+        if (elevateEdgesOnSelect) {
+            z = hasZIndex
+                ? edge.zIndex
+                : Math.max(nodes.find((n) => n.id === edge.source)?.[internalsSymbol]?.z || 0, nodes.find((n) => n.id === edge.target)?.[internalsSymbol]?.z || 0);
+        }
+        if (tree[z]) {
+            tree[z].push(edge);
+        }
+        else {
+            tree[z] = [edge];
+        }
+        maxLevel = z > maxLevel ? z : maxLevel;
+        return tree;
+    }, {});
+    const edgeTree = Object.entries(levelLookup).map(([key, edges]) => {
+        const level = +key;
+        return {
+            edges,
+            level,
+            isMaxLevel: level === maxLevel,
+        };
+    });
+    if (edgeTree.length === 0) {
+        return defaultEdgeTree;
+    }
+    return edgeTree;
+}
+function isEdgeVisible({ sourceNode, targetNode, width, height, transform }) {
+    const edgeBox = getBoundsOfBoxes(nodeToBox(sourceNode), nodeToBox(targetNode));
+    if (edgeBox.x === edgeBox.x2) {
+        edgeBox.x2 += 1;
+    }
+    if (edgeBox.y === edgeBox.y2) {
+        edgeBox.y2 += 1;
+    }
+    const viewRect = {
+        x: -transform[0] / transform[2],
+        y: -transform[1] / transform[2],
+        width: width / transform[2],
+        height: height / transform[2],
+    };
+    return getOverlappingArea(viewRect, boxToRect(edgeBox)) > 0;
+}
+const getEdgeId = ({ source, sourceHandle, target, targetHandle }) => `xyflow__edge-${source}${sourceHandle || ''}-${target}${targetHandle || ''}`;
+const connectionExists = (edge, edges) => {
+    return edges.some((el) => el.source === edge.source &&
+        el.target === edge.target &&
+        (el.sourceHandle === edge.sourceHandle || (!el.sourceHandle && !edge.sourceHandle)) &&
+        (el.targetHandle === edge.targetHandle || (!el.targetHandle && !edge.targetHandle)));
+};
+const addEdgeBase = (edgeParams, edges) => {
+    if (!edgeParams.source || !edgeParams.target) {
+        devWarn('006', errorMessages['error006']());
+        return edges;
+    }
+    let edge;
+    if (isEdgeBase(edgeParams)) {
+        edge = { ...edgeParams };
+    }
+    else {
+        edge = {
+            ...edgeParams,
+            id: getEdgeId(edgeParams),
+        };
+    }
+    if (connectionExists(edge, edges)) {
+        return edges;
+    }
+    return edges.concat(edge);
+};
+const updateEdgeBase = (oldEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
+    const { id: oldEdgeId, ...rest } = oldEdge;
+    if (!newConnection.source || !newConnection.target) {
+        devWarn('006', errorMessages['error006']());
+        return edges;
+    }
+    const foundEdge = edges.find((e) => e.id === oldEdge.id);
+    if (!foundEdge) {
+        devWarn('007', errorMessages['error007'](oldEdgeId));
+        return edges;
+    }
+    // Remove old edge and create the new edge with parameters of old edge.
+    const edge = {
+        ...rest,
+        id: options.shouldReplaceId ? getEdgeId(newConnection) : oldEdgeId,
+        source: newConnection.source,
+        target: newConnection.target,
+        sourceHandle: newConnection.sourceHandle,
+        targetHandle: newConnection.targetHandle,
+    };
+    return edges.filter((e) => e.id !== oldEdgeId).concat(edge);
+};
+
+function 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 handleDirections = {
+    [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) {
+        return source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 };
+    }
+    return source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 };
+};
+const distance = (a, b) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
+// ith this function we try to mimic a orthogonal edge routing behaviour
+// It's not as good as a real orthogonal edge routing but it's faster and good enough as a default for step and smooth step edges
+function getPoints({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset, }) {
+    const sourceDir = handleDirections[sourcePosition];
+    const targetDir = handleDirections[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 dir = getDirection({
+        source: sourceGapped,
+        sourcePosition,
+        target: targetGapped,
+    });
+    const dirAccessor = dir.x !== 0 ? 'x' : 'y';
+    const currDir = dir[dirAccessor];
+    let points = [];
+    let centerX, centerY;
+    const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getEdgeCenter({
+        sourceX: source.x,
+        sourceY: source.y,
+        targetX: target.x,
+        targetY: target.y,
+    });
+    // opposite handle positions, default case
+    if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
+        centerX = center.x || defaultCenterX;
+        centerY = center.y || defaultCenterY;
+        //    --->
+        //    |
+        // >---
+        const verticalSplit = [
+            { x: centerX, y: sourceGapped.y },
+            { x: centerX, y: targetGapped.y },
+        ];
+        //    |
+        //  ---
+        //  |
+        const horizontalSplit = [
+            { x: sourceGapped.x, y: centerY },
+            { x: targetGapped.x, y: centerY },
+        ];
+        if (sourceDir[dirAccessor] === currDir) {
+            points = dirAccessor === 'x' ? verticalSplit : horizontalSplit;
+        }
+        else {
+            points = dirAccessor === 'x' ? horizontalSplit : verticalSplit;
+        }
+    }
+    else {
+        // sourceTarget means we take x from source and y from target, targetSource is the opposite
+        const sourceTarget = [{ x: sourceGapped.x, y: targetGapped.y }];
+        const targetSource = [{ x: targetGapped.x, y: sourceGapped.y }];
+        // this handles edges with same handle positions
+        if (dirAccessor === 'x') {
+            points = sourceDir.x === currDir ? targetSource : sourceTarget;
+        }
+        else {
+            points = sourceDir.y === currDir ? sourceTarget : targetSource;
+        }
+        // these are conditions for handling mixed handle positions like Right -> Bottom for example
+        if (sourcePosition !== targetPosition) {
+            const dirAccessorOpposite = dirAccessor === 'x' ? 'y' : 'x';
+            const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessorOpposite];
+            const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite];
+            const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite];
+            const flipSourceTarget = (sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTargetOppo) || (isSameDir && sourceLtTargetOppo))) ||
+                (sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTargetOppo) || (isSameDir && sourceGtTargetOppo)));
+            if (flipSourceTarget) {
+                points = dirAccessor === 'x' ? sourceTarget : targetSource;
+            }
+        }
+        centerX = points[0].x;
+        centerY = points[0].y;
+    }
+    const pathPoints = [source, sourceGapped, ...points, targetGapped, target];
+    return [pathPoints, centerX, centerY, defaultOffsetX, defaultOffsetY];
+}
+function 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}`;
+}
+function getSmoothStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, borderRadius = 5, centerX, centerY, offset = 20, }) {
+    const [points, labelX, labelY, offsetX, offsetY] = getPoints({
+        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];
+}
+
+function getEdgePosition(params) {
+    const [sourceNodeRect, sourceHandleBounds, sourceIsValid] = getHandleDataByNode(params.sourceNode);
+    const [targetNodeRect, targetHandleBounds, targetIsValid] = getHandleDataByNode(params.targetNode);
+    if (!sourceIsValid || !targetIsValid) {
+        return null;
+    }
+    // when connection type is loose we can define all handles as sources and connect source -> source
+    const targetNodeHandles = params.connectionMode === ConnectionMode.Strict
+        ? targetHandleBounds.target
+        : (targetHandleBounds.target ?? []).concat(targetHandleBounds.source ?? []);
+    const sourceHandle = getHandle(sourceHandleBounds.source, params.sourceHandle);
+    const targetHandle = getHandle(targetNodeHandles, params.targetHandle);
+    const sourcePosition = sourceHandle?.position || Position.Bottom;
+    const targetPosition = targetHandle?.position || Position.Top;
+    if (!sourceHandle || !targetHandle) {
+        params.onError?.('008', errorMessages['error008'](!sourceHandle ? 'source' : 'target', {
+            id: params.id,
+            sourceHandle: params.sourceHandle,
+            targetHandle: params.targetHandle,
+        }));
+        return null;
+    }
+    const { x: sourceX, y: sourceY } = getHandlePosition(sourcePosition, sourceNodeRect, sourceHandle);
+    const { x: targetX, y: targetY } = getHandlePosition(targetPosition, targetNodeRect, targetHandle);
+    return {
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+    };
+}
+function getHandleDataByNode(node) {
+    const handleBounds = node?.[internalsSymbol]?.handleBounds || null;
+    const isValid = handleBounds &&
+        node?.width &&
+        node?.height &&
+        typeof node?.positionAbsolute?.x !== 'undefined' &&
+        typeof node?.positionAbsolute?.y !== 'undefined';
+    return [
+        {
+            x: node?.positionAbsolute?.x || 0,
+            y: node?.positionAbsolute?.y || 0,
+            width: node?.width || 0,
+            height: node?.height || 0,
+        },
+        handleBounds,
+        !!isValid,
+    ];
+}
+function getHandlePosition(position, nodeRect, handle = null) {
+    const x = (handle?.x || 0) + nodeRect.x;
+    const y = (handle?.y || 0) + nodeRect.y;
+    const width = handle?.width || nodeRect.width;
+    const height = handle?.height || nodeRect.height;
+    switch (position) {
+        case Position.Top:
+            return {
+                x: x + width / 2,
+                y,
+            };
+        case Position.Right:
+            return {
+                x: x + width,
+                y: y + height / 2,
+            };
+        case Position.Bottom:
+            return {
+                x: x + width / 2,
+                y: y + height,
+            };
+        case Position.Left:
+            return {
+                x,
+                y: y + height / 2,
+            };
+    }
+}
+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;
+}
+
+function getMarkerId(marker, id) {
+    if (!marker) {
+        return '';
+    }
+    if (typeof marker === 'string') {
+        return marker;
+    }
+    const idPrefix = id ? `${id}__` : '';
+    return `${idPrefix}${Object.keys(marker)
+        .sort()
+        .map((key) => `${key}=${marker[key]}`)
+        .join('&')}`;
+}
+function createMarkerIds(edges, { id, defaultColor }) {
+    const ids = [];
+    return edges
+        .reduce((markers, edge) => {
+        [edge.markerStart, edge.markerEnd].forEach((marker) => {
+            if (marker && typeof marker === 'object') {
+                const markerId = getMarkerId(marker, id);
+                if (!ids.includes(markerId)) {
+                    markers.push({ id: markerId, color: marker.color || defaultColor, ...marker });
+                    ids.push(markerId);
+                }
+            }
+        });
+        return markers;
+    }, [])
+        .sort((a, b) => a.id.localeCompare(b.id));
+}
+
+function updateAbsolutePositions(nodes, nodeOrigin = [0, 0], parentNodes) {
+    return nodes.map((node) => {
+        if (node.parentNode && !nodes.find((n) => n.id === node.parentNode)) {
+            throw new Error(`Parent node ${node.parentNode} not found`);
+        }
+        if (node.parentNode || parentNodes?.[node.id]) {
+            const parentNode = node.parentNode ? nodes.find((n) => n.id === node.parentNode) : null;
+            const { x, y, z } = calculateXYZPosition(node, nodes, {
+                ...node.position,
+                z: node[internalsSymbol]?.z ?? 0,
+            }, parentNode?.origin || nodeOrigin);
+            node.positionAbsolute = {
+                x,
+                y,
+            };
+            node[internalsSymbol].z = z;
+            if (parentNodes?.[node.id]) {
+                node[internalsSymbol].isParent = true;
+            }
+        }
+        return node;
+    });
+}
+function updateNodes(nodes, storeNodes, options = {
+    nodeOrigin: [0, 0],
+    elevateNodesOnSelect: true,
+    defaults: {},
+}) {
+    const parentNodes = {};
+    const selectedNodeZ = options?.elevateNodesOnSelect ? 1000 : 0;
+    const nextNodes = nodes.map((n) => {
+        const currentStoreNode = storeNodes.find((storeNode) => n.id === storeNode.id);
+        const node = {
+            ...options.defaults,
+            ...n,
+            positionAbsolute: n.position,
+            width: n.width || currentStoreNode?.width,
+            height: n.height || currentStoreNode?.height,
+        };
+        const z = (isNumeric(n.zIndex) ? n.zIndex : 0) + (n.selected ? selectedNodeZ : 0);
+        const currInternals = n?.[internalsSymbol] || currentStoreNode?.[internalsSymbol];
+        if (node.parentNode) {
+            parentNodes[node.parentNode] = true;
+        }
+        Object.defineProperty(node, internalsSymbol, {
+            enumerable: false,
+            value: {
+                handleBounds: currInternals?.handleBounds,
+                z,
+            },
+        });
+        return node;
+    });
+    const nodesWithPositions = updateAbsolutePositions(nextNodes, options.nodeOrigin, parentNodes);
+    return nodesWithPositions;
+}
+function calculateXYZPosition(node, nodes, result, nodeOrigin) {
+    if (!node.parentNode) {
+        return result;
+    }
+    const parentNode = nodes.find((n) => n.id === node.parentNode);
+    const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
+    return calculateXYZPosition(parentNode, nodes, {
+        x: (result.x ?? 0) + parentNodePosition.x,
+        y: (result.y ?? 0) + parentNodePosition.y,
+        z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0) ? parentNode[internalsSymbol]?.z ?? 0 : result.z ?? 0,
+    }, parentNode.origin || nodeOrigin);
+}
+function updateNodeDimensions(updates, nodes, domNode, nodeOrigin, onUpdate) {
+    const viewportNode = domNode?.querySelector('.xyflow__viewport');
+    if (!viewportNode) {
+        return null;
+    }
+    const style = window.getComputedStyle(viewportNode);
+    const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
+    const nextNodes = nodes.map((node) => {
+        const update = updates.find((u) => u.id === node.id);
+        if (update) {
+            const dimensions = getDimensions(update.nodeElement);
+            const doUpdate = !!(dimensions.width &&
+                dimensions.height &&
+                (node.width !== dimensions.width || node.height !== dimensions.height || update.forceUpdate));
+            if (doUpdate) {
+                onUpdate?.(node.id, dimensions);
+                return {
+                    ...node,
+                    ...dimensions,
+                    [internalsSymbol]: {
+                        ...node[internalsSymbol],
+                        handleBounds: {
+                            source: getHandleBounds('.source', update.nodeElement, zoom, node.origin || nodeOrigin),
+                            target: getHandleBounds('.target', update.nodeElement, zoom, node.origin || nodeOrigin),
+                        },
+                    },
+                };
+            }
+        }
+        return node;
+    });
+    return nextNodes;
+}
+function panBy({ delta, panZoom, transform, translateExtent, width, height, }) {
+    if (!panZoom || (!delta.x && !delta.y)) {
+        return false;
+    }
+    const nextViewport = panZoom.setViewportConstrained({
+        x: transform[0] + delta.x,
+        y: transform[1] + delta.y,
+        zoom: transform[2],
+    }, [
+        [0, 0],
+        [width, height],
+    ], translateExtent);
+    const transformChanged = !!nextViewport &&
+        (nextViewport.x !== transform[0] || nextViewport.y !== transform[1] || nextViewport.k !== transform[2]);
+    return transformChanged;
+}
+
+function wrapSelectionDragFunc(selectionFunc) {
+    return (event, _, nodes) => selectionFunc?.(event, nodes);
+}
+function isParentSelected(node, nodes) {
+    if (!node.parentNode) {
+        return false;
+    }
+    const parentNode = nodes.find((node) => node.id === node.parentNode);
+    if (!parentNode) {
+        return false;
+    }
+    if (parentNode.selected) {
+        return true;
+    }
+    return isParentSelected(parentNode, nodes);
+}
+function 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;
+}
+// looks for all selected nodes and created a NodeDragItem for each of them
+function getDragItems(nodes, nodesDraggable, mousePos, nodeId) {
+    return nodes
+        .filter((n) => (n.selected || n.id === nodeId) &&
+        (!n.parentNode || !isParentSelected(n, nodes)) &&
+        (n.draggable || (nodesDraggable && typeof n.draggable === 'undefined')))
+        .map((n) => ({
+        id: n.id,
+        position: n.position || { x: 0, y: 0 },
+        positionAbsolute: n.positionAbsolute || { x: 0, y: 0 },
+        distance: {
+            x: mousePos.x - (n.positionAbsolute?.x ?? 0),
+            y: mousePos.y - (n.positionAbsolute?.y ?? 0),
+        },
+        delta: {
+            x: 0,
+            y: 0,
+        },
+        extent: n.extent,
+        parentNode: n.parentNode,
+        width: n.width,
+        height: n.height,
+        origin: n.origin,
+    }));
+}
+// returns two params:
+// 1. the dragged node (or the first of the list, if we are dragging a node selection)
+// 2. array of selected nodes (for multi selections)
+function getEventHandlerParams({ nodeId, dragItems, nodes, }) {
+    const extentedDragItems = dragItems.map((n) => {
+        const node = nodes.find((node) => node.id === n.id);
+        return {
+            ...node,
+            position: n.position,
+            positionAbsolute: n.positionAbsolute,
+        };
+    });
+    return [nodeId ? extentedDragItems.find((n) => n.id === nodeId) : extentedDragItems[0], extentedDragItems];
+}
+
+function XYDrag({ domNode, onNodeClick, getStoreItems, onDragStart, onDrag, onDragStop, }) {
+    let lastPos = { x: null, y: null };
+    let autoPanId = 0;
+    let dragItems = [];
+    let autoPanStarted = false;
+    let mousePosition = { x: 0, y: 0 };
+    let dragEvent = null;
+    let containerBounds = null;
+    const d3Selection = select(domNode);
+    // public functions
+    function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId }) {
+        function updateNodes({ x, y }) {
+            const { nodes, nodeExtent, snapGrid, snapToGrid, nodeOrigin, onNodeDrag, onSelectionDrag, onError, updateNodePositions, } = getStoreItems();
+            lastPos = { x, y };
+            let hasChange = false;
+            dragItems = dragItems.map((n) => {
+                let nextPosition = { x: x - n.distance.x, y: y - n.distance.y };
+                if (snapToGrid) {
+                    nextPosition = snapPosition(nextPosition, snapGrid);
+                }
+                const updatedPos = calcNextPosition(n, nextPosition, nodes, nodeExtent, nodeOrigin, onError);
+                // we want to make sure that we only fire a change event when there is a changes
+                hasChange = hasChange || n.position.x !== updatedPos.position.x || n.position.y !== updatedPos.position.y;
+                n.position = updatedPos.position;
+                n.positionAbsolute = updatedPos.positionAbsolute;
+                return n;
+            });
+            if (!hasChange) {
+                return;
+            }
+            updateNodePositions(dragItems, true, true);
+            const onNodeOrSelectionDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag);
+            if (dragEvent) {
+                const [currentNode, currentNodes] = getEventHandlerParams({
+                    nodeId,
+                    dragItems,
+                    nodes,
+                });
+                onDrag?.(dragEvent, dragItems, currentNode, currentNodes);
+                onNodeOrSelectionDrag?.(dragEvent, currentNode, currentNodes);
+            }
+        }
+        function autoPan() {
+            if (!containerBounds) {
+                return;
+            }
+            const [xMovement, yMovement] = calcAutoPan(mousePosition, containerBounds);
+            if (xMovement !== 0 || yMovement !== 0) {
+                const { transform, panBy } = getStoreItems();
+                lastPos.x = (lastPos.x ?? 0) - xMovement / transform[2];
+                lastPos.y = (lastPos.y ?? 0) - yMovement / transform[2];
+                if (panBy({ x: xMovement, y: yMovement })) {
+                    updateNodes(lastPos);
+                }
+            }
+            autoPanId = requestAnimationFrame(autoPan);
+        }
+        const d3DragInstance = drag()
+            .on('start', (event) => {
+            const { nodes, multiSelectionActive, domNode, nodesDraggable, transform, snapGrid, snapToGrid, selectNodesOnDrag, onNodeDragStart, onSelectionDragStart, unselectNodesAndEdges, } = getStoreItems();
+            if (!selectNodesOnDrag && !multiSelectionActive && nodeId) {
+                if (!nodes.find((n) => n.id === nodeId)?.selected) {
+                    // we need to reset selected nodes when selectNodesOnDrag=false
+                    unselectNodesAndEdges();
+                }
+            }
+            if (isSelectable && selectNodesOnDrag) {
+                onNodeClick?.();
+            }
+            const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+            lastPos = pointerPos;
+            dragItems = getDragItems(nodes, nodesDraggable, pointerPos, nodeId);
+            const onNodeOrSelectionDragStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart);
+            if (dragItems) {
+                const [currentNode, currentNodes] = getEventHandlerParams({
+                    nodeId,
+                    dragItems,
+                    nodes,
+                });
+                onDragStart?.(event.sourceEvent, dragItems, currentNode, currentNodes);
+                onNodeOrSelectionDragStart?.(event.sourceEvent, currentNode, currentNodes);
+            }
+            containerBounds = domNode?.getBoundingClientRect() || null;
+            mousePosition = getEventPosition(event.sourceEvent, containerBounds);
+        })
+            .on('drag', (event) => {
+            const { autoPanOnNodeDrag, transform, snapGrid, snapToGrid } = getStoreItems();
+            const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+            if (!autoPanStarted && autoPanOnNodeDrag) {
+                autoPanStarted = true;
+                autoPan();
+            }
+            // skip events without movement
+            if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems) {
+                dragEvent = event.sourceEvent;
+                mousePosition = getEventPosition(event.sourceEvent, containerBounds);
+                updateNodes(pointerPos);
+            }
+        })
+            .on('end', (event) => {
+            autoPanStarted = false;
+            cancelAnimationFrame(autoPanId);
+            if (dragItems) {
+                const { nodes, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
+                const onNodeOrSelectionDragStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop);
+                updateNodePositions(dragItems, false, false);
+                const [currentNode, currentNodes] = getEventHandlerParams({
+                    nodeId,
+                    dragItems,
+                    nodes,
+                });
+                onDragStop?.(event.sourceEvent, dragItems, currentNode, currentNodes);
+                onNodeOrSelectionDragStop?.(event.sourceEvent, currentNode, currentNodes);
+            }
+        })
+            .filter((event) => {
+            const target = event.target;
+            const isDraggable = !event.button &&
+                (!noDragClassName || !hasSelector(target, `.${noDragClassName}`, domNode)) &&
+                (!handleSelector || hasSelector(target, handleSelector, domNode));
+            return isDraggable;
+        });
+        d3Selection.call(d3DragInstance);
+    }
+    function destroy() {
+        d3Selection.on('.drag', null);
+    }
+    return {
+        update,
+        destroy,
+    };
+}
+
+// this functions collects all handles and adds an absolute position
+// so that we can later find the closest handle to the mouse position
+function getHandles(node, handleBounds, type, currentHandle) {
+    return (handleBounds[type] || []).reduce((res, h) => {
+        if (`${node.id}-${h.id}-${type}` !== currentHandle) {
+            res.push({
+                id: h.id || null,
+                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;
+    }, []);
+}
+function getClosestHandle(pos, connectionRadius, handles) {
+    let closestHandles = [];
+    let minDistance = Infinity;
+    handles.forEach((handle) => {
+        const distance = Math.sqrt(Math.pow(handle.x - pos.x, 2) + Math.pow(handle.y - pos.y, 2));
+        if (distance <= connectionRadius) {
+            if (distance < minDistance) {
+                closestHandles = [handle];
+            }
+            else if (distance === minDistance) {
+                // when multiple handles are on the same distance we collect all of them
+                closestHandles.push(handle);
+            }
+            minDistance = distance;
+        }
+    });
+    if (!closestHandles.length) {
+        return null;
+    }
+    return closestHandles.length === 1
+        ? closestHandles[0]
+        : // if multiple handles are layouted on top of each other we take the one with type = target because it's more likely that the user wants to connect to this one
+            closestHandles.find((handle) => handle.type === 'target') || closestHandles[0];
+}
+function getHandleLookup({ nodes, nodeId, handleId, handleType }) {
+    return nodes.reduce((res, node) => {
+        if (node[internalsSymbol]) {
+            const { handleBounds } = node[internalsSymbol];
+            let sourceHandles = [];
+            let targetHandles = [];
+            if (handleBounds) {
+                sourceHandles = getHandles(node, handleBounds, 'source', `${nodeId}-${handleId}-${handleType}`);
+                targetHandles = getHandles(node, handleBounds, 'target', `${nodeId}-${handleId}-${handleType}`);
+            }
+            res.push(...sourceHandles, ...targetHandles);
+        }
+        return res;
+    }, []);
+}
+function getHandleType(edgeUpdaterType, handleDomNode) {
+    if (edgeUpdaterType) {
+        return edgeUpdaterType;
+    }
+    else if (handleDomNode?.classList.contains('target')) {
+        return 'target';
+    }
+    else if (handleDomNode?.classList.contains('source')) {
+        return 'source';
+    }
+    return null;
+}
+function resetRecentHandle(handleDomNode, lib) {
+    handleDomNode?.classList.remove('valid', 'connecting', `${lib}-flow__handle-valid`, `${lib}-flow__handle-connecting`);
+}
+function getConnectionStatus(isInsideConnectionRadius, isHandleValid) {
+    let connectionStatus = null;
+    if (isHandleValid) {
+        connectionStatus = 'valid';
+    }
+    else if (isInsideConnectionRadius && !isHandleValid) {
+        connectionStatus = 'invalid';
+    }
+    return connectionStatus;
+}
+
+const nullConnection = { source: null, target: null, sourceHandle: null, targetHandle: null };
+const alwaysValid = () => true;
+function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodes, lib, autoPanOnConnect, 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;
+    let closestHandle;
+    const { x, y } = getEventPosition(event);
+    const clickedHandle = doc?.elementFromPoint(x, y);
+    const handleType = getHandleType(edgeUpdaterType, clickedHandle);
+    const containerBounds = domNode?.getBoundingClientRect();
+    if (!containerBounds || !handleType) {
+        return;
+    }
+    let prevActiveHandle;
+    let connectionPosition = getEventPosition(event, containerBounds);
+    let autoPanStarted = false;
+    let connection = null;
+    let isValid = false;
+    let handleDomNode = null;
+    const handleLookup = getHandleLookup({
+        nodes,
+        nodeId,
+        handleId,
+        handleType,
+    });
+    // when the user is moving the mouse close to the edge of the canvas while connecting we move the canvas
+    function autoPan() {
+        if (!autoPanOnConnect || !containerBounds) {
+            return;
+        }
+        const [x, y] = calcAutoPan(connectionPosition, containerBounds);
+        panBy({ x, y });
+        autoPanId = requestAnimationFrame(autoPan);
+    }
+    updateConnection({
+        connectionPosition,
+        connectionStatus: null,
+        // connectionNodeId etc will be removed in the next major in favor of connectionStartHandle
+        connectionStartHandle: {
+            nodeId,
+            handleId,
+            type: handleType,
+        },
+        connectionEndHandle: null,
+    });
+    onConnectStart?.(event, { nodeId, handleId, handleType });
+    function onPointerMove(event) {
+        const transform = getTransform();
+        connectionPosition = getEventPosition(event, containerBounds);
+        closestHandle = getClosestHandle(pointToRendererPoint(connectionPosition, transform, false, [1, 1]), connectionRadius, handleLookup);
+        if (!autoPanStarted) {
+            autoPan();
+            autoPanStarted = true;
+        }
+        const result = isValidHandle(event, {
+            handle: closestHandle,
+            connectionMode,
+            fromNodeId: nodeId,
+            fromHandleId: handleId,
+            fromType: isTarget ? 'target' : 'source',
+            isValidConnection,
+            doc,
+            lib,
+        });
+        handleDomNode = result.handleDomNode;
+        connection = result.connection;
+        isValid = result.isValid;
+        updateConnection({
+            connectionPosition: closestHandle && isValid
+                ? rendererPointToPoint({
+                    x: closestHandle.x,
+                    y: closestHandle.y,
+                }, transform)
+                : connectionPosition,
+            connectionStatus: getConnectionStatus(!!closestHandle, isValid),
+            connectionEndHandle: result.endHandle,
+        });
+        if (!closestHandle && !isValid && !handleDomNode) {
+            return resetRecentHandle(prevActiveHandle, lib);
+        }
+        if (connection.source !== connection.target && handleDomNode) {
+            resetRecentHandle(prevActiveHandle, lib);
+            prevActiveHandle = handleDomNode;
+            handleDomNode.classList.add('connecting', `${lib}-flow__handle-connecting`);
+            handleDomNode.classList.toggle('valid', isValid);
+            handleDomNode.classList.toggle(`${lib}-flow__handle-valid`, isValid);
+        }
+    }
+    function onPointerUp(event) {
+        if ((closestHandle || handleDomNode) && connection && isValid) {
+            onConnect?.(connection);
+        }
+        // it's important to get a fresh reference from the store here
+        // in order to get the latest state of onConnectEnd
+        onConnectEnd?.(event);
+        if (edgeUpdaterType) {
+            onEdgeUpdateEnd?.(event);
+        }
+        resetRecentHandle(prevActiveHandle, lib);
+        cancelConnection();
+        cancelAnimationFrame(autoPanId);
+        autoPanStarted = false;
+        isValid = false;
+        connection = null;
+        handleDomNode = null;
+        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);
+}
+// 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, }) {
+    const isTarget = fromType === 'target';
+    const handleDomNode = doc.querySelector(`.${lib}-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`);
+    const { x, y } = getEventPosition(event);
+    const handleBelow = doc.elementFromPoint(x, y);
+    // we always want to prioritize the handle below the mouse cursor over the closest distance handle,
+    // because it could be that the center of another handle is closer to the mouse pointer than the handle below the cursor
+    const handleToCheck = handleBelow?.classList.contains(`${lib}-flow__handle`) ? handleBelow : handleDomNode;
+    const result = {
+        handleDomNode: handleToCheck,
+        isValid: false,
+        connection: nullConnection,
+        endHandle: null,
+    };
+    if (handleToCheck) {
+        const handleType = getHandleType(undefined, handleToCheck);
+        const handleNodeId = handleToCheck.getAttribute('data-nodeid');
+        const handleId = handleToCheck.getAttribute('data-handleid');
+        const connectable = handleToCheck.classList.contains('connectable');
+        const connectableEnd = handleToCheck.classList.contains('connectableend');
+        const connection = {
+            source: isTarget ? handleNodeId : fromNodeId,
+            sourceHandle: isTarget ? handleId : fromHandleId,
+            target: isTarget ? fromNodeId : handleNodeId,
+            targetHandle: isTarget ? fromHandleId : handleId,
+        };
+        result.connection = connection;
+        const isConnectable = connectable && connectableEnd;
+        // in strict mode we don't allow target to target or source to source connections
+        const isValid = isConnectable &&
+            (connectionMode === ConnectionMode.Strict
+                ? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')
+                : handleNodeId !== fromNodeId || handleId !== fromHandleId);
+        if (isValid) {
+            result.endHandle = {
+                nodeId: handleNodeId,
+                handleId,
+                type: handleType,
+            };
+            result.isValid = isValidConnection(connection);
+        }
+    }
+    return result;
+}
+const XYHandle = {
+    onPointerDown,
+    isValid: isValidHandle,
+};
+
+function XYMinimap({ domNode, panZoom, getTransform, getViewScale }) {
+    const selection = select(domNode);
+    function update({ translateExtent, width, height, zoomStep = 10, pannable = true, zoomable = true, inversePan = false, }) {
+        const zoomHandler = (event) => {
+            const transform = getTransform();
+            if (event.sourceEvent.type !== 'wheel' || !panZoom) {
+                return;
+            }
+            const pinchDelta = -event.sourceEvent.deltaY *
+                (event.sourceEvent.deltaMode === 1 ? 0.05 : event.sourceEvent.deltaMode ? 1 : 0.002) *
+                zoomStep;
+            const nextZoom = transform[2] * Math.pow(2, pinchDelta);
+            panZoom.scaleTo(nextZoom);
+        };
+        const panHandler = (event) => {
+            const transform = getTransform();
+            if (event.sourceEvent.type !== 'mousemove' || !panZoom) {
+                return;
+            }
+            // @TODO: how to calculate the correct next position? Math.max(1, transform[2]) is a workaround.
+            const moveScale = getViewScale() * Math.max(1, transform[2]) * (inversePan ? -1 : 1);
+            const position = {
+                x: transform[0] - event.sourceEvent.movementX * moveScale,
+                y: transform[1] - event.sourceEvent.movementY * moveScale,
+            };
+            const extent = [
+                [0, 0],
+                [width, height],
+            ];
+            panZoom.setViewportConstrained({
+                x: position.x,
+                y: position.y,
+                zoom: transform[2],
+            }, extent, translateExtent);
+        };
+        const zoomAndPanHandler = zoom()
+            // @ts-ignore
+            .on('zoom', pannable ? panHandler : null)
+            // @ts-ignore
+            .on('zoom.wheel', zoomable ? zoomHandler : null);
+        selection.call(zoomAndPanHandler, {});
+    }
+    function destroy() {
+        selection.on('zoom', null);
+    }
+    return {
+        update,
+        destroy,
+        pointer,
+    };
+}
+
+const viewChanged = (prevViewport, eventViewport) => prevViewport.x !== eventViewport.x || prevViewport.y !== eventViewport.y || prevViewport.zoom !== eventViewport.k;
+const transformToViewport = (transform) => ({
+    x: transform.x,
+    y: transform.y,
+    zoom: transform.k,
+});
+const viewportToTransform = ({ x, y, zoom }) => zoomIdentity.translate(x, y).scale(zoom);
+const isWrappedWithClass = (event, className) => event.target.closest(`.${className}`);
+const isRightClickPan = (panOnDrag, usedButton) => usedButton === 2 && Array.isArray(panOnDrag) && panOnDrag.includes(2);
+const getD3Transition = (selection, duration = 0) => typeof duration === 'number' && duration > 0 ? selection.transition().duration(duration) : selection;
+
+function createPanOnScrollHandler({ noWheelClassName, d3Selection, d3Zoom, panOnScrollMode, panOnScrollSpeed, zoomOnPinch, }) {
+    return (event) => {
+        if (isWrappedWithClass(event, noWheelClassName)) {
+            return false;
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        const currentZoom = d3Selection.property('__zoom').k || 1;
+        if (event.ctrlKey && zoomOnPinch) {
+            const point = pointer(event);
+            // taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
+            const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10;
+            const zoom = currentZoom * Math.pow(2, pinchDelta);
+            d3Zoom.scaleTo(d3Selection, zoom, point);
+            return;
+        }
+        // increase scroll speed in firefox
+        // firefox: deltaMode === 1; chrome: deltaMode === 0
+        const deltaNormalize = event.deltaMode === 1 ? 20 : 1;
+        const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize;
+        const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize;
+        d3Zoom.translateBy(d3Selection, -(deltaX / currentZoom) * panOnScrollSpeed, -(deltaY / currentZoom) * panOnScrollSpeed);
+    };
+}
+function createZoomOnScrollHandler({ noWheelClassName, preventScrolling, d3ZoomHandler }) {
+    return function (event, d) {
+        if (!preventScrolling || isWrappedWithClass(event, noWheelClassName)) {
+            return null;
+        }
+        event.preventDefault();
+        d3ZoomHandler.call(this, event, d);
+    };
+}
+function createPanZoomStartHandler({ zoomPanValues, onDraggingChange, onPanZoomStart }) {
+    return (event) => {
+        // we need to remember it here, because it's always 0 in the "zoom" event
+        zoomPanValues.mouseButton = event.sourceEvent?.button || 0;
+        zoomPanValues.isZoomingOrPanning = true;
+        if (event.sourceEvent?.type === 'mousedown') {
+            onDraggingChange(true);
+        }
+        if (onPanZoomStart) {
+            const viewport = transformToViewport(event.transform);
+            zoomPanValues.prevViewport = viewport;
+            onPanZoomStart?.(event.sourceEvent, viewport);
+        }
+    };
+}
+function createPanZoomHandler({ zoomPanValues, panOnDrag, onPaneContextMenu, onTransformChange, onPanZoom, }) {
+    return (event) => {
+        zoomPanValues.usedRightMouseButton = !!(onPaneContextMenu && isRightClickPan(panOnDrag, zoomPanValues.mouseButton ?? 0));
+        onTransformChange([event.transform.x, event.transform.y, event.transform.k]);
+        if (onPanZoom) {
+            onPanZoom?.(event.sourceEvent, transformToViewport(event.transform));
+        }
+    };
+}
+function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDraggingChange, onPanZoomEnd, onPaneContextMenu, }) {
+    return (event) => {
+        zoomPanValues.isZoomingOrPanning = false;
+        if (onPaneContextMenu &&
+            isRightClickPan(panOnDrag, zoomPanValues.mouseButton ?? 0) &&
+            !zoomPanValues.usedRightMouseButton &&
+            event.sourceEvent) {
+            onPaneContextMenu(event.sourceEvent);
+        }
+        zoomPanValues.usedRightMouseButton = false;
+        onDraggingChange(false);
+        if (onPanZoomEnd && viewChanged(zoomPanValues.prevViewport, event.transform)) {
+            const viewport = transformToViewport(event.transform);
+            zoomPanValues.prevViewport = viewport;
+            clearTimeout(zoomPanValues.timerId);
+            zoomPanValues.timerId = setTimeout(() => {
+                onPanZoomEnd?.(event.sourceEvent, viewport);
+            }, 
+            // we need a setTimeout for panOnScroll to supress multiple end events fired during scroll
+            panOnScroll ? 150 : 0);
+        }
+    };
+}
+
+function createFilter({ zoomActivationKeyPressed, zoomOnScroll, zoomOnPinch, panOnDrag, panOnScroll, zoomOnDoubleClick, userSelectionActive, noWheelClassName, noPanClassName, lib, }) {
+    return (event) => {
+        const zoomScroll = zoomActivationKeyPressed || zoomOnScroll;
+        const pinchZoom = zoomOnPinch && event.ctrlKey;
+        if (event.button === 1 &&
+            event.type === 'mousedown' &&
+            (isWrappedWithClass(event, `${lib}-flow__node`) || isWrappedWithClass(event, `${lib}-flow__edge`))) {
+            return true;
+        }
+        // if all interactions are disabled, we prevent all zoom events
+        if (!panOnDrag && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch) {
+            return false;
+        }
+        // during a selection we prevent all other interactions
+        if (userSelectionActive) {
+            return false;
+        }
+        // if zoom on double click is disabled, we prevent the double click event
+        if (!zoomOnDoubleClick && event.type === 'dblclick') {
+            return false;
+        }
+        // if the target element is inside an element with the nowheel class, we prevent zooming
+        if (isWrappedWithClass(event, noWheelClassName) && event.type === 'wheel') {
+            return false;
+        }
+        // if the target element is inside an element with the nopan class, we prevent panning
+        if (isWrappedWithClass(event, noPanClassName) && event.type !== 'wheel') {
+            return false;
+        }
+        if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') {
+            return false;
+        }
+        // when there is no scroll handling enabled, we prevent all wheel events
+        if (!zoomScroll && !panOnScroll && !pinchZoom && event.type === 'wheel') {
+            return false;
+        }
+        // if the pane is not movable, we prevent dragging it with mousestart or touchstart
+        if (!panOnDrag && (event.type === 'mousedown' || event.type === 'touchstart')) {
+            return false;
+        }
+        // if the pane is only movable using allowed clicks
+        if (Array.isArray(panOnDrag) &&
+            !panOnDrag.includes(event.button) &&
+            (event.type === 'mousedown' || event.type === 'touchstart')) {
+            return false;
+        }
+        // We only allow right clicks if pan on drag is set to right click
+        const buttonAllowed = (Array.isArray(panOnDrag) && panOnDrag.includes(event.button)) || !event.button || event.button <= 1;
+        // default filter for d3-zoom
+        return (!event.ctrlKey || event.type === 'wheel') && buttonAllowed;
+    };
+}
+
+function XYPanZoom({ domNode, minZoom, maxZoom, translateExtent, viewport, onPanZoom, onPanZoomStart, onPanZoomEnd, onTransformChange, onDraggingChange, }) {
+    const zoomPanValues = {
+        isZoomingOrPanning: false,
+        usedRightMouseButton: false,
+        prevViewport: { x: 0, y: 0, zoom: 0 },
+        mouseButton: 0,
+        timerId: undefined,
+    };
+    const bbox = domNode.getBoundingClientRect();
+    const d3ZoomInstance = zoom().scaleExtent([minZoom, maxZoom]).translateExtent(translateExtent);
+    const d3Selection = select(domNode).call(d3ZoomInstance);
+    setViewportConstrained({
+        x: viewport.x,
+        y: viewport.y,
+        zoom: clamp(viewport.zoom, minZoom, maxZoom),
+    }, [
+        [0, 0],
+        [bbox.width, bbox.height],
+    ], translateExtent);
+    const d3ZoomHandler = d3Selection.on('wheel.zoom');
+    function setTransform(transform, options) {
+        if (d3Selection) {
+            d3ZoomInstance?.transform(getD3Transition(d3Selection, options?.duration), transform);
+        }
+    }
+    // public functions
+    function update({ noWheelClassName, noPanClassName, onPaneContextMenu, userSelectionActive, panOnScroll, panOnDrag, panOnScrollMode, panOnScrollSpeed, preventScrolling, zoomOnPinch, zoomOnScroll, zoomOnDoubleClick, zoomActivationKeyPressed, lib, }) {
+        if (userSelectionActive && !zoomPanValues.isZoomingOrPanning) {
+            destroy();
+        }
+        const isPanOnScroll = panOnScroll && !zoomActivationKeyPressed && !userSelectionActive;
+        const wheelHandler = isPanOnScroll
+            ? createPanOnScrollHandler({
+                noWheelClassName,
+                d3Selection,
+                d3Zoom: d3ZoomInstance,
+                panOnScrollMode,
+                panOnScrollSpeed,
+                zoomOnPinch,
+            })
+            : createZoomOnScrollHandler({
+                noWheelClassName,
+                preventScrolling,
+                d3ZoomHandler,
+            });
+        d3Selection.on('wheel.zoom', wheelHandler, { passive: false });
+        if (!userSelectionActive) {
+            // pan zoom start
+            const startHandler = createPanZoomStartHandler({
+                zoomPanValues,
+                onDraggingChange,
+                onPanZoomStart,
+            });
+            d3ZoomInstance.on('start', startHandler);
+            // pan zoom
+            const panZoomHandler = createPanZoomHandler({
+                zoomPanValues,
+                panOnDrag,
+                onPaneContextMenu: !!onPaneContextMenu,
+                onPanZoom,
+                onTransformChange,
+            });
+            d3ZoomInstance.on('zoom', panZoomHandler);
+            // pan zoom end
+            const panZoomEndHandler = createPanZoomEndHandler({
+                zoomPanValues,
+                panOnDrag,
+                panOnScroll,
+                onPaneContextMenu,
+                onPanZoomEnd,
+                onDraggingChange,
+            });
+            d3ZoomInstance.on('end', panZoomEndHandler);
+        }
+        const filter = createFilter({
+            zoomActivationKeyPressed,
+            panOnDrag,
+            zoomOnScroll,
+            panOnScroll,
+            zoomOnDoubleClick,
+            zoomOnPinch,
+            userSelectionActive,
+            noPanClassName,
+            noWheelClassName,
+            lib,
+        });
+        d3ZoomInstance.filter(filter);
+    }
+    function destroy() {
+        d3ZoomInstance.on('zoom', null);
+    }
+    function setViewportConstrained(viewport, extent, translateExtent) {
+        const nextTransform = viewportToTransform(viewport);
+        const contrainedTransform = d3ZoomInstance?.constrain()(nextTransform, extent, translateExtent);
+        if (contrainedTransform) {
+            setTransform(contrainedTransform);
+        }
+        return contrainedTransform;
+    }
+    function setViewport(viewport, options) {
+        const nextTransform = viewportToTransform(viewport);
+        setTransform(nextTransform, options);
+        return nextTransform;
+    }
+    function getViewport() {
+        const transform = d3Selection ? zoomTransform(d3Selection.node()) : { x: 0, y: 0, k: 1 };
+        return { x: transform.x, y: transform.y, zoom: transform.k };
+    }
+    function scaleTo(zoom, options) {
+        if (d3Selection) {
+            d3ZoomInstance?.scaleTo(getD3Transition(d3Selection, options?.duration), zoom);
+        }
+    }
+    function scaleBy(factor, options) {
+        if (d3Selection) {
+            d3ZoomInstance?.scaleBy(getD3Transition(d3Selection, options?.duration), factor);
+        }
+    }
+    function setScaleExtent(scaleExtent) {
+        d3ZoomInstance?.scaleExtent(scaleExtent);
+    }
+    function setTranslateExtent(translateExtent) {
+        d3ZoomInstance?.translateExtent(translateExtent);
+    }
+    return {
+        update,
+        destroy,
+        setViewport,
+        setViewportConstrained,
+        getViewport,
+        scaleTo,
+        scaleBy,
+        setScaleExtent,
+        setTranslateExtent,
+    };
+}
+
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, addEdgeBase, boxToRect, calcAutoPan, calcNextPosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdgesBase, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getEventPosition, getHandleBounds, getHostForElement, getIncomersBase, getMarkerId, getNodePositionWithOrigin, getNodesInside, getOutgoersBase, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getRectOfNodes, getSmoothStepPath, getStraightPath, getTransformForBounds, groupEdgesByZLevel, infiniteExtent, internalsSymbol, isEdgeBase, isEdgeVisible, isInputDOMNode, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateEdgeBase, updateNodeDimensions, updateNodes };