react-cosmos-diagram 0.7.1 → 0.7.2

package/dist/esm/index.mjs

@@ -0,0 +1,1811 @@
+"use client"
+import { errorMessages, CosmosPanZoom, CosmosDrag, getRectOfNodes, getEventPosition, getNodesInside, Position, internalsSymbol as internalsSymbol$1, MarkerType, getMarkerId, isNumeric, getStraightPath, getStepPath, getBezierPath, CosmosPort, devWarn, isMouseEvent, clampPosition, getNodePositionWithOrigin, getDimensions, getPortBounds } from 'cosmos-diagram';
+export { MarkerType, Position, addEdge, boxToRect, clamp, getBezierEdgeCenter, getBezierPath, getStepPath, getStraightPath, isCoreEdge, isCoreNode, rectToBox, updateEdge } from 'cosmos-diagram';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext, useMemo, useState, useEffect, useRef, memo, useCallback, forwardRef } from 'react';
+import { useStore as useStore$1, createStore } from 'zustand';
+import cc from 'classcat';
+import { shallow } from 'zustand/shallow';
+import { zoomIdentity } from 'd3-zoom';
+
+const StoreContext = createContext(null);
+const Provider$1 = StoreContext.Provider;
+
+const zustandErrorMessage = errorMessages['001']();
+// 변경 사항이 발생할때 값을 구독
+function useStore(selector, equalityFn) {
+    const store = useContext(StoreContext);
+    if (store === null) {
+        throw new Error(zustandErrorMessage);
+    }
+    return useStore$1(store, selector, equalityFn);
+}
+// 필요에 따라 값을 계산
+const useStoreApi = () => {
+    const store = useContext(StoreContext);
+    if (store === null) {
+        throw new Error(zustandErrorMessage);
+    }
+    return useMemo(() => ({
+        getState: store.getState,
+        setState: store.setState,
+        subscribe: store.subscribe,
+        destroy: store.destroy,
+    }), [store]);
+};
+
+const useGlobalKeyHandler = (multiSelectionKeyCode = 'Meta') => {
+    const store = useStoreApi();
+    const [multiSelectionActivate, setMultiSelectionActivate] = useState(false);
+    const handleKeyDown = (e) => {
+        if (e.key === multiSelectionKeyCode) {
+            setMultiSelectionActivate(true);
+        }
+    };
+    const handleKeyUp = () => {
+        setMultiSelectionActivate(false);
+    };
+    useEffect(() => {
+        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('keyup', handleKeyUp);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('keyup', handleKeyUp);
+        };
+    }, []);
+    useEffect(() => {
+        store.setState({
+            multiSelectionActive: multiSelectionActivate,
+        });
+    }, [multiSelectionActivate]);
+};
+
+const Pane = ({ noPanClassName, panning, selection, minZoom, maxZoom, defaultViewport, translateExtent, children, onMove, onMoveStart, onMoveEnd, }) => {
+    const store = useStoreApi();
+    const Pane = useRef(null);
+    const cosmosPanZoom = useRef();
+    useEffect(() => {
+        if (!Pane.current)
+            return;
+        cosmosPanZoom.current = CosmosPanZoom({
+            domNode: Pane.current,
+            minZoom,
+            maxZoom,
+            translateExtent,
+            viewport: defaultViewport,
+            panning,
+            onTransformChange: (transform) => {
+                store.setState({ transform });
+            },
+            onPanningChange: (panning) => {
+                console.log(panning);
+            },
+            onPanZoomStart: (event, viewport) => {
+                onMoveStart?.(event, viewport);
+                console.log('start', viewport);
+            },
+            onPanZoom: (event, viewport) => {
+                onMove?.(event, viewport);
+            },
+            onPanZoomEnd: (event, viewport) => {
+                console.log('end', viewport);
+                onMoveEnd?.(event, viewport);
+            },
+        });
+        const { x, y, zoom } = cosmosPanZoom.current.getViewport();
+        store.setState({
+            // 지워야할 목록
+            // d3Zoom: d3ZoomInstance,
+            // d3Selection: selection,
+            // we need to pass transform because zoom handler is not registered when we set the initial transform
+            transform: [x, y, zoom],
+            domNode: Pane.current.closest('.react-diagram'),
+        });
+        return () => {
+            cosmosPanZoom.current?.destroy();
+        };
+    }, []);
+    useEffect(() => {
+        cosmosPanZoom.current?.update({
+            noPanClassName,
+            selection,
+        });
+    }, [noPanClassName, selection]);
+    return (jsx("div", { ref: Pane, className: cc([
+            'react-diagram__pane react-diagram__container',
+            { selection },
+        ]), children: children }));
+};
+
+const selector$7 = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
+function Viewport({ children }) {
+    const transform = useStore(selector$7);
+    return (jsx("div", { className: "react-diagram__viewport react-diagram__container", style: { transform }, children: children }));
+}
+
+function DragBox({ rect }) {
+    const { width, height, x, y } = rect;
+    if (!width || !height || !x || !y)
+        return null;
+    return (jsx("div", { className: "react-diagram__drag-box react-diagram__container", style: {
+            width,
+            height,
+            transform: `translate(${x}px, ${y}px)`,
+        } }));
+}
+
+function getMouseHandler$1(id, getState, handler) {
+    return handler === undefined
+        ? handler
+        : (event) => {
+            const node = getState().nodeInternals.get(id);
+            handler(event, { ...node });
+        };
+}
+function handleNodeClick({ id, store, isSelectable, unselect = false, nodeRef, }) {
+    if (!isSelectable)
+        return;
+    const { addSelectedNodes, unselectNodes, multiSelectionActive, nodeInternals, } = store.getState();
+    const node = nodeInternals.get(id);
+    store.setState({ selectionBoxActive: false });
+    if (!node.selected) {
+        addSelectedNodes([id]);
+    }
+    else if (unselect || (node.selected && multiSelectionActive)) {
+        unselectNodes({ nodes: [node] });
+        requestAnimationFrame(() => nodeRef?.current?.blur());
+    }
+}
+
+const useDrag = ({ disabled, nodeRef, nodeId, isSelectable, noDragClassName, }) => {
+    const store = useStoreApi();
+    const cosmosDrag = useRef();
+    const [dragging, setDragging] = useState(false);
+    useEffect(() => {
+        cosmosDrag.current = CosmosDrag({
+            getStore: () => store.getState(),
+            onNodeMouseDown: (id) => {
+                handleNodeClick({
+                    id,
+                    store,
+                    nodeRef,
+                    isSelectable,
+                });
+            },
+            onDrag: (e, _, node, nodes) => {
+                const { onNodeDrag } = store.getState();
+                onNodeDrag?.(e, node, nodes);
+            },
+            onDragStart: (e, _, node, nodes) => {
+                const { onNodeDragStart } = store.getState();
+                onNodeDragStart?.(e, node, nodes);
+                setDragging(true);
+            },
+            onDragEnd: (e, _, node, nodes) => {
+                const { onNodeDragEnd } = store.getState();
+                onNodeDragEnd?.(e, node, nodes);
+                setDragging(false);
+            },
+        });
+    }, []);
+    useEffect(() => {
+        if (disabled) {
+            cosmosDrag.current?.destroy();
+        }
+        else if (nodeRef.current) {
+            cosmosDrag.current?.update({
+                noDragClassName,
+                domNode: nodeRef.current,
+                isSelectable,
+                nodeId,
+            });
+            return () => {
+                cosmosDrag.current?.destroy();
+            };
+        }
+    }, [noDragClassName, disabled, isSelectable, nodeRef, nodeId]);
+    return dragging;
+};
+
+function SelectionBox({ rect, transform }) {
+    const nodeRef = useRef(null);
+    useDrag({ nodeRef });
+    const { width, height, x, y } = rect;
+    return (jsx("div", { className: cc([
+            'react-diagram__selection-box',
+            'react-diagram__container',
+        ]), style: {
+            transform,
+        }, children: jsx("div", { ref: nodeRef, className: "react-diagram__selection-box-rect", tabIndex: -1, style: {
+                width,
+                height,
+                top: y,
+                left: x,
+            } }) }));
+}
+var SelectionBox$1 = memo(SelectionBox);
+
+const handleParentExpand = (res, updateItem) => {
+    const parent = res.find((e) => e.id === updateItem.parentNode);
+    if (parent) {
+        const extendWidth = updateItem.position.x + updateItem.width - parent.width;
+        const extendHeight = updateItem.position.y + updateItem.height - parent.height;
+        if (extendWidth > 0 ||
+            extendHeight > 0 ||
+            updateItem.position.x < 0 ||
+            updateItem.position.y < 0) {
+            parent.style = { ...parent.style };
+            parent.style.width = parent.style.width ?? parent.width;
+            parent.style.height = parent.style.height ?? parent.height;
+            if (extendWidth > 0) {
+                parent.style.width += extendWidth;
+            }
+            if (extendHeight > 0) {
+                parent.style.height += extendHeight;
+            }
+            if (updateItem.position.x < 0) {
+                const xDiff = Math.abs(updateItem.position.x);
+                parent.position.x = parent.position.x - xDiff;
+                parent.style.width += xDiff;
+                updateItem.position.x = 0;
+            }
+            if (updateItem.position.y < 0) {
+                const yDiff = Math.abs(updateItem.position.y);
+                parent.position.y = parent.position.y - yDiff;
+                parent.style.height += yDiff;
+                updateItem.position.y = 0;
+            }
+            parent.width = parent.style.width;
+            parent.height = parent.style.height;
+        }
+    }
+};
+const applyChanges = (changes, elements) => {
+    // we need this hack to handle the setNodes and setEdges function of the useReactDiagram hook for controlled flows
+    if (changes.some((c) => c.type === 'reset')) {
+        return changes.filter((c) => c.type === 'reset').map((c) => c.item);
+    }
+    const initElements = changes
+        .filter((c) => c.type === 'add')
+        .map((c) => c.item);
+    return elements.reduce((res, item) => {
+        const currentChanges = changes.filter((c) => c.id === item.id);
+        if (currentChanges.length === 0) {
+            res.push(item);
+            return res;
+        }
+        const updateItem = { ...item };
+        for (const currentChange of currentChanges) {
+            if (currentChange) {
+                switch (currentChange.type) {
+                    case 'select': {
+                        updateItem.selected = currentChange.selected;
+                        break;
+                    }
+                    case 'position': {
+                        if (typeof currentChange.position !== 'undefined') {
+                            updateItem.position = currentChange.position;
+                        }
+                        if (typeof currentChange.positionAbsolute !== 'undefined') {
+                            updateItem.positionAbsolute =
+                                currentChange.positionAbsolute;
+                        }
+                        if (typeof currentChange.dragging !== 'undefined') {
+                            updateItem.dragging = currentChange.dragging;
+                        }
+                        if (updateItem.expandParent) {
+                            handleParentExpand(res, updateItem);
+                        }
+                        break;
+                    }
+                    case 'dimensions': {
+                        if (typeof currentChange.dimensions !== 'undefined') {
+                            updateItem.width = currentChange.dimensions.width;
+                            updateItem.height = currentChange.dimensions.height;
+                        }
+                        if (typeof currentChange.updateStyle !== 'undefined') {
+                            updateItem.style = {
+                                ...(updateItem.style || {}),
+                                ...currentChange.dimensions,
+                            };
+                        }
+                        if (typeof currentChange.resizing === 'boolean') {
+                            updateItem.resizing = currentChange.resizing;
+                        }
+                        if (updateItem.expandParent) {
+                            handleParentExpand(res, updateItem);
+                        }
+                        break;
+                    }
+                    case 'intersect': {
+                        updateItem.intersected = currentChange.intersected;
+                        break;
+                    }
+                    case 'remove': {
+                        return res;
+                    }
+                }
+            }
+        }
+        res.push(updateItem);
+        return res;
+    }, initElements);
+};
+function applyNodeChanges(changes, nodes) {
+    return applyChanges(changes, nodes);
+}
+function applyEdgeChanges(changes, edges) {
+    return applyChanges(changes, edges);
+}
+const createSelectionChange = (id, selected) => ({
+    id,
+    type: 'select',
+    selected,
+});
+function getSelectionChanges(items, selectedIds) {
+    return items.reduce((res, item) => {
+        const willBeSelected = selectedIds.includes(item.id);
+        if (!item.selected && willBeSelected) {
+            item.selected = true;
+            res.push(createSelectionChange(item.id, true));
+        }
+        else if (item.selected && !willBeSelected) {
+            item.selected = false;
+            res.push(createSelectionChange(item.id, false));
+        }
+        return res;
+    }, []);
+}
+
+const selector$6 = (s) => {
+    const { elementsSelectable, transform, selectionBoxActive, getNodes } = s;
+    const selectedNodes = getNodes().filter((n) => n.selected);
+    return {
+        elementsSelectable,
+        selectionBoxRect: getRectOfNodes(selectedNodes, s.nodeOrigin),
+        transformString: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
+        selectionBoxActive,
+    };
+};
+function DragSelection({ dragSelectionKeyPressed, children, }) {
+    const store = useStoreApi();
+    const dragSelection = useRef(null);
+    const prevSelectedNodesCount = useRef(0);
+    const containerBounds = useRef();
+    const { elementsSelectable, selectionBoxRect, transformString, selectionBoxActive, } = useStore(selector$6, shallow);
+    const [dragBoxStartPosition, setDragBoxStartPosition] = useState({
+        x: 0,
+        y: 0,
+    });
+    const [dragBoxRect, setDragBoxRect] = useState({
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0,
+    });
+    const [dragBoxActive, setDragBoxActive] = useState(false);
+    const resetDragBox = () => {
+        store.setState({
+            selectionBoxActive: prevSelectedNodesCount.current > 0,
+        });
+        setDragBoxStartPosition({
+            x: 0,
+            y: 0,
+        });
+        setDragBoxRect({
+            width: 0,
+            height: 0,
+            x: 0,
+            y: 0,
+        });
+        setDragBoxActive(false);
+    };
+    const onClick = (e) => {
+        if (e.target === dragSelection.current) {
+            store.getState().resetSelectedElements();
+            store.setState({
+                selectionBoxActive: false,
+            });
+            setDragBoxActive(false);
+        }
+    };
+    const onMouseDown = (event) => {
+        const { resetSelectedElements, domNode } = store.getState();
+        containerBounds.current = domNode?.getBoundingClientRect();
+        if (!elementsSelectable ||
+            event.button !== 0 ||
+            event.target !== dragSelection.current ||
+            !containerBounds.current ||
+            !dragSelectionKeyPressed) {
+            return;
+        }
+        const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
+        resetSelectedElements();
+        setDragBoxRect({
+            width: 0,
+            height: 0,
+            x,
+            y,
+        });
+        setDragBoxStartPosition({
+            x,
+            y,
+        });
+    };
+    const onMouseMove = (event) => {
+        const { nodeInternals, transform, nodeOrigin, getNodes, onNodesChange } = store.getState();
+        const hasDragBoxStartPosition = dragBoxStartPosition.x > 0 && dragBoxStartPosition.y > 0;
+        if (
+        // !hasDragBoxPosition ||
+        // !dragSelectionKeyPressed ||
+        !hasDragBoxStartPosition ||
+            !containerBounds.current) {
+            return;
+        }
+        store.setState({
+            selectionBoxActive: false,
+        });
+        setDragBoxActive(true);
+        const mousePos = getEventPosition(event.nativeEvent, containerBounds.current);
+        const startX = dragBoxStartPosition.x ?? 0;
+        const startY = dragBoxStartPosition.y ?? 0;
+        const rect = {
+            x: mousePos.x < startX ? mousePos.x : startX,
+            y: mousePos.y < startY ? mousePos.y : startY,
+            width: Math.abs(mousePos.x - startX),
+            height: Math.abs(mousePos.y - startY),
+        };
+        const nodes = getNodes();
+        const selectedNodes = getNodesInside(nodeInternals, rect, transform, false, true, nodeOrigin);
+        const selectedNodeIds = selectedNodes.map((n) => n.id);
+        if (prevSelectedNodesCount.current !== selectedNodeIds.length) {
+            prevSelectedNodesCount.current = selectedNodeIds.length;
+            const changes = getSelectionChanges(nodes, selectedNodeIds);
+            if (changes.length) {
+                onNodesChange?.(changes);
+            }
+        }
+        setDragBoxRect(rect);
+    };
+    const onMouseUp = (event) => {
+        if (event.button !== 0) {
+            return;
+        }
+        resetDragBox();
+    };
+    const onMouseLeave = () => {
+        resetDragBox();
+    };
+    const isPossibleDragSelection = elementsSelectable;
+    return (jsxs("div", { ref: dragSelection, className: cc([
+            'react-diagram__container react-diagram__drag-selection',
+        ]), onClick: onClick, onMouseDown: isPossibleDragSelection ? onMouseDown : undefined, onMouseMove: isPossibleDragSelection ? onMouseMove : undefined, onMouseUp: elementsSelectable ? onMouseUp : undefined, onMouseLeave: isPossibleDragSelection ? onMouseLeave : undefined, children: [children, dragBoxActive && jsx(DragBox, { rect: dragBoxRect }), selectionBoxActive && (jsx(SelectionBox$1, { rect: selectionBoxRect, transform: transformString }))] }));
+}
+
+const useDragSelectionKeyPress = (dragSelectionKeyCode) => {
+    const [dragSelectionKeyPressed, setDragSelectionKeyPressed] = useState(false);
+    // useKeyPress
+    const handleKeyDown = (e) => {
+        if (e.key === dragSelectionKeyCode) {
+            setDragSelectionKeyPressed(true);
+        }
+    };
+    const handleKeyUp = () => {
+        setDragSelectionKeyPressed(false);
+    };
+    useEffect(() => {
+        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('keyup', handleKeyUp);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('keyup', handleKeyUp);
+        };
+    }, []);
+    return dragSelectionKeyPressed;
+};
+
+const selector$5 = (s) => {
+    const { minZoom, maxZoom, translateExtent } = s;
+    return {
+        minZoom,
+        maxZoom,
+        translateExtent,
+    };
+};
+function DiagramRenderer({ children, multiSelectionKeyCode, dragSelectionKeyCode, noPanClassName, panning, defaultViewport, onMove, onMoveStart, onMoveEnd, }) {
+    const { minZoom, maxZoom, translateExtent } = useStore(selector$5);
+    useGlobalKeyHandler(multiSelectionKeyCode);
+    const dragSelectionKeyPressed = useDragSelectionKeyPress(dragSelectionKeyCode);
+    // useKeyPress
+    const isSelecting = dragSelectionKeyPressed;
+    const isPanning = panning && !isSelecting;
+    return (jsx(Fragment, { children: jsx(Pane, { noPanClassName: noPanClassName, panning: isPanning, selection: isSelecting, minZoom: minZoom, maxZoom: maxZoom, translateExtent: translateExtent, defaultViewport: defaultViewport, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, children: jsx(DragSelection, { dragSelectionKeyPressed: dragSelectionKeyPressed, children: jsx(Viewport, { children: children }) }) }) }));
+}
+DiagramRenderer.displayName = 'DiagramRenderer';
+var DiagramRenderer$1 = memo(DiagramRenderer);
+
+function useVisibleNodes() {
+    const nodes = useStore(useCallback((s) => s.getNodes(), []));
+    return nodes;
+}
+
+const selector$4 = (s) => ({
+    nodesDraggable: s.nodesDraggable,
+    elementsSelectable: s.elementsSelectable,
+    updateNodeDimensions: s.updateNodeDimensions,
+    onError: s.onError,
+});
+function NodeRenderer({ nodeTypes, onNodeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, ...props }) {
+    const { nodesDraggable, elementsSelectable, updateNodeDimensions, onError } = useStore(selector$4, shallow);
+    const nodes = useVisibleNodes();
+    const resizeObserverRef = useRef();
+    const resizeObserver = useMemo(() => {
+        if (typeof ResizeObserver === 'undefined') {
+            return null;
+        }
+        const observer = new ResizeObserver((entries) => {
+            const updates = entries.map((entry) => ({
+                id: entry.target.getAttribute('data-id'),
+                nodeElement: entry.target,
+                forceUpdate: true,
+            }));
+            updateNodeDimensions(updates);
+        });
+        resizeObserverRef.current = observer;
+        return observer;
+    }, []);
+    useEffect(() => () => {
+        resizeObserverRef?.current?.disconnect();
+    }, []);
+    return (jsx("div", { className: "react-diagram__nodes react-diagram__container", children: nodes.map((node) => {
+            const { data, type, 
+            // elProps
+            id, className, style, width, height, ariaLabel, positionAbsolute, hidden, selected, selectable, draggable, intersected, } = node;
+            let nodeType = type || 'default';
+            if (!nodeTypes[nodeType]) {
+                onError?.('010', nodeType);
+                nodeType = 'default';
+            }
+            const NodeComponent = (nodeTypes[nodeType] ||
+                nodeTypes.default);
+            const isDraggable = !!(draggable ||
+                (nodesDraggable && typeof draggable === 'undefined'));
+            const isSelectable = !!(selectable ||
+                (elementsSelectable && typeof selectable === 'undefined'));
+            const elProps = {
+                id,
+                className,
+                style,
+                width: nodeType === 'default' && width ? 120 : undefined,
+                height: nodeType === 'default' && height ? 60 : undefined,
+                ariaLabel,
+            };
+            const events = {
+                onClick: onNodeClick,
+                onMouseEnter: onNodeMouseEnter,
+                onMouseMove: onNodeMouseMove,
+                onMouseLeave: onNodeMouseLeave,
+                onContextMenu: onNodeContextMenu,
+                onDoubleClick: onNodeDoubleClick,
+            };
+            const position = {
+                positionX: positionAbsolute?.x || 0,
+                positionY: positionAbsolute?.y || 0,
+                sourcePosition: Position.Bottom,
+                targetPosition: Position.Top,
+            };
+            const booleanProps = {
+                selected: !!selected,
+                intersected: !!intersected,
+                isSelectable,
+                isDraggable,
+                hidden,
+                isParent: !!node[internalsSymbol$1]?.isParent,
+                initialized: !!node.width && !!node.height,
+            };
+            return (jsx(NodeComponent, { ...props, ...elProps, ...position, ...events, ...booleanProps, zIndex: node[internalsSymbol$1]?.z ?? 0, type: nodeType, data: data, resizeObserver: resizeObserver }, id));
+        }) }));
+}
+NodeRenderer.displayName = 'NodeRenderer';
+var NodeRenderer$1 = memo(NodeRenderer);
+
+const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }) => (jsx("polyline", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: strokeWidth, fill: color, points: "-5,-4 0,0 -5,4 -5,-4" }));
+const MarkerSymbols = {
+    [MarkerType.Arrow]: ArrowSymbol,
+};
+function useMarkerSymbol(type) {
+    const store = useStoreApi();
+    const symbol = useMemo(() => {
+        const symbolExists = Object.prototype.hasOwnProperty.call(MarkerSymbols, type);
+        if (!symbolExists) {
+            store.getState().onError?.('022', type);
+            return null;
+        }
+        return MarkerSymbols[type];
+    }, [type]);
+    return symbol;
+}
+
+const Marker = ({ id, type, color, width = 12.5, height = 12.5, markerUnits = 'strokeWidth', strokeWidth, orient = 'auto-start-reverse', }) => {
+    const Symbol = useMarkerSymbol(type);
+    if (!Symbol) {
+        return null;
+    }
+    return (jsx("marker", { className: "react-diagram__arrowhead", id: id, markerWidth: `${width}`, markerHeight: `${height}`, viewBox: "-10 -10 20 20", markerUnits: markerUnits, orient: orient, refX: "0", refY: "0", children: jsx(Symbol, { color: color, strokeWidth: strokeWidth }) }));
+};
+const markerSelector = ({ defaultColor, rfId }) => (s) => {
+    const ids = [];
+    return s.edges
+        .reduce((markers, edge) => {
+        [edge.markerStart, edge.markerEnd].forEach((marker) => {
+            if (marker && typeof marker === 'object') {
+                const markerId = getMarkerId(marker, rfId);
+                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));
+};
+const MarkerComponent = ({ defaultColor, rfId }) => {
+    const markers = useStore(useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]), (a, b) => !(a.length !== b.length ||
+        a.some((marker, i) => marker.id !== b[i].id)));
+    return (jsx("defs", { children: markers.map((marker) => (jsx(Marker, { id: marker.id, type: marker.type, color: marker.color, width: marker.width, height: marker.height, markerUnits: marker.markerUnits, strokeWidth: marker.strokeWidth, orient: marker.orient }, marker.id))) }));
+};
+MarkerComponent.displayName = 'MarkerComponent';
+var MarkerComponent$1 = memo(MarkerComponent);
+
+function EdgeLabel({ x, y, label, labelStyle = {}, labelShowBg = true, labelBgStyle = {}, labelBgPadding = [2, 4], labelBgBorderRadius = 2, children, className, ...rest }) {
+    const edgeRef = useRef(null);
+    const [edgeLabelBox, setEdgeLabelBox] = useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    });
+    const edgeTextClasses = cc(['react-diagram__edge-text-wrapper', className]);
+    useEffect(() => {
+        if (edgeRef.current) {
+            const textBbox = edgeRef.current.getBBox();
+            setEdgeLabelBox({
+                x: textBbox.x,
+                y: textBbox.y,
+                width: textBbox.width,
+                height: textBbox.height,
+            });
+        }
+    }, [label]);
+    if (typeof label === 'undefined' || !label) {
+        return null;
+    }
+    return (jsxs("g", { transform: `translate(${x - edgeLabelBox.width / 2} ${y - edgeLabelBox.height / 2})`, className: edgeTextClasses, visibility: edgeLabelBox.width ? 'visible' : 'hidden', ...rest, children: [labelShowBg && (jsx("rect", { width: edgeLabelBox.width + 2 * labelBgPadding[0], x: -labelBgPadding[0], y: -labelBgPadding[1], height: edgeLabelBox.height + 2 * labelBgPadding[1], className: "react-diagram__edge-text-bg", style: labelBgStyle, rx: labelBgBorderRadius, ry: labelBgBorderRadius })), jsx("text", { className: "react-diagram__edge-text", y: edgeLabelBox.height / 2, dy: "0.3em", ref: edgeRef, style: labelStyle, children: label }), children] }));
+}
+var EdgeLabel$1 = memo(EdgeLabel);
+
+function BaseEdge({ path, labelX, labelY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, }) {
+    return (jsxs(Fragment, { children: [jsx("path", { style: style, d: path, fill: "none", className: "react-diagram__edge-path", markerEnd: markerEnd, markerStart: markerStart }), label && isNumeric(labelX) && isNumeric(labelY) ? (jsx(EdgeLabel$1, { x: labelX, y: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius })) : null] }));
+}
+BaseEdge.displayName = 'BaseEdge';
+
+const StraightEdge = memo(({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, }) => {
+    const [path, labelX, labelY] = getStraightPath({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+    });
+    return (jsx(BaseEdge, { path: path, labelX: labelX, labelY: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius, style: style, markerEnd: markerEnd, markerStart: markerStart }));
+});
+StraightEdge.displayName = 'StraightEdge';
+
+const StepEdge = memo(({ sourceX, sourceY, targetX, targetY, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, sourcePosition = Position.Bottom, targetPosition = Position.Top, markerEnd, markerStart, pathOptions, }) => {
+    const [path, labelX, labelY] = getStepPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        borderRadius: pathOptions?.borderRadius,
+        offset: pathOptions?.offset,
+    });
+    return (jsx(BaseEdge, { path: path, labelX: labelX, labelY: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius, style: style, markerEnd: markerEnd, markerStart: markerStart }));
+});
+StepEdge.displayName = 'StepEdge';
+
+const BezierEdge = memo(({ sourceX, sourceY, targetX, targetY, sourcePosition = Position.Bottom, targetPosition = Position.Top, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, style, markerEnd, markerStart, pathOptions, }) => {
+    const [path, labelX, labelY] = getBezierPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        curvature: pathOptions?.curvature,
+    });
+    return (jsx(BaseEdge, { path: path, labelX: labelX, labelY: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius, style: style, markerEnd: markerEnd, markerStart: markerStart }));
+});
+BezierEdge.displayName = 'BezierEdge';
+
+const ARIA_NODE_DESC_KEY = 'react-diagram__node-desc';
+const ARIA_EDGE_DESC_KEY = 'react-diagram__edge-desc';
+
+const portPositionX = (x, shift, position) => {
+    if (position === Position.Left)
+        return x - shift;
+    if (position === Position.Right)
+        return x + shift;
+    return x;
+};
+const portPositionY = (y, shift, position) => {
+    if (position === Position.Top)
+        return y - shift;
+    if (position === Position.Bottom)
+        return y + shift;
+    return y;
+};
+const EdgeUpdaterClassName = 'react-diagram__edge-updater';
+function Anchor({ position, centerX, centerY, radius = 10, onMouseDown, 
+// onMouseEnter,
+// onMouseOut,
+type, }) {
+    return (jsx("circle", { className: cc([
+            EdgeUpdaterClassName,
+            `${EdgeUpdaterClassName}-${type}`,
+        ]), cx: portPositionX(centerX, radius, position), cy: portPositionY(centerY, radius, position), r: radius, stroke: "transparent", fill: "transparent", onMouseDown: onMouseDown }));
+}
+
+function getMouseHandler(id, getState, handler) {
+    return handler === undefined
+        ? handler
+        : (event) => {
+            const edge = getState().edges.find((e) => e.id === id);
+            if (edge) {
+                handler(event, { ...edge });
+            }
+        };
+}
+const wrapEdge = (EdgeComponent) => {
+    const EdgeWrapper = (props) => {
+        const { id, className, style, type, data, rfId, ariaLabel, 
+        // sourceAndTargetIds
+        source, sourcePort, target, targetPort, 
+        // marker
+        markerEnd, markerStart, 
+        // labelProps
+        label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, 
+        // AnchorProps
+        edgeUpdaterRadius, 
+        // position
+        sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, elementsSelectable, hidden, isFocusable, onClick, onDoubleClick, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, } = props;
+        const position = {
+            sourceX,
+            sourceY,
+            targetX,
+            targetY,
+            sourcePosition,
+            targetPosition,
+        };
+        const sourceAndTargetIds = {
+            source,
+            sourcePort,
+            target,
+            targetPort,
+        };
+        const isConnecting = className === 'react-diagram__connection';
+        if (isConnecting) {
+            document
+                .querySelector('path')
+                ?.classList.add('react-diagram__connection-path');
+            return (jsx(EdgeComponent, { ...sourceAndTargetIds, ...position, id: id, data: data, style: style, selected: selected }));
+        }
+        const store = useStoreApi();
+        const edgeRef = useRef(null);
+        const [updating, setUpdating] = useState(false);
+        const markerStartUrl = useMemo(() => `url(#${getMarkerId(markerStart, rfId)})`, [markerStart, rfId]);
+        const markerEndUrl = useMemo(() => `url(#${getMarkerId(markerEnd, rfId)})`, [markerEnd, rfId]);
+        if (hidden) {
+            return null;
+        }
+        const handleEdgeUpdater = (fromPortType) => (event) => {
+            if (event.button !== 0) {
+                return;
+            }
+            const { edges, domNode, autoPanOnConnect, connectionRadius, transform, getNodes, cancelConnection, updateConnection, onConnectStart, onConnectEnd, panBy, } = store.getState();
+            const nodeId = props[fromPortType];
+            const edge = edges.find((e) => e.id === id);
+            const portId = (fromPortType === 'source' ? sourcePort : targetPort) || null;
+            setUpdating(true);
+            onEdgeUpdateStart?.(event, edge, fromPortType);
+            const onConnectEdge = (connection) => onEdgeUpdate?.(edge, connection);
+            const handleEdgeUpdateEnd = (evt) => {
+                setUpdating(false);
+                onEdgeUpdateEnd?.(evt, edge, fromPortType);
+            };
+            CosmosPort.onPointerDown({
+                isAnchor: true,
+                event: event.nativeEvent,
+                nodeId,
+                portId,
+                portType: fromPortType,
+                domNode,
+                autoPanOnConnect,
+                connectionRadius,
+                nodes: getNodes(),
+                onEdgeUpdateEnd: handleEdgeUpdateEnd,
+                cancelConnection,
+                updateConnection,
+                onConnect: onConnectEdge,
+                onConnectStart,
+                onConnectEnd,
+                panBy,
+                getTransform: () => transform,
+            });
+        };
+        const onEdgeClick = (event) => {
+            const { edges } = store.getState();
+            if (onClick) {
+                const edge = edges.find((e) => e.id === id);
+                onClick(event, edge);
+            }
+        };
+        const onEdgeDoubleClick = getMouseHandler(id, store.getState, onDoubleClick);
+        const onEdgeContextMenu = getMouseHandler(id, store.getState, onContextMenu);
+        const onEdgeMouseEnter = getMouseHandler(id, store.getState, onMouseEnter);
+        const onEdgeMouseMove = getMouseHandler(id, store.getState, onMouseMove);
+        const onEdgeMouseLeave = getMouseHandler(id, store.getState, onMouseLeave);
+        const inactive = !elementsSelectable;
+        const wrapperClassName = cc([
+            'react-diagram__edge',
+            `react-diagram__edge-${type}`,
+            className,
+            { selected, inactive },
+        ]);
+        const marker = { markerStart: markerStartUrl, markerEnd: markerEndUrl };
+        const labelProps = {
+            label,
+            labelStyle,
+            labelShowBg,
+            labelBgStyle,
+            labelBgPadding,
+            labelBgBorderRadius,
+        };
+        const events = {
+            onClick: onEdgeClick,
+            onDoubleClick: onEdgeDoubleClick,
+            onContextMenu: onEdgeContextMenu,
+            onMouseEnter: onEdgeMouseEnter,
+            onMouseMove: onEdgeMouseMove,
+            onMouseLeave: onEdgeMouseLeave,
+        };
+        return (jsx("g", { ...events, ref: edgeRef, className: wrapperClassName, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : undefined, "aria-label": ariaLabel === null
+                ? undefined
+                : ariaLabel
+                    ? ariaLabel
+                    : `Edge from ${source} to ${target}`, "aria-describedby": isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined, children: !updating && (jsxs(Fragment, { children: [jsx(EdgeComponent, { ...sourceAndTargetIds, ...marker, ...labelProps, ...position, id: id, data: data, style: style, selected: selected }), jsx(Anchor, { position: sourcePosition, centerX: sourceX, centerY: sourceY, radius: edgeUpdaterRadius, onMouseDown: handleEdgeUpdater('target'), 
+                        // onMouseEnter={console.log}
+                        // onMouseOut={console.log}
+                        type: "source" }), jsx(Anchor, { position: targetPosition, centerX: targetX, centerY: targetY, radius: edgeUpdaterRadius, onMouseDown: handleEdgeUpdater('source'), 
+                        // onMouseEnter={console.log}
+                        // onMouseOut={console.log}
+                        type: "target" })] })) }));
+    };
+    EdgeWrapper.displayName = 'EdgeWrapper';
+    return memo(EdgeWrapper);
+};
+
+const createEdgeTypes = (edgeTypes) => {
+    const defaultTypes = {
+        default: wrapEdge((edgeTypes.straight || StraightEdge)),
+        step: wrapEdge((edgeTypes.step || StepEdge)),
+        bezier: wrapEdge((edgeTypes.bezier || BezierEdge)),
+    };
+    const wrappedTypes = {};
+    const customTypes = Object.keys(edgeTypes)
+        .filter((k) => !Object.keys(defaultTypes).includes(k))
+        .reduce((res, key) => {
+        res[key] = wrapEdge((edgeTypes[key] || StepEdge));
+        return res;
+    }, wrappedTypes);
+    return {
+        ...defaultTypes,
+        ...customTypes,
+    };
+};
+function getPortPosition(position, nodeRect, port = null) {
+    const x = (port?.x || 0) + nodeRect.x;
+    const y = (port?.y || 0) + nodeRect.y;
+    const width = port?.width || nodeRect.width;
+    const height = port?.height || nodeRect.height;
+    switch (position) {
+        case Position.Top:
+            return {
+                x: x + width / 2,
+                y,
+            };
+        case Position.Right:
+            return {
+                x: x + width,
+                y: y + height / 2,
+            };
+        case Position.Bottom:
+            return {
+                x: x + width / 2,
+                y: y + height,
+            };
+        case Position.Left:
+            return {
+                x,
+                y: y + height / 2,
+            };
+    }
+}
+function getPort(bounds, portId) {
+    if (!bounds) {
+        return null;
+    }
+    if (bounds.length === 1 || !portId) {
+        return bounds[0];
+    }
+    else if (portId) {
+        return bounds.find((d) => d.id === portId) || null;
+    }
+    return null;
+}
+const getEdgePositions = (sourceNodeRect, sourcePort, sourcePosition, targetNodeRect, targetPort, targetPosition) => {
+    const sourcePortPos = getPortPosition(sourcePosition, sourceNodeRect, sourcePort);
+    const targetPortPos = getPortPosition(targetPosition, targetNodeRect, targetPort);
+    return {
+        sourceX: sourcePortPos.x,
+        sourceY: sourcePortPos.y,
+        targetX: targetPortPos.x,
+        targetY: targetPortPos.y,
+    };
+};
+function getNodeData(node) {
+    const portBounds = node?.[internalsSymbol$1]?.portBounds || null;
+    const isValid = portBounds &&
+        node?.width &&
+        node?.height &&
+        typeof node?.positionAbsolute?.x !== 'undefined' &&
+        typeof node?.positionAbsolute?.y !== 'undefined';
+    return [
+        {
+            x: node?.positionAbsolute?.x || 0,
+            y: node?.positionAbsolute?.y || 0,
+            width: node?.width || 0,
+            height: node?.height || 0,
+        },
+        portBounds,
+        !!isValid,
+    ];
+}
+
+const selector$3 = (s) => ({
+    edges: s.edges,
+    width: s.width,
+    height: s.height,
+    nodeInternals: s.nodeInternals,
+    onError: s.onError,
+});
+function EdgeRenderer({ rfId, edgeTypes, noPanClassName, edgeUpdaterRadius, onEdgeClick, onEdgeDoubleClick, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, }) {
+    const { edges, width, height, nodeInternals } = useStore(selector$3, shallow);
+    return (jsxs("svg", { width: width || '100vw', height: height || '100vh', className: "react-diagram__edges react-diagram__container", children: [jsx(MarkerComponent$1, { defaultColor: "#000000", rfId: rfId }), jsx("g", { children: edges.map((edge) => {
+                    const { data, type, 
+                    // elProps
+                    id, className, style, ariaLabel, 
+                    // sourceAndTargetIds
+                    source, sourcePort, target, targetPort, 
+                    // marker
+                    markerEnd, markerStart, 
+                    // labelProps
+                    label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, } = edge;
+                    const [sourceNodeRect, sourcePortBounds, sourceIsValid] = getNodeData(nodeInternals.get(source));
+                    const [targetNodeRect, targetPortBounds, targetIsValid] = getNodeData(nodeInternals.get(target));
+                    if (!sourceIsValid || !targetIsValid) {
+                        return null;
+                    }
+                    const edgeType = type || 'straight';
+                    const EdgeComponent = edgeTypes[edgeType] || edgeTypes.default;
+                    const targetNodePorts = targetPortBounds.target;
+                    const sourcePortInfo = getPort(sourcePortBounds.source, sourcePort);
+                    const targetPortInfo = getPort(targetNodePorts, targetPort);
+                    const sourcePosition = sourcePortInfo?.position || Position.Bottom;
+                    const targetPosition = targetPortInfo?.position || Position.Top;
+                    const isFocusable = !!edge.focusable;
+                    if (!sourcePortInfo || !targetPortInfo) {
+                        return null;
+                    }
+                    const elProps = {
+                        id,
+                        className: cc([className, noPanClassName]),
+                        style,
+                        ariaLabel,
+                    };
+                    const sourceAndTargetIds = {
+                        source,
+                        sourcePort,
+                        target,
+                        targetPort,
+                    };
+                    const marker = {
+                        markerEnd,
+                        markerStart,
+                    };
+                    const labelProps = {
+                        label,
+                        labelStyle,
+                        labelShowBg,
+                        labelBgStyle,
+                        labelBgPadding,
+                        labelBgBorderRadius,
+                    };
+                    const edgePositions = getEdgePositions(sourceNodeRect, sourcePortInfo, sourcePosition, targetNodeRect, targetPortInfo, targetPosition);
+                    const position = {
+                        ...edgePositions,
+                        sourcePosition,
+                        targetPosition,
+                    };
+                    const events = {
+                        onClick: onEdgeClick,
+                        onDoubleClick: onEdgeDoubleClick,
+                        onContextMenu: onEdgeContextMenu,
+                        onMouseEnter: onEdgeMouseEnter,
+                        onMouseMove: onEdgeMouseMove,
+                        onMouseLeave: onEdgeMouseLeave,
+                        onEdgeUpdate,
+                        onEdgeUpdateStart,
+                        onEdgeUpdateEnd,
+                    };
+                    return (jsx(EdgeComponent, { ...elProps, ...sourceAndTargetIds, ...marker, ...labelProps, ...position, ...events, rfId: rfId, type: edgeType, data: data, isFocusable: isFocusable, edgeUpdaterRadius: edgeUpdaterRadius }, id));
+                }) })] }));
+}
+EdgeRenderer.displayName = 'EdgeRenderer';
+var EdgeRenderer$1 = memo(EdgeRenderer);
+
+const oppositePosition = {
+    [Position.Left]: Position.Right,
+    [Position.Right]: Position.Left,
+    [Position.Top]: Position.Bottom,
+    [Position.Bottom]: Position.Top,
+};
+function ConnectionPath({ nodeId, portType, edge, Component, EdgeWrapper, }) {
+    const { fromNode, toX, toY, startPort } = useStore(useCallback((s) => ({
+        fromNode: s.nodeInternals.get(nodeId),
+        startPort: s.connectionStartPort,
+        toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
+        toY: (s.connectionPosition.y - s.transform[1]) / s.transform[2],
+    }), [nodeId]), shallow);
+    const fromPortBounds = fromNode?.[internalsSymbol$1]?.portBounds;
+    const portBounds = fromPortBounds?.[portType];
+    if (!fromNode || !portBounds) {
+        return null;
+    }
+    const fromPort = portBounds.find((bound) => bound.id === startPort?.portId) ||
+        portBounds[0];
+    const fromPortX = fromPort
+        ? fromPort.x + fromPort.width / 2
+        : (fromNode.width ?? 0) / 2;
+    const fromPortY = fromPort
+        ? fromPort.y + fromPort.height / 2
+        : fromNode.height ?? 0;
+    const fromX = (fromNode.positionAbsolute?.x ?? 0) + fromPortX;
+    const fromY = (fromNode.positionAbsolute?.y ?? 0) + fromPortY;
+    const fromPosition = fromPort?.position;
+    const toPosition = fromPosition ? oppositePosition[fromPosition] : null;
+    if (!fromPosition || !toPosition) {
+        return null;
+    }
+    if (Component) {
+        return (jsx(Component, { fromNode: fromNode, fromPort: fromPort, fromX: fromX, fromY: fromY, toX: toX, toY: toY, fromPosition: fromPosition, toPosition: toPosition }));
+    }
+    if (!edge) {
+        const dAttr = `M${fromX},${fromY} ${toX},${toY}`;
+        return (jsx("path", { d: dAttr, fill: "none", className: "react-diagram__connection-path" }));
+    }
+    return (jsx(EdgeWrapper, { id: edge.id, className: "react-diagram__connection", type: edge.type || 'default', source: edge.source || nodeId, target: edge.target, isFocusable: false, sourceX: fromX, sourceY: fromY, targetX: toX, targetY: toY, sourcePosition: fromPosition, targetPosition: toPosition }));
+}
+ConnectionPath.displayName = 'ConnectionPath';
+
+const selector$2 = (s) => ({
+    edges: s.edges,
+    startPort: s.connectionStartPort,
+});
+function ConnectionLineRenderer({ containerStyle, edgeTypes, component, }) {
+    const { startPort, edges } = useStore(selector$2, shallow);
+    if (!startPort)
+        return null;
+    const { nodeId, portType } = startPort;
+    const isValid = !!(nodeId && portType);
+    if (!isValid) {
+        return null;
+    }
+    const selectedEdge = edges.find((edge) => edge[portType] === nodeId);
+    const EdgeWrapper = selectedEdge?.type
+        ? edgeTypes[selectedEdge.type]
+        : edgeTypes.default;
+    return (jsx("svg", { style: containerStyle, className: "react-diagram__container react-diagram__connection-line", children: jsx("g", { className: "react-diagram__connection", children: jsx(ConnectionPath, { nodeId: nodeId, portType: portType, edge: selectedEdge, Component: component, EdgeWrapper: EdgeWrapper }) }) }));
+}
+
+function DiagramView({ rfId, 
+// DiagramRenderer props
+noPanClassName, panning, defaultViewport, multiSelectionKeyCode, dragSelectionKeyCode, onMove, onMoveStart, onMoveEnd, 
+// NodeRenderer props
+onlyRenderVisibleElements, disableKeyboardA11y, noDragClassName, nodeOrigin, nodeExtent, nodeTypes, onNodeClick, onNodeDoubleClick, onNodeContextMenu, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, 
+// EdgeRenderer props
+edgeTypes, edgeUpdaterRadius, onEdgeClick, onEdgeDoubleClick, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, 
+// ConnectionLineWrapper
+ConnectionLineContainerStyle, ConnectionLineComponent, }) {
+    return (jsxs(DiagramRenderer$1, { multiSelectionKeyCode: multiSelectionKeyCode, dragSelectionKeyCode: dragSelectionKeyCode, noPanClassName: noPanClassName, panning: panning, defaultViewport: defaultViewport, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, children: [jsx(NodeRenderer$1, { rfId: rfId, nodeTypes: nodeTypes, onlyRenderVisibleElements: onlyRenderVisibleElements, disableKeyboardA11y: disableKeyboardA11y, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, noDragClassName: noDragClassName, noPanClassName: noPanClassName, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onNodeContextMenu: onNodeContextMenu, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave }), jsx(EdgeRenderer$1, { rfId: rfId, edgeTypes: edgeTypes, noPanClassName: noPanClassName, edgeUpdaterRadius: edgeUpdaterRadius, onEdgeClick: onEdgeClick, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeContextMenu: onEdgeContextMenu, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, onEdgeUpdate: onEdgeUpdate, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd }), jsx(ConnectionLineRenderer, { edgeTypes: edgeTypes, containerStyle: ConnectionLineContainerStyle, component: ConnectionLineComponent })] }));
+}
+DiagramView.displayName = 'DiagramView';
+var DiagramView$1 = memo(DiagramView);
+
+const internalsSymbol = Symbol.for('internals');
+const onErrorWrapper = (onError) => (id, value = '') => onError?.(id, errorMessages[id](value));
+
+const selector$1 = (s) => {
+    const { setNodes, setEdges, setNodeExtent, setTranslateExtent, setMinZoom, setMaxZoom, } = s;
+    return {
+        setNodes,
+        setEdges,
+        setNodeExtent,
+        setTranslateExtent,
+        setMinZoom,
+        setMaxZoom,
+    };
+};
+function useStoreUpdater(value, setStoreState) {
+    useEffect(() => {
+        if (typeof value !== 'undefined') {
+            setStoreState(value);
+        }
+    }, [value]);
+}
+// updates with values in store that don't have a dedicated setter function
+function useDirectStoreUpdater(key, value, setState) {
+    useEffect(() => {
+        if (typeof value !== 'undefined') {
+            setState({ [key]: value });
+        }
+    }, [value]);
+}
+const StoreUpdater = ({ nodes, onNodesChange, onNodeDrag, onNodeDragStart, onNodeDragEnd, edges, onEdgesChange, nodeOrigin, smoothStep, centerStep, gridStep, elevateNodesOnSelect, nodesDraggable, autoPanOnNodeDrag, autoPanOnConnect, connectionRadius, onConnect, onConnectStart, onConnectEnd, onError, nodeExtent, translateExtent, minZoom, maxZoom, }) => {
+    const { setNodes, setEdges, setNodeExtent, setTranslateExtent, setMinZoom, setMaxZoom, } = useStore(selector$1, shallow);
+    const store = useStoreApi();
+    useStoreUpdater(nodes, setNodes);
+    useStoreUpdater(edges, setEdges);
+    useStoreUpdater(nodeExtent, setNodeExtent);
+    useStoreUpdater(nodeExtent, setNodeExtent);
+    useStoreUpdater(translateExtent, setTranslateExtent);
+    useStoreUpdater(minZoom, setMinZoom);
+    useStoreUpdater(maxZoom, setMaxZoom);
+    useDirectStoreUpdater('nodeOrigin', nodeOrigin, store.setState);
+    useDirectStoreUpdater('smoothStep', smoothStep, store.setState);
+    useDirectStoreUpdater('centerStep', centerStep, store.setState);
+    useDirectStoreUpdater('gridStep', gridStep, store.setState);
+    useDirectStoreUpdater('elevateNodesOnSelect', elevateNodesOnSelect, store.setState);
+    useDirectStoreUpdater('nodesDraggable', nodesDraggable, store.setState);
+    useDirectStoreUpdater('autoPanOnNodeDrag', autoPanOnNodeDrag, store.setState);
+    useDirectStoreUpdater('autoPanOnConnect', autoPanOnConnect, store.setState);
+    useDirectStoreUpdater('connectionRadius', connectionRadius, store.setState);
+    useDirectStoreUpdater('onNodesChange', onNodesChange, store.setState);
+    useDirectStoreUpdater('onNodeDrag', onNodeDrag, store.setState);
+    useDirectStoreUpdater('onNodeDragStart', onNodeDragStart, store.setState);
+    useDirectStoreUpdater('onNodeDragEnd', onNodeDragEnd, store.setState);
+    useDirectStoreUpdater('onEdgesChange', onEdgesChange, store.setState);
+    useDirectStoreUpdater('onConnect', onConnect, store.setState);
+    useDirectStoreUpdater('onConnectStart', onConnectStart, store.setState);
+    useDirectStoreUpdater('onConnectEnd', onConnectEnd, store.setState);
+    useDirectStoreUpdater('onError', onErrorWrapper(onError), store.setState);
+    return null;
+};
+
+function useNodeOrEdgeTypes(nodeOrEdgeTypes, createTypes) {
+    const typesKeysRef = useRef(null);
+    const typesParsed = useMemo(() => {
+        if (process.env.NODE_ENV === 'development') {
+            const typeKeys = Object.keys(nodeOrEdgeTypes);
+            if (shallow(typesKeysRef.current, typeKeys)) {
+                devWarn('002');
+            }
+            typesKeysRef.current = typeKeys;
+        }
+        return createTypes(nodeOrEdgeTypes);
+    }, [nodeOrEdgeTypes]);
+    return typesParsed;
+}
+
+const NodeIdContext = createContext(null);
+const Provider = NodeIdContext.Provider;
+NodeIdContext.Consumer;
+const useNodeId = () => {
+    const nodeId = useContext(NodeIdContext);
+    return nodeId;
+};
+
+function Port({ id, type, position }) {
+    const portId = id || null;
+    const store = useStoreApi();
+    const nodeId = useNodeId();
+    if (!nodeId)
+        return null;
+    const handleOnConnect = (connection) => {
+        const { defaultEdgeOptions, onConnect } = store.getState();
+        const edgeParams = {
+            ...defaultEdgeOptions,
+            ...connection,
+        };
+        onConnect?.(edgeParams);
+    };
+    const onPointerDown = (event) => {
+        const isMouseTriggered = isMouseEvent(event.nativeEvent);
+        const { button } = event;
+        if ((isMouseTriggered && button === 0) || !isMouseTriggered) {
+            const { domNode, autoPanOnConnect, connectionRadius, transform, getNodes, cancelConnection, updateConnection, onConnectStart, onConnectEnd, panBy, } = store.getState();
+            CosmosPort.onPointerDown({
+                event: event.nativeEvent,
+                nodeId,
+                portId,
+                portType: type,
+                domNode,
+                autoPanOnConnect,
+                connectionRadius,
+                nodes: getNodes(),
+                cancelConnection,
+                updateConnection,
+                onConnect: handleOnConnect,
+                onConnectStart,
+                onConnectEnd,
+                panBy,
+                getTransform: () => transform,
+            });
+        }
+    };
+    return (jsx("div", { "data-nodeid": nodeId, "data-id": `${nodeId}-${portId}-${type}`, "data-portid": portId, "data-port-position": position, className: `react-diagram__port react-diagram__port-${position} ${type} nodrag`, onMouseDown: onPointerDown, onTouchStart: onPointerDown }));
+}
+Port.displayName = 'Port';
+var Port$1 = memo(Port);
+
+function Nodes({ data }) {
+    return (jsxs(Fragment, { children: [jsx(Port$1, { type: "target", position: Position.Top }), data.label, jsx(Port$1, { type: "source", position: Position.Bottom })] }));
+}
+
+const wrapNode = (NodeComponent) => {
+    function NodeWrapper({ id, type, data, positionX, positionY, sourcePosition, targetPosition, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, style, width, height, className, selected, isSelectable, isDraggable, intersected, nodeOrigin, nodeExtent, hidden, resizeObserver, dragHandle, zIndex, isParent, initialized, disableKeyboardA11y, ariaLabel, rfId, noDragClassName, noPanClassName, }) {
+        const store = useStoreApi();
+        const node = store.getState().nodeInternals.get(id);
+        const nodeRef = useRef(null);
+        const prevSourcePosition = useRef(sourcePosition);
+        const prevTargetPosition = useRef(targetPosition);
+        const prevType = useRef(type);
+        const hasPointerEvents = isDraggable || onClick || onMouseEnter || onMouseMove || onMouseLeave;
+        const onSelectNodeHandler = (event) => {
+            if (!isDraggable) {
+                handleNodeClick({
+                    id,
+                    store,
+                    nodeRef,
+                    isSelectable,
+                });
+            }
+            if (onClick) {
+                onClick(event, { ...node });
+            }
+        };
+        useEffect(() => {
+            if (nodeRef.current && !hidden) {
+                const currNode = nodeRef.current;
+                resizeObserver?.observe(currNode);
+                return () => resizeObserver?.unobserve(currNode);
+            }
+        }, [hidden]);
+        useEffect(() => {
+            // when the user programmatically changes the source or handle position, we re-initialize the node
+            const typeChanged = prevType.current !== type;
+            const sourcePosChanged = prevSourcePosition.current !== sourcePosition;
+            const targetPosChanged = prevTargetPosition.current !== targetPosition;
+            if (nodeRef.current &&
+                (typeChanged || sourcePosChanged || targetPosChanged)) {
+                if (typeChanged) {
+                    prevType.current = type;
+                }
+                if (sourcePosChanged) {
+                    prevSourcePosition.current = sourcePosition;
+                }
+                if (targetPosChanged) {
+                    prevTargetPosition.current = targetPosition;
+                }
+                store
+                    .getState()
+                    .updateNodeDimensions([
+                    { id, nodeElement: nodeRef.current, forceUpdate: true },
+                ]);
+            }
+        }, [id, type, sourcePosition, targetPosition]);
+        const clampedPosition = nodeExtent
+            ? clampPosition(node.positionAbsolute, nodeExtent)
+            : node.positionAbsolute;
+        const positionWithOrigin = getNodePositionWithOrigin({ ...node, ...clampedPosition }, nodeOrigin);
+        const dragging = useDrag({
+            nodeRef,
+            nodeId: id,
+            disabled: hidden || !isDraggable,
+            isSelectable,
+            noDragClassName,
+        });
+        if (hidden) {
+            return null;
+        }
+        const wrapperClassName = cc([
+            'react-diagram__node',
+            `react-diagram__node-${type}`,
+            {
+                [noPanClassName]: isDraggable,
+            },
+            className,
+            {
+                selected,
+                intersected,
+                parent: isParent,
+                dragging,
+            },
+        ]);
+        const wrapperStyle = {
+            zIndex,
+            transform: `translate(${positionWithOrigin.x}px,${positionWithOrigin.y}px)`,
+            pointerEvents: hasPointerEvents ? 'all' : 'none',
+            visibility: initialized ? 'visible' : 'hidden',
+            width,
+            height,
+            ...style,
+        };
+        const events = {
+            onClick: onSelectNodeHandler,
+            onDoubleClick: getMouseHandler$1(id, store.getState, onDoubleClick),
+            onContextMenu: getMouseHandler$1(id, store.getState, onContextMenu),
+            onMouseEnter: getMouseHandler$1(id, store.getState, onMouseEnter),
+            onMouseMove: getMouseHandler$1(id, store.getState, onMouseMove),
+            onMouseLeave: getMouseHandler$1(id, store.getState, onMouseLeave),
+        };
+        const position = {
+            positionX,
+            positionY,
+            sourcePosition,
+            targetPosition,
+        };
+        return (jsx("div", { ...events, ref: nodeRef, className: wrapperClassName, style: wrapperStyle, "data-id": id, tabIndex: 0, role: "button", "aria-describedby": disableKeyboardA11y ? undefined : `${ARIA_NODE_DESC_KEY}-${rfId}`, "aria-label": ariaLabel, children: jsx(Provider, { value: id, children: jsx(NodeComponent, { ...position, id: id, zIndex: zIndex, type: type, data: data, dragHandle: dragHandle, selected: selected, intersected: intersected }) }) }));
+    }
+    NodeWrapper.displayName = 'NodeWrapper';
+    return memo(NodeWrapper);
+};
+
+const createNodeTypes = (nodeTypes) => {
+    const defaultTypes = {
+        default: wrapNode(nodeTypes.default || Nodes),
+    };
+    const wrappedTypes = {};
+    const customTypes = Object.keys(nodeTypes)
+        .filter((k) => !Object.keys(defaultTypes).includes(k))
+        .reduce((res, key) => {
+        res[key] = wrapNode(nodeTypes[key] || Nodes);
+        return res;
+    }, wrappedTypes);
+    return {
+        ...defaultTypes,
+        ...customTypes,
+    };
+};
+
+function calculateXYZPosition(node, nodeInternals, result, nodeOrigin) {
+    if (!node.parentNode) {
+        return result;
+    }
+    const parentNode = nodeInternals.get(node.parentNode);
+    const parentNodePosition = getNodePositionWithOrigin(parentNode, nodeOrigin);
+    return calculateXYZPosition(parentNode, nodeInternals, {
+        x: (result.x ?? 0) + parentNodePosition.x,
+        y: (result.y ?? 0) + parentNodePosition.y,
+        z: (parentNode[internalsSymbol$1]?.z ?? 0) > (result.z ?? 0)
+            ? parentNode[internalsSymbol$1]?.z ?? 0
+            : result.z ?? 0,
+    }, nodeOrigin);
+}
+function updateAbsoluteNodePositions(nodeInternals, nodeOrigin, parentNodes) {
+    nodeInternals.forEach((node) => {
+        if (node.parentNode && !nodeInternals.has(node.parentNode)) {
+            throw new Error(`Parent node ${node.parentNode} not found`);
+        }
+        if (node.parentNode || parentNodes?.[node.id]) {
+            const { x, y, z } = calculateXYZPosition(node, nodeInternals, {
+                ...node.position,
+                z: node[internalsSymbol$1]?.z ?? 0,
+            }, nodeOrigin);
+            node.positionAbsolute = {
+                x,
+                y,
+            };
+            node[internalsSymbol$1].z = z;
+            if (parentNodes?.[node.id]) {
+                node[internalsSymbol$1].isParent = true;
+            }
+        }
+    });
+}
+function createNodeInternals(nodes, nodeInternals, nodeOrigin, elevateNodesOnSelect) {
+    const nextNodeInternals = new Map();
+    const parentNodes = {};
+    const selectedNodeZ = elevateNodesOnSelect ? 1000 : 0;
+    nodes.forEach((node) => {
+        const z = (isNumeric(node.zIndex) ? node.zIndex : 0) +
+            (node.selected ? selectedNodeZ : 0);
+        const currInternals = nodeInternals.get(node.id);
+        const internals = {
+            width: currInternals?.width,
+            height: currInternals?.height,
+            ...node,
+            positionAbsolute: {
+                x: node.position.x,
+                y: node.position.y,
+            },
+        };
+        if (node.parentNode) {
+            internals.parentNode = node.parentNode;
+            parentNodes[node.parentNode] = true;
+        }
+        Object.defineProperty(internals, internalsSymbol$1, {
+            enumerable: false,
+            value: {
+                portBounds: currInternals?.[internalsSymbol$1]?.portBounds,
+                z,
+            },
+        });
+        nextNodeInternals.set(node.id, internals);
+    });
+    updateAbsoluteNodePositions(nextNodeInternals, nodeOrigin, parentNodes);
+    return nextNodeInternals;
+}
+const isIntersected = (targetNode, nodeInternals) => {
+    const { id, width, height, positionAbsolute } = targetNode;
+    if (!width || !height)
+        return false;
+    let intersected = false;
+    for (const [key, sourceNode] of nodeInternals) {
+        if (id === key)
+            continue;
+        const { positionAbsolute: sPositionAbsolute, width: sWidth, height: sHeight, } = sourceNode;
+        if (!sWidth || !sHeight)
+            continue;
+        if (!sPositionAbsolute || !positionAbsolute)
+            continue;
+        // if (sourceNode.parentNode === targetNode.id) continue;
+        // if (targetNode.parentNode === sourceNode.id) continue;
+        const leftIn = sPositionAbsolute.x + sWidth >= positionAbsolute.x, rightIn = positionAbsolute.x + width >= sPositionAbsolute.x, topIn = sPositionAbsolute.y + sHeight >= positionAbsolute.y, bottomIn = positionAbsolute.y + height >= sPositionAbsolute.y;
+        const isIn = leftIn && rightIn && topIn && bottomIn;
+        if (isIn) {
+            intersected = true;
+            break;
+        }
+    }
+    return intersected;
+};
+
+const infiniteExtent = [
+    [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
+    [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY],
+];
+const initialState = {
+    rfId: '1',
+    width: 0,
+    height: 0,
+    transform: [0, 0, 1],
+    nodeInternals: new Map(),
+    edges: [],
+    elementsSelectable: true,
+    onNodesChange: null,
+    domNode: null,
+    nodeOrigin: [0, 0],
+    smoothStep: false,
+    centerStep: false,
+    gridStep: undefined,
+    elevateNodesOnSelect: true,
+    nodesDraggable: true,
+    multiSelectionActive: false,
+    selectionBoxActive: false,
+    d3Zoom: null,
+    d3Selection: null,
+    minZoom: 0.5,
+    maxZoom: 2,
+    connectionPosition: { x: 0, y: 0 },
+    connectionStartPort: null,
+    connectionEndPort: null,
+    autoPanOnNodeDrag: true,
+    autoPanOnConnect: true,
+    nodeExtent: infiniteExtent,
+    translateExtent: infiniteExtent,
+    connectionRadius: 20,
+    onError: devWarn,
+};
+
+const createRCDStore = () => createStore((set, get) => ({
+    ...initialState,
+    setNodes: (nodes) => {
+        const { nodeInternals, nodeOrigin, elevateNodesOnSelect } = get();
+        set({
+            nodeInternals: createNodeInternals(nodes, nodeInternals, nodeOrigin, elevateNodesOnSelect),
+        });
+    },
+    getNodes: () => Array.from(get().nodeInternals.values()),
+    setEdges: (edges) => {
+        const { defaultEdgeOptions = {} } = get();
+        set({ edges: edges.map((e) => ({ ...defaultEdgeOptions, ...e })) });
+    },
+    updateNodeDimensions: (updates) => {
+        const { onNodesChange, updateNodesIntersection, nodeInternals, domNode, nodeOrigin, } = get();
+        const viewportNode = domNode?.querySelector('.react-diagram__viewport');
+        if (!viewportNode) {
+            return;
+        }
+        const style = window.getComputedStyle(viewportNode);
+        const { m22: zoom } = new window.DOMMatrixReadOnly(style.transform);
+        const changes = updates.reduce((res, update) => {
+            const node = nodeInternals.get(update.id);
+            if (node) {
+                const dimensions = getDimensions(update.nodeElement);
+                const doUpdate = !!(dimensions.width &&
+                    dimensions.height &&
+                    (node.width !== dimensions.width ||
+                        node.height !== dimensions.height ||
+                        update.forceUpdate));
+                if (doUpdate) {
+                    nodeInternals.set(node.id, {
+                        ...node,
+                        [internalsSymbol$1]: {
+                            ...node[internalsSymbol$1],
+                            portBounds: {
+                                id: node[internalsSymbol$1]?.portBounds?.id || null,
+                                source: getPortBounds('.source', update.nodeElement, zoom, nodeOrigin),
+                                target: getPortBounds('.target', update.nodeElement, zoom, nodeOrigin),
+                            },
+                        },
+                        ...dimensions,
+                    });
+                    res.push({
+                        id: node.id,
+                        type: 'dimensions',
+                        dimensions,
+                    });
+                }
+            }
+            return res;
+        }, []);
+        updateNodesIntersection();
+        updateAbsoluteNodePositions(nodeInternals, nodeOrigin);
+        set({
+            nodeInternals: new Map(nodeInternals),
+        });
+        if (changes?.length > 0) {
+            onNodesChange?.(changes);
+        }
+    },
+    updateNodesPosition: (nodes, dragging = false, updateFunc) => {
+        const { triggerNodeChanges } = get();
+        const changes = nodes.map((node) => {
+            const change = {
+                id: node.id,
+                type: 'position',
+                dragging,
+            };
+            if (updateFunc) {
+                updateFunc(node);
+                return {
+                    ...change,
+                    position: node.position,
+                    positionAbsolute: node.positionAbsolute,
+                };
+            }
+            return change;
+        });
+        triggerNodeChanges(changes);
+    },
+    triggerNodeChanges: (changes) => {
+        const { onNodesChange } = get();
+        if (changes?.length) {
+            onNodesChange?.(changes);
+        }
+    },
+    updateNodesIntersection: () => {
+        const { nodeInternals, triggerNodeChanges } = get();
+        const nodes = Array.from(nodeInternals.values());
+        const unIntersectNodes = () => {
+            return nodes
+                .filter((node) => node.intersected && !isIntersected(node, nodeInternals))
+                .map((node) => ({
+                id: node.id,
+                type: 'intersect',
+                intersected: false,
+            }));
+        };
+        const addIntersectNodes = () => {
+            return nodes
+                .filter((node) => isIntersected(node, nodeInternals))
+                .map((node) => {
+                return {
+                    id: node.id,
+                    type: 'intersect',
+                    intersected: true,
+                };
+            });
+        };
+        const intersectedNodes = addIntersectNodes();
+        const unIntersectedNodes = unIntersectNodes();
+        triggerNodeChanges([...intersectedNodes, ...unIntersectedNodes]);
+    },
+    addSelectedNodes: (selectedNodeIds) => {
+        const { multiSelectionActive, getNodes, triggerNodeChanges } = get();
+        let changedNodes;
+        if (multiSelectionActive) {
+            changedNodes = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true));
+        }
+        else {
+            changedNodes = getSelectionChanges(getNodes(), selectedNodeIds);
+        }
+        triggerNodeChanges(changedNodes);
+    },
+    unselectNodes: ({ nodes } = {}) => {
+        const { getNodes, triggerNodeChanges } = get();
+        const nodesToUnselect = nodes ? nodes : getNodes();
+        const changedNodes = nodesToUnselect.map((n) => {
+            n.selected = false;
+            return createSelectionChange(n.id, false);
+        });
+        triggerNodeChanges(changedNodes);
+    },
+    resetSelectedElements: () => {
+        const { getNodes, triggerNodeChanges } = get();
+        const nodes = getNodes();
+        const nodesToUnselect = nodes
+            .filter((e) => e.selected)
+            .map((n) => createSelectionChange(n.id, false));
+        triggerNodeChanges(nodesToUnselect);
+    },
+    cancelConnection: () => set({
+        connectionStartPort: null,
+        connectionEndPort: null,
+    }),
+    updateConnection: (params) => {
+        const { connectionPosition } = get();
+        const currentConnection = {
+            ...params,
+            connectionPosition: params.connectionPosition ?? connectionPosition,
+        };
+        set(currentConnection);
+    },
+    panBy: (delta) => {
+        const { transform, width, height, d3Zoom, d3Selection } = get();
+        if (!d3Zoom || !d3Selection || (!delta.x && !delta.y)) {
+            return;
+        }
+        const nextTransform = zoomIdentity
+            .translate(transform[0] + delta.x, transform[1] + delta.y)
+            .scale(transform[2]);
+        const extent = [
+            [0, 0],
+            [width, height],
+        ];
+        const constrainedTransform = d3Zoom?.constrain()(nextTransform, extent, infiniteExtent);
+        d3Zoom.transform(d3Selection, constrainedTransform);
+    },
+    setNodeExtent: (nodeExtent) => {
+        const { nodeInternals } = get();
+        nodeInternals.forEach((node) => {
+            node.positionAbsolute = clampPosition(node.position, nodeExtent);
+        });
+        set({
+            nodeExtent,
+            nodeInternals: new Map(nodeInternals),
+        });
+    },
+    setTranslateExtent: (translateExtent) => {
+        get().d3Zoom?.translateExtent(translateExtent);
+        set({ translateExtent });
+    },
+    setMinZoom: (minZoom) => {
+        const { d3Zoom, maxZoom } = get();
+        d3Zoom?.scaleExtent([minZoom, maxZoom]);
+        set({ minZoom });
+    },
+    setMaxZoom: (maxZoom) => {
+        const { d3Zoom, minZoom } = get();
+        d3Zoom?.scaleExtent([minZoom, maxZoom]);
+        set({ maxZoom });
+    },
+}));
+
+const ReactDiagramProvider = ({ children }) => {
+    const storeRef = useRef(null);
+    if (!storeRef.current) {
+        storeRef.current = createRCDStore();
+    }
+    return jsx(Provider$1, { value: storeRef.current, children: children });
+};
+ReactDiagramProvider.displayName = 'ReactDiagramProvider';
+
+function Wrapper({ children }) {
+    const isWrapped = useContext(StoreContext);
+    if (isWrapped) {
+        return jsx(Fragment, { children: children });
+    }
+    return jsx(ReactDiagramProvider, { children: children });
+}
+Wrapper.displayName = 'ReactDiagramWrapper';
+
+const initViewport = { x: 0, y: 0, zoom: 1 };
+const initNodeOrigin = [0, 0];
+const defaultNodeTypes = {
+    default: Nodes,
+};
+const defaultEdgeTypes = {
+    step: StepEdge,
+};
+const ReactDiagram = forwardRef(({ children, id, 
+// DiagramView props
+panning = true, minZoom, maxZoom, translateExtent, nodeExtent = infiniteExtent, defaultViewport = initViewport, multiSelectionKeyCode = 'Meta', dragSelectionKeyCode = 'Shift', onlyRenderVisibleElements = false, disableKeyboardA11y = false, noDragClassName = 'nodrag', noPanClassName = 'nopan', nodeOrigin = initNodeOrigin, nodeTypes = defaultNodeTypes, onNodeClick, onNodeDoubleClick, onNodeContextMenu, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, edgeTypes = defaultEdgeTypes, edgeUpdaterRadius, onEdgeClick, onEdgeDoubleClick, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, onMove, onMoveStart, onMoveEnd, ConnectionLineContainerStyle, ConnectionLineComponent, 
+// StoreUpdater props
+nodes, edges, nodesDraggable, elevateNodesOnSelect, autoPanOnNodeDrag, autoPanOnConnect, connectionRadius, smoothStep, centerStep, gridStep, onNodesChange, onNodeDrag, onNodeDragStart, onNodeDragEnd, onEdgesChange, onConnect, onConnectStart, onConnectEnd, onError, ...rest }, ref) => {
+    const rfId = id || '1';
+    const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes);
+    const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes);
+    return (jsx("div", { ...rest, ref: ref, className: "react-diagram", children: jsxs(Wrapper, { children: [jsx(DiagramView$1, { rfId: rfId, panning: panning, defaultViewport: defaultViewport, multiSelectionKeyCode: multiSelectionKeyCode, dragSelectionKeyCode: dragSelectionKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, disableKeyboardA11y: disableKeyboardA11y, noDragClassName: noDragClassName, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, nodeTypes: nodeTypesWrapped, edgeTypes: edgeTypesWrapped, edgeUpdaterRadius: edgeUpdaterRadius, ConnectionLineContainerStyle: ConnectionLineContainerStyle, ConnectionLineComponent: ConnectionLineComponent, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onNodeContextMenu: onNodeContextMenu, onNodeMouseEnter: onNodeMouseEnter, onNodeMouseMove: onNodeMouseMove, onNodeMouseLeave: onNodeMouseLeave, onEdgeClick: onEdgeClick, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeContextMenu: onEdgeContextMenu, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, onEdgeUpdate: onEdgeUpdate, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd }), jsx(StoreUpdater, { rfId: rfId, nodes: nodes, edges: edges, nodesDraggable: nodesDraggable, elevateNodesOnSelect: elevateNodesOnSelect, autoPanOnNodeDrag: autoPanOnNodeDrag, autoPanOnConnect: autoPanOnConnect, connectionRadius: connectionRadius, nodeOrigin: nodeOrigin, nodeExtent: nodeExtent, translateExtent: translateExtent, minZoom: minZoom, maxZoom: maxZoom, smoothStep: smoothStep, centerStep: centerStep, gridStep: gridStep, onNodesChange: onNodesChange, onNodeDrag: onNodeDrag, onNodeDragStart: onNodeDragStart, onNodeDragEnd: onNodeDragEnd, onEdgesChange: onEdgesChange, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onError: onError }), children] }) }));
+});
+ReactDiagram.displayName = 'ReactDiagram';
+
+function createUseItemsState(applyChanges) {
+    return (initialItems) => {
+        const [items, setItems] = useState(initialItems);
+        const onItemsChange = useCallback((changes) => setItems((items) => applyChanges(changes, items)), []);
+        return [items, setItems, onItemsChange];
+    };
+}
+const useNodesState = createUseItemsState(applyNodeChanges);
+const useEdgesState = createUseItemsState(applyEdgeChanges);
+
+function LinePath({ color, scaledGap, lineWidth }) {
+    const m1 = `M${scaledGap[0] / 2} 0`;
+    const v = `V${scaledGap[1]}`;
+    const m2 = `M0 ${scaledGap[1] / 2}`;
+    const h = `H${scaledGap[0]}`;
+    const path = `${m1} ${v} ${m2} ${h}`;
+    return jsx("path", { stroke: color, strokeWidth: lineWidth, d: path });
+}
+
+const selector = (s) => ({
+    transform: s.transform,
+    rfId: s.rfId,
+    gridStepGap: s.gridStep,
+});
+function Background({ gap, lineWidth = 1, color = '#000000', }) {
+    const ref = useRef(null);
+    const { transform, rfId, gridStepGap } = useStore(selector, shallow);
+    const defaultGap = gap ? gap : gridStepGap ? gridStepGap : 50;
+    const gapXY = Array.isArray(defaultGap)
+        ? defaultGap
+        : [defaultGap, defaultGap];
+    const scaledGap = [
+        gapXY[0] * transform[2] || 1,
+        gapXY[1] * transform[2] || 1,
+    ];
+    const patternOffset = [scaledGap[0] / 2, scaledGap[1] / 2];
+    return (jsxs("svg", { className: "react-diagram__container react-diagram__background", ref: ref, children: [jsx("pattern", { id: `background-${rfId}`, x: transform[0] % scaledGap[0], y: transform[1] % scaledGap[1], width: scaledGap[0], height: scaledGap[1], patternUnits: "userSpaceOnUse", patternTransform: `translate(-${patternOffset[0]},-${patternOffset[1]})`, children: jsx(LinePath, { scaledGap: scaledGap, color: color, lineWidth: lineWidth }) }), jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${`background-${rfId}`})` })] }));
+}
+Background.displayName = 'Background';
+var index = memo(Background);
+
+export { index as Background, BaseEdge, BezierEdge, Port$1 as Port, ReactDiagramProvider, StepEdge, ReactDiagram as default, internalsSymbol, useEdgesState, useNodesState };