react-cosmos-diagram 0.2.0 → 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)) {
@@ -737,13 +737,6 @@ var MarkerType;
     MarkerType["Arrow"] = "arrow";
 })(MarkerType || (MarkerType = {}));
 
-var ConnectionEdgeType;
-(function (ConnectionEdgeType) {
-    ConnectionEdgeType["Straight"] = "straight";
-    ConnectionEdgeType["Bezier"] = "bezier";
-    ConnectionEdgeType["Step"] = "step";
-})(ConnectionEdgeType || (ConnectionEdgeType = {}));
-
 const selector$3 = (s) => ({
     nodesDraggable: s.nodesDraggable,
     elementsSelectable: s.elementsSelectable,
@@ -1227,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);
@@ -1263,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;
@@ -1272,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)
@@ -1324,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) {
@@ -1351,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) {
@@ -1406,12 +1430,6 @@ const wrapEdge = (EdgeComponent) => {
             { selected, inactive },
         ]);
         const marker = { markerStart: markerStartUrl, markerEnd: markerEndUrl };
-        const sourceAndTargetIds = {
-            source,
-            sourcePort,
-            target,
-            targetPort,
-        };
         const labelProps = {
             label,
             labelStyle,
@@ -1420,14 +1438,6 @@ const wrapEdge = (EdgeComponent) => {
             labelBgPadding,
             labelBgBorderRadius,
         };
-        const position = {
-            sourceX,
-            sourceY,
-            targetX,
-            targetY,
-            sourcePosition,
-            targetPosition,
-        };
         const events = {
             onClick: onEdgeClick,
             onDoubleClick: onEdgeDoubleClick,
@@ -1436,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);
@@ -1540,7 +1556,7 @@ const selector$2 = (s) => ({
     nodeInternals: s.nodeInternals,
     onError: s.onError,
 });
-function EdgeRenderer({ rfId, edgeTypes, 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("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, 
@@ -1609,7 +1625,7 @@ function EdgeRenderer({ rfId, edgeTypes, noPanClassName, onEdgeClick, onEdgeDoub
                         onEdgeUpdateStart,
                         onEdgeUpdateEnd,
                     };
-                    return (jsx(EdgeComponent, { ...elProps, ...sourceAndTargetIds, ...marker, ...labelProps, ...position, ...events, rfId: rfId, type: edgeType, data: data, isFocusable: isFocusable }, id));
+                    return (jsx(EdgeComponent, { ...elProps, ...sourceAndTargetIds, ...marker, ...labelProps, ...position, ...events, rfId: rfId, type: edgeType, data: data, isFocusable: isFocusable, edgeUpdaterRadius: edgeUpdaterRadius }, id));
                 }) })] }));
 }
 EdgeRenderer.displayName = 'EdgeRenderer';
@@ -1621,7 +1637,7 @@ const oppositePosition = {
     [Position.Top]: Position.Bottom,
     [Position.Bottom]: Position.Top,
 };
-function ConnectionPath({ style, nodeId, portType, type = ConnectionEdgeType.Straight, Component, }) {
+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],
@@ -1647,30 +1663,9 @@ function ConnectionPath({ style, nodeId, portType, type = ConnectionEdgeType.Str
         return null;
     }
     if (Component) {
-        return (jsx(Component, { connectionEdgeType: type, connectionEdgeStyle: style, fromNode: fromNode, fromPort: fromPort, fromX: fromX, fromY: fromY, toX: toX, toY: toY, fromPosition: fromPosition, toPosition: toPosition }));
-    }
-    let d = '';
-    const pathParams = {
-        sourceX: fromX,
-        sourceY: fromY,
-        sourcePosition: fromPosition,
-        targetX: toX,
-        targetY: toY,
-        targetPosition: toPosition,
-    };
-    if (type === ConnectionEdgeType.Bezier) {
-        [d] = getBezierPath(pathParams);
-    }
-    else if (type === ConnectionEdgeType.Step) {
-        [d] = getStepPath({
-            ...pathParams,
-            borderRadius: 0,
-        });
+        return (jsx(Component, { fromNode: fromNode, fromPort: fromPort, fromX: fromX, fromY: fromY, toX: toX, toY: toY, fromPosition: fromPosition, toPosition: toPosition }));
     }
-    else {
-        d = `M${fromX},${fromY} ${toX},${toY}`;
-    }
-    return (jsx("path", { d: d, fill: "none", className: "react-diagram__connection-path", style: style }));
+    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';
 
@@ -1679,30 +1674,19 @@ const selector$1 = (s) => ({
     nodeId: s.connectionNodeId,
     portType: s.connectionPortType,
 });
-function ConnectionEdge({ containerStyle, style, type, component, }) {
+function ConnectionLineRenderer({ containerStyle, edgeTypes, component, }) {
     const { nodeId, portType, edges } = useStore(selector$1, shallow);
     const isValid = !!(nodeId && portType);
     if (!isValid) {
         return null;
     }
-    const capitalizeFirstLetter = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-    const getConnectionEdgeType = (edgeType = '') => {
-        let connectionEdgeType = '';
-        if (type) {
-            connectionEdgeType = type;
-        }
-        else if (Object.keys(ConnectionEdgeType).includes(capitalizeFirstLetter(edgeType))) {
-            connectionEdgeType = edgeType;
-        }
-        else {
-            connectionEdgeType = 'straight';
-        }
-        return connectionEdgeType;
-    };
-    const currentEdgeType = edges.find((edge) => edge[portType] === nodeId)
-        ?.type;
-    const edgeType = getConnectionEdgeType(currentEdgeType);
-    return (jsx("svg", { style: containerStyle, className: "react-diagram__container react-diagram__edges react-diagram__connection-line", children: jsx("g", { className: "react-diagram__connection", children: jsx(ConnectionPath, { style: style, nodeId: nodeId, portType: portType, type: edgeType, Component: component }) }) }));
+    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, 
@@ -1711,10 +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, 
+edgeTypes, edgeUpdaterRadius, onEdgeClick, onEdgeDoubleClick, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, 
 // ConnectionLineWrapper
-connectionEdgeContainerStyle, connectionEdgeStyle, connectionEdgeType, connectionEdgeComponent, }) {
-    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 }), jsx(ConnectionEdge, { containerStyle: connectionEdgeContainerStyle, style: connectionEdgeStyle, type: connectionEdgeType, component: connectionEdgeComponent })] }));
+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);
@@ -1745,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);
@@ -1759,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);
@@ -2397,6 +2382,7 @@ const initialState = {
     autoPanOnConnect: true,
     nodeExtent: infiniteExtent,
     translateExtent: infiniteExtent,
+    connectionRadius: 20,
     onError: devWarn,
 };
 
@@ -2594,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, connectionEdgeContainerStyle, connectionEdgeStyle, connectionEdgeType, connectionEdgeComponent, 
+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, connectionEdgeContainerStyle: connectionEdgeContainerStyle, connectionEdgeStyle: connectionEdgeStyle, connectionEdgeType: connectionEdgeType, connectionEdgeComponent: connectionEdgeComponent, 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';
 
@@ -2614,4 +2600,4 @@ function createUseItemsState(applyChanges) {
 const useNodesState = createUseItemsState(applyNodeChanges);
 const useEdgesState = createUseItemsState(applyEdgeChanges);
 
-export { BaseEdge, BezierEdge, ConnectionEdgeType, MarkerType, Port$1 as Port, Position, ReactDiagramProvider, StepEdge, addEdge, boxToRect, clamp, ReactDiagram as default, getBezierPath, getStepPath, internalsSymbol, isEdge, isNode, rectToBox, updateEdge, useEdgesState, useNodesState };
+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 { CSSProperties, HTMLAttributes, MouseEvent as ReactMouseEvent } from 'react';
-import { CoordinateExtent, GridStep, Viewport, Node, Edge, OnNodesChange, OnEdgesChange, OnConnect, OnConnectStart, OnConnectEnd, OnMove, OnError, ConnectionEdgeType, ConnectionEdgeComponent } from '.';
+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,10 +19,10 @@ export type ReactDiagramProps = HTMLAttributes<HTMLDivElement> & {
     nodeTypes?: NodeTypes;
     edges?: Edge[];
     edgeTypes?: EdgeTypes;
-    connectionEdgeContainerStyle?: CSSProperties;
-    connectionEdgeStyle?: CSSProperties;
-    connectionEdgeType?: ConnectionEdgeType;
-    connectionEdgeComponent?: ConnectionEdgeComponent;
+    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":"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"}
+{"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,5 +4,5 @@ export * from './core';
 export * from '../hooks/useNodesEdgesState/type';
 export * from '../components/Node/type';
 export * from '../components/Edges/type';
-export * from '../components/ConnectionEdge/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;AACzC,cAAc,mCAAmC,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/style.css

@@ -125,11 +125,6 @@
    fill: none;
 }
 
-.react-diagram__edgeupdater {
-   cursor: move;
-   pointer-events: all;
-}
-
 .react-diagram__edge-text-bg {
    fill: white;
 }
@@ -149,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;
@@ -160,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

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

@@ -1 +1 @@
-{"version":3,"file":"Anchor.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/components/Edges/Anchor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,KAAK,UAAU,GAAG,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;AAEhE,KAAK,YAAY,GAAG;KAChB,CAAC,IAAI,UAAU,CAAC,CAAC,EAAE,CACjB,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,UAAU,CAAC,KAC7C,IAAI;CACX,CAAC;AAEF,UAAU,WAAY,SAAQ,aAAa,CAAC,WAAW,CAAC,EAAE,YAAY;IACnE,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACf;AAwBD,iBAAS,MAAM,CAAC,EACb,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAW,EACX,WAAW,EACX,YAAY,EACZ,UAAU,EACV,IAAI,GACN,EAAE,WAAW,2CAiBb;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Anchor.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/components/Edges/Anchor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,KAAK,UAAU,GAAG,aAAa,CAAC;AAGhC,KAAK,YAAY,GAAG;KAChB,CAAC,IAAI,UAAU,CAAC,CAAC,EAAE,CACjB,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,UAAU,CAAC,KAC7C,IAAI;CACX,CAAC;AAEF,UAAU,WAAY,SAAQ,aAAa,CAAC,WAAW,CAAC,EAAE,YAAY;IACnE,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACf;AAwBD,iBAAS,MAAM,CAAC,EACb,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAW,EACX,WAAW,EAGX,IAAI,GACN,EAAE,WAAW,2CAiBb;AAED,eAAe,MAAM,CAAC"}

package/dist/umd/components/Edges/EdgeWrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../react-diagram/packages/src/components/Edges/EdgeWrapper/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAQnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAKpE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,wBAAgB,eAAe,CAC5B,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,EACjD,OAAO,CAAC,EAAE,CACP,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,UAAU,CAAC,EAC/C,IAAI,EAAE,IAAI,KACR,IAAI,YAII,gBAAgB,WAAW,EAAE,UAAU,CAAC,uBAOvD;AAED,QAAA,MAAM,QAAQ,kBAAmB,cAAc,SAAS,CAAC;YAC1B,aAAa,GAAG,WAAW,GAAG,IAAI;;EAoPhE,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../react-diagram/packages/src/components/Edges/EdgeWrapper/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAQnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAKpE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,wBAAgB,eAAe,CAC5B,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,EACjD,OAAO,CAAC,EAAE,CACP,KAAK,EAAE,eAAe,CAAC,WAAW,EAAE,UAAU,CAAC,EAC/C,IAAI,EAAE,IAAI,KACR,IAAI,YAII,gBAAgB,WAAW,EAAE,UAAU,CAAC,uBAOvD;AAED,QAAA,MAAM,QAAQ,kBAAmB,cAAc,SAAS,CAAC;YAC1B,aAAa,GAAG,WAAW,GAAG,IAAI;;EA6QhE,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/umd/components/Edges/EdgeWrapper/type.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent as ReactMouseEvent } from 'react';
+import { ComponentType, MemoExoticComponent, MouseEvent as ReactMouseEvent } from 'react';
 import { Position, Connection } from '../../../types';
 import { PortType } from '../../Port/type';
 import { Edge } from '../type';
@@ -14,6 +14,7 @@ export type WrapEdgeProps<T = any> = Edge<T> & {
     elementsSelectable?: boolean;
     rfId?: string;
     isFocusable: boolean;
+    edgeUpdaterRadius?: number;
     onClick?: EdgeMouseHandler;
     onDoubleClick?: EdgeMouseHandler;
     onContextMenu?: EdgeMouseHandler;
@@ -24,4 +25,5 @@ export type WrapEdgeProps<T = any> = Edge<T> & {
     onEdgeUpdateStart?: (event: ReactMouseEvent, edge: Edge, portType: PortType) => void;
     onEdgeUpdateEnd?: (event: MouseEvent | TouchEvent, edge: Edge, portType: PortType) => void;
 };
+export type EdgeWrapperComponent = MemoExoticComponent<ComponentType<WrapEdgeProps>>;
 //# sourceMappingURL=type.d.ts.map

package/dist/umd/components/Edges/EdgeWrapper/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../react-diagram/packages/src/components/Edges/EdgeWrapper/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;AAE5E,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG,GAAG,IAAI,CACrC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,EACnB,aAAa,EAAE,UAAU,KACvB,IAAI,CAAC;AAEV,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,QAAQ,CAAC;IACzB,cAAc,EAAE,QAAQ,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IAErB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAEhC,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;CACZ,CAAC"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../react-diagram/packages/src/components/Edges/EdgeWrapper/type.ts"],"names":[],"mappings":"AAAA,OAAO,EACJ,aAAa,EACb,mBAAmB,EACnB,UAAU,IAAI,eAAe,EAC/B,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;AAE5E,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG,GAAG,IAAI,CACrC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,EACnB,aAAa,EAAE,UAAU,KACvB,IAAI,CAAC;AAEV,MAAM,MAAM,aAAa,CAAC,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,QAAQ,CAAC;IACzB,cAAc,EAAE,QAAQ,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IAErB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAEhC,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;CACZ,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,CACnD,aAAa,CAAC,aAAa,CAAC,CAC9B,CAAC"}

package/dist/umd/components/Port/utils.d.ts

@@ -1,9 +1,16 @@
 import { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from 'react';
 import { StoreApi } from 'zustand';
-import { OnConnect } from '../../types';
+import { OnConnect, XYPosition } from '../../types';
 import { ReactDiagramState } from '../ReactDiagramProvider/type';
 import { PortType } from './type';
+type ConnectionPort = {
+    type: PortType;
+    nodeId: string;
+    x: number;
+    y: number;
+};
 export declare const getHostForElement: (element: HTMLElement) => Document | ShadowRoot;
+export declare const getClosestPort: (pos: XYPosition, connectionRadius: number, ports: ConnectionPort[]) => ConnectionPort | null;
 export declare const handlePointerDown: ({ isAnchor, event, nodeId, portType, getState, setState, onConnect, onEdgeUpdateEnd, }: {
     isAnchor?: boolean | undefined;
     event: ReactMouseEvent | ReactTouchEvent;
@@ -14,4 +21,5 @@ export declare const handlePointerDown: ({ isAnchor, event, nodeId, portType, ge
     onConnect: OnConnect;
     onEdgeUpdateEnd?: ((evt: MouseEvent | TouchEvent) => void) | undefined;
 }) => void;
+export {};
 //# sourceMappingURL=utils.d.ts.map

package/dist/umd/components/Port/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/components/Port/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACJ,UAAU,IAAI,eAAe,EAC7B,UAAU,IAAI,eAAe,EAC/B,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAQnC,OAAO,EAAoB,SAAS,EAAc,MAAM,aAAa,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAc,MAAM,QAAQ,CAAC;AAqB9C,eAAO,MAAM,iBAAiB,YAClB,WAAW,KACpB,QAAQ,GAAG,UAC2D,CAAC;AAgI1E,eAAO,MAAM,iBAAiB;;WAWpB,eAAe,GAAG,eAAe;YAChC,MAAM;cACJ,QAAQ;cACR,SAAS,iBAAiB,CAAC,CAAC,UAAU,CAAC;cACvC,SAAS,iBAAiB,CAAC,CAAC,UAAU,CAAC;eACtC,SAAS;6BACI,UAAU,GAAG,UAAU,KAAK,IAAI;MACvD,IAmHH,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/components/Port/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACJ,UAAU,IAAI,eAAe,EAC7B,UAAU,IAAI,eAAe,EAC/B,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAQnC,OAAO,EAGJ,SAAS,EAET,UAAU,EACZ,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAc,MAAM,QAAQ,CAAC;AAa9C,KAAK,cAAc,GAAG;IAEnB,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,eAAO,MAAM,iBAAiB,YAClB,WAAW,KACpB,QAAQ,GAAG,UAC2D,CAAC;AA2G1E,eAAO,MAAM,cAAc,QACnB,UAAU,oBACG,MAAM,SACjB,cAAc,EAAE,KACvB,cAAc,GAAG,IAenB,CAAC;AAwBF,eAAO,MAAM,iBAAiB;;WAWpB,eAAe,GAAG,eAAe;YAChC,MAAM;cACJ,QAAQ;cACR,SAAS,iBAAiB,CAAC,CAAC,UAAU,CAAC;cACvC,SAAS,iBAAiB,CAAC,CAAC,UAAU,CAAC;eACtC,SAAS;6BACI,UAAU,GAAG,UAAU,KAAK,IAAI;MACvD,IAoHH,CAAC"}

package/dist/umd/components/ReactDiagramProvider/type.d.ts

@@ -44,6 +44,7 @@ export type ReactDiagramStore = {
     autoPanOnConnect: boolean;
     nodeExtent: CoordinateExtent;
     translateExtent: CoordinateExtent;
+    connectionRadius: number;
 };
 export type ReactDiagramActions = {
     setNodes: (nodes: Node[]) => void;

package/dist/umd/components/ReactDiagramProvider/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/components/ReactDiagramProvider/type.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/components/ReactDiagramProvider/type.ts"],"names":[],"mappings":"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"}

package/dist/umd/components/StoreUpdater/index.d.ts

@@ -1,7 +1,7 @@
 import { ReactDiagramProps } from '../../types';
-export type StoreUpdaterProps = Pick<ReactDiagramProps, 'nodes' | 'onNodesChange' | 'onNodeDrag' | 'onNodeDragStart' | 'onNodeDragEnd' | 'edges' | 'onEdgesChange' | 'gridStep' | 'elevateNodesOnSelect' | 'nodesDraggable' | 'autoPanOnNodeDrag' | 'autoPanOnConnect' | 'onConnect' | 'onConnectStart' | 'onConnectEnd' | 'onError' | 'nodeExtent' | 'translateExtent' | 'minZoom' | 'maxZoom'> & {
+export type StoreUpdaterProps = Pick<ReactDiagramProps, 'nodes' | 'onNodesChange' | 'onNodeDrag' | 'onNodeDragStart' | 'onNodeDragEnd' | 'edges' | 'onEdgesChange' | 'gridStep' | 'elevateNodesOnSelect' | 'nodesDraggable' | 'autoPanOnNodeDrag' | 'autoPanOnConnect' | 'onConnect' | 'onConnectStart' | 'onConnectEnd' | 'connectionRadius' | 'onError' | 'nodeExtent' | 'translateExtent' | 'minZoom' | 'maxZoom'> & {
     rfId: string;
 };
-declare const StoreUpdater: ({ nodes, onNodesChange, onNodeDrag, onNodeDragStart, onNodeDragEnd, edges, onEdgesChange, gridStep, elevateNodesOnSelect, nodesDraggable, autoPanOnNodeDrag, autoPanOnConnect, onConnect, onConnectStart, onConnectEnd, onError, nodeExtent, translateExtent, minZoom, maxZoom, }: StoreUpdaterProps) => null;
+declare const StoreUpdater: ({ nodes, onNodesChange, onNodeDrag, onNodeDragStart, onNodeDragEnd, edges, onEdgesChange, gridStep, elevateNodesOnSelect, nodesDraggable, autoPanOnNodeDrag, autoPanOnConnect, connectionRadius, onConnect, onConnectStart, onConnectEnd, onError, nodeExtent, translateExtent, minZoom, maxZoom, }: StoreUpdaterProps) => null;
 export default StoreUpdater;
 //# sourceMappingURL=index.d.ts.map

package/dist/umd/components/StoreUpdater/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/components/StoreUpdater/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAoB,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAQlE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CACjC,iBAAiB,EACf,OAAO,GACP,eAAe,GACf,YAAY,GACZ,iBAAiB,GACjB,eAAe,GACf,OAAO,GACP,eAAe,GACf,UAAU,GACV,sBAAsB,GACtB,gBAAgB,GAChB,mBAAmB,GACnB,kBAAkB,GAClB,WAAW,GACX,gBAAgB,GAChB,cAAc,GACd,SAAS,GACT,YAAY,GACZ,iBAAiB,GACjB,SAAS,GACT,SAAS,CACb,GAAG;IACD,IAAI,EAAE,MAAM,CAAC;CACf,CAAC;AA6CF,QAAA,MAAM,YAAY,sRAqBf,iBAAiB,SAgDnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/components/StoreUpdater/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAoB,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAQlE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CACjC,iBAAiB,EACf,OAAO,GACP,eAAe,GACf,YAAY,GACZ,iBAAiB,GACjB,eAAe,GACf,OAAO,GACP,eAAe,GACf,UAAU,GACV,sBAAsB,GACtB,gBAAgB,GAChB,mBAAmB,GACnB,kBAAkB,GAClB,WAAW,GACX,gBAAgB,GAChB,cAAc,GACd,kBAAkB,GAClB,SAAS,GACT,YAAY,GACZ,iBAAiB,GACjB,SAAS,GACT,SAAS,CACb,GAAG;IACD,IAAI,EAAE,MAAM,CAAC;CACf,CAAC;AA6CF,QAAA,MAAM,YAAY,wSAsBf,iBAAiB,SAiDnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/umd/container/ConnectionLineRenderer/ConnectionPath.d.ts

@@ -0,0 +1,17 @@
+import { Edge } from '../../types';
+import { PortType } from '../../components/Port/type';
+import { EdgeWrapperComponent } from '../../components/Edges/EdgeWrapper/type';
+import { ConnectionLineComponent } from './type';
+type ConnectionPathProps = {
+    nodeId: string;
+    portType: PortType;
+    edge: Edge;
+    Component?: ConnectionLineComponent;
+    EdgeWrapper: EdgeWrapperComponent;
+};
+declare function ConnectionPath({ nodeId, portType, edge, Component, EdgeWrapper, }: ConnectionPathProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace ConnectionPath {
+    var displayName: string;
+}
+export default ConnectionPath;
+//# sourceMappingURL=ConnectionPath.d.ts.map

package/dist/umd/container/ConnectionLineRenderer/ConnectionPath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionPath.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/container/ConnectionLineRenderer/ConnectionPath.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,IAAI,EAAY,MAAM,aAAa,CAAC;AAG7C,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC/E,OAAO,EAAE,uBAAuB,EAAE,MAAM,QAAQ,CAAC;AAEjD,KAAK,mBAAmB,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ,CAAC;IACnB,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,uBAAuB,CAAC;IACpC,WAAW,EAAE,oBAAoB,CAAC;CACpC,CAAC;AASF,iBAAS,cAAc,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,WAAW,GACb,EAAE,mBAAmB,kDAoErB;kBA1EQ,cAAc;;;AA8EvB,eAAe,cAAc,CAAC"}