refactor(connectionLine): create connection line type enum

src/components/ConnectionLine/index.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState, CSSProperties } from 'react';
 import cx from 'classnames';
 
-import { ElementId, Node, Transform, HandleElement, Position } from '../../types';
+import { ElementId, Node, Transform, HandleElement, Position, ConnectionLineType } from '../../types';
 
 interface ConnectionLineProps {
   connectionSourceId: ElementId;
   connectionPositionX: number;
   connectionPositionY: number;
-  connectionLineType?: string | null;
+  connectionLineType: ConnectionLineType;
   nodes: Node[];
   transform: Transform;
   isInteractive: boolean;
@@ -17,10 +17,10 @@ interface ConnectionLineProps {
 
 export default ({
   connectionSourceId,
-  connectionLineStyle = {},
+  connectionLineStyle,
   connectionPositionX,
   connectionPositionY,
-  connectionLineType,
+  connectionLineType = ConnectionLineType.Bezier,
   nodes = [],
   className,
   transform,
@@ -60,7 +60,7 @@ export default ({
 
   let dAttr: string = '';
 
-  if (connectionLineType === 'bezier') {
+  if (connectionLineType === ConnectionLineType.Bezier) {
     if (sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right) {
       const xOffset = Math.abs(targetX - sourceX) / 2;
       const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;

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,

src/types/index.ts

@@ -153,6 +153,11 @@ export interface Connection {
   target: ElementId | null;
 }
 
+export enum ConnectionLineType {
+  Bezier = 'bezier',
+  Straight = 'straight',
+}
+
 export type OnConnectFunc = (connection: Connection) => void;
 
 export interface HandleElement extends XYPosition, Dimensions {