react-cosmos-diagram 0.1.1 → 0.2.0

package/README.md

@@ -0,0 +1,146 @@
+## Installation
+
+```bash
+npm install react-cosmos-diagram
+```
+
+## Core characteristics
+
+-  Easy zooming and panning, single and multiple selection of graph elements and keyboard shortcuts are supported natively
+-  Customizable support for nodes, ports, and edges
+-  Written in [Typescript](https://www.typescriptlang.org/)
+
+## Quickstart
+
+```jsx
+import { useCallback, useRef } from 'react';
+
+import ReactDiagram, {
+   useNodesState,
+   useEdgesState,
+   addEdge,
+   updateEdge,
+   Connection,
+   Edge,
+   MarkerType,
+} from 'react-cosmos-diagram';
+
+import 'react-cosmos-diagram/styles/style.css';
+
+const initialNodes = [
+   {
+      id: '1',
+      width: 200,
+      height: 100,
+      data: { label: 'Node1' },
+      position: { x: 100, y: 100 },
+   },
+   {
+      id: '2',
+      data: { label: 'Node2' },
+      position: { x: 300, y: 50 },
+   },
+   {
+      id: '3',
+      data: { label: 'Node3' },
+      position: { x: 10, y: 10 },
+      parentNode: '1',
+   },
+   {
+      id: '4',
+      data: { label: 'Node4' },
+      position: { x: 650, y: 100 },
+   },
+];
+
+const initialEdges = [
+   {
+      id: 'e-1-2',
+      type: 'bezier',
+      source: '1',
+      target: '2',
+      markerStart: {
+         type: MarkerType.Arrow,
+      },
+   },
+   {
+      id: 'e-2-3',
+      source: '2',
+      target: '3',
+      markerEnd: {
+         type: MarkerType.Arrow,
+      },
+      type: 'step',
+      label: 'label',
+   },
+   {
+      id: 'e-3-4',
+      type: 'c',
+      source: '3',
+      target: '4',
+      markerEnd: {
+         type: MarkerType.Arrow,
+      },
+   },
+];
+
+function Diagram() {
+   const edgeConnected = useRef(true);
+
+   const [nodes, _setNodes, onNodesChange] = useNodesState(initialNodes);
+   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+   const onConnect = useCallback(
+      (params: Connection) => setEdges((edges) => addEdge({ ...params }, edges)),
+      [],
+   );
+
+   const onEdgeUpdateStart = useCallback(() => {
+      edgeConnected.current = false;
+   }, []);
+
+   const onEdgeUpdateEnd = useCallback((_e: any, edge: Edge) => {
+      if (!edgeConnected.current) {
+         setEdges((edges) => edges.filter((e) => e.id !== edge.id));
+      }
+
+      edgeConnected.current = true;
+   }, []);
+
+   const onEdgeUpdate = useCallback(
+      (originEdge: Edge, newConnection: Connection) => {
+         edgeConnected.current = true;
+         setEdges((edges) => updateEdge(originEdge, newConnection, edges));
+      },
+      [],
+   );
+
+   return (
+      <ReactDiagram
+         nodes={nodes}
+         edges={edges}
+         onNodesChange={onNodesChange}
+         onEdgesChange={onEdgesChange}
+         onConnect={onConnect}
+         onEdgeUpdateStart={onEdgeUpdateStart}
+         onEdgeUpdateEnd={onEdgeUpdateEnd}
+         onEdgeUpdate={onEdgeUpdate}
+      />
+   );
+}
+
+export default Diagram;
+
+```
+
+## Credits
+
+Under the hood, React Cosmos Diagram depends on these great libraries:
+
+-  [d3-zoom](https://github.com/d3/d3-zoom) - used for zoom, pan and drag interactions with the graph canvas
+-  [d3-drag](https://github.com/d3/d3-drag) - used for making the nodes draggable
+-  [zustand](https://github.com/pmndrs/zustand) - internal state management
+
+## License
+
+React Cosmos Diagram is [MIT licensed](https://github.com/taehunlim/react-diagram/blob/main/LICENSE).

package/dist/esm/components/ConnectionEdge/ConnectionPath.d.ts

@@ -1,11 +1,14 @@
 import { CSSProperties } from 'react';
 import { PortType } from '../Port/type';
+import { ConnectionEdgeComponent, ConnectionEdgeType } from './type';
 type ConnectionPathProps = {
     style?: CSSProperties;
     nodeId: string;
     portType: PortType;
+    type?: ConnectionEdgeType;
+    Component?: ConnectionEdgeComponent;
 };
-declare function ConnectionPath({ style, nodeId, portType }: ConnectionPathProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ConnectionPath({ style, nodeId, portType, type, Component, }: ConnectionPathProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ConnectionPath {
     var displayName: string;
 }

package/dist/esm/components/ConnectionEdge/ConnectionPath.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectionPath.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/components/ConnectionEdge/ConnectionPath.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAe,MAAM,OAAO,CAAC;AAYnD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,KAAK,mBAAmB,GAAG;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ,CAAC;CACrB,CAAC;AASF,iBAAS,cAAc,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,mBAAmB,kDAgEvE;kBAhEQ,cAAc;;;AAoEvB,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ConnectionPath.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/components/ConnectionEdge/ConnectionPath.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAe,MAAM,OAAO,CAAC;AAanD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAErE,KAAK,mBAAmB,GAAG;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ,CAAC;IACnB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACtC,CAAC;AASF,iBAAS,cAAc,CAAC,EACrB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,IAAkC,EAClC,SAAS,GACX,EAAE,mBAAmB,kDAoFrB;kBA1FQ,cAAc;;;AA8FvB,eAAe,cAAc,CAAC"}

package/dist/esm/components/ConnectionEdge/index.d.ts

@@ -1,8 +1,11 @@
 import { CSSProperties } from 'react';
+import { ConnectionEdgeComponent, ConnectionEdgeType } from './type';
 type ConnectionEdgeProps = {
     containerStyle?: CSSProperties;
     style?: CSSProperties;
+    type?: ConnectionEdgeType;
+    component?: ConnectionEdgeComponent;
 };
-declare function ConnectionEdge({ containerStyle, style }: ConnectionEdgeProps): import("react/jsx-runtime").JSX.Element | null;
+declare function ConnectionEdge({ containerStyle, style, type, component, }: ConnectionEdgeProps): import("react/jsx-runtime").JSX.Element | null;
 export default ConnectionEdge;
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/ConnectionEdge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/components/ConnectionEdge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAStC,KAAK,mBAAmB,GAAG;IACxB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAOF,iBAAS,cAAc,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,mBAAmB,kDAkBrE;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/components/ConnectionEdge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAErE,KAAK,mBAAmB,GAAG;IACxB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACtC,CAAC;AAQF,iBAAS,cAAc,CAAC,EACrB,cAAc,EACd,KAAK,EACL,IAAI,EACJ,SAAS,GACX,EAAE,mBAAmB,kDAkDrB;AAED,eAAe,cAAc,CAAC"}

package/dist/esm/components/ConnectionEdge/type.d.ts

@@ -0,0 +1,22 @@
+import { ComponentType, CSSProperties } from 'react';
+import { Node, Position } from '../../types';
+import { PortElement } from '../Port/type';
+export declare enum ConnectionEdgeType {
+    Straight = "straight",
+    Bezier = "bezier",
+    Step = "step"
+}
+export type ConnectionEdgeComponentProps = {
+    connectionEdgeStyle?: CSSProperties;
+    connectionEdgeType: ConnectionEdgeType;
+    fromNode?: Node;
+    fromPort?: PortElement;
+    fromX: number;
+    fromY: number;
+    toX: number;
+    toY: number;
+    fromPosition: Position;
+    toPosition: Position;
+};
+export type ConnectionEdgeComponent = ComponentType<ConnectionEdgeComponentProps>;
+//# sourceMappingURL=type.d.ts.map

package/dist/esm/components/ConnectionEdge/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/components/ConnectionEdge/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,oBAAY,kBAAkB;IAC3B,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,IAAI,SAAS;CACf;AAED,MAAM,MAAM,4BAA4B,GAAG;IACxC,mBAAmB,CAAC,EAAE,aAAa,CAAC;IACpC,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,QAAQ,CAAC;IACvB,UAAU,EAAE,QAAQ,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAChC,aAAa,CAAC,4BAA4B,CAAC,CAAC"}

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

@@ -3,7 +3,7 @@ import { Position, Connection } from '../../../types';
 import { PortType } from '../../Port/type';
 import { Edge } from '../type';
 export type EdgeMouseHandler = (event: ReactMouseEvent, edge: Edge) => void;
-export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;
+export type OnEdgeUpdateFunc<T = any> = (originEdge: Edge<T>, newConnection: Connection) => void;
 export type WrapEdgeProps<T = any> = Edge<T> & {
     sourceX: number;
     sourceY: number;

package/dist/esm/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,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,EAChB,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,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"}

package/dist/esm/container/EdgeRenderer/index.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+/// <reference types="react" />
 import { ReactDiagramState } from '../../components/ReactDiagramProvider/type';
 import { ReactDiagramProps } from '../../types';
 import { EdgeTypesWrapped } from './type';
@@ -6,9 +6,8 @@ type GraphViewEdgeProps = Pick<ReactDiagramState, 'rfId'> & Pick<ReactDiagramPro
 type RequiredProps = Required<Pick<ReactDiagramProps, 'noPanClassName'>>;
 type EdgeRendererProps = GraphViewEdgeProps & RequiredProps & {
     edgeTypes: EdgeTypesWrapped;
-    children: ReactNode;
 };
-declare function EdgeRenderer({ rfId, edgeTypes, children, noPanClassName, onEdgeClick, onEdgeDoubleClick, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, }: EdgeRendererProps): import("react/jsx-runtime").JSX.Element;
+declare function EdgeRenderer({ rfId, edgeTypes, noPanClassName, onEdgeClick, onEdgeDoubleClick, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, }: EdgeRendererProps): import("react/jsx-runtime").JSX.Element;
 declare namespace EdgeRenderer {
     var displayName: string;
 }

package/dist/esm/container/EdgeRenderer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/container/EdgeRenderer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,OAAO,EAAY,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAE1C,KAAK,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,GACtD,IAAI,CACD,iBAAiB,EACf,aAAa,GACb,mBAAmB,GACnB,mBAAmB,GACnB,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAClB,cAAc,GACd,mBAAmB,GACnB,iBAAiB,CACrB,CAAC;AAEL,KAAK,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC,CAAC;AAEzE,KAAK,iBAAiB,GAAG,kBAAkB,GACxC,aAAa,GAAG;IACb,SAAS,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACtB,CAAC;AAUL,iBAAS,YAAY,CAAC,EACnB,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,eAAe,GACjB,EAAE,iBAAiB,2CAkJnB;kBAhKQ,YAAY;;;;AAoKrB,wBAAkC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/container/EdgeRenderer/index.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,OAAO,EAAY,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAE1C,KAAK,kBAAkB,GAAG,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,GACtD,IAAI,CACD,iBAAiB,EACf,aAAa,GACb,mBAAmB,GACnB,mBAAmB,GACnB,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAClB,cAAc,GACd,mBAAmB,GACnB,iBAAiB,CACrB,CAAC;AAEL,KAAK,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,CAAC,CAAC;AAEzE,KAAK,iBAAiB,GAAG,kBAAkB,GACxC,aAAa,GAAG;IACb,SAAS,EAAE,gBAAgB,CAAC;CAC9B,CAAC;AAUL,iBAAS,YAAY,CAAC,EACnB,IAAI,EACJ,SAAS,EACT,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,eAAe,GACjB,EAAE,iBAAiB,2CA6InB;kBA1JQ,YAAY;;;;AA8JrB,wBAAkC"}

package/dist/esm/container/ReactDiagram/DiagramView.d.ts

@@ -8,7 +8,7 @@ export type DiagramViewProps = ReactDiagramCommonProps & Required<Pick<ReactDiag
     edgeTypes: EdgeTypesWrapped;
     rfId: string;
 };
-declare function DiagramView({ rfId, noPanClassName, panning, defaultViewport, multiSelectionKeyCode, onMove, onMoveStart, onMoveEnd, onlyRenderVisibleElements, disableKeyboardA11y, noDragClassName, nodeOrigin, nodeTypes, onNodeClick, onNodeDoubleClick, onNodeContextMenu, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, edgeTypes, onEdgeClick, onEdgeDoubleClick, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, }: DiagramViewProps): import("react/jsx-runtime").JSX.Element;
+declare function DiagramView({ rfId, noPanClassName, panning, defaultViewport, multiSelectionKeyCode, onMove, onMoveStart, onMoveEnd, onlyRenderVisibleElements, disableKeyboardA11y, noDragClassName, nodeOrigin, nodeTypes, onNodeClick, onNodeDoubleClick, onNodeContextMenu, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, edgeTypes, onEdgeClick, onEdgeDoubleClick, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, connectionEdgeContainerStyle, connectionEdgeStyle, connectionEdgeType, connectionEdgeComponent, }: DiagramViewProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DiagramView {
     var displayName: string;
 }

package/dist/esm/container/ReactDiagram/DiagramView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DiagramView.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/container/ReactDiagram/DiagramView.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACvC,iBAAiB,EACjB,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,WAAW,CAC/C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,uBAAuB,GACnD,QAAQ,CACL,IAAI,CACD,iBAAiB,EACf,SAAS,GACT,iBAAiB,GACjB,2BAA2B,GAC3B,qBAAqB,GACrB,iBAAiB,GACjB,gBAAgB,GAChB,YAAY,CAChB,CACH,GAAG;IACD,SAAS,EAAE,gBAAgB,CAAC;IAC5B,SAAS,EAAE,gBAAgB,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;CACf,CAAC;AAEL,iBAAS,WAAW,CAAC,EAClB,IAAI,EAIJ,cAAc,EACd,OAAO,EAEP,eAAe,EAEf,qBAAqB,EAErB,MAAM,EACN,WAAW,EACX,SAAS,EAGT,yBAAyB,EACzB,mBAAmB,EACnB,eAAe,EACf,UAAU,EACV,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAGhB,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,eAAe,GACjB,EAAE,gBAAgB,2CA6ClB;kBArFQ,WAAW;;;;AAyFpB,wBAAiC"}
+{"version":3,"file":"DiagramView.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/container/ReactDiagram/DiagramView.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACvC,iBAAiB,EACjB,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,WAAW,CAC/C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,uBAAuB,GACnD,QAAQ,CACL,IAAI,CACD,iBAAiB,EACf,SAAS,GACT,iBAAiB,GACjB,2BAA2B,GAC3B,qBAAqB,GACrB,iBAAiB,GACjB,gBAAgB,GAChB,YAAY,CAChB,CACH,GAAG;IACD,SAAS,EAAE,gBAAgB,CAAC;IAC5B,SAAS,EAAE,gBAAgB,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;CACf,CAAC;AAEL,iBAAS,WAAW,CAAC,EAClB,IAAI,EAIJ,cAAc,EACd,OAAO,EAEP,eAAe,EAEf,qBAAqB,EAErB,MAAM,EACN,WAAW,EACX,SAAS,EAGT,yBAAyB,EACzB,mBAAmB,EACnB,eAAe,EACf,UAAU,EACV,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAGhB,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,eAAe,EAGf,4BAA4B,EAC5B,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,GACzB,EAAE,gBAAgB,2CAgDlB;kBA9FQ,WAAW;;;;AAkGpB,wBAAiC"}

package/dist/esm/container/ReactDiagram/index.d.ts

@@ -14,6 +14,10 @@ declare const ReactDiagram: import("react").ForwardRefExoticComponent<import("re
     nodeTypes?: NodeTypes | undefined;
     edges?: import("../../types").Edge<any>[] | undefined;
     edgeTypes?: EdgeTypes | undefined;
+    connectionEdgeContainerStyle?: import("react").CSSProperties | undefined;
+    connectionEdgeStyle?: import("react").CSSProperties | undefined;
+    connectionEdgeType?: import("../../types").ConnectionEdgeType | undefined;
+    connectionEdgeComponent?: import("../../types").ConnectionEdgeComponent | undefined;
     onNodesChange?: import("../../types").OnNodesChange | undefined;
     onNodeClick?: import("../../components/Node/NodeWrapper/type").NodeMouseHandler | undefined;
     onNodeDoubleClick?: import("../../components/Node/NodeWrapper/type").NodeMouseHandler | undefined;

package/dist/esm/container/ReactDiagram/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/container/ReactDiagram/index.tsx"],"names":[],"mappings":";AAeA,OAAO,EAA0C,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAazD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAgIjB,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../react-diagram/packages/src/container/ReactDiagram/index.tsx"],"names":[],"mappings":";AAeA,OAAO,EAA0C,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAazD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAyIjB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/dist/esm/index.d.ts

@@ -1,14 +1,12 @@
-export { default as ReactDiagram } from './container/ReactDiagram';
+import ReactDiagram from './container/ReactDiagram';
 export { default as ReactDiagramProvider } from './components/ReactDiagramProvider';
 export { default as Port } from './components/Port';
 export { default as BaseEdge } from './components/Edges/BaseEdge';
 export { default as StepEdge, getStepPath } from './components/Edges/StepEdge';
+export { default as BezierEdge, getBezierPath, } from './components/Edges/BezierEdge';
 export * from './hooks/useNodesEdgesState';
-export { useStore, useStoreApi } from './hooks/useStore';
-export { default as useGetPointerPosition } from './hooks/useGetPointerPosition';
-export { useNodeId } from './contexts/NodeIdContext';
 export { internalsSymbol, rectToBox, boxToRect, clamp } from './utils';
-export { isNode, isEdge, addEdge, updateEdge, getNodePositionWithOrigin, } from './utils/graph';
-export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
+export { isNode, isEdge, addEdge, updateEdge, } from './utils/graph';
 export * from './types';
+export default ReactDiagram;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["react-diagram/packages/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAEpF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE/E,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACvE,OAAO,EACJ,MAAM,EACN,MAAM,EACN,OAAO,EACP,UAAU,EACV,yBAAyB,GAC3B,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAErE,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["react-diagram/packages/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAEpF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EACJ,OAAO,IAAI,UAAU,EACrB,aAAa,GACf,MAAM,+BAA+B,CAAC;AAEvC,cAAc,4BAA4B,CAAC;AAK3C,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACvE,OAAO,EACJ,MAAM,EACN,MAAM,EACN,OAAO,EACP,UAAU,GAEZ,MAAM,eAAe,CAAC;AAGvB,cAAc,SAAS,CAAC;AACxB,eAAe,YAAY,CAAC"}

package/dist/esm/index.js

@@ -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);
@@ -737,6 +737,13 @@ 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,
@@ -1533,77 +1540,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, 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 }, id));
+                }) })] }));
 }
 EdgeRenderer.displayName = 'EdgeRenderer';
 var EdgeRenderer$1 = memo(EdgeRenderer);
@@ -1614,7 +1621,7 @@ const oppositePosition = {
     [Position.Top]: Position.Bottom,
     [Position.Bottom]: Position.Top,
 };
-function ConnectionPath({ style, nodeId, portType }) {
+function ConnectionPath({ style, nodeId, portType, type = ConnectionEdgeType.Straight, Component, }) {
     const { fromNode, toX, toY } = useStore(useCallback((s) => ({
         fromNode: s.nodeInternals.get(nodeId),
         toX: (s.connectionPosition.x - s.transform[0]) / s.transform[2],
@@ -1639,9 +1646,10 @@ function ConnectionPath({ style, nodeId, portType }) {
     if (!fromPosition || !toPosition) {
         return null;
     }
-    // // straight edge
-    // const dAttr = `M${fromX},${fromY} ${toX},${toY}`;
-    let dAttr = '';
+    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,
@@ -1650,25 +1658,51 @@ function ConnectionPath({ style, nodeId, portType }) {
         targetY: toY,
         targetPosition: toPosition,
     };
-    [dAttr] = getStepPath({
-        ...pathParams,
-        borderRadius: 0,
-    });
-    return (jsx("path", { d: dAttr, fill: "none", className: "react-diagram__connection-path", style: style }));
+    if (type === ConnectionEdgeType.Bezier) {
+        [d] = getBezierPath(pathParams);
+    }
+    else if (type === ConnectionEdgeType.Step) {
+        [d] = getStepPath({
+            ...pathParams,
+            borderRadius: 0,
+        });
+    }
+    else {
+        d = `M${fromX},${fromY} ${toX},${toY}`;
+    }
+    return (jsx("path", { d: d, fill: "none", className: "react-diagram__connection-path", style: style }));
 }
 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 ConnectionEdge({ containerStyle, style, type, 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 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 }) }) }));
 }
 
 function DiagramView({ rfId, 
@@ -1677,8 +1711,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, 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 })] }));
 }
 DiagramView.displayName = 'DiagramView';
 var DiagramView$1 = memo(DiagramView);
@@ -2558,13 +2594,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, onEdgeClick, onEdgeDoubleClick, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, onEdgeUpdate, onEdgeUpdateStart, onEdgeUpdateEnd, onMove, onMoveStart, onMoveEnd, connectionEdgeContainerStyle, connectionEdgeStyle, connectionEdgeType, connectionEdgeComponent, 
 // StoreUpdater props
 nodes, edges, nodesDraggable, elevateNodesOnSelect, autoPanOnNodeDrag, autoPanOnConnect, 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, 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 })] }) }));
 });
 ReactDiagram.displayName = 'ReactDiagram';
 
@@ -2578,4 +2614,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, ConnectionEdgeType, MarkerType, Port$1 as Port, Position, ReactDiagramProvider, StepEdge, addEdge, boxToRect, clamp, ReactDiagram as default, getBezierPath, getStepPath, internalsSymbol, isEdge, isNode, rectToBox, updateEdge, useEdgesState, useNodesState };