react-cosmos-diagram 0.1.1 → 0.3.0

package/dist/esm/index.js

@@ -381,7 +381,7 @@ const getMarkerId = (marker, rfId) => {
         .map((key) => `${key}=${marker[key]}`)
         .join('&')}`;
 };
-const getEdgeId = ({ source, target }) => `reactdiagram__edge-${source}-${target}`;
+const getEdgeId = ({ source, target }) => `react-diagram__edge-${source}-${target}`;
 const isExistsConnection = (edge, edges) => edges.some((el) => el.source === edge.source && el.target === edge.target);
 const addEdge = (edgeParams, edges) => {
     if (!isEdge(edgeParams)) {
@@ -401,8 +401,8 @@ const addEdge = (edgeParams, edges) => {
         };
     return edges.concat(edge);
 };
-const updateEdge = (oldEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
-    const { id: oldEdgeId, ...rest } = oldEdge;
+const updateEdge = (originEdge, newConnection, edges, options = { shouldReplaceId: true }) => {
+    const { id: oldEdgeId, ...rest } = originEdge;
     if (!newConnection.source || !newConnection.target)
         devWarn('020');
     const foundEdge = edges.find((e) => e.id === oldEdgeId);
@@ -1220,9 +1220,22 @@ const getClosestPort = (pos, connectionRadius, ports) => {
     });
     return closestPort;
 };
+const pointToRendererPoint = ({ x, y }, [tx, ty, tScale]) => {
+    const position = {
+        x: (x - tx) / tScale,
+        y: (y - ty) / tScale,
+    };
+    return position;
+};
+const rendererPointToPoint = ({ x, y }, [tx, ty, tScale]) => {
+    return {
+        x: x * tScale + tx,
+        y: y * tScale + ty,
+    };
+};
 const handlePointerDown = ({ isAnchor = false, event, nodeId, portType, getState, setState, onConnect, onEdgeUpdateEnd, }) => {
     const doc = getHostForElement(event.target);
-    const { domNode, autoPanOnConnect, getNodes, cancelConnection, onConnectStart, onConnectEnd, panBy, } = getState();
+    const { domNode, autoPanOnConnect, connectionRadius, getNodes, cancelConnection, onConnectStart, onConnectEnd, panBy, } = getState();
     const containerBounds = domNode?.getBoundingClientRect();
     const { x, y } = getEventPosition(event);
     const clickedPort = doc?.elementFromPoint(x, y);
@@ -1256,8 +1269,9 @@ const handlePointerDown = ({ isAnchor = false, event, nodeId, portType, getState
     });
     onConnectStart?.(event, { nodeId, portType });
     const onPointerMove = (event) => {
+        const { transform } = getState();
         connectionPosition = getEventPosition(event, containerBounds);
-        closestPort = getClosestPort(connectionPosition, 20, allPort);
+        closestPort = getClosestPort(pointToRendererPoint(connectionPosition, transform), connectionRadius, allPort);
         if (!autoPanStarted) {
             autoPan();
             autoPanStarted = true;
@@ -1265,20 +1279,11 @@ const handlePointerDown = ({ isAnchor = false, event, nodeId, portType, getState
         const result = getConnection(event, closestPort, nodeId, portType, doc);
         isValid = result.isValid;
         connection = result.connection;
-        if (closestPort && isValid) {
-            const { x, y } = closestPort;
-            setState({
-                connectionPosition: {
-                    x,
-                    y,
-                },
-            });
-        }
-        else {
-            setState({
-                connectionPosition,
-            });
-        }
+        setState({
+            connectionPosition: closestPort && isValid
+                ? rendererPointToPoint(closestPort, transform)
+                : connectionPosition,
+        });
     };
     const onPointerUp = (event) => {
         if (isValid && connection)
@@ -1317,12 +1322,15 @@ const portPositionY = (y, shift, position) => {
         return y + shift;
     return y;
 };
-const EdgeUpdaterClassName = 'react-diagram__edgeupdater';
-function Anchor({ position, centerX, centerY, radius = 10, onMouseDown, onMouseEnter, onMouseOut, type, }) {
+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, onMouseEnter: onMouseEnter, onMouseOut: onMouseOut }));
+        ]), cx: portPositionX(centerX, radius, position), cy: portPositionY(centerY, radius, position), r: radius, stroke: "transparent", fill: "transparent", onMouseDown: onMouseDown }));
 }
 
 function getMouseHandler$1(id, getState, handler) {
@@ -1344,11 +1352,34 @@ const wrapEdge = (EdgeComponent) => {
         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 store = useStoreApi();
         const markerStartUrl = useMemo(() => `url(#${getMarkerId(markerStart, rfId)})`, [markerStart, rfId]);
         const markerEndUrl = useMemo(() => `url(#${getMarkerId(markerEnd, rfId)})`, [markerEnd, rfId]);
         if (hidden) {
@@ -1399,12 +1430,6 @@ const wrapEdge = (EdgeComponent) => {
             { selected, inactive },
         ]);
         const marker = { markerStart: markerStartUrl, markerEnd: markerEndUrl };
-        const sourceAndTargetIds = {
-            source,
-            sourcePort,
-            target,
-            targetPort,
-        };
         const labelProps = {
             label,
             labelStyle,
@@ -1413,14 +1438,6 @@ const wrapEdge = (EdgeComponent) => {
             labelBgPadding,
             labelBgBorderRadius,
         };
-        const position = {
-            sourceX,
-            sourceY,
-            targetX,
-            targetY,
-            sourcePosition,
-            targetPosition,
-        };
         const events = {
             onClick: onEdgeClick,
             onDoubleClick: onEdgeDoubleClick,
@@ -1429,11 +1446,17 @@ const wrapEdge = (EdgeComponent) => {
             onMouseMove: onEdgeMouseMove,
             onMouseLeave: onEdgeMouseLeave,
         };
-        return (jsxs("g", { ...events, ref: edgeRef, className: wrapperClassName, tabIndex: isFocusable ? 0 : undefined, role: isFocusable ? 'button' : undefined, "aria-label": ariaLabel === null
+        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 && (jsx(EdgeComponent, { ...sourceAndTargetIds, ...marker, ...labelProps, ...position, id: id, data: data, style: style, selected: selected })), jsx(Anchor, { position: sourcePosition, centerX: sourceX, centerY: sourceY, radius: 10, onMouseDown: handleEdgeUpdater('target'), onMouseEnter: console.log, onMouseOut: console.log, type: "source" }), jsx(Anchor, { position: targetPosition, centerX: targetX, centerY: targetY, radius: 10, onMouseDown: handleEdgeUpdater('source'), onMouseEnter: console.log, onMouseOut: console.log, type: "target" })] }));
+                    : `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);
@@ -1533,77 +1556,77 @@ const selector$2 = (s) => ({
     nodeInternals: s.nodeInternals,
     onError: s.onError,
 });
-function EdgeRenderer({ rfId, edgeTypes, children, noPanClassName, onEdgeClick, onEdgeDoubleClick, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, }) {
+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(Fragment, { children: [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 || 'step';
-                            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 }, id));
-                        }) })] }), children] }));
+    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);
@@ -1614,7 +1637,7 @@ const oppositePosition = {
     [Position.Top]: Position.Bottom,
     [Position.Bottom]: Position.Top,
 };
-function ConnectionPath({ style, nodeId, portType }) {
+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],
@@ -1639,36 +1662,31 @@ function ConnectionPath({ style, nodeId, portType }) {
     if (!fromPosition || !toPosition) {
         return null;
     }
-    // // straight edge
-    // const dAttr = `M${fromX},${fromY} ${toX},${toY}`;
-    let dAttr = '';
-    const pathParams = {
-        sourceX: fromX,
-        sourceY: fromY,
-        sourcePosition: fromPosition,
-        targetX: toX,
-        targetY: toY,
-        targetPosition: toPosition,
-    };
-    [dAttr] = getStepPath({
-        ...pathParams,
-        borderRadius: 0,
-    });
-    return (jsx("path", { d: dAttr, fill: "none", className: "react-diagram__connection-path", style: style }));
+    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 ConnectionEdge({ containerStyle, style }) {
-    const { nodeId, portType } = useStore(selector$1, shallow);
+function ConnectionLineRenderer({ containerStyle, edgeTypes, component, }) {
+    const { nodeId, portType, edges } = useStore(selector$1, shallow);
     const isValid = !!(nodeId && portType);
     if (!isValid) {
         return null;
     }
-    return (jsx("svg", { style: containerStyle, className: "react-diagram__container react-diagram__edges react-diagram__connectionline", children: jsx("g", { className: "react-diagram__connection", children: jsx(ConnectionPath, { style: style, nodeId: nodeId, portType: portType }) }) }));
+    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, 
@@ -1677,8 +1695,10 @@ noPanClassName, panning, defaultViewport, multiSelectionKeyCode, onMove, onMoveS
 // NodeRenderer props
 onlyRenderVisibleElements, disableKeyboardA11y, noDragClassName, nodeOrigin, nodeTypes, onNodeClick, onNodeDoubleClick, onNodeContextMenu, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, 
 // EdgeRenderer props
-edgeTypes, onEdgeClick, onEdgeDoubleClick, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, }) {
-    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, onEdgeClick: onEdgeClick, onEdgeDoubleClick: onEdgeDoubleClick, onEdgeContextMenu: onEdgeContextMenu, onEdgeMouseEnter: onEdgeMouseEnter, onEdgeMouseMove: onEdgeMouseMove, onEdgeMouseLeave: onEdgeMouseLeave, onEdgeUpdate: onEdgeUpdate, onEdgeUpdateStart: onEdgeUpdateStart, onEdgeUpdateEnd: onEdgeUpdateEnd, children: jsx(ConnectionEdge, {}) }), jsx("div", { className: "react-diagram__edgelabel-renderer" })] }));
+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);
@@ -1709,7 +1729,7 @@ function useDirectStoreUpdater(key, value, setState) {
         }
     }, [value]);
 }
-const StoreUpdater = ({ nodes, onNodesChange, onNodeDrag, onNodeDragStart, onNodeDragEnd, edges, onEdgesChange, gridStep, elevateNodesOnSelect, nodesDraggable, autoPanOnNodeDrag, autoPanOnConnect, onConnect, onConnectStart, onConnectEnd, onError, nodeExtent, translateExtent, minZoom, maxZoom, }) => {
+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);
@@ -1723,6 +1743,7 @@ const StoreUpdater = ({ nodes, onNodesChange, onNodeDrag, onNodeDragStart, onNod
     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);
@@ -2361,6 +2382,7 @@ const initialState = {
     autoPanOnConnect: true,
     nodeExtent: infiniteExtent,
     translateExtent: infiniteExtent,
+    connectionRadius: 20,
     onError: devWarn,
 };
 
@@ -2558,13 +2580,13 @@ const defaultEdgeTypes = {
 };
 const ReactDiagram = forwardRef(({ 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, onEdgeClick, onEdgeDoubleClick, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, onMove, onMoveStart, onMoveEnd, 
+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, onNodesChange, onNodeDrag, onNodeDragStart, onNodeDragEnd, onEdgesChange, onConnect, onConnectStart, onConnectEnd, onError, }, ref) => {
+nodes, edges, nodesDraggable, elevateNodesOnSelect, autoPanOnNodeDrag, autoPanOnConnect, connectionRadius, 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, 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, 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, onNodesChange: onNodesChange, onNodeDrag: onNodeDrag, onNodeDragStart: onNodeDragStart, onNodeDragEnd: onNodeDragEnd, onEdgesChange: onEdgesChange, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onError: onError })] }) }));
 });
 ReactDiagram.displayName = 'ReactDiagram';
 
@@ -2578,4 +2600,4 @@ function createUseItemsState(applyChanges) {
 const useNodesState = createUseItemsState(applyNodeChanges);
 const useEdgesState = createUseItemsState(applyEdgeChanges);
 
-export { BaseEdge, MarkerType, Port$1 as Port, Position, ReactDiagram, ReactDiagramProvider, StepEdge, addEdge, applyEdgeChanges, applyNodeChanges, boxToRect, clamp, getNodePositionWithOrigin, getStepPath, internalsSymbol, isEdge, isNode, rectToBox, updateEdge, useEdgesState, useGetPointerPosition, useNodeId, useNodesState, useStore, useStoreApi };
+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 };

package/dist/esm/store/initialState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initialState.d.ts","sourceRoot":"","sources":["../react-diagram/packages/src/store/initialState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAE5E,eAAO,MAAM,cAAc,EAAE,gBAG5B,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,iBAiCnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"initialState.d.ts","sourceRoot":"","sources":["../react-diagram/packages/src/store/initialState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAE5E,eAAO,MAAM,cAAc,EAAE,gBAG5B,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,iBAmCnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/esm/types/core.d.ts

@@ -1,5 +1,5 @@
-import type { HTMLAttributes, MouseEvent as ReactMouseEvent } from 'react';
-import { CoordinateExtent, GridStep, Viewport, Node, Edge, OnNodesChange, OnEdgesChange, OnConnect, OnConnectStart, OnConnectEnd, OnMove, OnError } from '.';
+import type { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent } from 'react';
+import { CoordinateExtent, GridStep, Viewport, Node, Edge, OnNodesChange, OnEdgesChange, OnConnect, OnConnectStart, OnConnectEnd, OnMove, OnError, ConnectionLineComponent } from '.';
 import { NodeDragHandler } from '../hooks/useDrag/type';
 import { KeyCode } from '../hooks/useGlobalKeyHandler';
 import { NodeOrigin } from '../components/Node/utils';
@@ -19,6 +19,10 @@ export type ReactDiagramProps = HTMLAttributes<HTMLDivElement> & {
     nodeTypes?: NodeTypes;
     edges?: Edge[];
     edgeTypes?: EdgeTypes;
+    edgeUpdaterRadius?: number;
+    ConnectionLineContainerStyle?: CSSProperties;
+    ConnectionLineComponent?: ConnectionLineComponent;
+    connectionRadius?: number;
     onNodesChange?: OnNodesChange;
     onNodeClick?: NodeMouseHandler;
     onNodeDoubleClick?: NodeMouseHandler;

package/dist/esm/types/core.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../react-diagram/packages/src/types/core.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,EACJ,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,aAAa,EACb,aAAa,EACb,SAAS,EACT,cAAc,EACd,YAAY,EACZ,MAAM,EACN,OAAO,EACT,MAAM,GAAG,CAAC;AAEX,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EACJ,gBAAgB,EAChB,gBAAgB,EAClB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC9D,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,iBAAiB,CAAC,EAAE,gBAAgB,CAAC;IACrC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC;IACrC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,aAAa,CAAC,EAAE,eAAe,CAAC;IAEhC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC3D,iBAAiB,CAAC,EAAE,gBAAgB,CAAC;IACrC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC;IACrC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,iBAAiB,CAAC,EAAE,CACjB,KAAK,EAAE,eAAe,EACtB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,KAChB,IAAI,CAAC;IACV,eAAe,CAAC,EAAE,CACf,KAAK,EAAE,UAAU,GAAG,UAAU,EAC9B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,KAChB,IAAI,CAAC;IAEV,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,eAAe,CAAC,EAAE,gBAAgB,CAAC;IAEnC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC"}
+{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../react-diagram/packages/src/types/core.ts"],"names":[],"mappings":"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"}

package/dist/esm/types/index.d.ts

@@ -4,4 +4,5 @@ export * from './core';
 export * from '../hooks/useNodesEdgesState/type';
 export * from '../components/Node/type';
 export * from '../components/Edges/type';
+export * from '../container/ConnectionLineRenderer/type';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../react-diagram/packages/src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AAEvB,cAAc,kCAAkC,CAAC;AAGjD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../react-diagram/packages/src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AAEvB,cAAc,kCAAkC,CAAC;AAGjD,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0CAA0C,CAAC"}

package/dist/esm/utils/graph.d.ts

@@ -11,7 +11,7 @@ export declare const getNodePositionWithOrigin: (node: Node | undefined, nodeOri
 export declare const getNodesInside: (nodeInternals: NodeInternals, rect: Rect, [tx, ty, tScale]?: Transform, partially?: boolean, excludeNonSelectableNodes?: boolean, nodeOrigin?: NodeOrigin) => Node[];
 export declare const getMarkerId: (marker: EdgeMarker | undefined, rfId?: string) => string;
 export declare const addEdge: (edgeParams: Edge | Connection, edges: Edge[]) => Edge[];
-export declare const updateEdge: (oldEdge: Edge, newConnection: Connection, edges: Edge[], options?: {
+export declare const updateEdge: (originEdge: Edge, newConnection: Connection, edges: Edge[], options?: {
     shouldReplaceId: boolean;
 }) => Edge[];
 export declare const getRectOfNodes: (nodes: Node[], nodeOrigin?: NodeOrigin) => Rect;

package/dist/esm/utils/graph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../react-diagram/packages/src/utils/graph.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,eAAO,MAAM,MAAM,YAAa,IAAI,GAAG,UAAU,GAAG,IAAI,6CACc,CAAC;AAEvE,eAAO,MAAM,MAAM,YAAa,IAAI,GAAG,UAAU,GAAG,IAAI,yBACX,CAAC;AAE9C,eAAO,MAAM,yBAAyB,SAC7B,IAAI,GAAG,SAAS,8BAEtB,UAAU,GAAG;IAAE,gBAAgB,EAAE,UAAU,CAAA;CA6B7C,CAAC;AAEF,eAAO,MAAM,cAAc,uCAElB,IAAI,sHAMV,IAAI,EA2CN,CAAC;AAEF,eAAO,MAAM,WAAW,WACb,UAAU,GAAG,SAAS,SACvB,MAAM,KACb,MAeF,CAAC;AAQF,eAAO,MAAM,OAAO,eACL,IAAI,GAAG,UAAU,SACtB,IAAI,EAAE,KACb,IAAI,EAqBN,CAAC;AAEF,eAAO,MAAM,UAAU,YACX,IAAI,iBACE,UAAU,SAClB,IAAI,EAAE;;MAEb,IAAI,EAiBN,CAAC;AAEF,eAAO,MAAM,cAAc,UACjB,IAAI,EAAE,8BAEb,IAyBF,CAAC"}
+{"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../react-diagram/packages/src/utils/graph.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,eAAO,MAAM,MAAM,YAAa,IAAI,GAAG,UAAU,GAAG,IAAI,6CACc,CAAC;AAEvE,eAAO,MAAM,MAAM,YAAa,IAAI,GAAG,UAAU,GAAG,IAAI,yBACX,CAAC;AAE9C,eAAO,MAAM,yBAAyB,SAC7B,IAAI,GAAG,SAAS,8BAEtB,UAAU,GAAG;IAAE,gBAAgB,EAAE,UAAU,CAAA;CA6B7C,CAAC;AAEF,eAAO,MAAM,cAAc,uCAElB,IAAI,sHAMV,IAAI,EA2CN,CAAC;AAEF,eAAO,MAAM,WAAW,WACb,UAAU,GAAG,SAAS,SACvB,MAAM,KACb,MAeF,CAAC;AAQF,eAAO,MAAM,OAAO,eACL,IAAI,GAAG,UAAU,SACtB,IAAI,EAAE,KACb,IAAI,EAqBN,CAAC;AAEF,eAAO,MAAM,UAAU,eACR,IAAI,iBACD,UAAU,SAClB,IAAI,EAAE;;MAEb,IAAI,EAiBN,CAAC;AAEF,eAAO,MAAM,cAAc,UACjB,IAAI,EAAE,8BAEb,IAyBF,CAAC"}

package/dist/style.css

@@ -20,7 +20,7 @@
 
    text-align: center;
 
-   border: 1px solid #000000;
+   border: 2px solid #000000;
    background-color: #ffffff;
    box-sizing: border-box;
 }
@@ -41,6 +41,38 @@
    cursor: grab;
 }
 
+.react-diagram__node-default.selected {
+   border-radius: 3px;
+
+   border: 2px dotted transparent;
+   background-image: linear-gradient(to right, #ffffff, #ffffff),
+      conic-gradient(
+         from var(--angle),
+         #d53e33 0deg 90deg,
+         #fbb300 90deg 180deg,
+         #377af5 180deg 270deg,
+         #399953 270deg 360deg
+      );
+   background-origin: border-box;
+   background-clip: padding-box, border-box;
+}
+
+@property --angle {
+   syntax: '<angle>';
+   initial-value: 0deg;
+   inherits: false;
+}
+
+@keyframes rotate {
+   to {
+      --angle: 360deg;
+   }
+}
+
+.react-diagram__node.selected {
+   animation: rotate 4s linear infinite;
+}
+
 .react-diagram__port {
    width: 6px;
    height: 6px;
@@ -93,11 +125,6 @@
    fill: none;
 }
 
-.react-diagram__edgeupdater {
-   cursor: move;
-   pointer-events: all;
-}
-
 .react-diagram__edge-text-bg {
    fill: white;
 }
@@ -117,6 +144,16 @@
    font-size: 10px;
 }
 
+.react-diagram__edge-updater {
+   cursor: move;
+   pointer-events: all;
+}
+
+.react-diagram__edge-updater:hover {
+   transition: 0.2s;
+   fill: #000000;
+}
+
 .react-diagram__viewport {
    transform-origin: 0 0;
    z-index: 2;
@@ -128,7 +165,8 @@
    cursor: grab;
 }
 
-.react-diagram .react-diagram__edges {
+.react-diagram .react-diagram__edges,
+.react-diagram .react-diagram__connection-line {
    pointer-events: none;
    overflow: visible;
 }

package/dist/umd/components/Edges/Anchor.d.ts

@@ -1,6 +1,6 @@
 import { MouseEvent as ReactMouseEvent, SVGAttributes } from 'react';
 import { Position } from '../../types';
-type EventNames = 'onMouseDown' | 'onMouseEnter' | 'onMouseOut';
+type EventNames = 'onMouseDown';
 type AnchorEvents = {
     [H in EventNames]?: (event: ReactMouseEvent<SVGGElement, MouseEvent>) => void;
 };
@@ -11,6 +11,6 @@ interface AnchorProps extends SVGAttributes<SVGGElement>, AnchorEvents {
     radius?: number;
     type: string;
 }
-declare function Anchor({ position, centerX, centerY, radius, onMouseDown, onMouseEnter, onMouseOut, type, }: AnchorProps): import("react/jsx-runtime").JSX.Element;
+declare function Anchor({ position, centerX, centerY, radius, onMouseDown, type, }: AnchorProps): import("react/jsx-runtime").JSX.Element;
 export default Anchor;
 //# sourceMappingURL=Anchor.d.ts.map