@xyflow/system 0.0.12 → 0.0.13

package/dist/esm/index.js

@@ -0,0 +1,2176 @@
+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".`,
+    error012: (id) => `Node with id "${id}" does not exist, it may have been removed. This can happen when a node is deleted before the "onNodeClick" handler is called.`,
+};
+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 = {}));
+
+/**
+ * @internal
+ */
+function areConnectionMapsEqual(a, b) {
+    if (!a && !b) {
+        return true;
+    }
+    if (!a || !b || a.size !== b.size) {
+        return false;
+    }
+    if (!a.size && !b.size) {
+        return true;
+    }
+    for (const key of a.keys()) {
+        if (!b.has(key)) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * We call the callback for all connections in a that are not in b
+ *
+ * @internal
+ */
+function handleConnectionChange(a, b, cb) {
+    if (!cb) {
+        return;
+    }
+    const diff = [];
+    a.forEach((connection, key) => {
+        if (!b?.has(key)) {
+            diff.push(connection);
+        }
+    });
+    if (diff.length) {
+        cb(diff);
+    }
+}
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Test whether an object is useable as an Edge
+ * @public
+ * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true
+ * @param element - The element to test
+ * @returns A boolean indicating whether the element is an Edge
+ */
+const isEdgeBase = (element) => 'id' in element && 'source' in element && 'target' in element;
+/**
+ * Test whether an object is useable as a Node
+ * @public
+ * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true
+ * @param element - The element to test
+ * @returns A boolean indicating whether the element is an Node
+ */
+const isNodeBase = (element) => 'id' in element && !('source' in element) && !('target' in element);
+/**
+ * Pass in a node, and get connected nodes where edge.source === node.id
+ * @public
+ * @param node - The node to get the connected nodes from
+ * @param nodes - The array of all nodes
+ * @param edges - The array of all edges
+ * @returns An array of nodes that are connected over eges where the source is the given node
+ */
+const getOutgoersBase = (node, nodes, edges) => {
+    if (!node.id) {
+        return [];
+    }
+    const outgoerIds = new Set();
+    edges.forEach((edge) => {
+        if (edge.source === node.id) {
+            outgoerIds.add(edge.target);
+        }
+    });
+    return nodes.filter((n) => outgoerIds.has(n.id));
+};
+/**
+ * Pass in a node, and get connected nodes where edge.target === node.id
+ * @public
+ * @param node - The node to get the connected nodes from
+ * @param nodes - The array of all nodes
+ * @param edges - The array of all edges
+ * @returns An array of nodes that are connected over eges where the target is the given node
+ */
+const getIncomersBase = (node, nodes, edges) => {
+    if (!node.id) {
+        return [];
+    }
+    const incomersIds = new Set();
+    edges.forEach((edge) => {
+        if (edge.target === node.id) {
+            incomersIds.add(edge.source);
+        }
+    });
+    return nodes.filter((n) => incomersIds.has(n.id));
+};
+const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
+    if (!node) {
+        return {
+            x: 0,
+            y: 0,
+            positionAbsolute: {
+                x: 0,
+                y: 0,
+            },
+        };
+    }
+    const offsetX = (node.computed?.width ?? node.width ?? 0) * nodeOrigin[0];
+    const offsetY = (node.computed?.height ?? node.height ?? 0) * nodeOrigin[1];
+    const position = {
+        x: node.position.x - offsetX,
+        y: node.position.y - offsetY,
+    };
+    return {
+        ...position,
+        positionAbsolute: node.computed?.positionAbsolute
+            ? {
+                x: node.computed.positionAbsolute.x - offsetX,
+                y: node.computed.positionAbsolute.y - offsetY,
+            }
+            : position,
+    };
+};
+/**
+ * Determines a bounding box that contains all given nodes in an array
+ * @public
+ * @remarks Useful when combined with {@link getViewportForBounds} to calculate the correct transform to fit the given nodes in a viewport.
+ * @param nodes - Nodes to calculate the bounds for
+ * @param nodeOrigin - Origin of the nodes: [0, 0] - top left, [0.5, 0.5] - center
+ * @returns Bounding box enclosing all nodes
+ */
+const getNodesBounds = (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.computed?.width ?? node.width ?? 0,
+            height: node.computed?.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 { computed, selectable = true, hidden = false } = node;
+        const width = computed?.width ?? node.width ?? null;
+        const height = computed?.height ?? node.height ?? null;
+        if ((excludeNonSelectableNodes && !selectable) || hidden) {
+            return res;
+        }
+        const overlappingArea = getOverlappingArea(paneRect, nodeToRect(node, nodeOrigin));
+        const notInitialized = 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;
+};
+/**
+ * Get all connecting edges for a given set of nodes
+ * @param nodes - Nodes you want to get the connected edges for
+ * @param edges - All edges
+ * @returns Array of edges that connect any of the given nodes with each other
+ */
+const getConnectedEdgesBase = (nodes, edges) => {
+    const nodeIds = new Set();
+    nodes.forEach((node) => {
+        nodeIds.add(node.id);
+    });
+    return edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
+};
+function fitView({ nodes, width, height, panZoom, minZoom, maxZoom, nodeOrigin = [0, 0] }, options) {
+    const filteredNodes = nodes.filter((n) => {
+        const isVisible = n.computed?.width && n.computed?.height && (options?.includeHiddenNodes || !n.hidden);
+        if (options?.nodes?.length) {
+            return isVisible && options?.nodes.some((optionNode) => optionNode.id === n.id);
+        }
+        return isVisible;
+    });
+    if (filteredNodes.length > 0) {
+        const bounds = getNodesBounds(filteredNodes, nodeOrigin);
+        const viewport = getViewportForBounds(bounds, width, height, options?.minZoom ?? minZoom, options?.maxZoom ?? maxZoom, options?.padding ?? 0.1);
+        panZoom.setViewport(viewport, { duration: options?.duration });
+        return true;
+    }
+    return false;
+}
+function clampNodeExtent(node, extent) {
+    if (!extent || extent === 'parent') {
+        return extent;
+    }
+    return [extent[0], [extent[1][0] - (node.computed?.width ?? 0), extent[1][1] - (node.computed?.height ?? 0)]];
+}
+function calcNextPosition(node, nextPosition, nodes, nodeExtent, nodeOrigin = [0, 0], onError) {
+    const clampedNodeExtent = clampNodeExtent(node, node.extent || nodeExtent);
+    let currentExtent = clampedNodeExtent;
+    let parentNode = null;
+    let parentPos = { x: 0, y: 0 };
+    if (node.parentNode) {
+        parentNode = nodes.find((n) => n.id === node.parentNode) || null;
+        parentPos = parentNode
+            ? getNodePositionWithOrigin(parentNode, parentNode.origin || nodeOrigin).positionAbsolute
+            : parentPos;
+    }
+    if (node.extent === 'parent' && !node.expandParent) {
+        const nodeWidth = node.computed?.width;
+        const nodeHeight = node.computed?.height;
+        if (node.parentNode && nodeWidth && nodeHeight) {
+            const currNodeOrigin = node.origin || nodeOrigin;
+            currentExtent =
+                parentNode && isNumeric(parentNode.computed?.width) && isNumeric(parentNode.computed?.height)
+                    ? [
+                        [parentPos.x + nodeWidth * currNodeOrigin[0], parentPos.y + nodeHeight * currNodeOrigin[1]],
+                        [
+                            parentPos.x + (parentNode.computed?.width ?? 0) - nodeWidth + nodeWidth * currNodeOrigin[0],
+                            parentPos.y + (parentNode.computed?.height ?? 0) - nodeHeight + nodeHeight * currNodeOrigin[1],
+                        ],
+                    ]
+                    : currentExtent;
+        }
+        else {
+            onError?.('005', errorMessages['error005']());
+            currentExtent = clampedNodeExtent;
+        }
+    }
+    else if (node.extent && node.parentNode && node.extent !== 'parent') {
+        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 && currentExtent !== 'parent'
+        ? clampPosition(nextPosition, currentExtent)
+        : nextPosition;
+    return {
+        position: {
+            x: positionAbsolute.x - parentPos.x,
+            y: positionAbsolute.y - parentPos.y,
+        },
+        positionAbsolute,
+    };
+}
+/**
+ * Pass in nodes & edges to delete, get arrays of nodes and edges that actually can be deleted
+ * @internal
+ * @param param.nodesToRemove - The nodes to remove
+ * @param param.edgesToRemove - The edges to remove
+ * @param param.nodes - All nodes
+ * @param param.edges - All edges
+ * @param param.onBeforeDelete - Callback to check which nodes and edges can be deleted
+ * @returns nodes: nodes that can be deleted, edges: edges that can be deleted
+ */
+async function getElementsToRemove({ nodesToRemove = [], edgesToRemove = [], nodes, edges, onBeforeDelete, }) {
+    const nodeIds = nodesToRemove.map((node) => node.id);
+    const matchingNodes = [];
+    for (const node of nodes) {
+        if (node.deletable === false) {
+            continue;
+        }
+        const isIncluded = nodeIds.includes(node.id);
+        const parentHit = !isIncluded && node.parentNode && matchingNodes.find((n) => n.id === node.parentNode);
+        if (isIncluded || parentHit) {
+            matchingNodes.push(node);
+        }
+    }
+    const edgeIds = edgesToRemove.map((edge) => edge.id);
+    const deletableEdges = edges.filter((edge) => edge.deletable !== false);
+    const connectedEdges = getConnectedEdgesBase(matchingNodes, deletableEdges);
+    const matchingEdges = connectedEdges;
+    for (const edge of deletableEdges) {
+        const isIncluded = edgeIds.includes(edge.id);
+        if (isIncluded && !matchingEdges.find((e) => e.id === edge.id)) {
+            matchingEdges.push(edge);
+        }
+    }
+    if (!onBeforeDelete) {
+        return {
+            edges: matchingEdges,
+            nodes: matchingNodes,
+        };
+    }
+    const onBeforeDeleteResult = await onBeforeDelete({
+        nodes: matchingNodes,
+        edges: matchingEdges,
+    });
+    if (typeof onBeforeDeleteResult === 'boolean') {
+        return onBeforeDeleteResult ? { edges: matchingEdges, nodes: matchingNodes } : { edges: [], nodes: [] };
+    }
+    return onBeforeDeleteResult;
+}
+
+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]),
+});
+/**
+ * Calculates the velocity of panning when the mouse is close to the edge of the canvas
+ * @internal
+ * @param value - One dimensional poition of the mouse (x or y)
+ * @param min - Minimal position on canvas before panning starts
+ * @param max - Maximal position on canvas before panning starts
+ * @returns - A number between 0 and 1 that represents the velocity of panning
+ */
+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.computed?.width ?? node.width ?? 0,
+        height: node.computed?.height ?? node.height ?? 0,
+    };
+};
+const nodeToBox = (node, nodeOrigin = [0, 0]) => {
+    const { positionAbsolute } = getNodePositionWithOrigin(node, node.origin || nodeOrigin);
+    return {
+        ...positionAbsolute,
+        x2: positionAbsolute.x + (node.computed?.width ?? node.width ?? 0),
+        y2: positionAbsolute.y + (node.computed?.height ?? 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],
+    };
+};
+const 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,
+    };
+};
+/**
+ * Returns a viewport that encloses the given bounds with optional padding.
+ * @public
+ * @remarks You can determine bounds of nodes with {@link getNodesBounds} and {@link getBoundsOfRects}
+ * @param bounds - Bounds to fit inside viewport
+ * @param width - Width of the viewport
+ * @param height  - Height of the viewport
+ * @param minZoom - Minimum zoom level of the resulting viewport
+ * @param maxZoom - Maximum zoom level of the resulting viewport
+ * @param padding - Optional padding around the bounds
+ * @returns A transforned {@link Viewport} that encloses the given bounds which you can pass to e.g. {@link setViewport}
+ * @example
+ * const { x, y, zoom } = getViewportForBounds(
+  { x: 0, y: 0, width: 100, height: 100},
+  1200, 800, 0.5, 2);
+ */
+const getViewportForBounds = (bounds, width, height, minZoom, maxZoom, padding) => {
+    const xZoom = width / (bounds.width * (1 + padding));
+    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, zoom: clampedZoom };
+};
+const isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.indexOf('Mac') >= 0;
+
+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),
+    };
+};
+// The handle bounds are calculated relative to the node element.
+// We store them in the internals object of the node in order to avoid
+// unnecessary recalculations.
+const getHandleBounds = (selector, nodeElement, zoom, nodeOrigin = [0, 0]) => {
+    const handles = nodeElement.querySelectorAll(selector);
+    if (!handles || !handles.length) {
+        return null;
+    }
+    const handlesArray = Array.from(handles);
+    // @todo can't we use the node dimensions here?
+    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)];
+    }
+}
+/**
+ * Get a bezier path from source to target handle
+ * @param params.sourceX - The x position of the source handle
+ * @param params.sourceY - The y position of the source handle
+ * @param params.sourcePosition - The position of the source handle (default: Position.Bottom)
+ * @param params.targetX - The x position of the target handle
+ * @param params.targetY - The y position of the target handle
+ * @param params.targetPosition - The position of the target handle (default: Position.Top)
+ * @param params.curvature - The curvature of the bezier edge
+ * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ * @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,
+});
+ */
+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];
+}
+function getElevatedEdgeZIndex({ sourceNode, targetNode, selected = false, zIndex = 0, elevateOnSelect = false, }) {
+    if (!elevateOnSelect) {
+        return zIndex;
+    }
+    const edgeOrConnectedNodeSelected = selected || targetNode.selected || sourceNode.selected;
+    const selectedZIndex = Math.max(sourceNode[internalsSymbol]?.z || 0, targetNode[internalsSymbol]?.z || 0, 1000);
+    return zIndex + (edgeOrConnectedNodeSelected ? selectedZIndex : 0);
+}
+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 }) => `xy-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)));
+};
+/**
+ * This util is a convenience function to add a new Edge to an array of edges
+ * @remarks It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
+ * @public
+ * @param edgeParams - Either an Edge or a Connection you want to add
+ * @param edges -  The array of all current edges
+ * @returns A new array of edges with the new edge added
+ */
+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;
+    }
+    if (edge.sourceHandle === null) {
+        delete edge.sourceHandle;
+    }
+    if (edge.targetHandle === null) {
+        delete edge.targetHandle;
+    }
+    return edges.concat(edge);
+};
+/**
+ * A handy utility to update an existing Edge with new properties
+ * @param oldEdge - The edge you want to update
+ * @param newConnection - The new connection you want to update the edge with
+ * @param edges - The array of all current edges
+ * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
+ * @returns the updated edges array
+ */
+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);
+};
+
+/**
+ * Get a straight path from source to target handle
+ * @param params.sourceX - The x position of the source handle
+ * @param params.sourceY - The y position of the source handle
+ * @param params.targetX - The x position of the target handle
+ * @param params.targetY - The y position of the target handle
+ * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ * @example
+ *  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,
+    });
+ */
+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 sourceGapOffset = { x: 0, y: 0 };
+    const targetGapOffset = { x: 0, y: 0 };
+    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;
+        }
+        if (sourcePosition === targetPosition) {
+            const diff = Math.abs(source[dirAccessor] - target[dirAccessor]);
+            // if an edge goes from right to right for example (sourcePosition === targetPosition) and the distance between source.x and target.x is less than the offset, the added point and the gapped source/target will overlap. This leads to a weird edge path. To avoid this we add a gapOffset to the source/target
+            if (diff <= offset) {
+                const gapOffset = Math.min(offset - 1, offset - diff);
+                if (sourceDir[dirAccessor] === currDir) {
+                    sourceGapOffset[dirAccessor] = (sourceGapped[dirAccessor] > source[dirAccessor] ? -1 : 1) * gapOffset;
+                }
+                else {
+                    targetGapOffset[dirAccessor] = (targetGapped[dirAccessor] > target[dirAccessor] ? -1 : 1) * gapOffset;
+                }
+            }
+        }
+        // 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;
+            }
+        }
+        const sourceGapPoint = { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y };
+        const targetGapPoint = { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y };
+        const maxXDistance = Math.max(Math.abs(sourceGapPoint.x - points[0].x), Math.abs(targetGapPoint.x - points[0].x));
+        const maxYDistance = Math.max(Math.abs(sourceGapPoint.y - points[0].y), Math.abs(targetGapPoint.y - points[0].y));
+        // we want to place the label on the longest segment of the edge
+        if (maxXDistance >= maxYDistance) {
+            centerX = (sourceGapPoint.x + targetGapPoint.x) / 2;
+            centerY = points[0].y;
+        }
+        else {
+            centerX = points[0].x;
+            centerY = (sourceGapPoint.y + targetGapPoint.y) / 2;
+        }
+    }
+    const pathPoints = [
+        source,
+        { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y },
+        ...points,
+        { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y },
+        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}`;
+}
+/**
+ * Get a smooth step path from source to target handle
+ * @param params.sourceX - The x position of the source handle
+ * @param params.sourceY - The y position of the source handle
+ * @param params.sourcePosition - The position of the source handle (default: Position.Bottom)
+ * @param params.targetX - The x position of the target handle
+ * @param params.targetY - The y position of the target handle
+ * @param params.targetPosition - The position of the target handle (default: Position.Top)
+ * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ * @example
+ *  const source = { x: 0, y: 20 };
+    const target = { x: 150, y: 100 };
+    
+    const [path, labelX, labelY, offsetX, offsetY] = getSmoothStepPath({
+      sourceX: source.x,
+      sourceY: source.y,
+      sourcePosition: Position.Right,
+      targetX: target.x,
+      targetY: target.y,
+      targetPosition: Position.Left,
+    });
+ */
+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 isNodeInitialized(node) {
+    return !!(node?.[internalsSymbol]?.handleBounds || node?.handles?.length) && !!(node?.computed?.width || node?.width);
+}
+function getEdgePosition(params) {
+    const { sourceNode, targetNode } = params;
+    if (!isNodeInitialized(sourceNode) || !isNodeInitialized(targetNode)) {
+        return null;
+    }
+    const sourceHandleBounds = sourceNode[internalsSymbol]?.handleBounds || toHandleBounds(sourceNode.handles);
+    const targetHandleBounds = targetNode[internalsSymbol]?.handleBounds || toHandleBounds(targetNode.handles);
+    const sourceHandle = getHandle(sourceHandleBounds?.source ?? [], params.sourceHandle);
+    const targetHandle = getHandle(
+    // when connection type is loose we can define all handles as sources and connect source -> source
+    params.connectionMode === ConnectionMode.Strict
+        ? targetHandleBounds?.target ?? []
+        : (targetHandleBounds?.target ?? []).concat(targetHandleBounds?.source ?? []), 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 [sourceX, sourceY] = getHandlePosition(sourcePosition, sourceNode, sourceHandle);
+    const [targetX, targetY] = getHandlePosition(targetPosition, targetNode, targetHandle);
+    return {
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+    };
+}
+function toHandleBounds(handles) {
+    if (!handles) {
+        return null;
+    }
+    const source = [];
+    const target = [];
+    for (const handle of handles) {
+        handle.width = handle.width || 1;
+        handle.height = handle.height || 1;
+        if (handle.type === 'source') {
+            source.push(handle);
+        }
+        else if (handle.type === 'target') {
+            target.push(handle);
+        }
+    }
+    return {
+        source,
+        target,
+    };
+}
+function getHandlePosition(position, node, handle = null) {
+    const x = (handle?.x ?? 0) + (node.computed?.positionAbsolute?.x ?? 0);
+    const y = (handle?.y ?? 0) + (node.computed?.positionAbsolute?.y ?? 0);
+    const width = handle?.width || (node?.computed?.width ?? node?.width ?? 0);
+    const height = handle?.height || (node?.computed?.height ?? node?.height ?? 0);
+    switch (position) {
+        case Position.Top:
+            return [x + width / 2, y];
+        case Position.Right:
+            return [x + width, y + height / 2];
+        case Position.Bottom:
+            return [x + width / 2, y + height];
+        case Position.Left:
+            return [x, 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 getNodeToolbarTransform(nodeRect, viewport, position, offset, align) {
+    let alignmentOffset = 0.5;
+    if (align === 'start') {
+        alignmentOffset = 0;
+    }
+    else if (align === 'end') {
+        alignmentOffset = 1;
+    }
+    // position === Position.Top
+    // we set the x any y position of the toolbar based on the nodes position
+    let pos = [
+        (nodeRect.x + nodeRect.width * alignmentOffset) * viewport.zoom + viewport.x,
+        nodeRect.y * viewport.zoom + viewport.y - offset,
+    ];
+    // and than shift it based on the alignment. The shift values are in %.
+    let shift = [-100 * alignmentOffset, -100];
+    switch (position) {
+        case Position.Right:
+            pos = [
+                (nodeRect.x + nodeRect.width) * viewport.zoom + viewport.x + offset,
+                (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y,
+            ];
+            shift = [0, -100 * alignmentOffset];
+            break;
+        case Position.Bottom:
+            pos[1] = (nodeRect.y + nodeRect.height) * viewport.zoom + viewport.y + offset;
+            shift[1] = 0;
+            break;
+        case Position.Left:
+            pos = [
+                nodeRect.x * viewport.zoom + viewport.x - offset,
+                (nodeRect.y + nodeRect.height * alignmentOffset) * viewport.zoom + viewport.y,
+            ];
+            shift = [-100, -100 * alignmentOffset];
+            break;
+    }
+    return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`;
+}
+
+function updateAbsolutePositions(nodes, nodeLookup, nodeOrigin = [0, 0], parentNodes) {
+    return nodes.map((node) => {
+        if (node.parentNode && !nodeLookup.has(node.parentNode)) {
+            throw new Error(`Parent node ${node.parentNode} not found`);
+        }
+        if (node.parentNode || parentNodes?.[node.id]) {
+            const parentNode = node.parentNode ? nodeLookup.get(node.parentNode) : null;
+            const { x, y, z } = calculateXYZPosition(node, nodes, nodeLookup, {
+                ...node.position,
+                z: node[internalsSymbol]?.z ?? 0,
+            }, parentNode?.origin || nodeOrigin);
+            const positionChanged = x !== node.computed?.positionAbsolute?.x || y !== node.computed?.positionAbsolute?.y;
+            node.computed.positionAbsolute = positionChanged
+                ? {
+                    x,
+                    y,
+                }
+                : node.computed?.positionAbsolute;
+            node[internalsSymbol].z = z;
+            if (parentNodes?.[node.id]) {
+                node[internalsSymbol].isParent = true;
+            }
+        }
+        return node;
+    });
+}
+function adoptUserProvidedNodes(nodes, nodeLookup, options = {
+    nodeOrigin: [0, 0],
+    elevateNodesOnSelect: true,
+    defaults: {},
+}) {
+    const tmpLookup = new Map(nodeLookup);
+    nodeLookup.clear();
+    const parentNodes = {};
+    const selectedNodeZ = options?.elevateNodesOnSelect ? 1000 : 0;
+    const nextNodes = nodes.map((n) => {
+        const currentStoreNode = tmpLookup.get(n.id);
+        if (n === currentStoreNode?.[internalsSymbol]?.userProvidedNode) {
+            nodeLookup.set(n.id, currentStoreNode);
+            return currentStoreNode;
+        }
+        const node = {
+            ...options.defaults,
+            ...n,
+            computed: {
+                positionAbsolute: n.position,
+                width: n.computed?.width || currentStoreNode?.computed?.width,
+                height: n.computed?.height || currentStoreNode?.computed?.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,
+                userProvidedNode: n,
+            },
+        });
+        nodeLookup.set(node.id, node);
+        return node;
+    });
+    const nodesWithPositions = updateAbsolutePositions(nextNodes, nodeLookup, options.nodeOrigin, parentNodes);
+    return nodesWithPositions;
+}
+function calculateXYZPosition(node, nodes, nodeLookup, result, nodeOrigin) {
+    if (!node.parentNode) {
+        return result;
+    }
+    const parentNode = nodeLookup.get(node.parentNode);
+    const parentNodePosition = getNodePositionWithOrigin(parentNode, parentNode?.origin || nodeOrigin);
+    return calculateXYZPosition(parentNode, nodes, nodeLookup, {
+        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, nodeLookup, 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.get(node.id);
+        if (update) {
+            const dimensions = getDimensions(update.nodeElement);
+            const doUpdate = !!(dimensions.width &&
+                dimensions.height &&
+                (node.computed?.width !== dimensions.width || node.computed?.height !== dimensions.height || update.forceUpdate));
+            if (doUpdate) {
+                onUpdate?.(node.id, dimensions);
+                const newNode = {
+                    ...node,
+                    computed: {
+                        ...node.computed,
+                        ...dimensions,
+                    },
+                    [internalsSymbol]: {
+                        ...node[internalsSymbol],
+                        handleBounds: {
+                            source: getHandleBounds('.source', update.nodeElement, zoom, node.origin || nodeOrigin),
+                            target: getHandleBounds('.target', update.nodeElement, zoom, node.origin || nodeOrigin),
+                        },
+                    },
+                };
+                nodeLookup.set(node.id, newNode);
+                return newNode;
+            }
+        }
+        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 updateConnectionLookup(connectionLookup, edgeLookup, edges) {
+    connectionLookup.clear();
+    edgeLookup.clear();
+    for (const edge of edges) {
+        const { source, target, sourceHandle = null, targetHandle = null } = edge;
+        const sourceKey = `${source}-source-${sourceHandle}`;
+        const targetKey = `${target}-target-${targetHandle}`;
+        const prevSource = connectionLookup.get(sourceKey) || new Map();
+        const prevTarget = connectionLookup.get(targetKey) || new Map();
+        const connection = { source, target, sourceHandle, targetHandle };
+        edgeLookup.set(edge.id, edge);
+        connectionLookup.set(sourceKey, prevSource.set(`${target}-${targetHandle}`, connection));
+        connectionLookup.set(targetKey, prevTarget.set(`${source}-${sourceHandle}`, connection));
+    }
+}
+
+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 },
+        distance: {
+            x: mousePos.x - (n.computed?.positionAbsolute?.x ?? 0),
+            y: mousePos.y - (n.computed?.positionAbsolute?.y ?? 0),
+        },
+        delta: {
+            x: 0,
+            y: 0,
+        },
+        extent: n.extent,
+        parentNode: n.parentNode,
+        origin: n.origin,
+        expandParent: n.expandParent,
+        computed: {
+            positionAbsolute: n.computed?.positionAbsolute || { x: 0, y: 0 },
+            width: n.computed?.width || 0,
+            height: n.computed?.height || 0,
+        },
+    }));
+}
+// returns two params:
+// 1. the dragged node (or the first of the list, if we are dragging a node selection)
+// 2. array of selected nodes (for multi selections)
+function getEventHandlerParams({ nodeId, dragItems, nodeLookup, }) {
+    const nodesFromDragItems = dragItems.map((n) => {
+        const node = nodeLookup.get(n.id);
+        return {
+            ...node,
+            position: n.position,
+            computed: {
+                ...n.computed,
+                positionAbsolute: n.computed.positionAbsolute,
+            },
+        };
+    });
+    return [nodeId ? nodesFromDragItems.find((n) => n.id === nodeId) : nodesFromDragItems[0], nodesFromDragItems];
+}
+
+function XYDrag({ domNode, onNodeMouseDown, 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;
+    let dragStarted = false;
+    const d3Selection = select(domNode);
+    // public functions
+    function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId }) {
+        function updateNodes({ x, y }) {
+            const { nodes, nodeLookup, nodeExtent, snapGrid, snapToGrid, nodeOrigin, onNodeDrag, onSelectionDrag, onError, updateNodePositions, } = getStoreItems();
+            lastPos = { x, y };
+            let hasChange = false;
+            let nodesBox = { x: 0, y: 0, x2: 0, y2: 0 };
+            if (dragItems.length > 1 && nodeExtent) {
+                const rect = getNodesBounds(dragItems, nodeOrigin);
+                nodesBox = rectToBox(rect);
+            }
+            dragItems = dragItems.map((n) => {
+                let nextPosition = { x: x - n.distance.x, y: y - n.distance.y };
+                if (snapToGrid) {
+                    nextPosition = snapPosition(nextPosition, snapGrid);
+                }
+                // if there is selection with multiple nodes and a node extent is set, we need to adjust the node extent for each node
+                // based on its position so that the node stays at it's position relative to the selection.
+                const adjustedNodeExtent = [
+                    [nodeExtent[0][0], nodeExtent[0][1]],
+                    [nodeExtent[1][0], nodeExtent[1][1]],
+                ];
+                if (dragItems.length > 1 && nodeExtent && !n.extent) {
+                    adjustedNodeExtent[0][0] = n.computed.positionAbsolute.x - nodesBox.x + nodeExtent[0][0];
+                    adjustedNodeExtent[1][0] =
+                        n.computed.positionAbsolute.x + (n.computed?.width ?? 0) - nodesBox.x2 + nodeExtent[1][0];
+                    adjustedNodeExtent[0][1] = n.computed.positionAbsolute.y - nodesBox.y + nodeExtent[0][1];
+                    adjustedNodeExtent[1][1] =
+                        n.computed.positionAbsolute.y + (n.computed?.height ?? 0) - nodesBox.y2 + nodeExtent[1][1];
+                }
+                const updatedPos = calcNextPosition(n, nextPosition, nodes, adjustedNodeExtent, nodeOrigin, onError);
+                // we want to make sure that we only fire a change event when there is a change
+                hasChange = hasChange || n.position.x !== updatedPos.position.x || n.position.y !== updatedPos.position.y;
+                n.position = updatedPos.position;
+                n.computed.positionAbsolute = updatedPos.positionAbsolute;
+                return n;
+            });
+            if (!hasChange) {
+                return;
+            }
+            updateNodePositions(dragItems, true, true);
+            const onNodeOrSelectionDrag = nodeId ? onNodeDrag : wrapSelectionDragFunc(onSelectionDrag);
+            if (dragEvent && (onDrag || onNodeOrSelectionDrag)) {
+                const [currentNode, currentNodes] = getEventHandlerParams({
+                    nodeId,
+                    dragItems,
+                    nodeLookup,
+                });
+                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);
+        }
+        function startDrag(event) {
+            const { nodes, nodeLookup, multiSelectionActive, nodesDraggable, transform, snapGrid, snapToGrid, selectNodesOnDrag, onNodeDragStart, onSelectionDragStart, unselectNodesAndEdges, } = getStoreItems();
+            dragStarted = true;
+            if ((!selectNodesOnDrag || !isSelectable) && !multiSelectionActive && nodeId) {
+                if (!nodeLookup.get(nodeId)?.selected) {
+                    // we need to reset selected nodes when selectNodesOnDrag=false
+                    unselectNodesAndEdges();
+                }
+            }
+            if (isSelectable && selectNodesOnDrag && nodeId) {
+                onNodeMouseDown?.(nodeId);
+            }
+            const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+            lastPos = pointerPos;
+            dragItems = getDragItems(nodes, nodesDraggable, pointerPos, nodeId);
+            const onNodeOrSelectionDragStart = nodeId ? onNodeDragStart : wrapSelectionDragFunc(onSelectionDragStart);
+            if (dragItems && (onDragStart || onNodeOrSelectionDragStart)) {
+                const [currentNode, currentNodes] = getEventHandlerParams({
+                    nodeId,
+                    dragItems,
+                    nodeLookup,
+                });
+                onDragStart?.(event.sourceEvent, dragItems, currentNode, currentNodes);
+                onNodeOrSelectionDragStart?.(event.sourceEvent, currentNode, currentNodes);
+            }
+        }
+        const d3DragInstance = drag()
+            .on('start', (event) => {
+            const { domNode, nodeDragThreshold, transform, snapGrid, snapToGrid } = getStoreItems();
+            if (nodeDragThreshold === 0) {
+                startDrag(event);
+            }
+            const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+            lastPos = pointerPos;
+            containerBounds = domNode?.getBoundingClientRect() || null;
+            mousePosition = getEventPosition(event.sourceEvent, containerBounds);
+        })
+            .on('drag', (event) => {
+            const { autoPanOnNodeDrag, transform, snapGrid, snapToGrid, nodeDragThreshold } = getStoreItems();
+            const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
+            if (!autoPanStarted && autoPanOnNodeDrag && dragStarted) {
+                autoPanStarted = true;
+                autoPan();
+            }
+            if (!dragStarted) {
+                const x = pointerPos.xSnapped - (lastPos.x ?? 0);
+                const y = pointerPos.ySnapped - (lastPos.y ?? 0);
+                const distance = Math.sqrt(x * x + y * y);
+                if (distance > nodeDragThreshold) {
+                    startDrag(event);
+                }
+            }
+            // skip events without movement
+            if ((lastPos.x !== pointerPos.xSnapped || lastPos.y !== pointerPos.ySnapped) && dragItems && dragStarted) {
+                dragEvent = event.sourceEvent;
+                mousePosition = getEventPosition(event.sourceEvent, containerBounds);
+                updateNodes(pointerPos);
+            }
+        })
+            .on('end', (event) => {
+            if (!dragStarted) {
+                return;
+            }
+            autoPanStarted = false;
+            dragStarted = false;
+            cancelAnimationFrame(autoPanId);
+            if (dragItems) {
+                const { nodeLookup, updateNodePositions, onNodeDragStop, onSelectionDragStop } = getStoreItems();
+                const onNodeOrSelectionDragStop = nodeId ? onNodeDragStop : wrapSelectionDragFunc(onSelectionDragStop);
+                updateNodePositions(dragItems, false, false);
+                if (onDragStop || onNodeOrSelectionDragStop) {
+                    const [currentNode, currentNodes] = getEventHandlerParams({
+                        nodeId,
+                        dragItems,
+                        nodeLookup,
+                    });
+                    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.computed?.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
+                y: (node.computed?.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 alwaysValid = () => true;
+let connectionStartHandle = null;
+function onPointerDown(event, { connectionMode, connectionRadius, handleId, nodeId, edgeUpdaterType, isTarget, domNode, nodes, lib, autoPanOnConnect, panBy, cancelConnection, onConnectStart, onConnect, onConnectEnd, isValidConnection = alwaysValid, onEdgeUpdateEnd, updateConnection, getTransform, }) {
+    // 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);
+    }
+    // Stays the same for all consecutive pointermove events
+    connectionStartHandle = {
+        nodeId,
+        handleId,
+        type: handleType,
+    };
+    updateConnection({
+        connectionPosition,
+        connectionStatus: null,
+        // connectionNodeId etc will be removed in the next major in favor of connectionStartHandle
+        connectionStartHandle,
+        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({
+            connectionStartHandle,
+            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;
+        connectionStartHandle = 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: null,
+        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');
+        if (!handleNodeId) {
+            return result;
+        }
+        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;
+            }
+            const moveScale = getViewScale() * Math.max(transform[2], Math.log(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;
+const wheelDelta = (event) => {
+    const factor = event.ctrlKey && isMacOs() ? 10 : 1;
+    return -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * factor;
+};
+
+function createPanOnScrollHandler({ zoomPanValues, noWheelClassName, d3Selection, d3Zoom, panOnScrollMode, panOnScrollSpeed, zoomOnPinch, onPanZoomStart, onPanZoom, onPanZoomEnd, }) {
+    return (event) => {
+        if (isWrappedWithClass(event, noWheelClassName)) {
+            return false;
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        const currentZoom = d3Selection.property('__zoom').k || 1;
+        const _isMacOs = isMacOs();
+        // macos sets ctrlKey=true for pinch gesture on a trackpad
+        if (event.ctrlKey && zoomOnPinch && _isMacOs) {
+            const point = pointer(event);
+            const pinchDelta = wheelDelta(event);
+            const zoom = currentZoom * Math.pow(2, pinchDelta);
+            // @ts-ignore
+            d3Zoom.scaleTo(d3Selection, zoom, point, event);
+            return;
+        }
+        // increase scroll speed in firefox
+        // firefox: deltaMode === 1; chrome: deltaMode === 0
+        const deltaNormalize = event.deltaMode === 1 ? 20 : 1;
+        let deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize;
+        let deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize;
+        // this enables vertical scrolling with shift + scroll on windows
+        if (!_isMacOs && event.shiftKey && panOnScrollMode !== PanOnScrollMode.Vertical) {
+            deltaX = event.deltaY * deltaNormalize;
+            deltaY = 0;
+        }
+        d3Zoom.translateBy(d3Selection, -(deltaX / currentZoom) * panOnScrollSpeed, -(deltaY / currentZoom) * panOnScrollSpeed, 
+        // @ts-ignore
+        { internal: true });
+        const nextViewport = transformToViewport(d3Selection.property('__zoom'));
+        clearTimeout(zoomPanValues.panScrollTimeout);
+        // for pan on scroll we need to handle the event calls on our own
+        // we can't use the start, zoom and end events from d3-zoom
+        // because start and move gets called on every scroll event and not once at the beginning
+        if (!zoomPanValues.isPanScrolling) {
+            zoomPanValues.isPanScrolling = true;
+            onPanZoomStart?.(event, nextViewport);
+        }
+        if (zoomPanValues.isPanScrolling) {
+            onPanZoom?.(event, nextViewport);
+            zoomPanValues.panScrollTimeout = setTimeout(() => {
+                onPanZoomEnd?.(event, nextViewport);
+                zoomPanValues.isPanScrolling = false;
+            }, 150);
+        }
+    };
+}
+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) => {
+        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') {
+            onDraggingChange(true);
+        }
+        if (onPanZoomStart) {
+            onPanZoomStart?.(event.sourceEvent, viewport);
+        }
+    };
+}
+function createPanZoomHandler({ zoomPanValues, panOnDrag, onPaneContextMenu, onTransformChange, onPanZoom, }) {
+    return (event) => {
+        zoomPanValues.usedRightMouseButton = !!(onPaneContextMenu && isRightClickPan(panOnDrag, zoomPanValues.mouseButton ?? 0));
+        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));
+        }
+    };
+}
+function createPanZoomEndHandler({ zoomPanValues, panOnDrag, panOnScroll, onDraggingChange, onPanZoomEnd, onPaneContextMenu, }) {
+    return (event) => {
+        if (event.sourceEvent?.internal) {
+            return;
+        }
+        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);
+        }
+    };
+}
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+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' || (panOnScroll && event.type === 'wheel' && !zoomActivationKeyPressed))) {
+            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,
+        panScrollTimeout: undefined,
+        isPanScrolling: false,
+    };
+    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');
+    d3ZoomInstance.wheelDelta(wheelDelta);
+    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({
+                zoomPanValues,
+                noWheelClassName,
+                d3Selection,
+                d3Zoom: d3ZoomInstance,
+                panOnScrollMode,
+                panOnScrollSpeed,
+                zoomOnPinch,
+                onPanZoomStart,
+                onPanZoom,
+                onPanZoomEnd,
+            })
+            : 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 syncViewport(viewport) {
+        if (d3Selection) {
+            const nextTransform = viewportToTransform(viewport);
+            const currentTransform = d3Selection.property('__zoom');
+            if (currentTransform.k !== viewport.zoom ||
+                currentTransform.x !== viewport.x ||
+                currentTransform.y !== viewport.y) {
+                // @ts-ignore
+                d3ZoomInstance?.transform(d3Selection, nextTransform, null, { sync: true });
+            }
+        }
+    }
+    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,
+        syncViewport,
+    };
+}
+
+export { ConnectionLineType, ConnectionMode, MarkerType, PanOnScrollMode, Position, SelectionMode, XYDrag, XYHandle, XYMinimap, XYPanZoom, addEdgeBase, adoptUserProvidedNodes, areConnectionMapsEqual, boxToRect, calcAutoPan, calcNextPosition, clamp, clampPosition, createMarkerIds, devWarn, elementSelectionKeys, errorMessages, fitView, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdgesBase, getDimensions, getEdgeCenter, getEdgePosition, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHostForElement, getIncomersBase, getMarkerId, getNodePositionWithOrigin, getNodeToolbarTransform, getNodesBounds, getNodesInside, getOutgoersBase, getOverlappingArea, getPointerPosition, getPositionWithOrigin, getSmoothStepPath, getStraightPath, getViewportForBounds, handleConnectionChange, infiniteExtent, internalsSymbol, isEdgeBase, isEdgeVisible, isInputDOMNode, isMacOs, isMouseEvent, isNodeBase, isNumeric, isRectObject, nodeToBox, nodeToRect, panBy, pointToRendererPoint, rectToBox, rendererPointToPoint, snapPosition, updateAbsolutePositions, updateConnectionLookup, updateEdgeBase, updateNodeDimensions };