react-cosmos-diagram 0.3.0 → 0.5.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;
@@ -332,9 +401,7 @@ const getNodePositionWithOrigin = (node, nodeOrigin = [0, 0]) => {
             : position,
     };
 };
-const getNodesInside = (nodeInternals, rect, [tx, ty, tScale] = [0, 0, 1], partially = false, 
-// set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
-excludeNonSelectableNodes = false, nodeOrigin = [0, 0]) => {
+const getNodesInside = (nodeInternals, rect, [tx, ty, tScale] = [0, 0, 1], partially = false, excludeNonSelectableNodes = false, nodeOrigin = [0, 0]) => {
     const paneRect = {
         x: (rect.x - tx) / tScale,
         y: (rect.y - ty) / tScale,
@@ -433,64 +500,477 @@ 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;
+function isParentSelected(node, nodeInternals) {
+    if (!node.parentNode) {
+        return false;
+    }
+    const parentNode = nodeInternals.get(node.parentNode);
+    if (!parentNode) {
+        return false;
+    }
+    if (parentNode.selected) {
+        return true;
+    }
+    return isParentSelected(parentNode, nodeInternals);
+}
+const getDragItems = (nodeInternals, nodesDraggable, mousePosition, nodeId) => {
+    const filteredNode = Array.from(nodeInternals.values()).filter((n) => {
+        const hasSize = n.width && n.height;
+        const isSelected = n.selected || n.id === nodeId;
+        const hasNoParent = !n.parentNode || !isParentSelected(n, nodeInternals);
+        const isDraggable = n.draggable || (nodesDraggable && typeof n.draggable === 'undefined');
+        return hasSize && isSelected && hasNoParent && isDraggable;
+    });
+    return filteredNode.map((n) => ({
+        id: n.id,
+        position: n.position || { x: 0, y: 0 },
+        positionAbsolute: n.positionAbsolute || { x: 0, y: 0 },
+        distance: {
+            x: mousePosition.x - (n.positionAbsolute?.x ?? 0),
+            y: mousePosition.y - (n.positionAbsolute?.y ?? 0),
+        },
+        extent: n.extent,
+        parentNode: n.parentNode,
+        width: n.width,
+        height: n.height,
+    }));
+};
+const calcNextPosition = (node, nextPosition, nodeInternals, nodeExtent, nodeOrigin = [0, 0], onError) => {
+    let currentExtent = node.extent || nodeExtent;
+    if (node.extent === 'parent') {
+        if (node.parentNode && node.width && node.height) {
+            const parent = nodeInternals.get(node.parentNode);
+            const { x: parentX, y: parentY } = getNodePositionWithOrigin(parent, nodeOrigin).positionAbsolute;
+            currentExtent =
+                parent &&
+                    isNumeric(parentX) &&
+                    isNumeric(parentY) &&
+                    isNumeric(parent.width) &&
+                    isNumeric(parent.height)
+                    ? [
+                        [
+                            parentX + node.width * nodeOrigin[0],
+                            parentY + node.height * nodeOrigin[1],
+                        ],
+                        [
+                            parentX +
+                                parent.width -
+                                node.width +
+                                node.width * nodeOrigin[0],
+                            parentY +
+                                parent.height -
+                                node.height +
+                                node.height * nodeOrigin[1],
+                        ],
+                    ]
+                    : currentExtent;
+        }
+        else {
+            onError?.('011');
+            currentExtent = nodeExtent;
+        }
+    }
+    else if (node.extent && node.parentNode) {
+        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 {
+        position: {
+            x: positionAbsolute.x - parentPosition.x,
+            y: positionAbsolute.y - parentPosition.y,
+        },
+        positionAbsolute,
+    };
+};
+const getEventHandlerParams = ({ nodeId, dragItems, nodeInternals, }) => {
+    const extentedDragItems = dragItems.map((n) => {
+        const node = nodeInternals.get(n.id);
+        return {
+            ...node,
+            position: n.position,
+            positionAbsolute: n.positionAbsolute,
+        };
+    });
+    return [
+        nodeId
+            ? extentedDragItems.find((n) => n.id === nodeId)
+            : extentedDragItems[0],
+        extentedDragItems,
+    ];
+};
+const hasSelector = (target, selector, nodeRef) => {
+    let current = target;
+    do {
+        if (current?.matches(selector))
+            return true;
+        if (current === nodeRef.current)
+            return false;
+        current = current.parentElement;
+    } while (current);
+    return false;
+};
+const hasChangedPosition = (beforePositions, currentPosition) => beforePositions.x !== currentPosition.x ||
+    beforePositions.y !== currentPosition.y;
+
+const has = Object.prototype.hasOwnProperty;
+const deepEqual = (foo, bar) => {
+    let constructor;
+    let length;
+    if (foo === bar)
+        return true;
+    if (foo && bar && foo.constructor === bar.constructor) {
+        constructor = foo.constructor;
+        if (constructor === Date)
+            return foo.getTime() === bar.getTime();
+        if (constructor === RegExp)
+            return foo.toString() === bar.toString();
+        if (constructor === Array) {
+            if ((length = foo.length) === bar.length) {
+                while (length-- && deepEqual(foo[length], bar[length]))
+                    ;
             }
-            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;
+            return length === -1;
+        }
+        if (!constructor || typeof foo === 'object') {
+            length = 0;
+            for (constructor in foo) {
+                if (has.call(foo, constructor) &&
+                    ++length &&
+                    !has.call(bar, constructor))
+                    return false;
+                if (!(constructor in bar) ||
+                    !deepEqual(foo[constructor], bar[constructor]))
+                    return false;
             }
-            parent.width = parent.style.width;
-            parent.height = parent.style.height;
+            return Object.keys(bar).length === length;
         }
     }
+    return foo !== foo && bar !== bar;
 };
-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;
+
+function useUpdateIntersectionNodes() {
+    const store = useStoreApi();
+    const intersectionChanges = useRef([]);
+    const resetIntersectedNodes = useCallback((intersectedNodes) => {
+        const hasIntersectedNodes = intersectedNodes.length;
+        let beforeChanges;
+        if (hasIntersectedNodes) {
+            beforeChanges = intersectionChanges.current
+                .filter((beforeChange) => {
+                return !intersectedNodes.some((intersectedNode) => beforeChange.id === intersectedNode.id);
+            })
+                .map((beforeChange) => ({
+                ...beforeChange,
+                intersected: false,
+            }));
         }
-        const updateItem = { ...item };
-        for (const currentChange of currentChanges) {
-            if (currentChange) {
-                switch (currentChange.type) {
-                    case 'select': {
-                        updateItem.selected = currentChange.selected;
-                        break;
+        else {
+            beforeChanges = intersectionChanges.current.map((beforeChange) => ({
+                ...beforeChange,
+                intersected: false,
+            }));
+        }
+        return beforeChanges;
+    }, []);
+    const updateNodesIntersection = useCallback((dragItems) => {
+        const { getNodes, triggerNodeChanges } = store.getState();
+        const intersectedDraggingNodeIds = [];
+        const intersectedNodes = getNodes()
+            .filter((node) => {
+            const { width, height, position, parentNode } = node;
+            if (parentNode)
+                return;
+            if (width && height) {
+                return dragItems.current?.some((dragItem) => {
+                    const { position: dPosition, width: dWidth, height: dHeight, } = dragItem;
+                    if (node.id === dragItem.id)
+                        return;
+                    if (dragItem.parentNode)
+                        return;
+                    if (!dWidth || !dHeight)
+                        return;
+                    const leftIn = dPosition.x + dWidth >= position.x, rightIn = position.x + width >= dPosition.x, topIn = dPosition.y + dHeight >= position.y, bottomIn = position.y + height >= dPosition.y;
+                    const isIn = leftIn && rightIn && topIn && bottomIn;
+                    if (isIn) {
+                        if (!intersectedDraggingNodeIds.includes(dragItem.id)) {
+                            intersectedDraggingNodeIds.push(dragItem.id);
+                        }
                     }
-                    case 'position': {
+                    return isIn;
+                });
+            }
+        })
+            .map((node) => {
+            return {
+                id: node.id,
+                type: 'intersect',
+                intersected: true,
+            };
+        });
+        const intersectedDraggingNodes = intersectedDraggingNodeIds.map((id) => {
+            return {
+                id,
+                type: 'intersect',
+                intersected: true,
+            };
+        });
+        const changes = [...intersectedNodes, ...intersectedDraggingNodes];
+        if (!deepEqual(changes, intersectionChanges.current)) {
+            const beforeChanges = resetIntersectedNodes(changes);
+            intersectionChanges.current = changes;
+            triggerNodeChanges([...changes, ...beforeChanges]);
+        }
+    }, []);
+    return updateNodesIntersection;
+}
+
+const isDragItem = (node) => 'distance' in node;
+function useDrag({ nodeRef, nodeId, isSelectable, noDragClassName, }) {
+    const store = useStoreApi();
+    const dragItems = useRef([]);
+    const containerBounds = useRef(null);
+    const mousePosition = useRef({ x: 0, y: 0 });
+    const lastPosition = useRef({ x: 0, y: 0 });
+    const dragEvent = useRef(null);
+    const autoPanStarted = useRef(false);
+    const autoPanId = useRef(0);
+    const [dragging, setDragging] = useState(false);
+    const getPointerPosition = useGetPointerPosition();
+    const updateNodesIntersection = useUpdateIntersectionNodes();
+    const updateNodePosition = (pointerPositions, dragEnd = false) => (dragItem) => {
+        if (!isDragItem(dragItem))
+            return;
+        const { nodeInternals, nodeExtent, nodeOrigin, smoothStep, gridStep, onError, } = store.getState();
+        const { distance, width, height } = dragItem;
+        const { x, y, getStepPosition } = pointerPositions;
+        let nextPosition = {
+            x: x - distance.x,
+            y: y - distance.y,
+        };
+        if (gridStep && getStepPosition) {
+            const nodeSize = { width, height };
+            const stepPosition = getStepPosition({
+                position: nextPosition,
+                nodeSize,
+            });
+            if (!smoothStep || (smoothStep && dragEnd)) {
+                nextPosition = stepPosition;
+            }
+        }
+        const updatedPosition = calcNextPosition(dragItem, nextPosition, nodeInternals, nodeExtent, nodeOrigin, onError);
+        const hasChange = hasChangedPosition(dragItem.position, updatedPosition.position);
+        if (!hasChange)
+            return;
+        dragItem.position = updatedPosition.position;
+        dragItem.positionAbsolute = updatedPosition.positionAbsolute;
+    };
+    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);
+                    updateNodesIntersection(dragItems);
+                }
+            })
+                .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;
+}
+
+function SelectionBox({ rect, transform }) {
+    const nodeRef = useRef(null);
+    useDrag({ nodeRef });
+    const { width, height, x, y } = rect;
+    return (jsx("div", { className: cc([
+            'react-diagram__selection-box',
+            'react-diagram__container',
+        ]), style: {
+            transform,
+        }, children: jsx("div", { ref: nodeRef, className: "react-diagram__selection-box-rect", tabIndex: -1, style: {
+                width,
+                height,
+                top: y,
+                left: x,
+            } }) }));
+}
+var SelectionBox$1 = memo(SelectionBox);
+
+const handleParentExpand = (res, updateItem) => {
+    const parent = res.find((e) => e.id === updateItem.parentNode);
+    if (parent) {
+        const extendWidth = updateItem.position.x + updateItem.width - parent.width;
+        const extendHeight = updateItem.position.y + updateItem.height - parent.height;
+        if (extendWidth > 0 ||
+            extendHeight > 0 ||
+            updateItem.position.x < 0 ||
+            updateItem.position.y < 0) {
+            parent.style = { ...parent.style } || {};
+            parent.style.width = parent.style.width ?? parent.width;
+            parent.style.height = parent.style.height ?? parent.height;
+            if (extendWidth > 0) {
+                parent.style.width += extendWidth;
+            }
+            if (extendHeight > 0) {
+                parent.style.height += extendHeight;
+            }
+            if (updateItem.position.x < 0) {
+                const xDiff = Math.abs(updateItem.position.x);
+                parent.position.x = parent.position.x - xDiff;
+                parent.style.width += xDiff;
+                updateItem.position.x = 0;
+            }
+            if (updateItem.position.y < 0) {
+                const yDiff = Math.abs(updateItem.position.y);
+                parent.position.y = parent.position.y - yDiff;
+                parent.style.height += yDiff;
+                updateItem.position.y = 0;
+            }
+            parent.width = parent.style.width;
+            parent.height = parent.style.height;
+        }
+    }
+};
+const applyChanges = (changes, elements) => {
+    // we need this hack to handle the setNodes and setEdges function of the useReactDiagram hook for controlled flows
+    if (changes.some((c) => c.type === 'reset')) {
+        return changes.filter((c) => c.type === 'reset').map((c) => c.item);
+    }
+    const initElements = changes
+        .filter((c) => c.type === 'add')
+        .map((c) => c.item);
+    return elements.reduce((res, item) => {
+        const currentChanges = changes.filter((c) => c.id === item.id);
+        if (currentChanges.length === 0) {
+            res.push(item);
+            return res;
+        }
+        const updateItem = { ...item };
+        for (const currentChange of currentChanges) {
+            if (currentChange) {
+                switch (currentChange.type) {
+                    case 'select': {
+                        updateItem.selected = currentChange.selected;
+                        break;
+                    }
+                    case 'position': {
                         if (typeof currentChange.position !== 'undefined') {
                             updateItem.position = currentChange.position;
                         }
@@ -525,6 +1005,10 @@ const applyChanges = (changes, elements) => {
                         }
                         break;
                     }
+                    case 'intersect': {
+                        updateItem.intersected = currentChange.intersected;
+                        break;
+                    }
                     case 'remove': {
                         return res;
                     }
@@ -561,10 +1045,14 @@ function getSelectionChanges(items, selectedIds) {
     }, []);
 }
 
-const selector$5 = (s) => {
+const selector$6 = (s) => {
+    const { elementsSelectable, transform, selectionBoxActive, getNodes } = s;
+    const selectedNodes = getNodes().filter((n) => n.selected);
     return {
-        elementsSelectable: s.elementsSelectable,
-        transform: `translate(${s.transform[0]}px,${s.transform[1]}px) scale(${s.transform[2]})`,
+        elementsSelectable,
+        selectionBoxRect: getRectOfNodes(selectedNodes, s.nodeOrigin),
+        transformString: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
+        selectionBoxActive,
     };
 };
 function DragSelection({ children, dragSelectionKeyPressed, }) {
@@ -572,7 +1060,7 @@ function DragSelection({ children, dragSelectionKeyPressed, }) {
     const dragSelection = useRef(null);
     const prevSelectedNodesCount = useRef(0);
     const containerBounds = useRef();
-    const { elementsSelectable, transform } = useStore(selector$5, shallow);
+    const { elementsSelectable, selectionBoxRect, transformString, selectionBoxActive, } = useStore(selector$6, shallow);
     const [dragBoxStartPosition, setDragBoxStartPosition] = useState({
         x: 0,
         y: 0,
@@ -583,14 +1071,7 @@ function DragSelection({ children, dragSelectionKeyPressed, }) {
         x: 0,
         y: 0,
     });
-    const [selectionBoxRect, setSelectionBoxRect] = useState({
-        width: 0,
-        height: 0,
-        x: 0,
-        y: 0,
-    });
     const [dragBoxActive, setDragBoxActive] = useState(false);
-    const [selectionBoxActive, setSelectionBoxActive] = useState(false);
     const resetDragBox = () => {
         setDragBoxStartPosition({
             x: 0,
@@ -607,8 +1088,10 @@ function DragSelection({ children, dragSelectionKeyPressed, }) {
     const onClick = (e) => {
         if (e.target === dragSelection.current) {
             store.getState().resetSelectedElements();
+            store.setState({
+                selectionBoxActive: false,
+            });
             setDragBoxActive(false);
-            setSelectionBoxActive(false);
         }
     };
     const onMouseDown = (event) => {
@@ -636,7 +1119,6 @@ function DragSelection({ children, dragSelectionKeyPressed, }) {
     };
     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 ||
@@ -645,8 +1127,10 @@ function DragSelection({ children, dragSelectionKeyPressed, }) {
             !dragSelectionKeyPressed) {
             return;
         }
+        store.setState({
+            selectionBoxActive: false,
+        });
         setDragBoxActive(true);
-        setSelectionBoxActive(false);
         const mousePos = getEventPosition(event, containerBounds.current);
         const startX = dragBoxStartPosition.x ?? 0;
         const startY = dragBoxStartPosition.y ?? 0;
@@ -659,8 +1143,6 @@ function DragSelection({ children, dragSelectionKeyPressed, }) {
         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);
@@ -674,19 +1156,22 @@ function DragSelection({ children, dragSelectionKeyPressed, }) {
         if (event.button !== 0) {
             return;
         }
-        setSelectionBoxActive(prevSelectedNodesCount.current > 0);
+        store.setState({
+            selectionBoxActive: prevSelectedNodesCount.current > 0,
+        });
         resetDragBox();
     };
     const onMouseLeave = () => {
-        setSelectionBoxActive(prevSelectedNodesCount.current > 0);
+        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: transform }))] }));
+    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 }))] }));
 }
-DragSelection.displayName = 'DragSelection';
 
-const selector$4 = (s) => {
+const selector$5 = (s) => {
     const { minZoom, maxZoom, translateExtent } = s;
     return {
         minZoom,
@@ -695,7 +1180,7 @@ const selector$4 = (s) => {
     };
 };
 function DiagramRenderer({ children, multiSelectionKeyCode, noPanClassName, panning, defaultViewport, onMove, onMoveStart, onMoveEnd, }) {
-    const { minZoom, maxZoom, translateExtent } = useStore(selector$4);
+    const { minZoom, maxZoom, translateExtent } = useStore(selector$5);
     const [dragSelectionKeyPressed, setDragSelectionKeyPressed] = useState(false);
     useGlobalKeyHandler(multiSelectionKeyCode);
     const handleKeyDown = (e) => {
@@ -737,14 +1222,14 @@ var MarkerType;
     MarkerType["Arrow"] = "arrow";
 })(MarkerType || (MarkerType = {}));
 
-const selector$3 = (s) => ({
+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$3, shallow);
+    const { nodesDraggable, elementsSelectable, updateNodeDimensions, onError } = useStore(selector$4, shallow);
     const nodes = useVisibleNodes();
     const resizeObserverRef = useRef();
     const resizeObserver = useMemo(() => {
@@ -768,7 +1253,7 @@ function NodeRenderer({ nodeTypes, onNodeClick, onNodeMouseEnter, onNodeMouseMov
     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;
+            id, className, style, width, height, ariaLabel, positionAbsolute, hidden, selected, selectable, draggable, intersected, } = node;
             let nodeType = type || 'default';
             if (!nodeTypes[nodeType]) {
                 onError?.('010', nodeType);
@@ -783,11 +1268,9 @@ function NodeRenderer({ nodeTypes, onNodeClick, onNodeMouseEnter, onNodeMouseMov
             const elProps = {
                 id,
                 className,
-                style: {
-                    ...style,
-                    width: node.width,
-                    height: node.height,
-                },
+                style,
+                width,
+                height,
                 ariaLabel,
             };
             const events = {
@@ -806,6 +1289,7 @@ function NodeRenderer({ nodeTypes, onNodeClick, onNodeMouseEnter, onNodeMouseMov
             };
             const booleanProps = {
                 selected: !!selected,
+                intersected,
                 isSelectable,
                 isDraggable,
                 hidden,
@@ -1333,7 +1817,7 @@ 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) {
+function getMouseHandler(id, getState, handler) {
     return handler === undefined
         ? handler
         : (event) => {
@@ -1417,11 +1901,11 @@ const wrapEdge = (EdgeComponent) => {
                 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 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',
@@ -1549,7 +2033,7 @@ function getNodeData(node) {
     ];
 }
 
-const selector$2 = (s) => ({
+const selector$3 = (s) => ({
     edges: s.edges,
     width: s.width,
     height: s.height,
@@ -1557,7 +2041,7 @@ const selector$2 = (s) => ({
     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);
+    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
@@ -1669,13 +2153,13 @@ function ConnectionPath({ nodeId, portType, edge, Component, EdgeWrapper, }) {
 }
 ConnectionPath.displayName = 'ConnectionPath';
 
-const selector$1 = (s) => ({
+const selector$2 = (s) => ({
     edges: s.edges,
     nodeId: s.connectionNodeId,
     portType: s.connectionPortType,
 });
 function ConnectionLineRenderer({ containerStyle, edgeTypes, component, }) {
-    const { nodeId, portType, edges } = useStore(selector$1, shallow);
+    const { nodeId, portType, edges } = useStore(selector$2, shallow);
     const isValid = !!(nodeId && portType);
     if (!isValid) {
         return null;
@@ -1687,480 +2171,137 @@ function ConnectionLineRenderer({ containerStyle, edgeTypes, component, }) {
         ? 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;
-};
-
-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,
-        };
-        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,
-            });
-        }
-    };
-    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,
-        };
-    }, []);
-    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(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 isParentSelected(node, nodeInternals) {
-    if (!node.parentNode) {
-        return false;
-    }
-    const parentNode = nodeInternals.get(node.parentNode);
-    if (!parentNode) {
-        return false;
-    }
-    if (parentNode.selected) {
-        return true;
-    }
-    return isParentSelected(parentNode, nodeInternals);
-}
-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,
-        },
-        extent: n.extent,
-        parentNode: n.parentNode,
-        width: n.width,
-        height: n.height,
-    }));
-}
-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;
-        }
-    }
-    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;
+}
+
+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) => {
-    function NodeWrapper({ id, type, data, positionX, positionY, sourcePosition, targetPosition, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, style, className, selected, isSelectable, isDraggable, hidden, resizeObserver, dragHandle, zIndex, isParent, initialized, disableKeyboardA11y, ariaLabel, rfId, noDragClassName, noPanClassName, }) {
+    function NodeWrapper({ id, type, data, positionX, positionY, sourcePosition, targetPosition, onClick, onMouseEnter, onMouseMove, onMouseLeave, onContextMenu, onDoubleClick, style, width, height, className, selected, isSelectable, isDraggable, intersected, hidden, resizeObserver, dragHandle, zIndex, isParent, initialized, disableKeyboardA11y, ariaLabel, rfId, noDragClassName, noPanClassName, }) {
         const store = useStoreApi();
         const nodeRef = useRef(null);
         const prevSourcePosition = useRef(sourcePosition);
@@ -2228,6 +2369,7 @@ const wrapNode = (NodeComponent) => {
             className,
             {
                 selected,
+                intersected,
                 parent: isParent,
                 dragging,
             },
@@ -2237,15 +2379,17 @@ const wrapNode = (NodeComponent) => {
             transform: `translate(${positionX}px,${positionY}px)`,
             pointerEvents: hasPointerEvents ? 'all' : 'none',
             visibility: initialized ? 'visible' : 'hidden',
+            width,
+            height,
             ...style,
         };
         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,
@@ -2339,17 +2483,49 @@ function createNodeInternals(nodes, nodeInternals, nodeOrigin, elevateNodesOnSel
                 z,
             },
         });
+        // console.log('create', currInternals, node);
         nextNodeInternals.set(node.id, internals);
     });
     updateAbsoluteNodePositions(nextNodeInternals, nodeOrigin, parentNodes);
     return nextNodeInternals;
 }
-function updateNodesSelections({ changedNodes, get, }) {
-    const { onNodesChange } = get();
-    if (changedNodes?.length) {
-        onNodesChange?.(changedNodes);
-    }
-}
+// export function handleControlledNodeSelectionChange(
+//    nodeChanges: NodeSelectionChange[],
+//    nodeInternals: NodeInternals,
+// ) {
+//    nodeChanges.forEach((change) => {
+//       const node = nodeInternals.get(change.id);
+//       if (node) {
+//          nodeInternals.set(node.id, {
+//             ...node,
+//             [internalsSymbol]: node[internalsSymbol],
+//             selected: change.selected,
+//          });
+//       }
+//    });
+//    return new Map(nodeInternals);
+// }
+// export function handleControlledEdgeSelectionChange(
+//    edgeChanges: EdgeSelectionChange[],
+//    edges: Edge[],
+// ) {
+//    return edges.map((e) => {
+//       const change = edgeChanges.find((change) => change.id === e.id);
+//       if (change) {
+//          e.selected = change.selected;
+//       }
+//       return e;
+//    });
+// }
+// export function updateNodesSelections({
+//    changedNodes,
+//    get,
+// }: UpdateNodesParams) {
+//    const { onNodesChange } = get();
+//    if (changedNodes?.length) {
+//       onNodesChange?.(changedNodes);
+//    }
+// }
 
 const infiniteExtent = [
     [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY],
@@ -2366,11 +2542,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 +2623,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;
         });
@@ -2468,7 +2650,7 @@ const createRFStore = () => createStore((set, get) => ({
         }
     },
     addSelectedNodes: (selectedNodeIds) => {
-        const { multiSelectionActive, getNodes } = get();
+        const { multiSelectionActive, getNodes, triggerNodeChanges } = get();
         let changedNodes;
         if (multiSelectionActive) {
             changedNodes = selectedNodeIds.map((nodeId) => createSelectionChange(nodeId, true));
@@ -2476,36 +2658,24 @@ const createRFStore = () => createStore((set, get) => ({
         else {
             changedNodes = getSelectionChanges(getNodes(), selectedNodeIds);
         }
-        updateNodesSelections({
-            changedNodes,
-            get,
-            set,
-        });
+        triggerNodeChanges(changedNodes);
     },
     unselectNodes: ({ nodes } = {}) => {
-        const { getNodes } = get();
+        const { getNodes, triggerNodeChanges } = get();
         const nodesToUnselect = nodes ? nodes : getNodes();
         const changedNodes = nodesToUnselect.map((n) => {
             n.selected = false;
             return createSelectionChange(n.id, false);
         });
-        updateNodesSelections({
-            changedNodes,
-            get,
-            set,
-        });
+        triggerNodeChanges(changedNodes);
     },
     resetSelectedElements: () => {
-        const { getNodes } = get();
+        const { getNodes, triggerNodeChanges } = get();
         const nodes = getNodes();
         const nodesToUnselect = nodes
             .filter((e) => e.selected)
             .map((n) => createSelectionChange(n.id, false));
-        updateNodesSelections({
-            changedNodes: nodesToUnselect,
-            get,
-            set,
-        });
+        triggerNodeChanges(nodesToUnselect);
     },
     cancelConnection: () => set({
         connectionNodeId: initialState.connectionNodeId,
@@ -2578,15 +2748,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 +2770,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 };