react-cosmos-diagram 0.3.0 → 0.4.0

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, useContext, useMemo, useState, useEffect, useRef, memo, useCallback, forwardRef } from 'react';
+import { createContext, useContext, useMemo, useState, useEffect, useRef, useCallback, memo, forwardRef } from 'react';
 import { useStore as useStore$1, createStore } from 'zustand';
 import { zoom, zoomIdentity } from 'd3-zoom';
 import { select } from 'd3-selection';
@@ -112,11 +112,11 @@ const getBoundsOfBoxes = (box1, box2) => ({
 const isMouseEvent = (event) => 'clientX' in event;
 const getEventPosition = (event, bounds) => {
     const isMouseTriggered = isMouseEvent(event);
-    const evtX = isMouseTriggered ? event.clientX : event.touches?.[0].clientX;
-    const evtY = isMouseTriggered ? event.clientY : event.touches?.[0].clientY;
+    const eventX = isMouseTriggered ? event.clientX : event.touches?.[0].clientX;
+    const eventY = isMouseTriggered ? event.clientY : event.touches?.[0].clientY;
     return {
-        x: evtX - (bounds?.left ?? 0),
-        y: evtY - (bounds?.top ?? 0),
+        x: eventX - (bounds?.left ?? 0),
+        y: eventY - (bounds?.top ?? 0),
     };
 };
 const calcAutoPanVelocity = (value, bound, radius, velocity) => {
@@ -149,10 +149,9 @@ const isViewChanged = (prevViewport, eventViewport) => {
     const { x, y, k } = eventViewport;
     return prevX !== x || prevY !== y || prevZoom !== k;
 };
-const selector$7 = (s) => ({
+const selector$8 = (s) => ({
     d3Zoom: s.d3Zoom,
     d3Selection: s.d3Selection,
-    elementsSelectable: s.elementsSelectable,
 });
 function Pane({ noPanClassName, panning, minZoom, maxZoom, defaultViewport, translateExtent, children, onMove, onMoveStart, onMoveEnd, }) {
     const store = useStoreApi();
@@ -161,7 +160,7 @@ function Pane({ noPanClassName, panning, minZoom, maxZoom, defaultViewport, tran
     const d3ZoomHandler = useRef();
     const prevTransform = useRef({ x: 0, y: 0, zoom: 0 });
     const timerId = useRef();
-    const { d3Zoom, d3Selection } = useStore(selector$7, shallow);
+    const { d3Zoom, d3Selection } = useStore(selector$8, shallow);
     useEffect(() => {
         if (Pane.current) {
             const bbox = Pane.current.getBoundingClientRect();
@@ -269,9 +268,9 @@ function Pane({ noPanClassName, panning, minZoom, maxZoom, defaultViewport, tran
     return (jsx("div", { className: "react-diagram__pane react-diagram__container", ref: Pane, children: children }));
 }
 
-const selector$6 = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
+const selector$7 = (s) => `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`;
 function Viewport({ children }) {
-    const transform = useStore(selector$6);
+    const transform = useStore(selector$7);
     return (jsx("div", { className: "react-diagram__viewport react-diagram__container", style: { transform }, children: children }));
 }
 
@@ -286,22 +285,92 @@ function DragBox({ rect }) {
         } }));
 }
 
-function SelectionBox({ rect, transform }) {
-    const nodeRef = useRef(null);
-    const { width, height, x, y } = rect;
-    return (jsx("div", { className: cc([
-            'react-diagram__selection-box',
-            'react-diagram__container',
-        ]), style: {
-            transform,
-        }, children: jsx("div", { ref: nodeRef, className: "react-diagram__selection-box-rect", tabIndex: -1, style: {
-                width,
-                height,
-                top: y,
-                left: x,
-            } }) }));
+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());
+    }
 }
-var SelectionBox$1 = memo(SelectionBox);
 
 const isNode = (element) => 'id' in element && !('source' in element) && !('target' in element);
 const isEdge = (element) => 'source' in element && 'target' in element;
@@ -433,396 +502,696 @@ const getRectOfNodes = (nodes, nodeOrigin = [0, 0]) => {
     return boxToRect(box);
 };
 
-const handleParentExpand = (res, updateItem) => {
-    const parent = res.find((e) => e.id === updateItem.parentNode);
-    if (parent) {
-        const extendWidth = updateItem.position.x + updateItem.width - parent.width;
-        const extendHeight = updateItem.position.y + updateItem.height - parent.height;
-        if (extendWidth > 0 ||
-            extendHeight > 0 ||
-            updateItem.position.x < 0 ||
-            updateItem.position.y < 0) {
-            parent.style = { ...parent.style } || {};
-            parent.style.width = parent.style.width ?? parent.width;
-            parent.style.height = parent.style.height ?? parent.height;
-            if (extendWidth > 0) {
-                parent.style.width += extendWidth;
-            }
-            if (extendHeight > 0) {
-                parent.style.height += extendHeight;
-            }
-            if (updateItem.position.x < 0) {
-                const xDiff = Math.abs(updateItem.position.x);
-                parent.position.x = parent.position.x - xDiff;
-                parent.style.width += xDiff;
-                updateItem.position.x = 0;
-            }
-            if (updateItem.position.y < 0) {
-                const yDiff = Math.abs(updateItem.position.y);
-                parent.position.y = parent.position.y - yDiff;
-                parent.style.height += yDiff;
-                updateItem.position.y = 0;
-            }
-            parent.width = parent.style.width;
-            parent.height = parent.style.height;
-        }
+function isParentSelected(node, nodeInternals) {
+    if (!node.parentNode) {
+        return false;
     }
-};
-const applyChanges = (changes, elements) => {
-    // we need this hack to handle the setNodes and setEdges function of the useReactDiagram hook for controlled flows
-    if (changes.some((c) => c.type === 'reset')) {
-        return changes.filter((c) => c.type === 'reset').map((c) => c.item);
+    const parentNode = nodeInternals.get(node.parentNode);
+    if (!parentNode) {
+        return false;
     }
-    const initElements = changes
-        .filter((c) => c.type === 'add')
-        .map((c) => c.item);
-    return elements.reduce((res, item) => {
-        const currentChanges = changes.filter((c) => c.id === item.id);
-        if (currentChanges.length === 0) {
-            res.push(item);
-            return res;
-        }
-        const updateItem = { ...item };
-        for (const currentChange of currentChanges) {
-            if (currentChange) {
-                switch (currentChange.type) {
-                    case 'select': {
-                        updateItem.selected = currentChange.selected;
-                        break;
-                    }
-                    case 'position': {
-                        if (typeof currentChange.position !== 'undefined') {
-                            updateItem.position = currentChange.position;
-                        }
-                        if (typeof currentChange.positionAbsolute !== 'undefined') {
-                            updateItem.positionAbsolute =
-                                currentChange.positionAbsolute;
-                        }
-                        if (typeof currentChange.dragging !== 'undefined') {
-                            updateItem.dragging = currentChange.dragging;
-                        }
-                        if (updateItem.expandParent) {
-                            handleParentExpand(res, updateItem);
-                        }
-                        break;
-                    }
-                    case 'dimensions': {
-                        if (typeof currentChange.dimensions !== 'undefined') {
-                            updateItem.width = currentChange.dimensions.width;
-                            updateItem.height = currentChange.dimensions.height;
-                        }
-                        if (typeof currentChange.updateStyle !== 'undefined') {
-                            updateItem.style = {
-                                ...(updateItem.style || {}),
-                                ...currentChange.dimensions,
-                            };
-                        }
-                        if (typeof currentChange.resizing === 'boolean') {
-                            updateItem.resizing = currentChange.resizing;
-                        }
-                        if (updateItem.expandParent) {
-                            handleParentExpand(res, updateItem);
-                        }
-                        break;
-                    }
-                    case 'remove': {
-                        return res;
-                    }
-                }
-            }
-        }
-        res.push(updateItem);
-        return res;
-    }, initElements);
-};
-function applyNodeChanges(changes, nodes) {
-    return applyChanges(changes, nodes);
-}
-function applyEdgeChanges(changes, edges) {
-    return applyChanges(changes, edges);
+    if (parentNode.selected) {
+        return true;
+    }
+    return isParentSelected(parentNode, nodeInternals);
 }
-const createSelectionChange = (id, selected) => ({
-    id,
-    type: 'select',
-    selected,
-});
-function getSelectionChanges(items, selectedIds) {
-    return items.reduce((res, item) => {
-        const willBeSelected = selectedIds.includes(item.id);
-        if (!item.selected && willBeSelected) {
-            item.selected = true;
-            res.push(createSelectionChange(item.id, true));
+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) => {
+    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 if (item.selected && !willBeSelected) {
-            item.selected = false;
-            res.push(createSelectionChange(item.id, false));
+        else {
+            onError?.('011');
+            currentExtent = nodeExtent;
         }
-        return res;
-    }, []);
-}
-
-const selector$5 = (s) => {
+    }
+    else if (node.extent && node.parentNode) {
+        const parent = nodeInternals.get(node.parentNode);
+        const { x: parentX, y: parentY } = getNodePositionWithOrigin(parent, nodeOrigin).positionAbsolute;
+        currentExtent = [
+            [node.extent[0][0] + parentX, node.extent[0][1] + parentY],
+            [node.extent[1][0] + parentX, node.extent[1][1] + parentY],
+        ];
+    }
+    let parentPosition = { x: 0, y: 0 };
+    if (node.parentNode) {
+        const parentNode = nodeInternals.get(node.parentNode);
+        parentPosition = getNodePositionWithOrigin(parentNode, nodeOrigin).positionAbsolute;
+    }
+    const positionAbsolute = currentExtent
+        ? clampPosition(nextPosition, currentExtent)
+        : nextPosition;
     return {
-        elementsSelectable: s.elementsSelectable,
-        transform: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`,
+        position: {
+            x: positionAbsolute.x - parentPosition.x,
+            y: positionAbsolute.y - parentPosition.y,
+        },
+        positionAbsolute,
     };
 };
-function DragSelection({ children, dragSelectionKeyPressed, }) {
-    const store = useStoreApi();
-    const dragSelection = useRef(null);
-    const prevSelectedNodesCount = useRef(0);
-    const containerBounds = useRef();
-    const { elementsSelectable, transform } = useStore(selector$5, shallow);
-    const [dragBoxStartPosition, setDragBoxStartPosition] = useState({
-        x: 0,
-        y: 0,
-    });
-    const [dragBoxRect, setDragBoxRect] = useState({
-        width: 0,
-        height: 0,
-        x: 0,
-        y: 0,
-    });
-    const [selectionBoxRect, setSelectionBoxRect] = useState({
-        width: 0,
-        height: 0,
-        x: 0,
-        y: 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,
+        };
     });
-    const [dragBoxActive, setDragBoxActive] = useState(false);
-    const [selectionBoxActive, setSelectionBoxActive] = useState(false);
-    const resetDragBox = () => {
-        setDragBoxStartPosition({
-            x: 0,
-            y: 0,
-        });
-        setDragBoxRect({
-            width: 0,
-            height: 0,
-            x: 0,
-            y: 0,
-        });
-        setDragBoxActive(false);
-    };
-    const onClick = (e) => {
-        if (e.target === dragSelection.current) {
-            store.getState().resetSelectedElements();
-            setDragBoxActive(false);
-            setSelectionBoxActive(false);
-        }
-    };
-    const onMouseDown = (event) => {
-        const { resetSelectedElements, domNode } = store.getState();
-        containerBounds.current = domNode?.getBoundingClientRect();
-        if (!elementsSelectable ||
-            event.button !== 0 ||
-            event.target !== dragSelection.current ||
-            !containerBounds.current ||
-            !dragSelectionKeyPressed) {
-            return;
-        }
-        const { x, y } = getEventPosition(event, containerBounds.current);
-        resetSelectedElements();
-        setDragBoxRect({
-            width: 0,
-            height: 0,
-            x,
-            y,
-        });
-        setDragBoxStartPosition({
-            x,
-            y,
-        });
-    };
-    const onMouseMove = (event) => {
-        const { nodeInternals, transform, nodeOrigin, getNodes, onNodesChange } = store.getState();
-        // const hasDragBoxPosition = dragBoxRect.x > 0 && dragBoxRect.y > 0;
-        const hasDragBoxStartPosition = dragBoxStartPosition.x > 0 && dragBoxStartPosition.y > 0;
-        if (
-        // !hasDragBoxPosition ||
-        !hasDragBoxStartPosition ||
-            !containerBounds.current ||
-            !dragSelectionKeyPressed) {
+    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 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 updateNodePosition = (pointerPositions, dragEnd = false) => (dragItem) => {
+        if (!isDragItem(dragItem))
             return;
-        }
-        setDragBoxActive(true);
-        setSelectionBoxActive(false);
-        const mousePos = getEventPosition(event, containerBounds.current);
-        const startX = dragBoxStartPosition.x ?? 0;
-        const startY = dragBoxStartPosition.y ?? 0;
-        const rect = {
-            x: mousePos.x < startX ? mousePos.x : startX,
-            y: mousePos.y < startY ? mousePos.y : startY,
-            width: Math.abs(mousePos.x - startX),
-            height: Math.abs(mousePos.y - startY),
+        const { 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 nodes = getNodes();
-        const selectedNodes = getNodesInside(nodeInternals, rect, transform, false, true, nodeOrigin);
-        const selectedNodeIds = selectedNodes.map((n) => n.id);
-        const selectionBoxRect = getRectOfNodes(selectedNodes, nodeOrigin);
-        setSelectionBoxRect(selectionBoxRect);
-        if (prevSelectedNodesCount.current !== selectedNodeIds.length) {
-            prevSelectedNodesCount.current = selectedNodeIds.length;
-            const changes = getSelectionChanges(nodes, selectedNodeIds);
-            if (changes.length) {
-                onNodesChange?.(changes);
+        if (gridStep && getStepPosition) {
+            const nodeSize = { width, height };
+            const stepPosition = getStepPosition({
+                position: nextPosition,
+                nodeSize,
+            });
+            if (!smoothStep || (smoothStep && dragEnd)) {
+                nextPosition = stepPosition;
             }
         }
-        setDragBoxRect(rect);
-    };
-    const onMouseUp = (event) => {
-        if (event.button !== 0) {
+        const updatedPosition = calcNextPosition(dragItem, nextPosition, nodeInternals, nodeExtent, nodeOrigin, onError);
+        const hasChange = hasChangedPosition(dragItem.position, updatedPosition.position);
+        if (!hasChange)
             return;
-        }
-        setSelectionBoxActive(prevSelectedNodesCount.current > 0);
-        resetDragBox();
-    };
-    const onMouseLeave = () => {
-        setSelectionBoxActive(prevSelectedNodesCount.current > 0);
-        resetDragBox();
+        dragItem.position = updatedPosition.position;
+        dragItem.positionAbsolute = updatedPosition.positionAbsolute;
     };
-    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: transform }))] }));
+    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));
+                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);
+                }
+            })
+                .on('end', (event) => {
+                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));
+                    }
+                    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;
+            });
+            selection.call(dragHandle);
+            return () => {
+                selection.on('.drag', null);
+            };
+        }
+    }, [
+        store,
+        nodeRef,
+        nodeId,
+        isSelectable,
+        noDragClassName,
+        getPointerPosition,
+    ]);
+    return dragging;
 }
-DragSelection.displayName = 'DragSelection';
 
-const selector$4 = (s) => {
-    const { minZoom, maxZoom, translateExtent } = s;
-    return {
-        minZoom,
-        maxZoom,
-        translateExtent,
-    };
+function SelectionBox({ rect, transform }) {
+    const nodeRef = useRef(null);
+    useDrag({ nodeRef });
+    const { width, height, x, y } = rect;
+    return (jsx("div", { className: cc([
+            'react-diagram__selection-box',
+            'react-diagram__container',
+        ]), style: {
+            transform,
+        }, children: jsx("div", { ref: nodeRef, className: "react-diagram__selection-box-rect", tabIndex: -1, style: {
+                width,
+                height,
+                top: y,
+                left: x,
+            } }) }));
+}
+var SelectionBox$1 = memo(SelectionBox);
+
+const handleParentExpand = (res, updateItem) => {
+    const parent = res.find((e) => e.id === updateItem.parentNode);
+    if (parent) {
+        const extendWidth = updateItem.position.x + updateItem.width - parent.width;
+        const extendHeight = updateItem.position.y + updateItem.height - parent.height;
+        if (extendWidth > 0 ||
+            extendHeight > 0 ||
+            updateItem.position.x < 0 ||
+            updateItem.position.y < 0) {
+            parent.style = { ...parent.style } || {};
+            parent.style.width = parent.style.width ?? parent.width;
+            parent.style.height = parent.style.height ?? parent.height;
+            if (extendWidth > 0) {
+                parent.style.width += extendWidth;
+            }
+            if (extendHeight > 0) {
+                parent.style.height += extendHeight;
+            }
+            if (updateItem.position.x < 0) {
+                const xDiff = Math.abs(updateItem.position.x);
+                parent.position.x = parent.position.x - xDiff;
+                parent.style.width += xDiff;
+                updateItem.position.x = 0;
+            }
+            if (updateItem.position.y < 0) {
+                const yDiff = Math.abs(updateItem.position.y);
+                parent.position.y = parent.position.y - yDiff;
+                parent.style.height += yDiff;
+                updateItem.position.y = 0;
+            }
+            parent.width = parent.style.width;
+            parent.height = parent.style.height;
+        }
+    }
 };
-function DiagramRenderer({ children, multiSelectionKeyCode, noPanClassName, panning, defaultViewport, onMove, onMoveStart, onMoveEnd, }) {
-    const { minZoom, maxZoom, translateExtent } = useStore(selector$4);
-    const [dragSelectionKeyPressed, setDragSelectionKeyPressed] = useState(false);
-    useGlobalKeyHandler(multiSelectionKeyCode);
-    const handleKeyDown = (e) => {
-        if (e.key === 'Shift') {
-            setDragSelectionKeyPressed(true);
+const applyChanges = (changes, elements) => {
+    // we need this hack to handle the setNodes and setEdges function of the useReactDiagram hook for controlled flows
+    if (changes.some((c) => c.type === 'reset')) {
+        return changes.filter((c) => c.type === 'reset').map((c) => c.item);
+    }
+    const initElements = changes
+        .filter((c) => c.type === 'add')
+        .map((c) => c.item);
+    return elements.reduce((res, item) => {
+        const currentChanges = changes.filter((c) => c.id === item.id);
+        if (currentChanges.length === 0) {
+            res.push(item);
+            return res;
         }
-    };
-    const handleKeyUp = () => {
-        setDragSelectionKeyPressed(false);
-    };
-    useEffect(() => {
-        document.addEventListener('keydown', handleKeyDown);
-        document.addEventListener('keyup', handleKeyUp);
-        return () => {
-            document.removeEventListener('keydown', handleKeyDown);
-            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 }) }) }));
+        const updateItem = { ...item };
+        for (const currentChange of currentChanges) {
+            if (currentChange) {
+                switch (currentChange.type) {
+                    case 'select': {
+                        updateItem.selected = currentChange.selected;
+                        break;
+                    }
+                    case 'position': {
+                        if (typeof currentChange.position !== 'undefined') {
+                            updateItem.position = currentChange.position;
+                        }
+                        if (typeof currentChange.positionAbsolute !== 'undefined') {
+                            updateItem.positionAbsolute =
+                                currentChange.positionAbsolute;
+                        }
+                        if (typeof currentChange.dragging !== 'undefined') {
+                            updateItem.dragging = currentChange.dragging;
+                        }
+                        if (updateItem.expandParent) {
+                            handleParentExpand(res, updateItem);
+                        }
+                        break;
+                    }
+                    case 'dimensions': {
+                        if (typeof currentChange.dimensions !== 'undefined') {
+                            updateItem.width = currentChange.dimensions.width;
+                            updateItem.height = currentChange.dimensions.height;
+                        }
+                        if (typeof currentChange.updateStyle !== 'undefined') {
+                            updateItem.style = {
+                                ...(updateItem.style || {}),
+                                ...currentChange.dimensions,
+                            };
+                        }
+                        if (typeof currentChange.resizing === 'boolean') {
+                            updateItem.resizing = currentChange.resizing;
+                        }
+                        if (updateItem.expandParent) {
+                            handleParentExpand(res, updateItem);
+                        }
+                        break;
+                    }
+                    case 'remove': {
+                        return res;
+                    }
+                }
+            }
+        }
+        res.push(updateItem);
+        return res;
+    }, initElements);
+};
+function applyNodeChanges(changes, nodes) {
+    return applyChanges(changes, nodes);
 }
-DiagramRenderer.displayName = 'DiagramRenderer';
-var DiagramRenderer$1 = memo(DiagramRenderer);
-
-function useVisibleNodes() {
-    const nodes = useStore(useCallback((s) => s.getNodes(), []));
-    return nodes;
+function applyEdgeChanges(changes, edges) {
+    return applyChanges(changes, edges);
 }
-
-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$3 = (s) => ({
-    nodesDraggable: s.nodesDraggable,
-    elementsSelectable: s.elementsSelectable,
-    updateNodeDimensions: s.updateNodeDimensions,
-    onError: s.onError,
+const createSelectionChange = (id, selected) => ({
+    id,
+    type: 'select',
+    selected,
 });
-function NodeRenderer({ nodeTypes, onNodeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, ...props }) {
-    const { nodesDraggable, elementsSelectable, updateNodeDimensions, onError } = useStore(selector$3, shallow);
-    const nodes = useVisibleNodes();
-    const resizeObserverRef = useRef();
-    const resizeObserver = useMemo(() => {
-        if (typeof ResizeObserver === 'undefined') {
-            return null;
+function getSelectionChanges(items, selectedIds) {
+    return items.reduce((res, item) => {
+        const willBeSelected = selectedIds.includes(item.id);
+        if (!item.selected && willBeSelected) {
+            item.selected = true;
+            res.push(createSelectionChange(item.id, true));
         }
-        const observer = new ResizeObserver((entries) => {
-            const updates = entries.map((entry) => ({
-                id: entry.target.getAttribute('data-id'),
-                nodeElement: entry.target,
-                forceUpdate: true,
-            }));
-            updateNodeDimensions(updates);
-        });
-        resizeObserverRef.current = observer;
-        return observer;
-    }, []);
-    useEffect(() => () => {
-        resizeObserverRef?.current?.disconnect();
+        else if (item.selected && !willBeSelected) {
+            item.selected = false;
+            res.push(createSelectionChange(item.id, false));
+        }
+        return res;
     }, []);
-    return (jsx("div", { className: "react-diagram__nodes react-diagram__container", children: nodes.map((node) => {
-            const { data, type, 
-            // elProps
-            id, className, style, ariaLabel, positionAbsolute, hidden, selected, selectable, draggable, } = node;
-            let nodeType = type || 'default';
-            if (!nodeTypes[nodeType]) {
-                onError?.('010', nodeType);
-                nodeType = 'default';
-            }
-            const NodeComponent = (nodeTypes[nodeType] ||
-                nodeTypes.default);
-            const isDraggable = !!(draggable ||
-                (nodesDraggable && typeof draggable === 'undefined'));
-            const isSelectable = !!(selectable ||
-                (elementsSelectable && typeof selectable === 'undefined'));
-            const elProps = {
-                id,
-                className,
-                style: {
-                    ...style,
-                    width: node.width,
-                    height: node.height,
-                },
-                ariaLabel,
-            };
-            const events = {
-                onClick: onNodeClick,
-                onMouseEnter: onNodeMouseEnter,
-                onMouseMove: onNodeMouseMove,
-                onMouseLeave: onNodeMouseLeave,
-                onContextMenu: onNodeContextMenu,
-                onDoubleClick: onNodeDoubleClick,
-            };
-            const position = {
-                positionX: positionAbsolute?.x || 0,
-                positionY: positionAbsolute?.y || 0,
-                sourcePosition: Position.Bottom,
-                targetPosition: Position.Top,
-            };
-            const booleanProps = {
-                selected: !!selected,
-                isSelectable,
-                isDraggable,
-                hidden,
-                isParent: !!node[internalsSymbol]?.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));
-        }) }));
 }
-NodeRenderer.displayName = 'NodeRenderer';
-var NodeRenderer$1 = memo(NodeRenderer);
 
-const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }) => (jsx("polyline", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: strokeWidth, fill: color, points: "-5,-4 0,0 -5,4 -5,-4" }));
-const MarkerSymbols = {
-    [MarkerType.Arrow]: ArrowSymbol,
+const selector$6 = (s) => {
+    const { elementsSelectable, transform, selectionBoxActive, getNodes } = s;
+    const selectedNodes = getNodes().filter((n) => n.selected);
+    return {
+        elementsSelectable,
+        selectionBoxRect: getRectOfNodes(selectedNodes, s.nodeOrigin),
+        transformString: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
+        selectionBoxActive,
+    };
 };
-function useMarkerSymbol(type) {
+function DragSelection({ children, dragSelectionKeyPressed, }) {
+    const store = useStoreApi();
+    const dragSelection = useRef(null);
+    const prevSelectedNodesCount = useRef(0);
+    const containerBounds = useRef();
+    const { elementsSelectable, selectionBoxRect, transformString, selectionBoxActive, } = useStore(selector$6, shallow);
+    const [dragBoxStartPosition, setDragBoxStartPosition] = useState({
+        x: 0,
+        y: 0,
+    });
+    const [dragBoxRect, setDragBoxRect] = useState({
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0,
+    });
+    const [dragBoxActive, setDragBoxActive] = useState(false);
+    const resetDragBox = () => {
+        setDragBoxStartPosition({
+            x: 0,
+            y: 0,
+        });
+        setDragBoxRect({
+            width: 0,
+            height: 0,
+            x: 0,
+            y: 0,
+        });
+        setDragBoxActive(false);
+    };
+    const onClick = (e) => {
+        if (e.target === dragSelection.current) {
+            store.getState().resetSelectedElements();
+            store.setState({
+                selectionBoxActive: false,
+            });
+            setDragBoxActive(false);
+        }
+    };
+    const onMouseDown = (event) => {
+        const { resetSelectedElements, domNode } = store.getState();
+        containerBounds.current = domNode?.getBoundingClientRect();
+        if (!elementsSelectable ||
+            event.button !== 0 ||
+            event.target !== dragSelection.current ||
+            !containerBounds.current ||
+            !dragSelectionKeyPressed) {
+            return;
+        }
+        const { x, y } = getEventPosition(event, containerBounds.current);
+        resetSelectedElements();
+        setDragBoxRect({
+            width: 0,
+            height: 0,
+            x,
+            y,
+        });
+        setDragBoxStartPosition({
+            x,
+            y,
+        });
+    };
+    const onMouseMove = (event) => {
+        const { nodeInternals, transform, nodeOrigin, getNodes, onNodesChange } = store.getState();
+        const hasDragBoxStartPosition = dragBoxStartPosition.x > 0 && dragBoxStartPosition.y > 0;
+        if (
+        // !hasDragBoxPosition ||
+        !hasDragBoxStartPosition ||
+            !containerBounds.current ||
+            !dragSelectionKeyPressed) {
+            return;
+        }
+        store.setState({
+            selectionBoxActive: false,
+        });
+        setDragBoxActive(true);
+        const mousePos = getEventPosition(event, containerBounds.current);
+        const startX = dragBoxStartPosition.x ?? 0;
+        const startY = dragBoxStartPosition.y ?? 0;
+        const rect = {
+            x: mousePos.x < startX ? mousePos.x : startX,
+            y: mousePos.y < startY ? mousePos.y : startY,
+            width: Math.abs(mousePos.x - startX),
+            height: Math.abs(mousePos.y - startY),
+        };
+        const nodes = getNodes();
+        const selectedNodes = getNodesInside(nodeInternals, rect, transform, false, true, nodeOrigin);
+        const selectedNodeIds = selectedNodes.map((n) => n.id);
+        if (prevSelectedNodesCount.current !== selectedNodeIds.length) {
+            prevSelectedNodesCount.current = selectedNodeIds.length;
+            const changes = getSelectionChanges(nodes, selectedNodeIds);
+            if (changes.length) {
+                onNodesChange?.(changes);
+            }
+        }
+        setDragBoxRect(rect);
+    };
+    const onMouseUp = (event) => {
+        if (event.button !== 0) {
+            return;
+        }
+        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 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 [dragSelectionKeyPressed, setDragSelectionKeyPressed] = useState(false);
+    useGlobalKeyHandler(multiSelectionKeyCode);
+    const handleKeyDown = (e) => {
+        if (e.key === 'Shift') {
+            setDragSelectionKeyPressed(true);
+        }
+    };
+    const handleKeyUp = () => {
+        setDragSelectionKeyPressed(false);
+    };
+    useEffect(() => {
+        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('keyup', handleKeyUp);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('keyup', handleKeyUp);
+        };
+    }, []);
+    return (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 }) }) }));
+}
+DiagramRenderer.displayName = 'DiagramRenderer';
+var DiagramRenderer$1 = memo(DiagramRenderer);
+
+function useVisibleNodes() {
+    const nodes = useStore(useCallback((s) => s.getNodes(), []));
+    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,
+    updateNodeDimensions: s.updateNodeDimensions,
+    onError: s.onError,
+});
+function NodeRenderer({ nodeTypes, onNodeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, ...props }) {
+    const { nodesDraggable, elementsSelectable, updateNodeDimensions, onError } = useStore(selector$4, shallow);
+    const nodes = useVisibleNodes();
+    const resizeObserverRef = useRef();
+    const resizeObserver = useMemo(() => {
+        if (typeof ResizeObserver === 'undefined') {
+            return null;
+        }
+        const observer = new ResizeObserver((entries) => {
+            const updates = entries.map((entry) => ({
+                id: entry.target.getAttribute('data-id'),
+                nodeElement: entry.target,
+                forceUpdate: true,
+            }));
+            updateNodeDimensions(updates);
+        });
+        resizeObserverRef.current = observer;
+        return observer;
+    }, []);
+    useEffect(() => () => {
+        resizeObserverRef?.current?.disconnect();
+    }, []);
+    return (jsx("div", { className: "react-diagram__nodes react-diagram__container", children: nodes.map((node) => {
+            const { data, type, 
+            // elProps
+            id, className, style, ariaLabel, positionAbsolute, hidden, selected, selectable, draggable, } = node;
+            let nodeType = type || 'default';
+            if (!nodeTypes[nodeType]) {
+                onError?.('010', nodeType);
+                nodeType = 'default';
+            }
+            const NodeComponent = (nodeTypes[nodeType] ||
+                nodeTypes.default);
+            const isDraggable = !!(draggable ||
+                (nodesDraggable && typeof draggable === 'undefined'));
+            const isSelectable = !!(selectable ||
+                (elementsSelectable && typeof selectable === 'undefined'));
+            const elProps = {
+                id,
+                className,
+                style: {
+                    ...style,
+                    width: node.width,
+                    height: node.height,
+                },
+                ariaLabel,
+            };
+            const events = {
+                onClick: onNodeClick,
+                onMouseEnter: onNodeMouseEnter,
+                onMouseMove: onNodeMouseMove,
+                onMouseLeave: onNodeMouseLeave,
+                onContextMenu: onNodeContextMenu,
+                onDoubleClick: onNodeDoubleClick,
+            };
+            const position = {
+                positionX: positionAbsolute?.x || 0,
+                positionY: positionAbsolute?.y || 0,
+                sourcePosition: Position.Bottom,
+                targetPosition: Position.Top,
+            };
+            const booleanProps = {
+                selected: !!selected,
+                isSelectable,
+                isDraggable,
+                hidden,
+                isParent: !!node[internalsSymbol]?.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));
+        }) }));
+}
+NodeRenderer.displayName = 'NodeRenderer';
+var NodeRenderer$1 = memo(NodeRenderer);
+
+const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }) => (jsx("polyline", { stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: strokeWidth, fill: color, points: "-5,-4 0,0 -5,4 -5,-4" }));
+const MarkerSymbols = {
+    [MarkerType.Arrow]: ArrowSymbol,
+};
+function useMarkerSymbol(type) {
     const store = useStoreApi();
     const symbol = useMemo(() => {
         const symbolExists = Object.prototype.hasOwnProperty.call(MarkerSymbols, type);
@@ -1308,855 +1677,512 @@ const handlePointerDown = ({ isAnchor = false, event, nodeId, portType, getState
     doc.addEventListener('touchend', onPointerUp);
 };
 
-const portPositionX = (x, shift, position) => {
-    if (position === Position.Left)
-        return x - shift;
-    if (position === Position.Right)
-        return x + shift;
-    return x;
-};
-const portPositionY = (y, shift, position) => {
-    if (position === Position.Top)
-        return y - shift;
-    if (position === Position.Bottom)
-        return y + shift;
-    return y;
-};
-const EdgeUpdaterClassName = 'react-diagram__edge-updater';
-function Anchor({ position, centerX, centerY, radius = 10, onMouseDown, 
-// onMouseEnter,
-// onMouseOut,
-type, }) {
-    return (jsx("circle", { className: cc([
-            EdgeUpdaterClassName,
-            `${EdgeUpdaterClassName}-${type}`,
-        ]), cx: portPositionX(centerX, radius, position), cy: portPositionY(centerY, radius, position), r: radius, stroke: "transparent", fill: "transparent", onMouseDown: onMouseDown }));
-}
-
-function getMouseHandler$1(id, getState, handler) {
-    return handler === undefined
-        ? handler
-        : (event) => {
-            const edge = getState().edges.find((e) => e.id === id);
-            if (edge) {
-                handler(event, { ...edge });
-            }
-        };
-}
-const wrapEdge = (EdgeComponent) => {
-    const EdgeWrapper = (props) => {
-        const { id, className, style, type, data, rfId, ariaLabel, 
-        // sourceAndTargetIds
-        source, sourcePort, target, targetPort, 
-        // marker
-        markerEnd, markerStart, 
-        // labelProps
-        label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, 
-        // AnchorProps
-        edgeUpdaterRadius, 
-        // position
-        sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, elementsSelectable, hidden, isFocusable, onClick, onDoubleClick, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, } = props;
-        const position = {
-            sourceX,
-            sourceY,
-            targetX,
-            targetY,
-            sourcePosition,
-            targetPosition,
-        };
-        const sourceAndTargetIds = {
-            source,
-            sourcePort,
-            target,
-            targetPort,
-        };
-        const isConnecting = className === 'react-diagram__connection';
-        if (isConnecting) {
-            document
-                .querySelector('path')
-                ?.classList.add('react-diagram__connection-path');
-            return (jsx(EdgeComponent, { ...sourceAndTargetIds, ...position, id: id, data: data, style: style, selected: selected }));
-        }
-        const store = useStoreApi();
-        const edgeRef = useRef(null);
-        const [updating, setUpdating] = useState(false);
-        const markerStartUrl = useMemo(() => `url(#${getMarkerId(markerStart, rfId)})`, [markerStart, rfId]);
-        const markerEndUrl = useMemo(() => `url(#${getMarkerId(markerEnd, rfId)})`, [markerEnd, rfId]);
-        if (hidden) {
-            return null;
-        }
-        const handleEdgeUpdater = (fromPortType) => (event) => {
-            if (event.button !== 0) {
-                return;
-            }
-            const { edges } = store.getState();
-            const nodeId = props[fromPortType];
-            const edge = edges.find((e) => e.id === id);
-            setUpdating(true);
-            onEdgeUpdateStart?.(event, edge, fromPortType);
-            const onConnectEdge = (connection) => onEdgeUpdate?.(edge, connection);
-            const handleEdgeUpdateEnd = (evt) => {
-                setUpdating(false);
-                onEdgeUpdateEnd?.(evt, edge, fromPortType);
-            };
-            handlePointerDown({
-                isAnchor: true,
-                event,
-                nodeId,
-                portType: fromPortType,
-                getState: store.getState,
-                setState: store.setState,
-                onConnect: onConnectEdge,
-                onEdgeUpdateEnd: handleEdgeUpdateEnd,
-            });
-        };
-        const onEdgeClick = (event) => {
-            const { edges } = store.getState();
-            if (onClick) {
-                const edge = edges.find((e) => e.id === id);
-                onClick(event, edge);
-            }
-        };
-        const onEdgeDoubleClick = getMouseHandler$1(id, store.getState, onDoubleClick);
-        const onEdgeContextMenu = getMouseHandler$1(id, store.getState, onContextMenu);
-        const onEdgeMouseEnter = getMouseHandler$1(id, store.getState, onMouseEnter);
-        const onEdgeMouseMove = getMouseHandler$1(id, store.getState, onMouseMove);
-        const onEdgeMouseLeave = getMouseHandler$1(id, store.getState, onMouseLeave);
-        const inactive = !elementsSelectable;
-        const wrapperClassName = cc([
-            'react-diagram__edge',
-            `react-diagram__edge-${type}`,
-            className,
-            { selected, inactive },
-        ]);
-        const marker = { markerStart: markerStartUrl, markerEnd: markerEndUrl };
-        const labelProps = {
-            label,
-            labelStyle,
-            labelShowBg,
-            labelBgStyle,
-            labelBgPadding,
-            labelBgBorderRadius,
-        };
-        const events = {
-            onClick: onEdgeClick,
-            onDoubleClick: onEdgeDoubleClick,
-            onContextMenu: onEdgeContextMenu,
-            onMouseEnter: onEdgeMouseEnter,
-            onMouseMove: onEdgeMouseMove,
-            onMouseLeave: onEdgeMouseLeave,
-        };
-        return (jsx("g", { ...events, ref: edgeRef, className: wrapperClassName, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : undefined, "aria-label": ariaLabel === null
-                ? undefined
-                : ariaLabel
-                    ? ariaLabel
-                    : `Edge from ${source} to ${target}`, "aria-describedby": isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined, children: !updating && (jsxs(Fragment, { children: [jsx(EdgeComponent, { ...sourceAndTargetIds, ...marker, ...labelProps, ...position, id: id, data: data, style: style, selected: selected }), jsx(Anchor, { position: sourcePosition, centerX: sourceX, centerY: sourceY, radius: edgeUpdaterRadius, onMouseDown: handleEdgeUpdater('target'), 
-                        // onMouseEnter={console.log}
-                        // onMouseOut={console.log}
-                        type: "source" }), jsx(Anchor, { position: targetPosition, centerX: targetX, centerY: targetY, radius: edgeUpdaterRadius, onMouseDown: handleEdgeUpdater('source'), 
-                        // onMouseEnter={console.log}
-                        // onMouseOut={console.log}
-                        type: "target" })] })) }));
-    };
-    EdgeWrapper.displayName = 'EdgeWrapper';
-    return memo(EdgeWrapper);
-};
-
-const createEdgeTypes = (edgeTypes) => {
-    const defaultTypes = {
-        default: wrapEdge((edgeTypes.straight || StraightEdge)),
-        step: wrapEdge((edgeTypes.step || StepEdge)),
-        bezier: wrapEdge((edgeTypes.bezier || BezierEdge)),
-    };
-    const wrappedTypes = {};
-    const customTypes = Object.keys(edgeTypes)
-        .filter((k) => !Object.keys(defaultTypes).includes(k))
-        .reduce((res, key) => {
-        res[key] = wrapEdge((edgeTypes[key] || StepEdge));
-        return res;
-    }, wrappedTypes);
-    return {
-        ...defaultTypes,
-        ...customTypes,
-    };
-};
-function getPortPosition(position, nodeRect, port = null) {
-    const x = (port?.x || 0) + nodeRect.x;
-    const y = (port?.y || 0) + nodeRect.y;
-    const width = port?.width || nodeRect.width;
-    const height = port?.height || nodeRect.height;
-    switch (position) {
-        case Position.Top:
-            return {
-                x: x + width / 2,
-                y,
-            };
-        case Position.Right:
-            return {
-                x: x + width,
-                y: y + height / 2,
-            };
-        case Position.Bottom:
-            return {
-                x: x + width / 2,
-                y: y + height,
-            };
-        case Position.Left:
-            return {
-                x,
-                y: y + height / 2,
-            };
-    }
-}
-function getPort(bounds, portId) {
-    if (!bounds) {
-        return null;
-    }
-    if (bounds.length === 1 || !portId) {
-        return bounds[0];
-    }
-    else if (portId) {
-        return bounds.find((d) => d.id === portId) || null;
-    }
-    return null;
-}
-const getEdgePositions = (sourceNodeRect, sourcePort, sourcePosition, targetNodeRect, targetPort, targetPosition) => {
-    const sourcePortPos = getPortPosition(sourcePosition, sourceNodeRect, sourcePort);
-    const targetPortPos = getPortPosition(targetPosition, targetNodeRect, targetPort);
-    return {
-        sourceX: sourcePortPos.x,
-        sourceY: sourcePortPos.y,
-        targetX: targetPortPos.x,
-        targetY: targetPortPos.y,
-    };
-};
-function getNodeData(node) {
-    const portBounds = node?.[internalsSymbol]?.portBounds || null;
-    const isValid = portBounds &&
-        node?.width &&
-        node?.height &&
-        typeof node?.positionAbsolute?.x !== 'undefined' &&
-        typeof node?.positionAbsolute?.y !== 'undefined';
-    return [
-        {
-            x: node?.positionAbsolute?.x || 0,
-            y: node?.positionAbsolute?.y || 0,
-            width: node?.width || 0,
-            height: node?.height || 0,
-        },
-        portBounds,
-        !!isValid,
-    ];
-}
-
-const selector$2 = (s) => ({
-    edges: s.edges,
-    width: s.width,
-    height: s.height,
-    nodeInternals: s.nodeInternals,
-    onError: s.onError,
-});
-function EdgeRenderer({ rfId, edgeTypes, noPanClassName, edgeUpdaterRadius, onEdgeClick, onEdgeDoubleClick, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, }) {
-    const { edges, width, height, nodeInternals } = useStore(selector$2, shallow);
-    return (jsxs("svg", { width: width || '100vw', height: height || '100vh', className: "react-diagram__edges react-diagram__container", children: [jsx(MarkerComponent$1, { defaultColor: "#000000", rfId: rfId }), jsx("g", { children: edges.map((edge) => {
-                    const { data, type, 
-                    // elProps
-                    id, className, style, ariaLabel, 
-                    // sourceAndTargetIds
-                    source, sourcePort, target, targetPort, 
-                    // marker
-                    markerEnd, markerStart, 
-                    // labelProps
-                    label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, } = edge;
-                    const [sourceNodeRect, sourcePortBounds, sourceIsValid] = getNodeData(nodeInternals.get(source));
-                    const [targetNodeRect, targetPortBounds, targetIsValid] = getNodeData(nodeInternals.get(target));
-                    if (!sourceIsValid || !targetIsValid) {
-                        return null;
-                    }
-                    const edgeType = type || 'straight';
-                    const EdgeComponent = edgeTypes[edgeType] || edgeTypes.default;
-                    const targetNodePorts = targetPortBounds.target;
-                    const sourcePortInfo = getPort(sourcePortBounds.source, sourcePort);
-                    const targetPortInfo = getPort(targetNodePorts, targetPort);
-                    const sourcePosition = sourcePortInfo?.position || Position.Bottom;
-                    const targetPosition = targetPortInfo?.position || Position.Top;
-                    const isFocusable = !!edge.focusable;
-                    if (!sourcePortInfo || !targetPortInfo) {
-                        return null;
-                    }
-                    const elProps = {
-                        id,
-                        className: cc([className, noPanClassName]),
-                        style,
-                        ariaLabel,
-                    };
-                    const sourceAndTargetIds = {
-                        source,
-                        sourcePort,
-                        target,
-                        targetPort,
-                    };
-                    const marker = {
-                        markerEnd,
-                        markerStart,
-                    };
-                    const labelProps = {
-                        label,
-                        labelStyle,
-                        labelShowBg,
-                        labelBgStyle,
-                        labelBgPadding,
-                        labelBgBorderRadius,
-                    };
-                    const edgePositions = getEdgePositions(sourceNodeRect, sourcePortInfo, sourcePosition, targetNodeRect, targetPortInfo, targetPosition);
-                    const position = {
-                        ...edgePositions,
-                        sourcePosition,
-                        targetPosition,
-                    };
-                    const events = {
-                        onClick: onEdgeClick,
-                        onDoubleClick: onEdgeDoubleClick,
-                        onContextMenu: onEdgeContextMenu,
-                        onMouseEnter: onEdgeMouseEnter,
-                        onMouseMove: onEdgeMouseMove,
-                        onMouseLeave: onEdgeMouseLeave,
-                        onEdgeUpdate,
-                        onEdgeUpdateStart,
-                        onEdgeUpdateEnd,
-                    };
-                    return (jsx(EdgeComponent, { ...elProps, ...sourceAndTargetIds, ...marker, ...labelProps, ...position, ...events, rfId: rfId, type: edgeType, data: data, isFocusable: isFocusable, edgeUpdaterRadius: edgeUpdaterRadius }, id));
-                }) })] }));
-}
-EdgeRenderer.displayName = 'EdgeRenderer';
-var EdgeRenderer$1 = memo(EdgeRenderer);
-
-const oppositePosition = {
-    [Position.Left]: Position.Right,
-    [Position.Right]: Position.Left,
-    [Position.Top]: Position.Bottom,
-    [Position.Bottom]: Position.Top,
-};
-function ConnectionPath({ nodeId, portType, edge, Component, EdgeWrapper, }) {
-    const { fromNode, toX, toY } = useStore(useCallback((s) => ({
-        fromNode: s.nodeInternals.get(nodeId),
-        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 portBounds = fromPortBounds?.[portType];
-    if (!fromNode || !portBounds) {
-        return null;
-    }
-    const fromPort = portBounds[0];
-    const fromPortX = fromPort
-        ? fromPort.x + fromPort.width / 2
-        : (fromNode.width ?? 0) / 2;
-    const fromPortY = fromPort
-        ? fromPort.y + fromPort.height / 2
-        : fromNode.height ?? 0;
-    const fromX = (fromNode.positionAbsolute?.x ?? 0) + fromPortX;
-    const fromY = (fromNode.positionAbsolute?.y ?? 0) + fromPortY;
-    const fromPosition = fromPort?.position;
-    const toPosition = fromPosition ? oppositePosition[fromPosition] : null;
-    if (!fromPosition || !toPosition) {
-        return null;
-    }
-    if (Component) {
-        return (jsx(Component, { fromNode: fromNode, fromPort: fromPort, fromX: fromX, fromY: fromY, toX: toX, toY: toY, fromPosition: fromPosition, toPosition: toPosition }));
-    }
-    return (jsx(EdgeWrapper, { id: edge.id, className: "react-diagram__connection", type: edge.type || 'default', source: edge.source, target: edge.target, isFocusable: false, sourceX: fromX, sourceY: fromY, targetX: toX, targetY: toY, sourcePosition: fromPosition, targetPosition: toPosition }));
-}
-ConnectionPath.displayName = 'ConnectionPath';
-
-const selector$1 = (s) => ({
-    edges: s.edges,
-    nodeId: s.connectionNodeId,
-    portType: s.connectionPortType,
-});
-function ConnectionLineRenderer({ containerStyle, edgeTypes, component, }) {
-    const { nodeId, portType, edges } = useStore(selector$1, shallow);
-    const isValid = !!(nodeId && portType);
-    if (!isValid) {
-        return null;
-    }
-    const selectedEdge = edges.find((edge) => edge[portType] === nodeId);
-    if (!selectedEdge)
-        return null;
-    const EdgeWrapper = selectedEdge?.type
-        ? edgeTypes[selectedEdge.type]
-        : edgeTypes.default;
-    return (jsx("svg", { style: containerStyle, className: "react-diagram__container react-diagram__connection-line", children: jsx("g", { className: "react-diagram__connection", children: jsx(ConnectionPath, { nodeId: nodeId, portType: portType, edge: selectedEdge, Component: component, EdgeWrapper: EdgeWrapper }) }) }));
-}
-
-function DiagramView({ rfId, 
-// DiagramRenderer props
-noPanClassName, panning, defaultViewport, multiSelectionKeyCode, onMove, onMoveStart, onMoveEnd, 
-// NodeRenderer props
-onlyRenderVisibleElements, disableKeyboardA11y, noDragClassName, nodeOrigin, 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 })] }));
-}
-DiagramView.displayName = 'DiagramView';
-var DiagramView$1 = memo(DiagramView);
-
-const selector = (s) => {
-    const { setNodes, setEdges, setNodeExtent, setTranslateExtent, setMinZoom, setMaxZoom, } = s;
-    return {
-        setNodes,
-        setEdges,
-        setNodeExtent,
-        setTranslateExtent,
-        setMinZoom,
-        setMaxZoom,
-    };
-};
-function useStoreUpdater(value, setStoreState) {
-    useEffect(() => {
-        if (typeof value !== 'undefined') {
-            setStoreState(value);
-        }
-    }, [value]);
-}
-// updates with values in store that don't have a dedicated setter function
-function useDirectStoreUpdater(key, value, setState) {
-    useEffect(() => {
-        if (typeof value !== 'undefined') {
-            setState({ [key]: value });
-        }
-    }, [value]);
-}
-const StoreUpdater = ({ nodes, onNodesChange, onNodeDrag, onNodeDragStart, onNodeDragEnd, edges, onEdgesChange, gridStep, elevateNodesOnSelect, nodesDraggable, autoPanOnNodeDrag, autoPanOnConnect, connectionRadius, onConnect, onConnectStart, onConnectEnd, onError, nodeExtent, translateExtent, minZoom, maxZoom, }) => {
-    const { setNodes, setEdges, setNodeExtent, setTranslateExtent, setMinZoom, setMaxZoom, } = useStore(selector, shallow);
-    const store = useStoreApi();
-    useDirectStoreUpdater('gridStep', gridStep, store.setState);
-    useStoreUpdater(nodes, setNodes);
-    useStoreUpdater(edges, setEdges);
-    useStoreUpdater(nodeExtent, setNodeExtent);
-    useStoreUpdater(translateExtent, setTranslateExtent);
-    useStoreUpdater(minZoom, setMinZoom);
-    useStoreUpdater(maxZoom, setMaxZoom);
-    useDirectStoreUpdater('elevateNodesOnSelect', elevateNodesOnSelect, store.setState);
-    useDirectStoreUpdater('nodesDraggable', nodesDraggable, store.setState);
-    useDirectStoreUpdater('autoPanOnNodeDrag', autoPanOnNodeDrag, store.setState);
-    useDirectStoreUpdater('autoPanOnConnect', autoPanOnConnect, store.setState);
-    useDirectStoreUpdater('connectionRadius', connectionRadius, store.setState);
-    useDirectStoreUpdater('onNodesChange', onNodesChange, store.setState);
-    useDirectStoreUpdater('onNodeDrag', onNodeDrag, store.setState);
-    useDirectStoreUpdater('onNodeDragStart', onNodeDragStart, store.setState);
-    useDirectStoreUpdater('onNodeDragEnd', onNodeDragEnd, store.setState);
-    useDirectStoreUpdater('onEdgesChange', onEdgesChange, store.setState);
-    useDirectStoreUpdater('onConnect', onConnect, store.setState);
-    useDirectStoreUpdater('onConnectStart', onConnectStart, store.setState);
-    useDirectStoreUpdater('onConnectEnd', onConnectEnd, store.setState);
-    useDirectStoreUpdater('onError', onErrorWrapper(onError), store.setState);
-    return null;
-};
-
-function useNodeOrEdgeTypes(nodeOrEdgeTypes, createTypes) {
-    const typesKeysRef = useRef(null);
-    const typesParsed = useMemo(() => {
-        if (process.env.NODE_ENV === 'development') {
-            const typeKeys = Object.keys(nodeOrEdgeTypes);
-            if (shallow(typesKeysRef.current, typeKeys)) {
-                devWarn('002');
-            }
-            typesKeysRef.current = typeKeys;
-        }
-        return createTypes(nodeOrEdgeTypes);
-    }, [nodeOrEdgeTypes]);
-    return typesParsed;
-}
-
-const NodeIdContext = createContext(null);
-const Provider = NodeIdContext.Provider;
-NodeIdContext.Consumer;
-const useNodeId = () => {
-    const nodeId = useContext(NodeIdContext);
-    return nodeId;
+const portPositionX = (x, shift, position) => {
+    if (position === Position.Left)
+        return x - shift;
+    if (position === Position.Right)
+        return x + shift;
+    return x;
+};
+const portPositionY = (y, shift, position) => {
+    if (position === Position.Top)
+        return y - shift;
+    if (position === Position.Bottom)
+        return y + shift;
+    return y;
 };
+const EdgeUpdaterClassName = 'react-diagram__edge-updater';
+function Anchor({ position, centerX, centerY, radius = 10, onMouseDown, 
+// onMouseEnter,
+// onMouseOut,
+type, }) {
+    return (jsx("circle", { className: cc([
+            EdgeUpdaterClassName,
+            `${EdgeUpdaterClassName}-${type}`,
+        ]), cx: portPositionX(centerX, radius, position), cy: portPositionY(centerY, radius, position), r: radius, stroke: "transparent", fill: "transparent", onMouseDown: onMouseDown }));
+}
 
-function Port({ type, position }) {
-    const store = useStoreApi();
-    const nodeId = useNodeId();
-    if (!nodeId)
-        return null;
-    const handleOnConnect = (connection) => {
-        const { defaultEdgeOptions, onConnect } = store.getState();
-        const edgeParams = {
-            ...defaultEdgeOptions,
-            ...connection,
+function getMouseHandler(id, getState, handler) {
+    return handler === undefined
+        ? handler
+        : (event) => {
+            const edge = getState().edges.find((e) => e.id === id);
+            if (edge) {
+                handler(event, { ...edge });
+            }
         };
-        onConnect?.(edgeParams);
-    };
-    const onPointerDown = (event) => {
-        const isMouseTriggered = isMouseEvent(event);
-        if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
+}
+const wrapEdge = (EdgeComponent) => {
+    const EdgeWrapper = (props) => {
+        const { id, className, style, type, data, rfId, ariaLabel, 
+        // sourceAndTargetIds
+        source, sourcePort, target, targetPort, 
+        // marker
+        markerEnd, markerStart, 
+        // labelProps
+        label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, 
+        // AnchorProps
+        edgeUpdaterRadius, 
+        // position
+        sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, elementsSelectable, hidden, isFocusable, onClick, onDoubleClick, onContextMenu, onMouseEnter, onMouseMove, onMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, } = props;
+        const position = {
+            sourceX,
+            sourceY,
+            targetX,
+            targetY,
+            sourcePosition,
+            targetPosition,
+        };
+        const sourceAndTargetIds = {
+            source,
+            sourcePort,
+            target,
+            targetPort,
+        };
+        const isConnecting = className === 'react-diagram__connection';
+        if (isConnecting) {
+            document
+                .querySelector('path')
+                ?.classList.add('react-diagram__connection-path');
+            return (jsx(EdgeComponent, { ...sourceAndTargetIds, ...position, id: id, data: data, style: style, selected: selected }));
+        }
+        const store = useStoreApi();
+        const edgeRef = useRef(null);
+        const [updating, setUpdating] = useState(false);
+        const markerStartUrl = useMemo(() => `url(#${getMarkerId(markerStart, rfId)})`, [markerStart, rfId]);
+        const markerEndUrl = useMemo(() => `url(#${getMarkerId(markerEnd, rfId)})`, [markerEnd, rfId]);
+        if (hidden) {
+            return null;
+        }
+        const handleEdgeUpdater = (fromPortType) => (event) => {
+            if (event.button !== 0) {
+                return;
+            }
+            const { edges } = store.getState();
+            const nodeId = props[fromPortType];
+            const edge = edges.find((e) => e.id === id);
+            setUpdating(true);
+            onEdgeUpdateStart?.(event, edge, fromPortType);
+            const onConnectEdge = (connection) => onEdgeUpdate?.(edge, connection);
+            const handleEdgeUpdateEnd = (evt) => {
+                setUpdating(false);
+                onEdgeUpdateEnd?.(evt, edge, fromPortType);
+            };
             handlePointerDown({
+                isAnchor: true,
                 event,
                 nodeId,
-                portType: type,
+                portType: fromPortType,
                 getState: store.getState,
                 setState: store.setState,
-                onConnect: handleOnConnect,
+                onConnect: onConnectEdge,
+                onEdgeUpdateEnd: handleEdgeUpdateEnd,
             });
-        }
-    };
-    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 }));
-}
-Port.displayName = 'Port';
-var Port$1 = memo(Port);
-
-function Nodes({ data }) {
-    return (jsxs(Fragment, { children: [jsx(Port$1, { type: "target", position: Position.Top }), data.label, jsx(Port$1, { type: "source", position: Position.Bottom })] }));
-}
-
-function useGetPointerPosition() {
-    const store = useStoreApi();
-    // returns the pointer position projected to the RF coordinate system
-    const getPointerPosition = useCallback(({ sourceEvent }) => {
-        const { transform, gridStep } = store.getState();
-        const x = sourceEvent.touches
-            ? sourceEvent.touches[0].clientX
-            : sourceEvent.clientX;
-        const y = sourceEvent.touches
-            ? sourceEvent.touches[0].clientY
-            : sourceEvent.clientY;
-        const pointerPos = {
-            x: (x - transform[0]) / transform[2],
-            y: (y - transform[1]) / transform[2],
         };
-        // we need the snapped position in order to be able to skip unnecessary drag events
-        return {
-            xSnapped: gridStep
-                ? gridStep[0] * Math.round(pointerPos.x / gridStep[0])
-                : pointerPos.x,
-            ySnapped: gridStep
-                ? gridStep[1] * Math.round(pointerPos.y / gridStep[1])
-                : pointerPos.y,
-            ...pointerPos,
+        const onEdgeClick = (event) => {
+            const { edges } = store.getState();
+            if (onClick) {
+                const edge = edges.find((e) => e.id === id);
+                onClick(event, edge);
+            }
         };
-    }, []);
-    return getPointerPosition;
-}
+        const onEdgeDoubleClick = getMouseHandler(id, store.getState, onDoubleClick);
+        const onEdgeContextMenu = getMouseHandler(id, store.getState, onContextMenu);
+        const onEdgeMouseEnter = getMouseHandler(id, store.getState, onMouseEnter);
+        const onEdgeMouseMove = getMouseHandler(id, store.getState, onMouseMove);
+        const onEdgeMouseLeave = getMouseHandler(id, store.getState, onMouseLeave);
+        const inactive = !elementsSelectable;
+        const wrapperClassName = cc([
+            'react-diagram__edge',
+            `react-diagram__edge-${type}`,
+            className,
+            { selected, inactive },
+        ]);
+        const marker = { markerStart: markerStartUrl, markerEnd: markerEndUrl };
+        const labelProps = {
+            label,
+            labelStyle,
+            labelShowBg,
+            labelBgStyle,
+            labelBgPadding,
+            labelBgBorderRadius,
+        };
+        const events = {
+            onClick: onEdgeClick,
+            onDoubleClick: onEdgeDoubleClick,
+            onContextMenu: onEdgeContextMenu,
+            onMouseEnter: onEdgeMouseEnter,
+            onMouseMove: onEdgeMouseMove,
+            onMouseLeave: onEdgeMouseLeave,
+        };
+        return (jsx("g", { ...events, ref: edgeRef, className: wrapperClassName, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : undefined, "aria-label": ariaLabel === null
+                ? undefined
+                : ariaLabel
+                    ? ariaLabel
+                    : `Edge from ${source} to ${target}`, "aria-describedby": isFocusable ? `${ARIA_EDGE_DESC_KEY}-${rfId}` : undefined, children: !updating && (jsxs(Fragment, { children: [jsx(EdgeComponent, { ...sourceAndTargetIds, ...marker, ...labelProps, ...position, id: id, data: data, style: style, selected: selected }), jsx(Anchor, { position: sourcePosition, centerX: sourceX, centerY: sourceY, radius: edgeUpdaterRadius, onMouseDown: handleEdgeUpdater('target'), 
+                        // onMouseEnter={console.log}
+                        // onMouseOut={console.log}
+                        type: "source" }), jsx(Anchor, { position: targetPosition, centerX: targetX, centerY: targetY, radius: edgeUpdaterRadius, onMouseDown: handleEdgeUpdater('source'), 
+                        // onMouseEnter={console.log}
+                        // onMouseOut={console.log}
+                        type: "target" })] })) }));
+    };
+    EdgeWrapper.displayName = 'EdgeWrapper';
+    return memo(EdgeWrapper);
+};
 
-const 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],
+const createEdgeTypes = (edgeTypes) => {
+    const defaultTypes = {
+        default: wrapEdge((edgeTypes.straight || StraightEdge)),
+        step: wrapEdge((edgeTypes.step || StepEdge)),
+        bezier: wrapEdge((edgeTypes.bezier || BezierEdge)),
+    };
+    const wrappedTypes = {};
+    const customTypes = Object.keys(edgeTypes)
+        .filter((k) => !Object.keys(defaultTypes).includes(k))
+        .reduce((res, key) => {
+        res[key] = wrapEdge((edgeTypes[key] || StepEdge));
+        return res;
+    }, wrappedTypes);
+    return {
+        ...defaultTypes,
+        ...customTypes,
     };
-    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(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({ nodesSelectionActive: false });
-    if (!node.selected) {
-        addSelectedNodes([id]);
-    }
-    else if (unselect || (node.selected && multiSelectionActive)) {
-        unselectNodes({ nodes: [node] });
-        requestAnimationFrame(() => nodeRef?.current?.blur());
+function getPortPosition(position, nodeRect, port = null) {
+    const x = (port?.x || 0) + nodeRect.x;
+    const y = (port?.y || 0) + nodeRect.y;
+    const width = port?.width || nodeRect.width;
+    const height = port?.height || nodeRect.height;
+    switch (position) {
+        case Position.Top:
+            return {
+                x: x + width / 2,
+                y,
+            };
+        case Position.Right:
+            return {
+                x: x + width,
+                y: y + height / 2,
+            };
+        case Position.Bottom:
+            return {
+                x: x + width / 2,
+                y: y + height,
+            };
+        case Position.Left:
+            return {
+                x,
+                y: y + height / 2,
+            };
     }
 }
-
-function isParentSelected(node, nodeInternals) {
-    if (!node.parentNode) {
-        return false;
+function getPort(bounds, portId) {
+    if (!bounds) {
+        return null;
     }
-    const parentNode = nodeInternals.get(node.parentNode);
-    if (!parentNode) {
-        return false;
+    if (bounds.length === 1 || !portId) {
+        return bounds[0];
     }
-    if (parentNode.selected) {
-        return true;
+    else if (portId) {
+        return bounds.find((d) => d.id === portId) || null;
     }
-    return isParentSelected(parentNode, nodeInternals);
+    return null;
 }
-function getDragItems(nodeInternals, nodesDraggable, mousePosition, nodeId) {
-    return Array.from(nodeInternals.values())
-        .filter((n) => (n.selected || n.id === nodeId) &&
-        (!n.parentNode || !isParentSelected(n, nodeInternals)) &&
-        (n.draggable ||
-            (nodesDraggable && typeof n.draggable === 'undefined')))
-        .map((n) => ({
-        id: n.id,
-        position: n.position || { x: 0, y: 0 },
-        positionAbsolute: n.positionAbsolute || { x: 0, y: 0 },
-        distance: {
-            x: mousePosition.x - (n.positionAbsolute?.x ?? 0),
-            y: mousePosition.y - (n.positionAbsolute?.y ?? 0),
-        },
-        delta: {
-            x: 0,
-            y: 0,
+const getEdgePositions = (sourceNodeRect, sourcePort, sourcePosition, targetNodeRect, targetPort, targetPosition) => {
+    const sourcePortPos = getPortPosition(sourcePosition, sourceNodeRect, sourcePort);
+    const targetPortPos = getPortPosition(targetPosition, targetNodeRect, targetPort);
+    return {
+        sourceX: sourcePortPos.x,
+        sourceY: sourcePortPos.y,
+        targetX: targetPortPos.x,
+        targetY: targetPortPos.y,
+    };
+};
+function getNodeData(node) {
+    const portBounds = node?.[internalsSymbol]?.portBounds || null;
+    const isValid = portBounds &&
+        node?.width &&
+        node?.height &&
+        typeof node?.positionAbsolute?.x !== 'undefined' &&
+        typeof node?.positionAbsolute?.y !== 'undefined';
+    return [
+        {
+            x: node?.positionAbsolute?.x || 0,
+            y: node?.positionAbsolute?.y || 0,
+            width: node?.width || 0,
+            height: node?.height || 0,
         },
-        extent: n.extent,
-        parentNode: n.parentNode,
-        width: n.width,
-        height: n.height,
-    }));
+        portBounds,
+        !!isValid,
+    ];
 }
-function calcNextPosition(node, nextPosition, nodeInternals, nodeExtent, nodeOrigin = [0, 0], onError) {
-    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;
-        }
+
+const selector$3 = (s) => ({
+    edges: s.edges,
+    width: s.width,
+    height: s.height,
+    nodeInternals: s.nodeInternals,
+    onError: s.onError,
+});
+function EdgeRenderer({ rfId, edgeTypes, noPanClassName, edgeUpdaterRadius, onEdgeClick, onEdgeDoubleClick, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, }) {
+    const { edges, width, height, nodeInternals } = useStore(selector$3, shallow);
+    return (jsxs("svg", { width: width || '100vw', height: height || '100vh', className: "react-diagram__edges react-diagram__container", children: [jsx(MarkerComponent$1, { defaultColor: "#000000", rfId: rfId }), jsx("g", { children: edges.map((edge) => {
+                    const { data, type, 
+                    // elProps
+                    id, className, style, ariaLabel, 
+                    // sourceAndTargetIds
+                    source, sourcePort, target, targetPort, 
+                    // marker
+                    markerEnd, markerStart, 
+                    // labelProps
+                    label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding, labelBgBorderRadius, } = edge;
+                    const [sourceNodeRect, sourcePortBounds, sourceIsValid] = getNodeData(nodeInternals.get(source));
+                    const [targetNodeRect, targetPortBounds, targetIsValid] = getNodeData(nodeInternals.get(target));
+                    if (!sourceIsValid || !targetIsValid) {
+                        return null;
+                    }
+                    const edgeType = type || 'straight';
+                    const EdgeComponent = edgeTypes[edgeType] || edgeTypes.default;
+                    const targetNodePorts = targetPortBounds.target;
+                    const sourcePortInfo = getPort(sourcePortBounds.source, sourcePort);
+                    const targetPortInfo = getPort(targetNodePorts, targetPort);
+                    const sourcePosition = sourcePortInfo?.position || Position.Bottom;
+                    const targetPosition = targetPortInfo?.position || Position.Top;
+                    const isFocusable = !!edge.focusable;
+                    if (!sourcePortInfo || !targetPortInfo) {
+                        return null;
+                    }
+                    const elProps = {
+                        id,
+                        className: cc([className, noPanClassName]),
+                        style,
+                        ariaLabel,
+                    };
+                    const sourceAndTargetIds = {
+                        source,
+                        sourcePort,
+                        target,
+                        targetPort,
+                    };
+                    const marker = {
+                        markerEnd,
+                        markerStart,
+                    };
+                    const labelProps = {
+                        label,
+                        labelStyle,
+                        labelShowBg,
+                        labelBgStyle,
+                        labelBgPadding,
+                        labelBgBorderRadius,
+                    };
+                    const edgePositions = getEdgePositions(sourceNodeRect, sourcePortInfo, sourcePosition, targetNodeRect, targetPortInfo, targetPosition);
+                    const position = {
+                        ...edgePositions,
+                        sourcePosition,
+                        targetPosition,
+                    };
+                    const events = {
+                        onClick: onEdgeClick,
+                        onDoubleClick: onEdgeDoubleClick,
+                        onContextMenu: onEdgeContextMenu,
+                        onMouseEnter: onEdgeMouseEnter,
+                        onMouseMove: onEdgeMouseMove,
+                        onMouseLeave: onEdgeMouseLeave,
+                        onEdgeUpdate,
+                        onEdgeUpdateStart,
+                        onEdgeUpdateEnd,
+                    };
+                    return (jsx(EdgeComponent, { ...elProps, ...sourceAndTargetIds, ...marker, ...labelProps, ...position, ...events, rfId: rfId, type: edgeType, data: data, isFocusable: isFocusable, edgeUpdaterRadius: edgeUpdaterRadius }, id));
+                }) })] }));
+}
+EdgeRenderer.displayName = 'EdgeRenderer';
+var EdgeRenderer$1 = memo(EdgeRenderer);
+
+const oppositePosition = {
+    [Position.Left]: Position.Right,
+    [Position.Right]: Position.Left,
+    [Position.Top]: Position.Bottom,
+    [Position.Bottom]: Position.Top,
+};
+function ConnectionPath({ nodeId, portType, edge, Component, EdgeWrapper, }) {
+    const { fromNode, toX, toY } = useStore(useCallback((s) => ({
+        fromNode: s.nodeInternals.get(nodeId),
+        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 portBounds = fromPortBounds?.[portType];
+    if (!fromNode || !portBounds) {
+        return null;
     }
-    else if (node.extent && node.parentNode) {
-        const parent = nodeInternals.get(node.parentNode);
-        const { x: parentX, y: parentY } = getNodePositionWithOrigin(parent, nodeOrigin).positionAbsolute;
-        currentExtent = [
-            [node.extent[0][0] + parentX, node.extent[0][1] + parentY],
-            [node.extent[1][0] + parentX, node.extent[1][1] + parentY],
-        ];
+    const fromPort = portBounds[0];
+    const fromPortX = fromPort
+        ? fromPort.x + fromPort.width / 2
+        : (fromNode.width ?? 0) / 2;
+    const fromPortY = fromPort
+        ? fromPort.y + fromPort.height / 2
+        : fromNode.height ?? 0;
+    const fromX = (fromNode.positionAbsolute?.x ?? 0) + fromPortX;
+    const fromY = (fromNode.positionAbsolute?.y ?? 0) + fromPortY;
+    const fromPosition = fromPort?.position;
+    const toPosition = fromPosition ? oppositePosition[fromPosition] : null;
+    if (!fromPosition || !toPosition) {
+        return null;
     }
-    let parentPosition = { x: 0, y: 0 };
-    if (node.parentNode) {
-        const parentNode = nodeInternals.get(node.parentNode);
-        parentPosition = getNodePositionWithOrigin(parentNode, nodeOrigin).positionAbsolute;
+    if (Component) {
+        return (jsx(Component, { fromNode: fromNode, fromPort: fromPort, fromX: fromX, fromY: fromY, toX: toX, toY: toY, fromPosition: fromPosition, toPosition: toPosition }));
     }
-    const positionAbsolute = currentExtent
-        ? clampPosition(nextPosition, currentExtent)
-        : nextPosition;
+    return (jsx(EdgeWrapper, { id: edge.id, className: "react-diagram__connection", type: edge.type || 'default', source: edge.source, target: edge.target, isFocusable: false, sourceX: fromX, sourceY: fromY, targetX: toX, targetY: toY, sourcePosition: fromPosition, targetPosition: toPosition }));
+}
+ConnectionPath.displayName = 'ConnectionPath';
+
+const selector$2 = (s) => ({
+    edges: s.edges,
+    nodeId: s.connectionNodeId,
+    portType: s.connectionPortType,
+});
+function ConnectionLineRenderer({ containerStyle, edgeTypes, component, }) {
+    const { nodeId, portType, edges } = useStore(selector$2, shallow);
+    const isValid = !!(nodeId && portType);
+    if (!isValid) {
+        return null;
+    }
+    const selectedEdge = edges.find((edge) => edge[portType] === nodeId);
+    if (!selectedEdge)
+        return null;
+    const EdgeWrapper = selectedEdge?.type
+        ? edgeTypes[selectedEdge.type]
+        : edgeTypes.default;
+    return (jsx("svg", { style: containerStyle, className: "react-diagram__container react-diagram__connection-line", children: jsx("g", { className: "react-diagram__connection", children: jsx(ConnectionPath, { nodeId: nodeId, portType: portType, edge: selectedEdge, Component: component, EdgeWrapper: EdgeWrapper }) }) }));
+}
+
+function DiagramView({ rfId, 
+// DiagramRenderer props
+noPanClassName, panning, defaultViewport, multiSelectionKeyCode, onMove, onMoveStart, onMoveEnd, 
+// NodeRenderer props
+onlyRenderVisibleElements, disableKeyboardA11y, noDragClassName, nodeOrigin, 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 })] }));
+}
+DiagramView.displayName = 'DiagramView';
+var DiagramView$1 = memo(DiagramView);
+
+const selector$1 = (s) => {
+    const { setNodes, setEdges, setNodeExtent, setTranslateExtent, setMinZoom, setMaxZoom, } = s;
     return {
-        position: {
-            x: positionAbsolute.x - parentPosition.x,
-            y: positionAbsolute.y - parentPosition.y,
-        },
-        positionAbsolute,
+        setNodes,
+        setEdges,
+        setNodeExtent,
+        setTranslateExtent,
+        setMinZoom,
+        setMaxZoom,
     };
+};
+function useStoreUpdater(value, setStoreState) {
+    useEffect(() => {
+        if (typeof value !== 'undefined') {
+            setStoreState(value);
+        }
+    }, [value]);
 }
-function 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,
-    ];
+// updates with values in store that don't have a dedicated setter function
+function useDirectStoreUpdater(key, value, setState) {
+    useEffect(() => {
+        if (typeof value !== 'undefined') {
+            setState({ [key]: value });
+        }
+    }, [value]);
 }
-function 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 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 { setNodes, setEdges, setNodeExtent, setTranslateExtent, setMinZoom, setMaxZoom, } = useStore(selector$1, shallow);
+    const store = useStoreApi();
+    useStoreUpdater(nodes, setNodes);
+    useStoreUpdater(edges, setEdges);
+    useStoreUpdater(nodeExtent, setNodeExtent);
+    useStoreUpdater(translateExtent, setTranslateExtent);
+    useStoreUpdater(minZoom, setMinZoom);
+    useStoreUpdater(maxZoom, setMaxZoom);
+    useDirectStoreUpdater('smoothStep', smoothStep, store.setState);
+    useDirectStoreUpdater('centerStep', centerStep, store.setState);
+    useDirectStoreUpdater('gridStep', gridStep, store.setState);
+    useDirectStoreUpdater('elevateNodesOnSelect', elevateNodesOnSelect, store.setState);
+    useDirectStoreUpdater('nodesDraggable', nodesDraggable, store.setState);
+    useDirectStoreUpdater('autoPanOnNodeDrag', autoPanOnNodeDrag, store.setState);
+    useDirectStoreUpdater('autoPanOnConnect', autoPanOnConnect, store.setState);
+    useDirectStoreUpdater('connectionRadius', connectionRadius, store.setState);
+    useDirectStoreUpdater('onNodesChange', onNodesChange, store.setState);
+    useDirectStoreUpdater('onNodeDrag', onNodeDrag, store.setState);
+    useDirectStoreUpdater('onNodeDragStart', onNodeDragStart, store.setState);
+    useDirectStoreUpdater('onNodeDragEnd', onNodeDragEnd, store.setState);
+    useDirectStoreUpdater('onEdgesChange', onEdgesChange, store.setState);
+    useDirectStoreUpdater('onConnect', onConnect, store.setState);
+    useDirectStoreUpdater('onConnectStart', onConnectStart, store.setState);
+    useDirectStoreUpdater('onConnectEnd', onConnectEnd, store.setState);
+    useDirectStoreUpdater('onError', onErrorWrapper(onError), store.setState);
+    return null;
+};
+
+function useNodeOrEdgeTypes(nodeOrEdgeTypes, createTypes) {
+    const typesKeysRef = useRef(null);
+    const typesParsed = useMemo(() => {
+        if (process.env.NODE_ENV === 'development') {
+            const typeKeys = Object.keys(nodeOrEdgeTypes);
+            if (shallow(typesKeysRef.current, typeKeys)) {
+                devWarn('002');
+            }
+            typesKeysRef.current = typeKeys;
+        }
+        return createTypes(nodeOrEdgeTypes);
+    }, [nodeOrEdgeTypes]);
+    return typesParsed;
 }
 
-function useDrag({ nodeRef, nodeId, isSelectable, noDragClassName, }) {
+const NodeIdContext = createContext(null);
+const Provider = NodeIdContext.Provider;
+NodeIdContext.Consumer;
+const useNodeId = () => {
+    const nodeId = useContext(NodeIdContext);
+    return nodeId;
+};
+
+function Port({ type, position }) {
     const store = useStoreApi();
-    const dragItems = useRef([]);
-    const containerBounds = useRef(null);
-    const mousePosition = useRef({ x: 0, y: 0 });
-    const lastPosition = useRef({
-        x: null,
-        y: null,
-    });
-    const dragEvent = useRef(null);
-    const autoPanStarted = useRef(false);
-    const autoPanId = useRef(0);
-    const [dragging, setDragging] = useState(false);
-    const getPointerPosition = useGetPointerPosition();
-    useEffect(() => {
-        if (nodeRef?.current) {
-            const selection = select(nodeRef.current);
-            const updateNodes = ({ x, y }) => {
-                const { nodeInternals, onNodeDrag, updateNodePositions, nodeExtent, nodeOrigin, gridStep, onError, } = store.getState();
-                lastPosition.current = { x, y };
-                let hasChange = false;
-                dragItems.current = dragItems.current.map((n) => {
-                    const nextPosition = {
-                        x: x - n.distance.x,
-                        y: y - n.distance.y,
-                    };
-                    if (gridStep) {
-                        nextPosition.x =
-                            gridStep[0] * Math.round(nextPosition.x / gridStep[0]);
-                        nextPosition.y =
-                            gridStep[1] * Math.round(nextPosition.y / gridStep[1]);
-                    }
-                    const updatedPos = calcNextPosition(n, nextPosition, nodeInternals, nodeExtent, nodeOrigin, onError);
-                    // we want to make sure that we only fire a change event when there is a changes
-                    hasChange =
-                        hasChange ||
-                            n.position.x !== updatedPos.position.x ||
-                            n.position.y !== updatedPos.position.y;
-                    n.position = updatedPos.position;
-                    n.positionAbsolute = updatedPos.positionAbsolute;
-                    return n;
-                });
-                if (!hasChange) {
-                    return;
-                }
-                updateNodePositions(dragItems.current, true, true);
-                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 =
-                        (lastPosition.current.x ?? 0) - xMovement / transform[2];
-                    lastPosition.current.y =
-                        (lastPosition.current.y ?? 0) - yMovement / transform[2];
-                    updateNodes(lastPosition.current);
-                    panBy({ x: xMovement, y: yMovement });
-                }
-                autoPanId.current = requestAnimationFrame(autoPan);
-            };
-            const dragHandle = drag()
-                .on('start', (e) => {
-                // only allow left click
-                if (e.sourceEvent.which !== 1)
-                    return;
-                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();
-                }
-                if ((lastPosition.current.x !== pointerPosition.xSnapped ||
-                    lastPosition.current.y !== pointerPosition.ySnapped) &&
-                    dragItems.current) {
-                    dragEvent.current = e.sourceEvent;
-                    mousePosition.current = getEventPosition(e.sourceEvent, containerBounds.current);
-                    updateNodes(pointerPosition);
-                }
-            })
-                .on('end', (event) => {
-                setDragging(false);
-                autoPanStarted.current = false;
-                cancelAnimationFrame(autoPanId.current);
-                if (dragItems.current) {
-                    const { nodeInternals, updateNodePositions, onNodeDragEnd } = store.getState();
-                    updateNodePositions(dragItems.current, false, 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;
+    const nodeId = useNodeId();
+    if (!nodeId)
+        return null;
+    const handleOnConnect = (connection) => {
+        const { defaultEdgeOptions, onConnect } = store.getState();
+        const edgeParams = {
+            ...defaultEdgeOptions,
+            ...connection,
+        };
+        onConnect?.(edgeParams);
+    };
+    const onPointerDown = (event) => {
+        const isMouseTriggered = isMouseEvent(event);
+        if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
+            handlePointerDown({
+                event,
+                nodeId,
+                portType: type,
+                getState: store.getState,
+                setState: store.setState,
+                onConnect: handleOnConnect,
             });
-            selection.call(dragHandle);
-            return () => {
-                selection.on('.drag', null);
-            };
         }
-    }, [store, nodeRef, nodeId, isSelectable, noDragClassName]);
-    return dragging;
+    };
+    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 }));
+}
+Port.displayName = 'Port';
+var Port$1 = memo(Port);
+
+function Nodes({ data }) {
+    return (jsxs(Fragment, { children: [jsx(Port$1, { type: "target", position: Position.Top }), data.label, jsx(Port$1, { type: "source", position: Position.Bottom })] }));
 }
 
 const wrapNode = (NodeComponent) => {
@@ -2241,11 +2267,11 @@ const wrapNode = (NodeComponent) => {
         };
         const events = {
             onClick: onSelectNodeHandler,
-            onDoubleClick: getMouseHandler(id, store.getState, onDoubleClick),
-            onContextMenu: getMouseHandler(id, store.getState, onContextMenu),
-            onMouseEnter: getMouseHandler(id, store.getState, onMouseEnter),
-            onMouseMove: getMouseHandler(id, store.getState, onMouseMove),
-            onMouseLeave: getMouseHandler(id, store.getState, onMouseLeave),
+            onDoubleClick: getMouseHandler$1(id, store.getState, onDoubleClick),
+            onContextMenu: getMouseHandler$1(id, store.getState, onContextMenu),
+            onMouseEnter: getMouseHandler$1(id, store.getState, onMouseEnter),
+            onMouseMove: getMouseHandler$1(id, store.getState, onMouseMove),
+            onMouseLeave: getMouseHandler$1(id, store.getState, onMouseLeave),
         };
         const position = {
             positionX,
@@ -2366,11 +2392,13 @@ const initialState = {
     onNodesChange: null,
     domNode: null,
     nodeOrigin: [0, 0],
+    smoothStep: false,
+    centerStep: false,
     gridStep: undefined,
-    nodesSelectionActive: false,
     elevateNodesOnSelect: true,
     nodesDraggable: true,
     multiSelectionActive: false,
+    selectionBoxActive: false,
     d3Zoom: null,
     d3Selection: null,
     minZoom: 0.5,
@@ -2445,17 +2473,21 @@ const createRFStore = () => createStore((set, get) => ({
             onNodesChange?.(changes);
         }
     },
-    updateNodePositions: (nodeDragItems, positionChanged = true, dragging = false) => {
+    updateNodesPosition: (nodes, dragging = false, updateFunc) => {
         const { triggerNodeChanges } = get();
-        const changes = nodeDragItems.map((node) => {
+        const changes = nodes.map((node) => {
             const change = {
                 id: node.id,
                 type: 'position',
                 dragging,
             };
-            if (positionChanged) {
-                change.positionAbsolute = node.positionAbsolute;
-                change.position = node.position;
+            if (updateFunc) {
+                updateFunc(node);
+                return {
+                    ...change,
+                    position: node.position,
+                    positionAbsolute: node.positionAbsolute,
+                };
             }
             return change;
         });
@@ -2578,15 +2610,15 @@ const defaultNodeTypes = {
 const defaultEdgeTypes = {
     step: StepEdge,
 };
-const ReactDiagram = forwardRef(({ id, 
+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, 
 // StoreUpdater props
-nodes, edges, nodesDraggable, elevateNodesOnSelect, autoPanOnNodeDrag, autoPanOnConnect, connectionRadius, 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, }, 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, onNodesChange: onNodesChange, onNodeDrag: onNodeDrag, onNodeDragStart: onNodeDragStart, onNodeDragEnd: onNodeDragEnd, onEdgesChange: onEdgesChange, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onError: onError })] }) }));
+    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] }) }));
 });
 ReactDiagram.displayName = 'ReactDiagram';
 
@@ -2600,4 +2632,35 @@ function createUseItemsState(applyChanges) {
 const useNodesState = createUseItemsState(applyNodeChanges);
 const useEdgesState = createUseItemsState(applyEdgeChanges);
 
-export { 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 };
+function LinePath({ color, scaledGap, lineWidth }) {
+    const m1 = `M${scaledGap[0] / 2} 0`;
+    const v = `V${scaledGap[1]}`;
+    const m2 = `M0 ${scaledGap[1] / 2}`;
+    const h = `H${scaledGap[0]}`;
+    const path = `${m1} ${v} ${m2} ${h}`;
+    return jsx("path", { stroke: color, strokeWidth: lineWidth, d: path });
+}
+
+const selector = (s) => ({
+    transform: s.transform,
+    rfId: s.rfId,
+    gridStepGap: s.gridStep,
+});
+function Background({ gap, lineWidth = 1, color = '#000000', }) {
+    const ref = useRef(null);
+    const { transform, rfId, gridStepGap } = useStore(selector, shallow);
+    const defaultGap = gap ? gap : gridStepGap ? gridStepGap : 50;
+    const gapXY = Array.isArray(defaultGap)
+        ? defaultGap
+        : [defaultGap, defaultGap];
+    const scaledGap = [
+        gapXY[0] * transform[2] || 1,
+        gapXY[1] * transform[2] || 1,
+    ];
+    const patternOffset = [scaledGap[0] / 2, scaledGap[1] / 2];
+    return (jsxs("svg", { className: "react-diagram__container react-diagram__background", ref: ref, children: [jsx("pattern", { id: `background-${rfId}`, x: transform[0] % scaledGap[0], y: transform[1] % scaledGap[1], width: scaledGap[0], height: scaledGap[1], patternUnits: "userSpaceOnUse", patternTransform: `translate(-${patternOffset[0]},-${patternOffset[1]})`, children: jsx(LinePath, { scaledGap: scaledGap, color: color, lineWidth: lineWidth }) }), jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: `url(#${`background-${rfId}`})` })] }));
+}
+Background.displayName = 'Background';
+var index = memo(Background);
+
+export { index as Background, BaseEdge, BezierEdge, MarkerType, Port$1 as Port, Position, ReactDiagramProvider, StepEdge, addEdge, boxToRect, clamp, ReactDiagram as default, getBezierPath, getStepPath, internalsSymbol, isEdge, isNode, rectToBox, updateEdge, useEdgesState, useNodesState };