refactor(connectionLine): create connection line type enum

src/container/EdgeRenderer/index.tsx

@@ -3,14 +3,14 @@ import React, { memo, CSSProperties } from 'react';
 import { useStoreState } from '../../store/hooks';
 import ConnectionLine from '../../components/ConnectionLine/index';
 import { isEdge } from '../../utils/graph';
-import { XYPosition, Position, Edge, Node, ElementId, HandleElement, Elements } from '../../types';
+import { XYPosition, Position, Edge, Node, ElementId, HandleElement, Elements, ConnectionLineType } from '../../types';
 
 interface EdgeRendererProps {
   width: number;
   height: number;
   edgeTypes: any;
+  connectionLineType: ConnectionLineType;
   connectionLineStyle?: CSSProperties;
-  connectionLineType?: string;
   onElementClick?: (element: Node | Edge) => void;
 }
 

src/container/GraphView/index.tsx

@@ -12,7 +12,16 @@ import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';
 import useElementUpdater from '../../hooks/useElementUpdater';
 import { getDimensions } from '../../utils';
 import { fitView, zoomIn, zoomOut, project } from '../../utils/graph';
-import { Elements, NodeTypesType, EdgeTypesType, OnLoadFunc, Node, Edge, Connection } from '../../types';
+import {
+  Elements,
+  NodeTypesType,
+  EdgeTypesType,
+  OnLoadFunc,
+  Node,
+  Edge,
+  Connection,
+  ConnectionLineType,
+} from '../../types';
 
 export interface GraphViewProps {
   elements: Elements;
@@ -26,8 +35,8 @@ export interface GraphViewProps {
   selectionKeyCode: number;
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
-  connectionLineType: string;
-  connectionLineStyle: CSSProperties;
+  connectionLineType: ConnectionLineType;
+  connectionLineStyle?: CSSProperties;
   deleteKeyCode: number;
   snapToGrid: boolean;
   snapGrid: [number, number];

src/container/ReactFlow/index.tsx

@@ -20,7 +20,16 @@ import StraightEdge from '../../components/Edges/StraightEdge';
 import StepEdge from '../../components/Edges/StepEdge';
 import { createEdgeTypes } from '../EdgeRenderer/utils';
 import store from '../../store';
-import { Elements, NodeTypesType, EdgeTypesType, OnLoadFunc, Node, Edge, Connection } from '../../types';
+import {
+  Elements,
+  NodeTypesType,
+  EdgeTypesType,
+  OnLoadFunc,
+  Node,
+  Edge,
+  Connection,
+  ConnectionLineType,
+} from '../../types';
 
 import '../../style.css';
 
@@ -36,8 +45,8 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onSelectionChange?: (elements: Elements | null) => void;
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
-  connectionLineType: string;
-  connectionLineStyle: CSSProperties;
+  connectionLineType: ConnectionLineType;
+  connectionLineStyle?: CSSProperties;
   deleteKeyCode: number;
   selectionKeyCode: number;
   snapToGrid: boolean;
@@ -119,8 +128,7 @@ ReactFlow.defaultProps = {
     straight: StraightEdge,
     step: StepEdge,
   },
-  connectionLineType: 'bezier',
-  connectionLineStyle: {},
+  connectionLineType: ConnectionLineType.Bezier,
   deleteKeyCode: 8,
   selectionKeyCode: 16,
   snapToGrid: false,