feat(edges): step edge

src/EdgeRenderer/EdgeTypes/StepEdge.js

@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+
+export default memo((props) => {
+  const {
+    sourceX, sourceY, targetX, targetY, style = {}
+  } = props;
+
+  const yOffset = Math.abs(targetY - sourceY) / 2;
+  const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+
+  return (
+    <path
+      {...style}
+      d={`M ${sourceX},${sourceY}L ${sourceX},${centerY}L ${targetX},${centerY}L ${targetX},${targetY}`}
+    />
+  );
+});

src/ReactGraph/index.js

@@ -16,6 +16,7 @@ import { createNodeTypes } from '../NodeRenderer/utils';
 
 import BezierEdge from '../EdgeRenderer/EdgeTypes/BezierEdge';
 import StraightEdge from '../EdgeRenderer/EdgeTypes/StraightEdge';
+import StepEdge from '../EdgeRenderer/EdgeTypes/StepEdge';
 import { createEdgeTypes } from '../EdgeRenderer/utils';
 
 import '../style.css';
@@ -75,7 +76,8 @@ ReactGraph.defaultProps = {
   },
   edgeTypes: {
     default: BezierEdge,
-    straight: StraightEdge
+    straight: StraightEdge,
+    step: StepEdge
   },
   connectionLineType: 'bezier',
   connectionLineStyle: {}