react-cosmos-diagram 0.5.3 → 0.7.0

package/dist/esm/index.js

@@ -1,14 +1,106 @@
+import { select } from 'd3-selection';
+import { drag } from 'd3-drag';
+import { zoom, zoomTransform, zoomIdentity } from 'd3-zoom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, memo, forwardRef } from 'react';
+import { createContext, useContext, useMemo, useState, useEffect, useRef, memo, useCallback, forwardRef } from 'react';
 import { useStore as useStore$1, createStore } from 'zustand';
-import { zoom, zoomIdentity } from 'd3-zoom';
-import { select } from 'd3-selection';
-import { shallow } from 'zustand/shallow';
 import cc from 'classcat';
-import { drag } from 'd3-drag';
+import { shallow } from 'zustand/shallow';
 
-const StoreContext = createContext(null);
-const Provider$1 = StoreContext.Provider;
+var Position;
+(function (Position) {
+    Position["Left"] = "left";
+    Position["Top"] = "top";
+    Position["Right"] = "right";
+    Position["Bottom"] = "bottom";
+})(Position || (Position = {}));
+
+// export const internalsSymbol = Symbol.for('internals');
+const internalsSymbol$1 = 'internals';
+
+var MarkerType;
+(function (MarkerType) {
+    MarkerType["Arrow"] = "arrow";
+})(MarkerType || (MarkerType = {}));
+
+const getDimensions = (node) => ({
+    width: node.offsetWidth,
+    height: node.offsetHeight,
+});
+const getPortBounds = (selector, nodeElement, zoom, nodeOrigin) => {
+    const ports = nodeElement.querySelectorAll(selector);
+    if (!ports || !ports.length) {
+        return null;
+    }
+    const portsArray = Array.from(ports);
+    const nodeBounds = nodeElement.getBoundingClientRect();
+    const nodeOffset = {
+        x: nodeBounds.width * nodeOrigin[0],
+        y: nodeBounds.height * nodeOrigin[1],
+    };
+    return portsArray.map((port) => {
+        const portBounds = port.getBoundingClientRect();
+        return {
+            id: port.getAttribute('data-portid'),
+            position: port.dataset.portPosition,
+            x: (portBounds.left - nodeBounds.left - nodeOffset.x) / zoom,
+            y: (portBounds.top - nodeBounds.top - nodeOffset.y) / zoom,
+            ...getDimensions(port),
+        };
+    });
+};
+const getHostForElement = (element) => element.getRootNode?.() || window?.document;
+const isMouseEvent = (event) => 'clientX' in event;
+const getEventPosition = (event, bounds) => {
+    const isMouseTriggered = isMouseEvent(event);
+    const eventX = isMouseTriggered ? event.clientX : event.touches?.[0].clientX;
+    const eventY = isMouseTriggered ? event.clientY : event.touches?.[0].clientY;
+    return {
+        x: eventX - (bounds?.left ?? 0),
+        y: eventY - (bounds?.top ?? 0),
+    };
+};
+const pointToRendererPoint = ({ x, y }, [tx, ty, tScale]) => {
+    const position = {
+        x: (x - tx) / tScale,
+        y: (y - ty) / tScale,
+    };
+    return position;
+};
+const rendererPointToPoint = ({ x, y }, [tx, ty, tScale]) => {
+    return {
+        x: x * tScale + tx,
+        y: y * tScale + ty,
+    };
+};
+const getPointerPosition = (event, { transform, gridStep, centerStep }) => {
+    const { x, y } = getEventPosition(event);
+    const pointerPos = pointToRendererPoint({ x, y }, transform);
+    const getStepPosition = (params = {
+        position: pointerPos,
+    }) => {
+        const { position, nodeSize } = params;
+        if (!gridStep)
+            return position;
+        let x = gridStep[0] * Math.round(position.x / gridStep[0]), y = gridStep[1] * Math.round(position.y / gridStep[1]);
+        if (centerStep && nodeSize) {
+            const centerX = (gridStep[0] - nodeSize.width) / 2;
+            const centerY = (gridStep[1] - nodeSize.height) / 2;
+            const positionX = position.x - centerX;
+            const positionY = position.y - centerY;
+            x = gridStep[0] * Math.round(positionX / gridStep[0]) + centerX;
+            y = gridStep[1] * Math.round(positionY / gridStep[1]) + centerY;
+        }
+        return {
+            x,
+            y,
+        };
+    };
+    return {
+        getStepPosition,
+        ...pointerPos,
+    };
+};
 
 const errorMessages = {
     '001': () => 'Seems like you have not used zustand provider as an ancestor',
@@ -20,77 +112,27 @@ const errorMessages = {
     '022': (type) => `Marker type "${type}" doesn't exist.`,
 };
 
-const zustandErrorMessage = errorMessages['001']();
-function useStore(selector, equalityFn) {
-    const store = useContext(StoreContext);
-    if (store === null) {
-        throw new Error(zustandErrorMessage);
+const clamp = (val, min = 0, max = 1) => Math.min(Math.max(val, min), max);
+const calcAutoPanVelocity = (value, bound, radius, velocity) => {
+    const maxRadius = bound - radius;
+    if (value < radius) {
+        return (clamp(Math.abs(value - radius), 1, 50) / 50) * velocity;
     }
-    return useStore$1(store, selector, equalityFn);
-}
-const useStoreApi = () => {
-    const store = useContext(StoreContext);
-    if (store === null) {
-        throw new Error(zustandErrorMessage);
+    else if (value > maxRadius) {
+        return (-clamp(Math.abs(value - maxRadius), 1, 50) / 50) * velocity;
     }
-    return useMemo(() => ({
-        getState: store.getState,
-        setState: store.setState,
-        subscribe: store.subscribe,
-        destroy: store.destroy,
-    }), [store]);
+    return 0;
+};
+const calcAutoPanPosition = (pos, bounds) => {
+    const xMovement = calcAutoPanVelocity(pos.x, bounds.width, 30, 10);
+    const yMovement = calcAutoPanVelocity(pos.y, bounds.height, 30, 10);
+    return [xMovement, yMovement];
 };
-
-function 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 internalsSymbol = Symbol.for('internals');
 const devWarn = (id, value = '') => {
     if (process.env.NODE_ENV === 'development') {
         console.warn(`[React Diagram]: ${id}-${errorMessages[id](value)}`);
     }
 };
-const onErrorWrapper = (onError) => (id, value = '') => onError?.(id, errorMessages[id](value));
-const isNumeric = (n) => !isNaN(n) && isFinite(n);
-const getDimensions = (node) => ({
-    width: node.offsetWidth,
-    height: node.offsetHeight,
-});
-const getOverlappingArea = (rectA, rectB) => {
-    const xOverlap = Math.max(0, Math.min(rectA.x + rectA.width, rectB.x + rectB.width) -
-        Math.max(rectA.x, rectB.x));
-    const yOverlap = Math.max(0, Math.min(rectA.y + rectA.height, rectB.y + rectB.height) -
-        Math.max(rectA.y, rectB.y));
-    return Math.ceil(xOverlap * yOverlap);
-};
-const 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]),
-});
 const rectToBox = ({ x, y, width, height }) => ({
     x,
     y,
@@ -109,310 +151,60 @@ const getBoundsOfBoxes = (box1, box2) => ({
     x2: Math.max(box1.x2, box2.x2),
     y2: Math.max(box1.y2, box2.y2),
 });
-const isMouseEvent = (event) => 'clientX' in event;
-const getEventPosition = (event, bounds) => {
-    const isMouseTriggered = isMouseEvent(event);
-    const eventX = isMouseTriggered ? event.clientX : event.touches?.[0].clientX;
-    const eventY = isMouseTriggered ? event.clientY : event.touches?.[0].clientY;
-    return {
-        x: eventX - (bounds?.left ?? 0),
-        y: eventY - (bounds?.top ?? 0),
-    };
-};
-const calcAutoPanVelocity = (value, bound, radius, velocity) => {
-    const maxRadius = bound - radius;
-    if (value < radius) {
-        return (clamp(Math.abs(value - radius), 1, 50) / 50) * velocity;
-    }
-    else if (value > maxRadius) {
-        return (-clamp(Math.abs(value - maxRadius), 1, 50) / 50) * velocity;
-    }
-    return 0;
-};
-const calcAutoPanPosition = (pos, bounds) => {
-    const xMovement = calcAutoPanVelocity(pos.x, bounds.width, 30, 10);
-    const yMovement = calcAutoPanVelocity(pos.y, bounds.height, 30, 10);
-    return [xMovement, yMovement];
+const isNumeric = (n) => !isNaN(n) && isFinite(n);
+const getOverlappingArea = (rectA, rectB) => {
+    const xOverlap = Math.max(0, Math.min(rectA.x + rectA.width, rectB.x + rectB.width) -
+        Math.max(rectA.x, rectB.x));
+    const yOverlap = Math.max(0, Math.min(rectA.y + rectA.height, rectB.y + rectB.height) -
+        Math.max(rectA.y, rectB.y));
+    return Math.ceil(xOverlap * yOverlap);
 };
+const clampPosition = (position = { x: 0, y: 0 }, extent) => ({
+    x: clamp(position.x, extent[0][0], extent[1][0]),
+    y: clamp(position.y, extent[0][1], extent[1][1]),
+});
 
-const convertTransform = (transform) => {
-    const { x, y, k } = transform;
+const isCoreNode = (element) => 'id' in element && !('source' in element) && !('target' in element);
+const isCoreEdge = (element) => 'source' in element && 'target' in element;
+const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
+    if (!node) {
+        return {
+            x: 0,
+            y: 0,
+            positionAbsolute: {
+                x: 0,
+                y: 0,
+            },
+        };
+    }
+    const offsetX = (node.width ?? 0) * nodeOrigin[0];
+    const offsetY = (node.height ?? 0) * nodeOrigin[1];
+    const position = {
+        x: node.position.x - offsetX,
+        y: node.position.y - offsetY,
+    };
     return {
-        x,
-        y,
-        zoom: k,
+        ...position,
+        positionAbsolute: node.positionAbsolute
+            ? {
+                x: node.positionAbsolute.x - offsetX,
+                y: node.positionAbsolute.y - offsetY,
+            }
+            : position,
     };
 };
-const isWrappedWithClass = (event, className) => event.target.closest(`.${className}`);
-const isViewChanged = (prevViewport, eventViewport) => {
-    const { x: prevX, y: prevY, zoom: prevZoom } = prevViewport;
-    const { x, y, k } = eventViewport;
-    return prevX !== x || prevY !== y || prevZoom !== k;
-};
-const selector$8 = (s) => ({
-    d3Zoom: s.d3Zoom,
-    d3Selection: s.d3Selection,
-});
-function Pane({ noPanClassName, panning, minZoom, maxZoom, defaultViewport, translateExtent, children, onMove, onMoveStart, onMoveEnd, }) {
-    const store = useStoreApi();
-    const isZoomingOrPanning = useRef(false);
-    const Pane = useRef(null);
-    const d3ZoomHandler = useRef();
-    const prevTransform = useRef({ x: 0, y: 0, zoom: 0 });
-    const timerId = useRef();
-    const { d3Zoom, d3Selection } = useStore(selector$8, shallow);
-    useEffect(() => {
-        if (Pane.current) {
-            const bbox = Pane.current.getBoundingClientRect();
-            const d3ZoomInstance = zoom()
-                .scaleExtent([minZoom, maxZoom])
-                .translateExtent(translateExtent);
-            const selection = select(Pane.current).call(d3ZoomInstance);
-            const updatedTransform = zoomIdentity
-                .translate(defaultViewport.x, defaultViewport.y)
-                .scale(clamp(defaultViewport.zoom, minZoom, maxZoom));
-            const extent = [
-                [0, 0],
-                [bbox.width, bbox.height],
-            ];
-            const constrainedTransform = d3ZoomInstance.constrain()(updatedTransform, extent, translateExtent);
-            d3ZoomInstance.transform(selection, constrainedTransform);
-            d3ZoomHandler.current = selection.on('wheel.zoom');
-            store.setState({
-                d3Zoom: d3ZoomInstance,
-                d3Selection: selection,
-                // we need to pass transform because zoom handler is not registered when we set the initial transform
-                transform: [
-                    constrainedTransform.x,
-                    constrainedTransform.y,
-                    constrainedTransform.k,
-                ],
-                domNode: Pane.current.closest('.react-diagram'),
-            });
-        }
-    }, [translateExtent]);
-    useEffect(() => {
-        if (d3Zoom && d3Selection) {
-            d3Selection.on('wheel.zoom', (event, d) => {
-                event.preventDefault();
-                if (Pane.current && d3ZoomHandler.current) {
-                    d3ZoomHandler.current.call(Pane.current, event, d);
-                }
-            });
-        }
-    }, [d3Zoom, d3Selection, d3ZoomHandler, panning]);
-    useEffect(() => {
-        if (d3Zoom) {
-            d3Zoom.on('start', (event) => {
-                if (!event.sourceEvent) {
-                    return null;
-                }
-                isZoomingOrPanning.current = true;
-                if (onMoveStart) {
-                    const flowTransform = convertTransform(event.transform);
-                    prevTransform.current = flowTransform;
-                    onMoveStart?.(event.sourceEvent, flowTransform);
-                }
-            });
-        }
-    }, [d3Zoom, onMoveStart]);
-    useEffect(() => {
-        if (d3Zoom) {
-            d3Zoom.on('zoom', (event) => {
-                store.setState({
-                    transform: [
-                        event.transform.x,
-                        event.transform.y,
-                        event.transform.k,
-                    ],
-                });
-                if (onMove) {
-                    const flowTransform = convertTransform(event.transform);
-                    onMove?.(event.sourceEvent, flowTransform);
-                }
-            });
-        }
-    }, [d3Zoom, onMove]);
-    useEffect(() => {
-        if (d3Zoom) {
-            d3Zoom.on('end', (event) => {
-                isZoomingOrPanning.current = false;
-                if (onMoveEnd &&
-                    isViewChanged(prevTransform.current, event.transform)) {
-                    const flowTransform = convertTransform(event.transform);
-                    prevTransform.current = flowTransform;
-                    clearTimeout(timerId.current);
-                    timerId.current = setTimeout(() => {
-                        onMoveEnd?.(event.sourceEvent, flowTransform);
-                    }, 0);
-                }
-            });
-        }
-    }, [d3Zoom]);
-    useEffect(() => {
-        if (d3Zoom) {
-            d3Zoom.filter((event) => {
-                if (isWrappedWithClass(event, noPanClassName) &&
-                    event.type !== 'wheel') {
-                    return false;
-                }
-                if (!panning)
-                    return false;
-                const buttonAllowed = !event.button || event.button <= 1;
-                if (!buttonAllowed)
-                    return false;
-                return true;
-            });
-        }
-    }, [d3Zoom, panning]);
-    return (jsx("div", { className: "react-diagram__pane react-diagram__container", ref: Pane, 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 useGetPointerPosition() {
-    const store = useStoreApi();
-    const getPointerPosition = useCallback(({ sourceEvent }) => {
-        const { transform, gridStep, centerStep } = store.getState();
-        const x = sourceEvent.changedTouches
-            ? sourceEvent.changedTouches[0].clientX
-            : sourceEvent.clientX;
-        const y = sourceEvent.changedTouches
-            ? sourceEvent.changedTouches[0].clientY
-            : sourceEvent.clientY;
-        const pointerPos = {
-            x: (x - transform[0]) / transform[2],
-            y: (y - transform[1]) / transform[2],
-        };
-        const getStepPosition = (params = {
-            position: pointerPos,
-        }) => {
-            const { position, nodeSize } = params;
-            if (!gridStep)
-                return position;
-            let x = gridStep[0] * Math.round(position.x / gridStep[0]), y = gridStep[1] * Math.round(position.y / gridStep[1]);
-            if (centerStep && nodeSize) {
-                const centerX = (gridStep[0] - nodeSize.width) / 2;
-                const centerY = (gridStep[1] - nodeSize.height) / 2;
-                const positionX = position.x - centerX;
-                const positionY = position.y - centerY;
-                x = gridStep[0] * Math.round(positionX / gridStep[0]) + centerX;
-                y = gridStep[1] * Math.round(positionY / gridStep[1]) + centerY;
-            }
-            return {
-                x,
-                y,
-            };
-        };
-        return {
-            getStepPosition,
-            ...pointerPos,
-        };
-    }, []);
-    return getPointerPosition;
-}
-
-const getPortBounds = (selector, nodeElement, zoom, nodeOrigin) => {
-    const ports = nodeElement.querySelectorAll(selector);
-    if (!ports || !ports.length) {
-        return null;
-    }
-    const portsArray = Array.from(ports);
-    const nodeBounds = nodeElement.getBoundingClientRect();
-    const nodeOffset = {
-        x: nodeBounds.width * nodeOrigin[0],
-        y: nodeBounds.height * nodeOrigin[1],
-    };
-    return portsArray.map((port) => {
-        const portBounds = port.getBoundingClientRect();
-        return {
-            id: port.getAttribute('data-portid'),
-            position: port.dataset.portPosition,
-            x: (portBounds.left - nodeBounds.left - nodeOffset.x) / zoom,
-            y: (portBounds.top - nodeBounds.top - nodeOffset.y) / zoom,
-            ...getDimensions(port),
-        };
-    });
-};
-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 isNode = (element) => 'id' in element && !('source' in element) && !('target' in element);
-const isEdge = (element) => 'source' in element && 'target' in element;
-const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
-    if (!node) {
-        return {
-            x: 0,
-            y: 0,
-            positionAbsolute: {
-                x: 0,
-                y: 0,
-            },
-        };
-    }
-    const offsetX = (node.width ?? 0) * nodeOrigin[0];
-    const offsetY = (node.height ?? 0) * nodeOrigin[1];
-    const position = {
-        x: node.position.x - offsetX,
-        y: node.position.y - offsetY,
-    };
-    return {
-        ...position,
-        positionAbsolute: node.positionAbsolute
-            ? {
-                x: node.positionAbsolute.x - offsetX,
-                y: node.positionAbsolute.y - offsetY,
-            }
-            : position,
-    };
-};
-const getNodesInside = (nodeInternals, rect, [tx, ty, tScale] = [0, 0, 1], partially = false, excludeNonSelectableNodes = false, nodeOrigin = [0, 0]) => {
-    const paneRect = {
-        x: (rect.x - tx) / tScale,
-        y: (rect.y - ty) / tScale,
-        width: rect.width / tScale,
-        height: rect.height / tScale,
-    };
-    const visibleNodes = [];
-    nodeInternals.forEach((node) => {
-        const { width, height, selectable = true, hidden = false } = node;
-        if ((excludeNonSelectableNodes && !selectable) || hidden) {
-            return false;
+const getNodesInside = (nodeInternals, rect, [tx, ty, tScale] = [0, 0, 1], partially = false, excludeNonSelectableNodes = false, nodeOrigin = [0, 0]) => {
+    const paneRect = {
+        x: (rect.x - tx) / tScale,
+        y: (rect.y - ty) / tScale,
+        width: rect.width / tScale,
+        height: rect.height / tScale,
+    };
+    const visibleNodes = [];
+    nodeInternals.forEach((node) => {
+        const { width, height, selectable = true, hidden = false } = node;
+        if ((excludeNonSelectableNodes && !selectable) || hidden) {
+            return false;
         }
         const { positionAbsolute } = getNodePositionWithOrigin(node, nodeOrigin);
         const nodeRect = {
@@ -435,54 +227,6 @@ const getNodesInside = (nodeInternals, rect, [tx, ty, tScale] = [0, 0, 1], parti
     });
     return visibleNodes;
 };
-const getMarkerId = (marker, rfId) => {
-    if (typeof marker === 'undefined') {
-        return '';
-    }
-    if (typeof marker === 'string') {
-        return marker;
-    }
-    const idPrefix = rfId ? `${rfId}__` : '';
-    return `${idPrefix}${Object.keys(marker)
-        .sort()
-        .map((key) => `${key}=${marker[key]}`)
-        .join('&')}`;
-};
-const getEdgeId = ({ source, target }) => `react-diagram__edge-${source}-${target}`;
-const isExistsConnection = (edge, edges) => edges.some((el) => el.source === edge.source && el.target === edge.target);
-const addEdge = (edgeParams, edges) => {
-    if (!isEdge(edgeParams)) {
-        devWarn('020');
-        return edges;
-    }
-    if (isExistsConnection(edgeParams, edges)) {
-        return edges;
-    }
-    let edge;
-    if (edgeParams.id)
-        edge = { ...edgeParams };
-    else
-        edge = {
-            ...edgeParams,
-            id: getEdgeId(edgeParams),
-        };
-    return edges.concat(edge);
-};
-const updateEdge = (originEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
-    const { id: oldEdgeId, ...rest } = originEdge;
-    if (!newConnection.source || !newConnection.target)
-        devWarn('020');
-    const foundEdge = edges.find((e) => e.id === oldEdgeId);
-    if (!foundEdge)
-        devWarn('021', oldEdgeId);
-    const edge = {
-        ...rest,
-        id: options.shouldReplaceId ? getEdgeId(newConnection) : oldEdgeId,
-        source: newConnection.source,
-        target: newConnection.target,
-    };
-    return edges.filter((e) => e.id !== oldEdgeId).concat(edge);
-};
 const getRectOfNodes = (nodes, nodeOrigin = [0, 0]) => {
     if (nodes.length === 0) {
         return { x: 0, y: 0, width: 0, height: 0 };
@@ -499,78 +243,9 @@ const getRectOfNodes = (nodes, nodeOrigin = [0, 0]) => {
     }, { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity });
     return boxToRect(box);
 };
-
-function isParentSelected(node, nodeInternals) {
-    if (!node.parentNode) {
-        return false;
-    }
-    const parentNode = nodeInternals.get(node.parentNode);
-    if (!parentNode) {
-        return false;
-    }
-    if (parentNode.selected) {
-        return true;
-    }
-    return isParentSelected(parentNode, nodeInternals);
-}
-const getDragItems = (nodeInternals, nodesDraggable, mousePosition, nodeId) => {
-    const filteredNode = Array.from(nodeInternals.values()).filter((n) => {
-        const hasSize = n.width && n.height;
-        const isSelected = n.selected || n.id === nodeId;
-        const hasNoParent = !n.parentNode || !isParentSelected(n, nodeInternals);
-        const isDraggable = n.draggable || (nodesDraggable && typeof n.draggable === 'undefined');
-        return hasSize && isSelected && hasNoParent && isDraggable;
-    });
-    return filteredNode.map((n) => ({
-        id: n.id,
-        position: n.position || { x: 0, y: 0 },
-        positionAbsolute: n.positionAbsolute || { x: 0, y: 0 },
-        distance: {
-            x: mousePosition.x - (n.positionAbsolute?.x ?? 0),
-            y: mousePosition.y - (n.positionAbsolute?.y ?? 0),
-        },
-        extent: n.extent,
-        parentNode: n.parentNode,
-        width: n.width,
-        height: n.height,
-    }));
-};
-const calcNextPosition = (node, nextPosition, nodeInternals, nodeExtent, nodeOrigin = [0, 0], onError) => {
+const calcNextPosition = (node, nextPosition, nodeInternals, nodeExtent, nodeOrigin = [0, 0]) => {
     let currentExtent = node.extent || nodeExtent;
-    if (node.extent === 'parent') {
-        if (node.parentNode && node.width && node.height) {
-            const parent = nodeInternals.get(node.parentNode);
-            const { x: parentX, y: parentY } = getNodePositionWithOrigin(parent, nodeOrigin).positionAbsolute;
-            currentExtent =
-                parent &&
-                    isNumeric(parentX) &&
-                    isNumeric(parentY) &&
-                    isNumeric(parent.width) &&
-                    isNumeric(parent.height)
-                    ? [
-                        [
-                            parentX + node.width * nodeOrigin[0],
-                            parentY + node.height * nodeOrigin[1],
-                        ],
-                        [
-                            parentX +
-                                parent.width -
-                                node.width +
-                                node.width * nodeOrigin[0],
-                            parentY +
-                                parent.height -
-                                node.height +
-                                node.height * nodeOrigin[1],
-                        ],
-                    ]
-                    : currentExtent;
-        }
-        else {
-            onError?.('011');
-            currentExtent = nodeExtent;
-        }
-    }
-    else if (node.extent && node.parentNode) {
+    if (node.extent && node.parentNode) {
         const parent = nodeInternals.get(node.parentNode);
         const { x: parentX, y: parentY } = getNodePositionWithOrigin(parent, nodeOrigin).positionAbsolute;
         currentExtent = [
@@ -594,307 +269,1118 @@ const calcNextPosition = (node, nextPosition, nodeInternals, nodeExtent, nodeOri
         positionAbsolute,
     };
 };
-const getEventHandlerParams = ({ nodeId, dragItems, nodeInternals, }) => {
-    const extentedDragItems = dragItems.map((n) => {
-        const node = nodeInternals.get(n.id);
-        return {
-            ...node,
-            position: n.position,
-            positionAbsolute: n.positionAbsolute,
-        };
-    });
-    return [
-        nodeId
-            ? extentedDragItems.find((n) => n.id === nodeId)
-            : extentedDragItems[0],
-        extentedDragItems,
-    ];
-};
-const hasSelector = (target, selector, nodeRef) => {
-    let current = target;
-    do {
-        if (current?.matches(selector))
-            return true;
-        if (current === nodeRef.current)
-            return false;
-        current = current.parentElement;
-    } while (current);
-    return false;
-};
-const hasChangedPosition = (beforePositions, currentPosition) => beforePositions.x !== currentPosition.x ||
-    beforePositions.y !== currentPosition.y;
 
-const has = Object.prototype.hasOwnProperty;
-const deepEqual = (foo, bar) => {
-    let constructor;
-    let length;
-    if (foo === bar)
-        return true;
-    if (foo && bar && foo.constructor === bar.constructor) {
-        constructor = foo.constructor;
-        if (constructor === Date)
-            return foo.getTime() === bar.getTime();
-        if (constructor === RegExp)
-            return foo.toString() === bar.toString();
-        if (constructor === Array) {
-            if ((length = foo.length) === bar.length) {
-                while (length-- && deepEqual(foo[length], bar[length]))
-                    ;
-            }
-            return length === -1;
-        }
-        if (!constructor || typeof foo === 'object') {
-            length = 0;
-            for (constructor in foo) {
-                if (has.call(foo, constructor) &&
-                    ++length &&
-                    !has.call(bar, constructor))
-                    return false;
-                if (!(constructor in bar) ||
-                    !deepEqual(foo[constructor], bar[constructor]))
-                    return false;
-            }
-            return Object.keys(bar).length === length;
-        }
-    }
-    return foo !== foo && bar !== bar;
+const getMarkerId = (marker, id) => {
+    if (typeof marker === 'undefined')
+        return '';
+    if (typeof marker === 'string')
+        return marker;
+    const idPrefix = id ? `${id}__` : '';
+    const markerKeys = Object.keys(marker);
+    return `${idPrefix}${markerKeys
+        .sort()
+        .map((key) => `${key}=${marker[key]}`)
+        .join('&')}`;
 };
+// export function createMarkerIds(
+//    edges: EdgeBase[],
+//    {
+//       id,
+//       defaultColor,
+//       defaultMarkerStart,
+//       defaultMarkerEnd,
+//    }: {
+//       id?: string | null;
+//       defaultColor?: string;
+//       defaultMarkerStart?: EdgeMarker;
+//       defaultMarkerEnd?: EdgeMarker;
+//    },
+// ) {
+//    const ids = new Set<string>();
+//    return edges
+//       .reduce<(EdgeMarker & { id: string })[]>((markers, edge) => {
+//          [
+//             edge.markerStart || defaultMarkerStart,
+//             edge.markerEnd || defaultMarkerEnd,
+//          ].forEach((marker) => {
+//             if (marker && typeof marker === 'object') {
+//                const markerId = getMarkerId(marker, id);
+//                if (!ids.has(markerId)) {
+//                   markers.push({
+//                      id: markerId,
+//                      color: marker.color || defaultColor,
+//                      ...marker,
+//                   });
+//                   ids.add(markerId);
+//                }
+//             }
+//          });
+//          return markers;
+//       }, [])
+//       .sort((a, b) => a.id.localeCompare(b.id));
+// }
 
-function useUpdateIntersectionNodes() {
-    const store = useStoreApi();
-    const intersectionChanges = useRef([]);
-    const resetIntersectedNodes = useCallback((intersectedNodes) => {
-        const hasIntersectedNodes = intersectedNodes.length;
-        let beforeChanges;
-        if (hasIntersectedNodes) {
-            beforeChanges = intersectionChanges.current
-                .filter((beforeChange) => {
-                return !intersectedNodes.some((intersectedNode) => beforeChange.id === intersectedNode.id);
-            })
-                .map((beforeChange) => ({
-                ...beforeChange,
-                intersected: false,
-            }));
-        }
-        else {
-            beforeChanges = intersectionChanges.current.map((beforeChange) => ({
-                ...beforeChange,
-                intersected: false,
-            }));
-        }
-        return beforeChanges;
-    }, []);
-    const updateNodesIntersection = useCallback((dragItems) => {
-        const { getNodes, triggerNodeChanges } = store.getState();
-        const intersectedDraggingNodeIds = [];
-        const intersectedNodes = getNodes()
-            .filter((node) => {
-            const { width, height, position, parentNode } = node;
-            if (parentNode)
-                return;
-            if (width && height) {
-                return dragItems.current?.some((dragItem) => {
-                    const { position: dPosition, width: dWidth, height: dHeight, } = dragItem;
-                    if (node.id === dragItem.id)
-                        return;
-                    if (dragItem.parentNode)
-                        return;
-                    if (!dWidth || !dHeight)
-                        return;
-                    const leftIn = dPosition.x + dWidth >= position.x, rightIn = position.x + width >= dPosition.x, topIn = dPosition.y + dHeight >= position.y, bottomIn = position.y + height >= dPosition.y;
-                    const isIn = leftIn && rightIn && topIn && bottomIn;
-                    if (isIn) {
-                        if (!intersectedDraggingNodeIds.includes(dragItem.id)) {
-                            intersectedDraggingNodeIds.push(dragItem.id);
-                        }
-                    }
-                    return isIn;
+const getEdgeCenter = ({ sourceX, sourceY, targetX, targetY, }) => {
+    const xOffset = Math.abs(targetX - sourceX) / 2;
+    const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
+    const yOffset = Math.abs(targetY - sourceY) / 2;
+    const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+    return [centerX, centerY, xOffset, yOffset];
+};
+const getEdgeId = ({ source, sourcePort, target, targetPort, }) => `react-diagram__edge-${source}${sourcePort}-${target}${targetPort}`;
+const isExistsConnection = (edge, edges) => edges.some((el) => el.source === edge.source &&
+    el.target === edge.target &&
+    (el.sourcePort === edge.sourcePort ||
+        (!el.sourcePort && !edge.sourcePort)) &&
+    (el.targetPort === edge.targetPort ||
+        (!el.targetPort && !edge.targetPort)));
+const addEdge = (edgeParams, edges) => {
+    if (!isCoreEdge(edgeParams)) {
+        devWarn('020');
+        return edges;
+    }
+    if (isExistsConnection(edgeParams, edges)) {
+        return edges;
+    }
+    let edge;
+    if (edgeParams.sourcePort === null) {
+        delete edgeParams.sourcePort;
+    }
+    if (edgeParams.targetPort === null) {
+        delete edgeParams.targetPort;
+    }
+    if (edgeParams.id)
+        edge = { ...edgeParams };
+    else
+        edge = {
+            ...edgeParams,
+            id: getEdgeId(edgeParams),
+        };
+    return edges.concat(edge);
+};
+const updateEdge = (originEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
+    const { id: oldEdgeId, ...rest } = originEdge;
+    if (!newConnection.source || !newConnection.target)
+        devWarn('020');
+    const foundEdge = edges.find((e) => e.id === oldEdgeId);
+    if (!foundEdge)
+        devWarn('021', oldEdgeId);
+    const edge = {
+        ...rest,
+        id: options.shouldReplaceId ? getEdgeId(newConnection) : oldEdgeId,
+        source: newConnection.source,
+        target: newConnection.target,
+    };
+    return edges.filter((e) => e.id !== oldEdgeId).concat(edge);
+};
+
+const HANDLE_DIRECTIONS = {
+    [Position.Left]: { x: -1, y: 0 },
+    [Position.Right]: { x: 1, y: 0 },
+    [Position.Top]: { x: 0, y: -1 },
+    [Position.Bottom]: { x: 0, y: 1 },
+};
+const getDirection = ({ source, sourcePosition = Position.Bottom, target, }) => {
+    if (sourcePosition === Position.Left || sourcePosition === Position.Right) {
+        // when source Node position is on the left side of a Port of target Node => x = 1
+        return source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 };
+    }
+    //when source Node position is above of a Port of target Node => y = 1
+    return source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 };
+};
+const distance = (a, b) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
+const getPoints = ({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset, }) => {
+    const sourceDir = HANDLE_DIRECTIONS[sourcePosition];
+    const targetDir = HANDLE_DIRECTIONS[targetPosition];
+    const sourceGapped = {
+        x: source.x + sourceDir.x * offset,
+        y: source.y + sourceDir.y * offset,
+    };
+    const targetGapped = {
+        x: target.x + targetDir.x * offset,
+        y: target.y + targetDir.y * offset,
+    };
+    const direction = getDirection({
+        source: sourceGapped,
+        sourcePosition,
+        target: targetGapped,
+    });
+    const dirAccessor = direction.x !== 0 ? 'x' : 'y';
+    const currentDirection = direction[dirAccessor];
+    let points = [];
+    let centerX = 0, centerY = 0;
+    const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getEdgeCenter({
+        sourceX: source.x,
+        sourceY: source.y,
+        targetX: target.x,
+        targetY: target.y,
+    });
+    const isSourceAndTargetPositionsParallel = sourceDir[dirAccessor] * targetDir[dirAccessor] === -1;
+    if (isSourceAndTargetPositionsParallel) {
+        centerX = center.x || defaultCenterX;
+        centerY = center.y || defaultCenterY;
+        const verticalSplit = [
+            { x: centerX, y: sourceGapped.y },
+            { x: centerX, y: targetGapped.y },
+        ];
+        const horizontalSplit = [
+            { x: sourceGapped.x, y: centerY },
+            { x: targetGapped.x, y: centerY },
+        ];
+        const centerLineIsBent = sourceDir[dirAccessor] !== currentDirection;
+        if (centerLineIsBent) {
+            points = dirAccessor === 'x' ? horizontalSplit : verticalSplit;
+        }
+        else {
+            points = dirAccessor === 'x' ? verticalSplit : horizontalSplit;
+        }
+    }
+    const pathPoints = [source, sourceGapped, ...points, targetGapped, target];
+    return [pathPoints, centerX, centerY, defaultOffsetX, defaultOffsetY];
+};
+const getBend = (a, b, c, size) => {
+    const bendSize = Math.min(distance(a, b) / 2, distance(b, c) / 2, size);
+    const { x, y } = b;
+    // no bend
+    if ((a.x === x && x === c.x) || (a.y === y && y === c.y)) {
+        return `L${x} ${y}`;
+    }
+    // first segment is horizontal
+    if (a.y === y) {
+        const xDir = a.x < c.x ? -1 : 1;
+        const yDir = a.y < c.y ? 1 : -1;
+        return `L ${x + bendSize * xDir},${y}Q ${x},${y} ${x},${y + bendSize * yDir}`;
+    }
+    const xDir = a.x < c.x ? 1 : -1;
+    const yDir = a.y < c.y ? -1 : 1;
+    return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;
+};
+const getStepPath = ({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, borderRadius = 5, centerX, centerY, offset = 20, }) => {
+    const [points, labelX, labelY, offsetX, offsetY] = getPoints({
+        source: { x: sourceX, y: sourceY },
+        sourcePosition,
+        target: { x: targetX, y: targetY },
+        targetPosition,
+        center: { x: centerX, y: centerY },
+        offset,
+    });
+    const path = points.reduce((res, p, i) => {
+        let segment = '';
+        if (i > 0 && i < points.length - 1) {
+            segment = getBend(points[i - 1], p, points[i + 1], borderRadius);
+        }
+        else {
+            segment = `${i === 0 ? 'M' : 'L'}${p.x} ${p.y}`;
+        }
+        res += segment;
+        return res;
+    }, '');
+    return [path, labelX, labelY, offsetX, offsetY];
+};
+
+/**
+ * Get a straight path from source to target port
+ * @param params.sourceX - The x position of the source port
+ * @param params.sourceY - The y position of the source port
+ * @param params.targetX - The x position of the target port
+ * @param params.targetY - The y position of the target port
+ * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source port and label
+ * @example
+ *  const source = { x: 0, y: 20 };
+    const target = { x: 150, y: 100 };
+    
+    const [path, labelX, labelY, offsetX, offsetY] = getStraightPath({
+      sourceX: source.x,
+      sourceY: source.y,
+      sourcePosition: Position.Right,
+      targetX: target.x,
+      targetY: target.y,
+      targetPosition: Position.Left,
+    });
+ */
+const getStraightPath = ({ sourceX, sourceY, targetX, targetY, }) => {
+    const [labelX, labelY, offsetX, offsetY] = getEdgeCenter({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+    });
+    return [
+        `M ${sourceX},${sourceY}L ${targetX},${targetY}`,
+        labelX,
+        labelY,
+        offsetX,
+        offsetY,
+    ];
+};
+
+const getBezierEdgeCenter = ({ sourceX, sourceY, targetX, targetY, sourceControlX, sourceControlY, targetControlX, targetControlY, }) => {
+    // cubic bezier t=0.5 mid point, not the actual mid point, but easy to calculate
+    // https://stackoverflow.com/questions/67516101/how-to-find-distance-mid-point-of-bezier-curve
+    const midPoint = 0.5;
+    const point = 0.125;
+    const controlPoint = midPoint - point;
+    const centerX = sourceX * point +
+        sourceControlX * controlPoint +
+        targetControlX * controlPoint +
+        targetX * point;
+    const centerY = sourceY * point +
+        sourceControlY * controlPoint +
+        targetControlY * controlPoint +
+        targetY * point;
+    const offsetX = Math.abs(centerX - sourceX);
+    const offsetY = Math.abs(centerY - sourceY);
+    return [centerX, centerY, offsetX, offsetY];
+};
+const calculateControlOffset = (distance, curvature) => {
+    if (distance >= 0) {
+        return 0.5 * distance;
+    }
+    return curvature * 25 * Math.sqrt(-distance);
+};
+const getControlWithCurvature = ({ pos, x1, y1, x2, y2, c, }) => {
+    switch (pos) {
+        case Position.Left:
+            return [x1 - calculateControlOffset(x1 - x2, c), y1];
+        case Position.Right:
+            return [x1 + calculateControlOffset(x2 - x1, c), y1];
+        case Position.Top:
+            return [x1, y1 - calculateControlOffset(y1 - y2, c)];
+        case Position.Bottom:
+            return [x1, y1 + calculateControlOffset(y2 - y1, c)];
+    }
+};
+/**
+ * Get a bezier path from source to target port
+ * @param params.sourceX - The x position of the source port
+ * @param params.sourceY - The y position of the source port
+ * @param params.sourcePosition - The position of the source port (default: Position.Bottom)
+ * @param params.targetX - The x position of the target port
+ * @param params.targetY - The y position of the target port
+ * @param params.targetPosition - The position of the target port (default: Position.Top)
+ * @param params.curvature - The curvature of the bezier edge
+ * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source port and label
+ * @example
+ *  const source = { x: 0, y: 20 };
+    const target = { x: 150, y: 100 };
+    
+    const [path, labelX, labelY, offsetX, offsetY] = getBezierPath({
+      sourceX: source.x,
+      sourceY: source.y,
+      sourcePosition: Position.Right,
+      targetX: target.x,
+      targetY: target.y,
+      targetPosition: Position.Left,
+});
+ */
+const getBezierPath = ({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, curvature = 0.25, }) => {
+    const [sourceControlX, sourceControlY] = getControlWithCurvature({
+        pos: sourcePosition,
+        x1: sourceX,
+        y1: sourceY,
+        x2: targetX,
+        y2: targetY,
+        c: curvature,
+    });
+    const [targetControlX, targetControlY] = getControlWithCurvature({
+        pos: targetPosition,
+        x1: targetX,
+        y1: targetY,
+        x2: sourceX,
+        y2: sourceY,
+        c: curvature,
+    });
+    const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourceControlX,
+        sourceControlY,
+        targetControlX,
+        targetControlY,
+    });
+    return [
+        `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
+        labelX,
+        labelY,
+        offsetX,
+        offsetY,
+    ];
+};
+
+const getPorts = (node, portBounds, type, currentPort) => (portBounds[type] || []).reduce((res, h) => {
+    if (`${node.id}-${h.id}-${type}` !== currentPort) {
+        res.push({
+            portId: h.id || null,
+            portType: type,
+            nodeId: node.id,
+            x: (node.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
+            y: (node.positionAbsolute?.y ?? 0) + h.y + h.height / 2,
+        });
+    }
+    return res;
+}, []);
+const getPortType = (PortDomNode) => {
+    if (PortDomNode?.classList.contains('target')) {
+        return 'target';
+    }
+    else if (PortDomNode?.classList.contains('source')) {
+        return 'source';
+    }
+    return null;
+};
+const getAllPort = ({ nodes, nodeId, portId, portType, }) => nodes.reduce((res, node) => {
+    if (node[internalsSymbol$1]) {
+        const { portBounds } = node[internalsSymbol$1];
+        let sourcePorts = [];
+        let targetPorts = [];
+        if (portBounds) {
+            sourcePorts = getPorts(node, portBounds, 'source', `${nodeId}-${portId}-${portType}`);
+            targetPorts = getPorts(node, portBounds, 'target', `${nodeId}-${portId}-${portType}`);
+        }
+        res.push(...sourcePorts, ...targetPorts);
+    }
+    return res;
+}, []);
+const getClosestPort = (pos, connectionRadius, ports) => {
+    let closestPort = null;
+    let minDistance = Infinity;
+    ports.forEach((port) => {
+        const distance = Math.sqrt(Math.pow(port.x - pos.x, 2) + Math.pow(port.y - pos.y, 2));
+        if (distance <= connectionRadius && distance < minDistance) {
+            minDistance = distance;
+            closestPort = port;
+        }
+    });
+    return closestPort;
+};
+const getConnection = (event, port, fromNodeId, fromPortId, fromType, doc) => {
+    const isTarget = fromType === 'target';
+    const result = {
+        isValid: false,
+        connection: null,
+        endPort: null,
+    };
+    const PortDomNode = doc.querySelector(`.react-diagram__port[data-id="${port?.nodeId}-${port?.portId}-${port?.portType}"]`);
+    const { x, y } = getEventPosition(event);
+    const ElementFromPoint = doc.elementFromPoint(x, y);
+    const Port = ElementFromPoint?.classList.contains('react-diagram__port')
+        ? ElementFromPoint
+        : PortDomNode;
+    if (Port) {
+        const portType = getPortType(Port);
+        const toNodeId = Port.getAttribute('data-nodeid');
+        const toPortId = Port.getAttribute('data-portid');
+        const connection = {
+            source: isTarget ? toNodeId : fromNodeId,
+            target: isTarget ? fromNodeId : toNodeId,
+            sourcePort: isTarget ? port?.portId || null : fromPortId,
+            targetPort: isTarget ? fromPortId : port?.portId || null,
+        };
+        result.connection = connection;
+        const isValid = (isTarget && portType === 'source') ||
+            (!isTarget && portType === 'target');
+        if (isValid) {
+            result.isValid = true;
+            result.endPort = {
+                nodeId: toNodeId,
+                portId: toPortId,
+                portType,
+            };
+        }
+    }
+    return result;
+};
+
+let connectionStartPort = null;
+const onPointerDown = ({ isAnchor = false, event, nodeId, portId, portType, domNode, autoPanOnConnect, connectionRadius, nodes, getTransform, cancelConnection, onConnectStart, onConnect, onConnectEnd, onEdgeUpdateEnd, panBy, updateConnection, }) => {
+    const doc = getHostForElement(event.target);
+    const containerBounds = domNode?.getBoundingClientRect();
+    const { x, y } = getEventPosition(event);
+    const clickedPort = doc?.elementFromPoint(x, y);
+    const clickedPortType = isAnchor ? portType : getPortType(clickedPort);
+    const allPort = getAllPort({
+        nodes,
+        nodeId,
+        portId,
+        portType,
+    });
+    let connectionPosition = getEventPosition(event, containerBounds);
+    let closestPort = null;
+    let isValid = false;
+    let connection = null;
+    let autoPanId = 0;
+    let autoPanStarted = false;
+    if (!containerBounds || !portType) {
+        return;
+    }
+    const autoPan = () => {
+        if (!autoPanOnConnect) {
+            return;
+        }
+        const [xMovement, yMovement] = calcAutoPanPosition(connectionPosition, containerBounds);
+        panBy({ x: xMovement, y: yMovement });
+        autoPanId = requestAnimationFrame(autoPan);
+    };
+    connectionStartPort = {
+        nodeId,
+        portId,
+        portType: clickedPortType,
+    };
+    updateConnection({
+        connectionPosition,
+        connectionStartPort,
+        connectionEndPort: null,
+    });
+    onConnectStart?.(event, { nodeId, portId, portType });
+    const onPointerMove = (event) => {
+        const transform = getTransform();
+        connectionPosition = getEventPosition(event, containerBounds);
+        closestPort = getClosestPort(pointToRendererPoint(connectionPosition, transform), connectionRadius, allPort);
+        if (!autoPanStarted) {
+            autoPan();
+            autoPanStarted = true;
+        }
+        const result = getConnection(event, closestPort, nodeId, portId, portType, doc);
+        isValid = result.isValid;
+        connection = result.connection;
+        updateConnection({
+            connectionPosition: closestPort && isValid
+                ? rendererPointToPoint(closestPort, transform)
+                : connectionPosition,
+            connectionStartPort,
+            connectionEndPort: result.endPort,
+        });
+    };
+    const onPointerUp = (event) => {
+        if (isValid && connection)
+            onConnect?.(connection);
+        onConnectEnd?.(event);
+        if (portType) {
+            onEdgeUpdateEnd?.(event);
+        }
+        cancelConnection();
+        cancelAnimationFrame(autoPanId);
+        isValid = false;
+        connection = null;
+        autoPanStarted = false;
+        doc.removeEventListener('mousemove', onPointerMove);
+        doc.removeEventListener('mouseup', onPointerUp);
+        doc.removeEventListener('touchmove', onPointerMove);
+        doc.removeEventListener('touchend', onPointerUp);
+    };
+    doc.addEventListener('mousemove', onPointerMove);
+    doc.addEventListener('mouseup', onPointerUp);
+    doc.addEventListener('touchmove', onPointerMove);
+    doc.addEventListener('touchend', onPointerUp);
+};
+const CosmosPort = {
+    onPointerDown,
+};
+
+const isParentSelected = (node, nodeInternals) => {
+    if (!node.parentNode) {
+        return false;
+    }
+    const parentNode = nodeInternals.get(node.parentNode);
+    if (!parentNode) {
+        return false;
+    }
+    if (parentNode.selected) {
+        return true;
+    }
+    return isParentSelected(parentNode, nodeInternals);
+};
+const hasSelector = (target, selector, domNode) => {
+    let current = target;
+    do {
+        if (current?.matches(selector))
+            return true;
+        if (current === domNode)
+            return false;
+        current = current.parentElement;
+    } while (current);
+    return false;
+};
+const hasChangedPosition = (beforePositions, currentPosition) => beforePositions.x !== currentPosition.x ||
+    beforePositions.y !== currentPosition.y;
+const getDragItems = (nodeInternals, nodesDraggable, mousePosition, nodeId) => {
+    const filteredNode = Array.from(nodeInternals.values()).filter((n) => {
+        const hasSize = n.width && n.height;
+        const isSelected = n.selected || n.id === nodeId;
+        const hasNoParent = !n.parentNode || !isParentSelected(n, nodeInternals);
+        const isDraggable = n.draggable || (nodesDraggable && typeof n.draggable === 'undefined');
+        return hasSize && isSelected && hasNoParent && isDraggable;
+    });
+    return filteredNode.map((n) => ({
+        id: n.id,
+        position: n.position || { x: 0, y: 0 },
+        positionAbsolute: n.positionAbsolute || { x: 0, y: 0 },
+        distance: {
+            x: mousePosition.x - (n.positionAbsolute?.x ?? 0),
+            y: mousePosition.y - (n.positionAbsolute?.y ?? 0),
+        },
+        extent: n.extent,
+        parentNode: n.parentNode,
+        width: n.width || 0,
+        height: n.height || 0,
+    }));
+};
+const getEventHandlerParams = ({ nodeId, dragItems, nodeInternals, }) => {
+    const extentedDragItems = dragItems.map((n) => {
+        const node = nodeInternals.get(n.id);
+        return {
+            ...node,
+            position: n.position,
+            positionAbsolute: n.positionAbsolute,
+        };
+    });
+    return [
+        nodeId
+            ? extentedDragItems.find((n) => n.id === nodeId)
+            : extentedDragItems[0],
+        extentedDragItems,
+    ];
+};
+
+const isDragItem = (node) => 'distance' in node;
+const CosmosDrag = ({ getStore, onNodeMouseDown, onDragStart, onDrag, onDragEnd, }) => {
+    let dragItems = [];
+    let containerBounds = null;
+    let mousePosition = { x: 0, y: 0 };
+    let lastPosition = { x: 0, y: 0 };
+    let dragEvent = null;
+    let autoPanStarted = false;
+    let autoPanId = 0;
+    let d3Selection = null;
+    const update = ({ domNode, nodeId, noDragClassName }) => {
+        const updateNodePosition = (pointerPositions, dragEnd = false) => (dragItem) => {
+            if (!isDragItem(dragItem))
+                return;
+            const { nodeInternals, nodeExtent, nodeOrigin, smoothStep, gridStep, } = getStore();
+            const { distance, width, height } = dragItem;
+            const { x, y, getStepPosition } = pointerPositions;
+            let nextPosition = {
+                x: x - distance.x,
+                y: y - distance.y,
+            };
+            if (gridStep && getStepPosition) {
+                const nodeSize = { width, height };
+                const stepPosition = getStepPosition({
+                    position: nextPosition,
+                    nodeSize,
+                });
+                if (!smoothStep || (smoothStep && dragEnd)) {
+                    nextPosition = stepPosition;
+                }
+            }
+            const updatedPosition = calcNextPosition(dragItem, nextPosition, nodeInternals, nodeExtent, nodeOrigin);
+            const hasChange = hasChangedPosition(dragItem.position, updatedPosition.position);
+            if (!hasChange)
+                return;
+            dragItem.position = updatedPosition.position;
+            dragItem.positionAbsolute = updatedPosition.positionAbsolute;
+        };
+        d3Selection = select(domNode);
+        const updateNodes = (pointerPosition) => {
+            const { nodeInternals, updateNodesPosition } = getStore();
+            const { x, y } = pointerPosition;
+            lastPosition = { x, y };
+            updateNodesPosition(dragItems, true, updateNodePosition(pointerPosition));
+            if (onDrag && dragEvent) {
+                const [currentNode, nodes] = getEventHandlerParams({
+                    nodeId,
+                    dragItems: dragItems,
+                    nodeInternals,
+                });
+                onDrag(dragEvent, dragItems, currentNode, nodes);
+            }
+        };
+        const autoPan = () => {
+            if (!containerBounds) {
+                return;
+            }
+            const [xMovement, yMovement] = calcAutoPanPosition(mousePosition, containerBounds);
+            if (xMovement !== 0 || yMovement !== 0) {
+                const { transform, panBy } = getStore();
+                lastPosition.x -= xMovement / transform[2];
+                lastPosition.y -= yMovement / transform[2];
+                updateNodes(lastPosition);
+                panBy({ x: xMovement, y: yMovement });
+            }
+            autoPanId = requestAnimationFrame(autoPan);
+        };
+        const startDrag = (event) => {
+            const { nodeInternals, nodesDraggable, domNode, transform, gridStep, centerStep, } = getStore();
+            if (nodeId) {
+                onNodeMouseDown?.(nodeId);
+            }
+            const pointerPosition = getPointerPosition(event.sourceEvent, {
+                transform,
+                gridStep,
+                centerStep,
+            });
+            dragItems = getDragItems(nodeInternals, nodesDraggable, pointerPosition, nodeId);
+            if (onDragStart && dragItems) {
+                const [currentNode, nodes] = getEventHandlerParams({
+                    nodeId,
+                    dragItems: dragItems,
+                    nodeInternals,
                 });
+                onDragStart?.(event.sourceEvent, dragItems, currentNode, nodes);
             }
+            containerBounds = domNode?.getBoundingClientRect() || null;
+            mousePosition = getEventPosition(event.sourceEvent, containerBounds);
+        };
+        const dragHandle = drag()
+            .on('start', (event) => {
+            startDrag(event);
         })
-            .map((node) => {
-            return {
-                id: node.id,
-                type: 'intersect',
-                intersected: true,
-            };
-        });
-        const intersectedDraggingNodes = intersectedDraggingNodeIds.map((id) => {
-            return {
-                id,
-                type: 'intersect',
-                intersected: true,
-            };
+            .on('drag', (event) => {
+            const { transform, gridStep, centerStep, autoPanOnNodeDrag, updateNodesIntersection, } = getStore();
+            const pointerPosition = getPointerPosition(event.sourceEvent, {
+                transform,
+                gridStep,
+                centerStep,
+            });
+            if (!autoPanStarted && autoPanOnNodeDrag) {
+                autoPanStarted = true;
+                autoPan();
+            }
+            const isChanged = hasChangedPosition(lastPosition, pointerPosition.getStepPosition());
+            if (isChanged && dragItems) {
+                dragEvent = event.sourceEvent;
+                mousePosition = getEventPosition(event.sourceEvent, containerBounds);
+                updateNodes(pointerPosition);
+                updateNodesIntersection();
+            }
+        })
+            .on('end', (event) => {
+            autoPanStarted = false;
+            cancelAnimationFrame(autoPanId);
+            if (dragItems) {
+                const { nodeInternals, transform, gridStep, centerStep, smoothStep, updateNodesPosition, updateNodesIntersection, } = getStore();
+                const isSmoothStep = !!gridStep && smoothStep;
+                if (isSmoothStep) {
+                    const pointerPosition = getPointerPosition(event.sourceEvent, {
+                        transform,
+                        gridStep,
+                        centerStep,
+                    });
+                    updateNodesPosition(dragItems, false, updateNodePosition(pointerPosition, true));
+                    updateNodesIntersection();
+                }
+                else {
+                    updateNodesPosition(dragItems, false);
+                }
+                if (onDragEnd) {
+                    const [currentNode, nodes] = getEventHandlerParams({
+                        nodeId,
+                        dragItems: dragItems,
+                        nodeInternals,
+                    });
+                    onDragEnd(event.sourceEvent, dragItems, currentNode, nodes);
+                }
+            }
+        })
+            .filter((event) => {
+            const target = event.target;
+            if (!domNode)
+                return false;
+            const isDraggable = !event.button &&
+                (!noDragClassName ||
+                    !hasSelector(target, `.${noDragClassName}`, domNode));
+            return isDraggable;
         });
-        const changes = [...intersectedNodes, ...intersectedDraggingNodes];
-        if (!deepEqual(changes, intersectionChanges.current)) {
-            const beforeChanges = resetIntersectedNodes(changes);
-            intersectionChanges.current = changes;
-            triggerNodeChanges([...changes, ...beforeChanges]);
+        d3Selection.call(dragHandle);
+    };
+    const destroy = () => {
+        d3Selection?.on('.drag', null);
+    };
+    return {
+        update,
+        destroy,
+    };
+};
+
+const transformToViewport = (transform) => {
+    const { x, y, k } = transform;
+    return {
+        x,
+        y,
+        zoom: k,
+    };
+};
+const viewportToTransform = ({ x, y, zoom }) => zoomIdentity.translate(x, y).scale(zoom);
+const isWrappedWithClass = (event, className) => event.target.closest(`.${className}`);
+const isViewChanged = (prevViewport, eventViewport) => {
+    const { x: prevX, y: prevY, zoom: prevZoom } = prevViewport;
+    const { x, y, k } = eventViewport;
+    return prevX !== x || prevY !== y || prevZoom !== k;
+};
+const getD3Transition = (selection, duration = 0) => typeof duration === 'number' && duration > 0
+    ? selection.transition().duration(duration)
+    : selection;
+
+const createPanZoomStartHandler = ({ zoomPanValues, onPanningChange, onPanZoomStart, }) => {
+    return (event) => {
+        if (event.sourceEvent?.internal) {
+            return;
         }
-    }, []);
-    return updateNodesIntersection;
+        const viewport = transformToViewport(event.transform);
+        // we need to remember it here, because it's always 0 in the "zoom" event
+        zoomPanValues.mouseButton = event.sourceEvent?.button || 0;
+        zoomPanValues.isZoomingOrPanning = true;
+        zoomPanValues.prevViewport = viewport;
+        if (event.sourceEvent?.type === 'mousedown') {
+            onPanningChange(true);
+        }
+        if (onPanZoomStart) {
+            onPanZoomStart?.(event.sourceEvent, viewport);
+        }
+    };
+};
+const createPanZoomHandler = ({ onPanZoom, onTransformChange, }) => {
+    return (event) => {
+        if (!event.sourceEvent?.sync) {
+            onTransformChange([
+                event.transform.x,
+                event.transform.y,
+                event.transform.k,
+            ]);
+        }
+        if (onPanZoom && !event.sourceEvent?.internal) {
+            onPanZoom?.(event.sourceEvent, transformToViewport(event.transform));
+        }
+    };
+};
+const createPanZoomEndHandler = ({ zoomPanValues, onPanningChange, onPanZoomEnd, }) => {
+    return (event) => {
+        if (event.sourceEvent?.internal) {
+            return;
+        }
+        zoomPanValues.isZoomingOrPanning = false;
+        onPanningChange(false);
+        if (onPanZoomEnd &&
+            isViewChanged(zoomPanValues.prevViewport, event.transform)) {
+            const viewport = transformToViewport(event.transform);
+            zoomPanValues.prevViewport = viewport;
+            clearTimeout(zoomPanValues.timerId);
+            zoomPanValues.timerId = setTimeout(() => {
+                onPanZoomEnd?.(event.sourceEvent, viewport);
+            }, 0);
+        }
+    };
+};
+function createZoomOnScrollHandler({ d3ZoomHandler, }) {
+    return function (event, d) {
+        event.preventDefault();
+        d3ZoomHandler.call(this, event, d);
+    };
 }
 
-const isDragItem = (node) => 'distance' in node;
-function useDrag({ nodeRef, nodeId, isSelectable, noDragClassName, }) {
-    const store = useStoreApi();
-    const dragItems = useRef([]);
-    const containerBounds = useRef(null);
-    const mousePosition = useRef({ x: 0, y: 0 });
-    const lastPosition = useRef({ x: 0, y: 0 });
-    const dragEvent = useRef(null);
-    const autoPanStarted = useRef(false);
-    const autoPanId = useRef(0);
-    const [dragging, setDragging] = useState(false);
-    const getPointerPosition = useGetPointerPosition();
-    const updateNodesIntersection = useUpdateIntersectionNodes();
-    const updateNodePosition = (pointerPositions, dragEnd = false) => (dragItem) => {
-        if (!isDragItem(dragItem))
-            return;
-        const { nodeInternals, nodeExtent, nodeOrigin, smoothStep, gridStep, onError, } = store.getState();
-        const { distance, width, height } = dragItem;
-        const { x, y, getStepPosition } = pointerPositions;
-        let nextPosition = {
-            x: x - distance.x,
-            y: y - distance.y,
+const CosmosPanZoom = ({ domNode, panning, 
+// selection,
+minZoom, maxZoom, viewport, translateExtent, 
+// children,
+onTransformChange, onPanningChange, onPanZoom, onPanZoomStart, onPanZoomEnd, }) => {
+    const zoomPanValues = {
+        isZoomingOrPanning: false,
+        timerId: undefined,
+        prevViewport: { x: 0, y: 0, zoom: 0 },
+        // usedRightMouseButton: false,
+        mouseButton: 0,
+        // panScrollTimeout: undefined,
+        isPanScrolling: false,
+    };
+    const bbox = domNode.getBoundingClientRect();
+    const d3ZoomInstance = zoom()
+        .scaleExtent([minZoom, maxZoom])
+        .translateExtent(translateExtent);
+    const d3Selection = select(domNode).call(d3ZoomInstance);
+    const d3ZoomHandler = d3Selection.on('wheel.zoom');
+    const setTransform = (transform, options) => {
+        if (d3Selection) {
+            d3ZoomInstance?.transform(getD3Transition(d3Selection, options?.duration), transform);
+        }
+    };
+    const setViewportConstrained = (viewport, extent, translateExtent) => {
+        const updatedTransform = viewportToTransform(viewport);
+        const constrainedTransform = d3ZoomInstance.constrain()(updatedTransform, extent, translateExtent);
+        if (constrainedTransform) {
+            setTransform(constrainedTransform);
+        }
+        return constrainedTransform;
+    };
+    setViewportConstrained({
+        x: viewport.x,
+        y: viewport.y,
+        zoom: clamp(viewport.zoom, minZoom, maxZoom),
+    }, [
+        [0, 0],
+        [bbox.width, bbox.height],
+    ], translateExtent);
+    const destroy = () => {
+        d3ZoomInstance.on('zoom', null);
+        // d3ZoomInstance.on('start', null);
+        // d3ZoomInstance.on('end', null);
+        // d3Selection.on('wheel.zoom', null);
+    };
+    const update = ({ noPanClassName, selection }) => {
+        if (selection && !zoomPanValues.isZoomingOrPanning) {
+            destroy();
+        }
+        const filter = (event) => {
+            if (selection) {
+                return false;
+            }
+            if (isWrappedWithClass(event, noPanClassName) &&
+                event.type !== 'wheel') {
+                return false;
+            }
+            if (!panning)
+                return false;
+            const buttonAllowed = !event.button || event.button <= 1;
+            if (!buttonAllowed)
+                return false;
+            return true;
         };
-        if (gridStep && getStepPosition) {
-            const nodeSize = { width, height };
-            const stepPosition = getStepPosition({
-                position: nextPosition,
-                nodeSize,
+        const wheelZoomHandler = createZoomOnScrollHandler({ d3ZoomHandler });
+        d3Selection.on('wheel.zoom', wheelZoomHandler, { passive: false });
+        if (!selection) {
+            const panZoomStartHandler = createPanZoomStartHandler({
+                zoomPanValues,
+                onPanningChange,
+                onPanZoomStart,
             });
-            if (!smoothStep || (smoothStep && dragEnd)) {
-                nextPosition = stepPosition;
-            }
+            const panZoomHandler = createPanZoomHandler({
+                onPanZoom,
+                onTransformChange,
+            });
+            const panZoomEndHandler = createPanZoomEndHandler({
+                zoomPanValues,
+                onPanningChange,
+                onPanZoomEnd,
+            });
+            d3ZoomInstance.on('start', panZoomStartHandler);
+            d3ZoomInstance.on('zoom', panZoomHandler);
+            d3ZoomInstance.on('end', panZoomEndHandler);
         }
-        const updatedPosition = calcNextPosition(dragItem, nextPosition, nodeInternals, nodeExtent, nodeOrigin, onError);
-        const hasChange = hasChangedPosition(dragItem.position, updatedPosition.position);
-        if (!hasChange)
-            return;
-        dragItem.position = updatedPosition.position;
-        dragItem.positionAbsolute = updatedPosition.positionAbsolute;
+        d3ZoomInstance.filter(filter);
+    };
+    const getViewport = () => {
+        const transform = d3Selection
+            ? zoomTransform(d3Selection.node())
+            : { x: 0, y: 0, k: 1 };
+        return { x: transform.x, y: transform.y, zoom: transform.k };
+    };
+    return {
+        update,
+        destroy,
+        getViewport,
+        setViewportConstrained,
+    };
+};
+
+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(() => {
-        if (nodeRef?.current) {
-            const selection = select(nodeRef.current);
-            const updateNodes = (pointerPosition) => {
-                const { nodeInternals, onNodeDrag, updateNodesPosition } = store.getState();
-                const { x, y } = pointerPosition;
-                lastPosition.current = { x, y };
-                updateNodesPosition(dragItems.current, true, updateNodePosition(pointerPosition));
+        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);
-                if (onNodeDrag && dragEvent.current) {
-                    const [currentNode, nodes] = getEventHandlerParams({
-                        nodeId,
-                        dragItems: dragItems.current,
-                        nodeInternals,
-                    });
-                    onNodeDrag(dragEvent.current, currentNode, nodes);
-                }
-            };
-            const autoPan = () => {
-                if (!containerBounds.current) {
-                    return;
-                }
-                const [xMovement, yMovement] = calcAutoPanPosition(mousePosition.current, containerBounds.current);
-                if (xMovement !== 0 || yMovement !== 0) {
-                    const { transform, panBy } = store.getState();
-                    lastPosition.current.x -= xMovement / transform[2];
-                    lastPosition.current.y -= yMovement / transform[2];
-                    updateNodes(lastPosition.current);
-                    panBy({ x: xMovement, y: yMovement });
-                }
-                autoPanId.current = requestAnimationFrame(autoPan);
-            };
-            const dragHandle = drag()
-                .on('start', (e) => {
-                const { nodeInternals, nodesDraggable, domNode, onNodeDragStart, } = store.getState();
-                if (nodeId) {
-                    handleNodeClick({
-                        id: nodeId,
-                        store,
-                        nodeRef: nodeRef,
-                        isSelectable,
-                    });
-                }
-                const pointerPosition = getPointerPosition(e);
-                dragItems.current = getDragItems(nodeInternals, nodesDraggable, pointerPosition, nodeId);
-                if (onNodeDragStart && dragItems.current) {
-                    const [currentNode, nodes] = getEventHandlerParams({
-                        nodeId,
-                        dragItems: dragItems.current,
-                        nodeInternals,
-                    });
-                    onNodeDragStart(e.sourceEvent, currentNode, nodes);
-                }
-                containerBounds.current =
-                    domNode?.getBoundingClientRect() || null;
-                mousePosition.current = getEventPosition(e.sourceEvent, containerBounds.current);
-            })
-                .on('drag', (e) => {
-                const pointerPosition = getPointerPosition(e);
-                const { autoPanOnNodeDrag } = store.getState();
-                if (!autoPanStarted.current && autoPanOnNodeDrag) {
-                    autoPanStarted.current = true;
-                    autoPan();
-                }
-                const isChanged = hasChangedPosition(lastPosition.current, pointerPosition.getStepPosition());
-                if (isChanged && dragItems.current) {
-                    dragEvent.current = e.sourceEvent;
-                    mousePosition.current = getEventPosition(e.sourceEvent, containerBounds.current);
-                    updateNodes(pointerPosition);
-                    updateNodesIntersection(dragItems);
-                }
-            })
-                .on('end', (event) => {
+            },
+            onDragEnd: (e, _, node, nodes) => {
+                const { onNodeDragEnd } = store.getState();
+                onNodeDragEnd?.(e, node, nodes);
                 setDragging(false);
-                autoPanStarted.current = false;
-                cancelAnimationFrame(autoPanId.current);
-                if (dragItems.current) {
-                    const { nodeInternals, smoothStep, gridStep, updateNodesPosition, onNodeDragEnd, } = store.getState();
-                    const isSmoothStep = !!gridStep && smoothStep;
-                    if (isSmoothStep) {
-                        const pointerPosition = getPointerPosition(event);
-                        updateNodesPosition(dragItems.current, false, updateNodePosition(pointerPosition, true));
-                        updateNodesIntersection(dragItems);
-                    }
-                    else {
-                        updateNodesPosition(dragItems.current, false);
-                    }
-                    if (onNodeDragEnd) {
-                        const [currentNode, nodes] = getEventHandlerParams({
-                            nodeId,
-                            dragItems: dragItems.current,
-                            nodeInternals,
-                        });
-                        onNodeDragEnd(event.sourceEvent, currentNode, nodes);
-                    }
-                }
-            })
-                .filter((event) => {
-                const target = event.target;
-                const isDraggable = !event.button &&
-                    (!noDragClassName ||
-                        !hasSelector(target, `.${noDragClassName}`, nodeRef));
-                return isDraggable;
+            },
+        });
+    }, []);
+    useEffect(() => {
+        if (disabled) {
+            cosmosDrag.current?.destroy();
+        }
+        else if (nodeRef.current) {
+            cosmosDrag.current?.update({
+                noDragClassName,
+                domNode: nodeRef.current,
+                isSelectable,
+                nodeId,
             });
-            selection.call(dragHandle);
             return () => {
-                selection.on('.drag', null);
+                cosmosDrag.current?.destroy();
             };
         }
-    }, [
-        store,
-        nodeRef,
-        nodeId,
-        isSelectable,
-        noDragClassName,
-        getPointerPosition,
-    ]);
+    }, [noDragClassName, disabled, isSelectable, nodeRef, nodeId]);
     return dragging;
-}
+};
 
 function SelectionBox({ rect, transform }) {
     const nodeRef = useRef(null);
@@ -923,7 +1409,7 @@ const handleParentExpand = (res, updateItem) => {
             extendHeight > 0 ||
             updateItem.position.x < 0 ||
             updateItem.position.y < 0) {
-            parent.style = { ...parent.style } || {};
+            parent.style = { ...parent.style };
             parent.style.width = parent.style.width ?? parent.width;
             parent.style.height = parent.style.height ?? parent.height;
             if (extendWidth > 0) {
@@ -1056,7 +1542,7 @@ const selector$6 = (s) => {
         selectionBoxActive,
     };
 };
-function DragSelection({ children, dragSelectionKeyPressed, }) {
+function DragSelection({ dragSelectionKeyPressed, children, }) {
     const store = useStoreApi();
     const dragSelection = useRef(null);
     const prevSelectedNodesCount = useRef(0);
@@ -1074,6 +1560,9 @@ function DragSelection({ children, dragSelectionKeyPressed, }) {
     });
     const [dragBoxActive, setDragBoxActive] = useState(false);
     const resetDragBox = () => {
+        store.setState({
+            selectionBoxActive: prevSelectedNodesCount.current > 0,
+        });
         setDragBoxStartPosition({
             x: 0,
             y: 0,
@@ -1105,7 +1594,7 @@ function DragSelection({ children, dragSelectionKeyPressed, }) {
             !dragSelectionKeyPressed) {
             return;
         }
-        const { x, y } = getEventPosition(event, containerBounds.current);
+        const { x, y } = getEventPosition(event.nativeEvent, containerBounds.current);
         resetSelectedElements();
         setDragBoxRect({
             width: 0,
@@ -1123,16 +1612,16 @@ function DragSelection({ children, dragSelectionKeyPressed, }) {
         const hasDragBoxStartPosition = dragBoxStartPosition.x > 0 && dragBoxStartPosition.y > 0;
         if (
         // !hasDragBoxPosition ||
+        // !dragSelectionKeyPressed ||
         !hasDragBoxStartPosition ||
-            !containerBounds.current ||
-            !dragSelectionKeyPressed) {
+            !containerBounds.current) {
             return;
         }
         store.setState({
             selectionBoxActive: false,
         });
         setDragBoxActive(true);
-        const mousePos = getEventPosition(event, containerBounds.current);
+        const mousePos = getEventPosition(event.nativeEvent, containerBounds.current);
         const startX = dragBoxStartPosition.x ?? 0;
         const startY = dragBoxStartPosition.y ?? 0;
         const rect = {
@@ -1157,35 +1646,22 @@ function DragSelection({ children, dragSelectionKeyPressed, }) {
         if (event.button !== 0) {
             return;
         }
-        store.setState({
-            selectionBoxActive: prevSelectedNodesCount.current > 0,
-        });
         resetDragBox();
     };
     const onMouseLeave = () => {
-        store.setState({
-            selectionBoxActive: prevSelectedNodesCount.current > 0,
-        });
         resetDragBox();
     };
-    const isPossibleDragSelection = elementsSelectable && dragSelectionKeyPressed;
-    return (jsxs("div", { ref: dragSelection, className: "react-diagram__container react-diagram__drag-selection", onClick: onClick, onMouseDown: isPossibleDragSelection ? onMouseDown : undefined, onMouseMove: isPossibleDragSelection ? onMouseMove : undefined, onMouseUp: elementsSelectable && dragBoxRect ? onMouseUp : undefined, onMouseLeave: isPossibleDragSelection ? onMouseLeave : undefined, children: [children, dragBoxActive && jsx(DragBox, { rect: dragBoxRect }), selectionBoxActive && (jsx(SelectionBox$1, { rect: selectionBoxRect, transform: transformString }))] }));
+    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 selector$5 = (s) => {
-    const { minZoom, maxZoom, translateExtent } = s;
-    return {
-        minZoom,
-        maxZoom,
-        translateExtent,
-    };
-};
-function DiagramRenderer({ children, multiSelectionKeyCode, noPanClassName, panning, defaultViewport, onMove, onMoveStart, onMoveEnd, }) {
-    const { minZoom, maxZoom, translateExtent } = useStore(selector$5);
+const useDragSelectionKeyPress = (dragSelectionKeyCode) => {
     const [dragSelectionKeyPressed, setDragSelectionKeyPressed] = useState(false);
-    useGlobalKeyHandler(multiSelectionKeyCode);
+    // useKeyPress
     const handleKeyDown = (e) => {
-        if (e.key === 'Shift') {
+        if (e.key === dragSelectionKeyCode) {
             setDragSelectionKeyPressed(true);
         }
     };
@@ -1200,7 +1676,25 @@ function DiagramRenderer({ children, multiSelectionKeyCode, noPanClassName, pann
             document.removeEventListener('keyup', handleKeyUp);
         };
     }, []);
-    return (jsx(Pane, { noPanClassName: noPanClassName, panning: panning && !dragSelectionKeyPressed, minZoom: minZoom, maxZoom: maxZoom, translateExtent: translateExtent, defaultViewport: defaultViewport, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, children: jsx(DragSelection, { dragSelectionKeyPressed: dragSelectionKeyPressed, children: jsx(Viewport, { children: children }) }) }));
+    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);
@@ -1210,19 +1704,6 @@ function useVisibleNodes() {
     return nodes;
 }
 
-var Position;
-(function (Position) {
-    Position["Left"] = "left";
-    Position["Top"] = "top";
-    Position["Right"] = "right";
-    Position["Bottom"] = "bottom";
-})(Position || (Position = {}));
-
-var MarkerType;
-(function (MarkerType) {
-    MarkerType["Arrow"] = "arrow";
-})(MarkerType || (MarkerType = {}));
-
 const selector$4 = (s) => ({
     nodesDraggable: s.nodesDraggable,
     elementsSelectable: s.elementsSelectable,
@@ -1270,8 +1751,8 @@ function NodeRenderer({ nodeTypes, onNodeClick, onNodeMouseEnter, onNodeMouseMov
                 id,
                 className,
                 style,
-                width,
-                height,
+                width: nodeType === 'default' && width ? 120 : undefined,
+                height: nodeType === 'default' && height ? 60 : undefined,
                 ariaLabel,
             };
             const events = {
@@ -1294,10 +1775,10 @@ function NodeRenderer({ nodeTypes, onNodeClick, onNodeMouseEnter, onNodeMouseMov
                 isSelectable,
                 isDraggable,
                 hidden,
-                isParent: !!node[internalsSymbol]?.isParent,
+                isParent: !!node[internalsSymbol$1]?.isParent,
                 initialized: !!node.width && !!node.height,
             };
-            return (jsx(NodeComponent, { ...props, ...elProps, ...position, ...events, ...booleanProps, zIndex: node[internalsSymbol]?.z ?? 0, type: nodeType, data: data, resizeObserver: resizeObserver }, id));
+            return (jsx(NodeComponent, { ...props, ...elProps, ...position, ...events, ...booleanProps, zIndex: node[internalsSymbol$1]?.z ?? 0, type: nodeType, data: data, resizeObserver: resizeObserver }, id));
         }) }));
 }
 NodeRenderer.displayName = 'NodeRenderer';
@@ -1371,178 +1852,34 @@ function EdgeLabel({ x, y, label, labelStyle = {}, labelShowBg = true, labelBgSt
             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 getEdgeCenter = ({ sourceX, sourceY, targetX, targetY, }) => {
-    const xOffset = Math.abs(targetX - sourceX) / 2;
-    const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
-    const yOffset = Math.abs(targetY - sourceY) / 2;
-    const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
-    return [centerX, centerY, xOffset, yOffset];
-};
-const getBezierEdgeCenter = ({ sourceX, sourceY, targetX, targetY, sourceControlX, sourceControlY, targetControlX, targetControlY, }) => {
-    // cubic bezier t=0.5 mid point, not the actual mid point, but easy to calculate
-    // https://stackoverflow.com/questions/67516101/how-to-find-distance-mid-point-of-bezier-curve
-    const midPoint = 0.5;
-    const point = 0.125;
-    const controlPoint = midPoint - point;
-    const centerX = sourceX * point +
-        sourceControlX * controlPoint +
-        targetControlX * controlPoint +
-        targetX * point;
-    const centerY = sourceY * point +
-        sourceControlY * controlPoint +
-        targetControlY * controlPoint +
-        targetY * point;
-    const offsetX = Math.abs(centerX - sourceX);
-    const offsetY = Math.abs(centerY - sourceY);
-    return [centerX, centerY, offsetX, offsetY];
-};
-
-const 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 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 HANDLE_DIRECTIONS = {
-    [Position.Left]: { x: -1, y: 0 },
-    [Position.Right]: { x: 1, y: 0 },
-    [Position.Top]: { x: 0, y: -1 },
-    [Position.Bottom]: { x: 0, y: 1 },
-};
-const getDirection = ({ source, sourcePosition = Position.Bottom, target, }) => {
-    if (sourcePosition === Position.Left || sourcePosition === Position.Right) {
-        // when source Node position is on the left side of a Port of target Node => x = 1
-        return source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 };
-    }
-    //when source Node position is above of a Port of target Node => y = 1
-    return source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 };
-};
-const distance = (a, b) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2));
-function getPoints({ source, sourcePosition = Position.Bottom, target, targetPosition = Position.Top, center, offset, }) {
-    const sourceDir = HANDLE_DIRECTIONS[sourcePosition];
-    const targetDir = HANDLE_DIRECTIONS[targetPosition];
-    const sourceGapped = {
-        x: source.x + sourceDir.x * offset,
-        y: source.y + sourceDir.y * offset,
-    };
-    const targetGapped = {
-        x: target.x + targetDir.x * offset,
-        y: target.y + targetDir.y * offset,
-    };
-    const direction = getDirection({
-        source: sourceGapped,
-        sourcePosition,
-        target: targetGapped,
-    });
-    const dirAccessor = direction.x !== 0 ? 'x' : 'y';
-    const currentDirection = direction[dirAccessor];
-    let points = [];
-    let centerX = 0, centerY = 0;
-    const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getEdgeCenter({
-        sourceX: source.x,
-        sourceY: source.y,
-        targetX: target.x,
-        targetY: target.y,
-    });
-    const isSourceAndTargetPositionsParallel = sourceDir[dirAccessor] * targetDir[dirAccessor] === -1;
-    if (isSourceAndTargetPositionsParallel) {
-        centerX = center.x || defaultCenterX;
-        centerY = center.y || defaultCenterY;
-        const verticalSplit = [
-            { x: centerX, y: sourceGapped.y },
-            { x: centerX, y: targetGapped.y },
-        ];
-        const horizontalSplit = [
-            { x: sourceGapped.x, y: centerY },
-            { x: targetGapped.x, y: centerY },
-        ];
-        const centerLineIsBent = sourceDir[dirAccessor] !== currentDirection;
-        if (centerLineIsBent) {
-            points = dirAccessor === 'x' ? horizontalSplit : verticalSplit;
-        }
-        else {
-            points = dirAccessor === 'x' ? verticalSplit : horizontalSplit;
-        }
-    }
-    const pathPoints = [source, sourceGapped, ...points, targetGapped, target];
-    return [pathPoints, centerX, centerY, defaultOffsetX, defaultOffsetY];
-}
-function getBend(a, b, c, size) {
-    const bendSize = Math.min(distance(a, b) / 2, distance(b, c) / 2, size);
-    const { x, y } = b;
-    // no bend
-    if ((a.x === x && x === c.x) || (a.y === y && y === c.y)) {
-        return `L${x} ${y}`;
-    }
-    // first segment is horizontal
-    if (a.y === y) {
-        const xDir = a.x < c.x ? -1 : 1;
-        const yDir = a.y < c.y ? 1 : -1;
-        return `L ${x + bendSize * xDir},${y}Q ${x},${y} ${x},${y + bendSize * yDir}`;
-    }
-    const xDir = a.x < c.x ? 1 : -1;
-    const yDir = a.y < c.y ? -1 : 1;
-    return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;
-}
-function getStepPath({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, borderRadius = 5, centerX, centerY, offset = 20, }) {
-    const [points, labelX, labelY, offsetX, offsetY] = getPoints({
-        source: { x: sourceX, y: sourceY },
-        sourcePosition,
-        target: { x: targetX, y: targetY },
-        targetPosition,
-        center: { x: centerX, y: centerY },
-        offset,
-    });
-    const path = points.reduce((res, p, i) => {
-        let segment = '';
-        if (i > 0 && i < points.length - 1) {
-            segment = getBend(points[i - 1], p, points[i + 1], borderRadius);
-        }
-        else {
-            segment = `${i === 0 ? 'M' : 'L'}${p.x} ${p.y}`;
+                width: textBbox.width,
+                height: textBbox.height,
+            });
         }
-        res += segment;
-        return res;
-    }, '');
-    return [path, labelX, labelY, offsetX, offsetY];
+    }, [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,
@@ -1558,59 +1895,6 @@ const StepEdge = memo(({ sourceX, sourceY, targetX, targetY, label, labelStyle,
 });
 StepEdge.displayName = 'StepEdge';
 
-const calculateControlOffset = (distance, curvature) => {
-    if (distance >= 0) {
-        return 0.5 * distance;
-    }
-    return curvature * 25 * Math.sqrt(-distance);
-};
-const getControlWithCurvature = ({ pos, x1, y1, x2, y2, c, }) => {
-    switch (pos) {
-        case Position.Left:
-            return [x1 - calculateControlOffset(x1 - x2, c), y1];
-        case Position.Right:
-            return [x1 + calculateControlOffset(x2 - x1, c), y1];
-        case Position.Top:
-            return [x1, y1 - calculateControlOffset(y1 - y2, c)];
-        case Position.Bottom:
-            return [x1, y1 + calculateControlOffset(y2 - y1, c)];
-    }
-};
-const getBezierPath = ({ sourceX, sourceY, sourcePosition = Position.Bottom, targetX, targetY, targetPosition = Position.Top, curvature = 0.25, }) => {
-    const [sourceControlX, sourceControlY] = getControlWithCurvature({
-        pos: sourcePosition,
-        x1: sourceX,
-        y1: sourceY,
-        x2: targetX,
-        y2: targetY,
-        c: curvature,
-    });
-    const [targetControlX, targetControlY] = getControlWithCurvature({
-        pos: targetPosition,
-        x1: targetX,
-        y1: targetY,
-        x2: sourceX,
-        y2: sourceY,
-        c: curvature,
-    });
-    const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
-        sourceX,
-        sourceY,
-        targetX,
-        targetY,
-        sourceControlX,
-        sourceControlY,
-        targetControlX,
-        targetControlY,
-    });
-    return [
-        `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
-        labelX,
-        labelY,
-        offsetX,
-        offsetY,
-    ];
-};
 const 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,
@@ -1628,171 +1912,6 @@ BezierEdge.displayName = 'BezierEdge';
 const ARIA_NODE_DESC_KEY = 'react-diagram__node-desc';
 const ARIA_EDGE_DESC_KEY = 'react-diagram__edge-desc';
 
-const getHostForElement = (element) => element.getRootNode?.() || window?.document;
-const getPortType = (PortDomNode) => {
-    if (PortDomNode?.classList.contains('target')) {
-        return 'target';
-    }
-    else if (PortDomNode?.classList.contains('source')) {
-        return 'source';
-    }
-    return null;
-};
-const getConnection = (event, port, fromNodeId, fromType, doc) => {
-    const isTarget = fromType === 'target';
-    const result = {
-        isValid: false,
-        connection: {
-            source: null,
-            target: null,
-        },
-    };
-    const PortDomNode = doc.querySelector(`.react-diagram__port[data-id="${port?.nodeId}-${port?.type}"]`);
-    const { x, y } = getEventPosition(event);
-    const ElementFromPoint = doc.elementFromPoint(x, y);
-    const Port = ElementFromPoint?.classList.contains('react-diagram__port')
-        ? ElementFromPoint
-        : PortDomNode;
-    if (Port) {
-        const portType = getPortType(Port);
-        const toNodeId = Port.getAttribute('data-nodeid');
-        const connection = {
-            source: isTarget ? toNodeId : fromNodeId,
-            target: isTarget ? fromNodeId : toNodeId,
-        };
-        result.connection = connection;
-        const isValid = (isTarget && portType === 'source') ||
-            (!isTarget && portType === 'target');
-        if (isValid) {
-            result.isValid = true;
-        }
-    }
-    return result;
-};
-const getPorts = (node, portBounds, type, currentPort) => (portBounds[type] || []).reduce((res, h) => {
-    if (`${node.id}-${type}` !== currentPort) {
-        res.push({
-            type,
-            nodeId: node.id,
-            x: (node.positionAbsolute?.x ?? 0) + h.x + h.width / 2,
-            y: (node.positionAbsolute?.y ?? 0) + h.y + h.height / 2,
-        });
-    }
-    return res;
-}, []);
-const getAllPort = ({ nodes, nodeId, portType }) => nodes.reduce((res, node) => {
-    if (node[internalsSymbol]) {
-        const { portBounds } = node[internalsSymbol];
-        let sourcePorts = [];
-        let targetPorts = [];
-        if (portBounds) {
-            sourcePorts = getPorts(node, portBounds, 'source', `${nodeId}-${portType}`);
-            targetPorts = getPorts(node, portBounds, 'target', `${nodeId}-${portType}`);
-        }
-        res.push(...sourcePorts, ...targetPorts);
-    }
-    return res;
-}, []);
-const getClosestPort = (pos, connectionRadius, ports) => {
-    let closestPort = null;
-    let minDistance = Infinity;
-    ports.forEach((port) => {
-        const distance = Math.sqrt(Math.pow(port.x - pos.x, 2) + Math.pow(port.y - pos.y, 2));
-        if (distance <= connectionRadius && distance < minDistance) {
-            minDistance = distance;
-            closestPort = port;
-        }
-    });
-    return closestPort;
-};
-const pointToRendererPoint = ({ x, y }, [tx, ty, tScale]) => {
-    const position = {
-        x: (x - tx) / tScale,
-        y: (y - ty) / tScale,
-    };
-    return position;
-};
-const rendererPointToPoint = ({ x, y }, [tx, ty, tScale]) => {
-    return {
-        x: x * tScale + tx,
-        y: y * tScale + ty,
-    };
-};
-const handlePointerDown = ({ isAnchor = false, event, nodeId, portType, getState, setState, onConnect, onEdgeUpdateEnd, }) => {
-    const doc = getHostForElement(event.target);
-    const { domNode, autoPanOnConnect, connectionRadius, getNodes, cancelConnection, onConnectStart, onConnectEnd, panBy, } = getState();
-    const containerBounds = domNode?.getBoundingClientRect();
-    const { x, y } = getEventPosition(event);
-    const clickedPort = doc?.elementFromPoint(x, y);
-    const clickedPortType = isAnchor ? portType : getPortType(clickedPort);
-    const allPort = getAllPort({
-        nodes: getNodes(),
-        nodeId,
-        portType,
-    });
-    let connectionPosition = getEventPosition(event, containerBounds);
-    let closestPort = null;
-    let isValid = false;
-    let connection = null;
-    let autoPanId = 0;
-    let autoPanStarted = false;
-    if (!containerBounds || !portType) {
-        return;
-    }
-    const autoPan = () => {
-        if (!autoPanOnConnect) {
-            return;
-        }
-        const [xMovement, yMovement] = calcAutoPanPosition(connectionPosition, containerBounds);
-        panBy({ x: xMovement, y: yMovement });
-        autoPanId = requestAnimationFrame(autoPan);
-    };
-    setState({
-        connectionPosition,
-        connectionNodeId: nodeId,
-        connectionPortType: clickedPortType,
-    });
-    onConnectStart?.(event, { nodeId, portType });
-    const onPointerMove = (event) => {
-        const { transform } = getState();
-        connectionPosition = getEventPosition(event, containerBounds);
-        closestPort = getClosestPort(pointToRendererPoint(connectionPosition, transform), connectionRadius, allPort);
-        if (!autoPanStarted) {
-            autoPan();
-            autoPanStarted = true;
-        }
-        const result = getConnection(event, closestPort, nodeId, portType, doc);
-        isValid = result.isValid;
-        connection = result.connection;
-        setState({
-            connectionPosition: closestPort && isValid
-                ? rendererPointToPoint(closestPort, transform)
-                : connectionPosition,
-        });
-    };
-    const onPointerUp = (event) => {
-        if (isValid && connection)
-            onConnect?.(connection);
-        onConnectEnd?.(event);
-        if (portType) {
-            onEdgeUpdateEnd?.(event);
-        }
-        cancelConnection();
-        cancelAnimationFrame(autoPanId);
-        isValid = false;
-        connection = null;
-        autoPanStarted = false;
-        doc.removeEventListener('mousemove', onPointerMove);
-        doc.removeEventListener('mouseup', onPointerUp);
-        doc.removeEventListener('touchmove', onPointerMove);
-        doc.removeEventListener('touchend', onPointerUp);
-    };
-    doc.addEventListener('mousemove', onPointerMove);
-    doc.addEventListener('mouseup', onPointerUp);
-    doc.addEventListener('touchmove', onPointerMove);
-    doc.addEventListener('touchend', onPointerUp);
-};
-
 const portPositionX = (x, shift, position) => {
     if (position === Position.Left)
         return x - shift;
@@ -1874,9 +1993,10 @@ const wrapEdge = (EdgeComponent) => {
             if (event.button !== 0) {
                 return;
             }
-            const { edges } = store.getState();
+            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);
@@ -1884,15 +2004,24 @@ const wrapEdge = (EdgeComponent) => {
                 setUpdating(false);
                 onEdgeUpdateEnd?.(evt, edge, fromPortType);
             };
-            handlePointerDown({
+            CosmosPort.onPointerDown({
                 isAnchor: true,
-                event,
+                event: event.nativeEvent,
                 nodeId,
+                portId,
                 portType: fromPortType,
-                getState: store.getState,
-                setState: store.setState,
-                onConnect: onConnectEdge,
+                domNode,
+                autoPanOnConnect,
+                connectionRadius,
+                nodes: getNodes(),
                 onEdgeUpdateEnd: handleEdgeUpdateEnd,
+                cancelConnection,
+                updateConnection,
+                onConnect: onConnectEdge,
+                onConnectStart,
+                onConnectEnd,
+                panBy,
+                getTransform: () => transform,
             });
         };
         const onEdgeClick = (event) => {
@@ -2016,7 +2145,7 @@ const getEdgePositions = (sourceNodeRect, sourcePort, sourcePosition, targetNode
     };
 };
 function getNodeData(node) {
-    const portBounds = node?.[internalsSymbol]?.portBounds || null;
+    const portBounds = node?.[internalsSymbol$1]?.portBounds || null;
     const isValid = portBounds &&
         node?.width &&
         node?.height &&
@@ -2123,17 +2252,19 @@ const oppositePosition = {
     [Position.Bottom]: Position.Top,
 };
 function ConnectionPath({ nodeId, portType, edge, Component, EdgeWrapper, }) {
-    const { fromNode, toX, toY } = useStore(useCallback((s) => ({
+    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]?.portBounds;
+    const fromPortBounds = fromNode?.[internalsSymbol$1]?.portBounds;
     const portBounds = fromPortBounds?.[portType];
     if (!fromNode || !portBounds) {
         return null;
     }
-    const fromPort = portBounds[0];
+    const fromPort = portBounds.find((bound) => bound.id === startPort?.portId) ||
+        portBounds[0];
     const fromPortX = fromPort
         ? fromPort.x + fromPort.width / 2
         : (fromNode.width ?? 0) / 2;
@@ -2160,11 +2291,13 @@ ConnectionPath.displayName = 'ConnectionPath';
 
 const selector$2 = (s) => ({
     edges: s.edges,
-    nodeId: s.connectionNodeId,
-    portType: s.connectionPortType,
+    startPort: s.connectionStartPort,
 });
 function ConnectionLineRenderer({ containerStyle, edgeTypes, component, }) {
-    const { nodeId, portType, edges } = useStore(selector$2, shallow);
+    const { startPort, edges } = useStore(selector$2, shallow);
+    if (!startPort)
+        return null;
+    const { nodeId, portType } = startPort;
     const isValid = !!(nodeId && portType);
     if (!isValid) {
         return null;
@@ -2178,18 +2311,21 @@ function ConnectionLineRenderer({ containerStyle, edgeTypes, component, }) {
 
 function DiagramView({ rfId, 
 // DiagramRenderer props
-noPanClassName, panning, defaultViewport, multiSelectionKeyCode, onMove, onMoveStart, onMoveEnd, 
+noPanClassName, panning, defaultViewport, multiSelectionKeyCode, dragSelectionKeyCode, onMove, onMoveStart, onMoveEnd, 
 // NodeRenderer props
-onlyRenderVisibleElements, disableKeyboardA11y, noDragClassName, nodeOrigin, nodeTypes, onNodeClick, onNodeDoubleClick, onNodeContextMenu, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, 
+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, 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, 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 })] }));
+    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 {
@@ -2216,15 +2352,17 @@ function useDirectStoreUpdater(key, value, setState) {
         }
     }, [value]);
 }
-const StoreUpdater = ({ nodes, onNodesChange, onNodeDrag, onNodeDragStart, onNodeDragEnd, edges, onEdgesChange, smoothStep, centerStep, gridStep, elevateNodesOnSelect, nodesDraggable, autoPanOnNodeDrag, autoPanOnConnect, connectionRadius, onConnect, onConnectStart, onConnectEnd, onError, nodeExtent, translateExtent, minZoom, maxZoom, }) => {
+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);
@@ -2268,7 +2406,8 @@ const useNodeId = () => {
     return nodeId;
 };
 
-function Port({ type, position }) {
+function Port({ id, type, position }) {
+    const portId = id || null;
     const store = useStoreApi();
     const nodeId = useNodeId();
     if (!nodeId)
@@ -2282,19 +2421,30 @@ function Port({ type, position }) {
         onConnect?.(edgeParams);
     };
     const onPointerDown = (event) => {
-        const isMouseTriggered = isMouseEvent(event);
-        if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
-            handlePointerDown({
-                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,
-                getState: store.getState,
-                setState: store.setState,
+                domNode,
+                autoPanOnConnect,
+                connectionRadius,
+                nodes: getNodes(),
+                cancelConnection,
+                updateConnection,
                 onConnect: handleOnConnect,
+                onConnectStart,
+                onConnectEnd,
+                panBy,
+                getTransform: () => transform,
             });
         }
     };
-    return (jsx("div", { "data-nodeid": nodeId, "data-id": `${nodeId}-${type}`, "data-port-position": position, className: `react-diagram__port react-diagram__port-${position} ${type} nodrag`, onMouseDown: onPointerDown, onTouchStart: onPointerDown }));
+    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);
@@ -2304,8 +2454,9 @@ function Nodes({ data }) {
 }
 
 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, hidden, resizeObserver, dragHandle, zIndex, isParent, initialized, disableKeyboardA11y, ariaLabel, rfId, noDragClassName, noPanClassName, }) {
+    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);
@@ -2317,10 +2468,10 @@ const wrapNode = (NodeComponent) => {
                     id,
                     store,
                     nodeRef,
+                    isSelectable,
                 });
             }
             if (onClick) {
-                const node = store.getState().nodeInternals.get(id);
                 onClick(event, { ...node });
             }
         };
@@ -2354,9 +2505,14 @@ const wrapNode = (NodeComponent) => {
                 ]);
             }
         }, [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,
         });
@@ -2379,7 +2535,7 @@ const wrapNode = (NodeComponent) => {
         ]);
         const wrapperStyle = {
             zIndex,
-            transform: `translate(${positionX}px,${positionY}px)`,
+            transform: `translate(${positionWithOrigin.x}px,${positionWithOrigin.y}px)`,
             pointerEvents: hasPointerEvents ? 'all' : 'none',
             visibility: initialized ? 'visible' : 'hidden',
             width,
@@ -2423,12 +2579,6 @@ const createNodeTypes = (nodeTypes) => {
     };
 };
 
-// import { StoreApi } from 'zustand';
-// type UpdateNodesParams = {
-//    changedNodes: NodeSelectionChange[] | null;
-//    get: StoreApi<ReactDiagramState>['getState'];
-//    set: StoreApi<ReactDiagramState>['setState'];
-// };
 function calculateXYZPosition(node, nodeInternals, result, nodeOrigin) {
     if (!node.parentNode) {
         return result;
@@ -2438,8 +2588,8 @@ function calculateXYZPosition(node, nodeInternals, result, nodeOrigin) {
     return calculateXYZPosition(parentNode, nodeInternals, {
         x: (result.x ?? 0) + parentNodePosition.x,
         y: (result.y ?? 0) + parentNodePosition.y,
-        z: (parentNode[internalsSymbol]?.z ?? 0) > (result.z ?? 0)
-            ? parentNode[internalsSymbol]?.z ?? 0
+        z: (parentNode[internalsSymbol$1]?.z ?? 0) > (result.z ?? 0)
+            ? parentNode[internalsSymbol$1]?.z ?? 0
             : result.z ?? 0,
     }, nodeOrigin);
 }
@@ -2451,15 +2601,15 @@ function updateAbsoluteNodePositions(nodeInternals, nodeOrigin, parentNodes) {
         if (node.parentNode || parentNodes?.[node.id]) {
             const { x, y, z } = calculateXYZPosition(node, nodeInternals, {
                 ...node.position,
-                z: node[internalsSymbol]?.z ?? 0,
+                z: node[internalsSymbol$1]?.z ?? 0,
             }, nodeOrigin);
             node.positionAbsolute = {
                 x,
                 y,
             };
-            node[internalsSymbol].z = z;
+            node[internalsSymbol$1].z = z;
             if (parentNodes?.[node.id]) {
-                node[internalsSymbol].isParent = true;
+                node[internalsSymbol$1].isParent = true;
             }
         }
     });
@@ -2485,56 +2635,42 @@ function createNodeInternals(nodes, nodeInternals, nodeOrigin, elevateNodesOnSel
             internals.parentNode = node.parentNode;
             parentNodes[node.parentNode] = true;
         }
-        Object.defineProperty(internals, internalsSymbol, {
+        Object.defineProperty(internals, internalsSymbol$1, {
             enumerable: false,
             value: {
-                portBounds: currInternals?.[internalsSymbol]?.portBounds,
+                portBounds: currInternals?.[internalsSymbol$1]?.portBounds,
                 z,
             },
         });
-        // console.log('create', currInternals, node);
         nextNodeInternals.set(node.id, internals);
     });
     updateAbsoluteNodePositions(nextNodeInternals, nodeOrigin, parentNodes);
     return nextNodeInternals;
 }
-// export function handleControlledNodeSelectionChange(
-//    nodeChanges: NodeSelectionChange[],
-//    nodeInternals: NodeInternals,
-// ) {
-//    nodeChanges.forEach((change) => {
-//       const node = nodeInternals.get(change.id);
-//       if (node) {
-//          nodeInternals.set(node.id, {
-//             ...node,
-//             [internalsSymbol]: node[internalsSymbol],
-//             selected: change.selected,
-//          });
-//       }
-//    });
-//    return new Map(nodeInternals);
-// }
-// export function handleControlledEdgeSelectionChange(
-//    edgeChanges: EdgeSelectionChange[],
-//    edges: Edge[],
-// ) {
-//    return edges.map((e) => {
-//       const change = edgeChanges.find((change) => change.id === e.id);
-//       if (change) {
-//          e.selected = change.selected;
-//       }
-//       return e;
-//    });
-// }
-// export function updateNodesSelections({
-//    changedNodes,
-//    get,
-// }: UpdateNodesParams) {
-//    const { onNodesChange } = get();
-//    if (changedNodes?.length) {
-//       onNodesChange?.(changedNodes);
-//    }
-// }
+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],
@@ -2563,8 +2699,8 @@ const initialState = {
     minZoom: 0.5,
     maxZoom: 2,
     connectionPosition: { x: 0, y: 0 },
-    connectionNodeId: null,
-    connectionPortType: 'source',
+    connectionStartPort: null,
+    connectionEndPort: null,
     autoPanOnNodeDrag: true,
     autoPanOnConnect: true,
     nodeExtent: infiniteExtent,
@@ -2587,7 +2723,7 @@ const createRFStore = () => createStore((set, get) => ({
         set({ edges: edges.map((e) => ({ ...defaultEdgeOptions, ...e })) });
     },
     updateNodeDimensions: (updates) => {
-        const { onNodesChange, nodeInternals, domNode, nodeOrigin } = get();
+        const { onNodesChange, updateNodesIntersection, nodeInternals, domNode, nodeOrigin, } = get();
         const viewportNode = domNode?.querySelector('.react-diagram__viewport');
         if (!viewportNode) {
             return;
@@ -2606,9 +2742,10 @@ const createRFStore = () => createStore((set, get) => ({
                 if (doUpdate) {
                     nodeInternals.set(node.id, {
                         ...node,
-                        [internalsSymbol]: {
-                            ...node[internalsSymbol],
+                        [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),
                             },
@@ -2624,6 +2761,7 @@ const createRFStore = () => createStore((set, get) => ({
             }
             return res;
         }, []);
+        updateNodesIntersection();
         updateAbsoluteNodePositions(nodeInternals, nodeOrigin);
         set({
             nodeInternals: new Map(nodeInternals),
@@ -2658,6 +2796,33 @@ const createRFStore = () => createStore((set, get) => ({
             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;
@@ -2687,9 +2852,17 @@ const createRFStore = () => createStore((set, get) => ({
         triggerNodeChanges(nodesToUnselect);
     },
     cancelConnection: () => set({
-        connectionNodeId: initialState.connectionNodeId,
-        connectionPortType: initialState.connectionPortType,
+        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)) {
@@ -2759,13 +2932,13 @@ const defaultEdgeTypes = {
 };
 const ReactDiagram = forwardRef(({ children, id, 
 // DiagramView props
-panning = true, minZoom, maxZoom, translateExtent, nodeExtent, defaultViewport = initViewport, multiSelectionKeyCode, 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, 
+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, }, ref) => {
+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", { ref: ref, className: "react-diagram", children: jsxs(Wrapper, { children: [jsx(DiagramView$1, { rfId: rfId, panning: panning, defaultViewport: defaultViewport, multiSelectionKeyCode: multiSelectionKeyCode, onlyRenderVisibleElements: onlyRenderVisibleElements, disableKeyboardA11y: disableKeyboardA11y, noDragClassName: noDragClassName, noPanClassName: noPanClassName, nodeOrigin: nodeOrigin, 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, 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] }) }));
+    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';
 
@@ -2810,4 +2983,4 @@ function Background({ gap, lineWidth = 1, color = '#000000', }) {
 Background.displayName = 'Background';
 var index = memo(Background);
 
-export { index as Background, BaseEdge, BezierEdge, MarkerType, Port$1 as Port, Position, ReactDiagramProvider, StepEdge, addEdge, boxToRect, clamp, ReactDiagram as default, getBezierPath, getStepPath, internalsSymbol, isEdge, isNode, rectToBox, updateEdge, useEdgesState, useNodesState };
+export { index as Background, BaseEdge, BezierEdge, MarkerType, Port$1 as Port, Position, ReactDiagramProvider, StepEdge, addEdge, boxToRect, clamp, ReactDiagram as default, getBezierEdgeCenter, getBezierPath, getStepPath, getStraightPath, internalsSymbol, isCoreEdge, isCoreNode, rectToBox, updateEdge, useEdgesState, useNodesState };