refactor(edge-types-example): cleanup

README.md

@@ -542,6 +542,7 @@ You can find all examples in the [example](example) folder or check out the live
 - [interaction](https://reactflow.dev/interaction)
 - [provider](https://reactflow.dev/provider)
 - [hidden](https://reactflow.dev/hidden)
+- [edge types](https://reactflow.dev/edge-types)
 
 # Development
 

example/src/CustomNode/index.js

@@ -70,7 +70,7 @@ const CustomNodeFlow = () => {
       nodeTypes={{
         selectorNode: ColorSelectorNode,
       }}
-      connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
+      connectionLineStyle={{ stroke: '#ddd' }}
       snapToGrid={true}
       snapGrid={[16, 16]}
     >

example/src/EdgeTypes/index.js

@@ -1,39 +1,23 @@
+/**
+ * Example for checking the different edge types and source and target positions
+ */
 import React, { useState } from 'react';
 
-import ReactFlow, { removeElements, addEdge, MiniMap, isNode, Controls, Background } from 'react-flow-renderer';
+import ReactFlow, { removeElements, addEdge, MiniMap, Controls, Background } from 'react-flow-renderer';
 import { getElements } from './utils';
 
 const onLoad = (reactFlowInstance) => {
   reactFlowInstance.fitView();
-
   console.log(reactFlowInstance.getElements());
 };
 
-const initialElements = getElements(10, 10);
+const initialElements = getElements();
 
 const EdgeTypesFlow = () => {
   const [elements, setElements] = useState(initialElements);
   const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
   const onConnect = (params) => setElements((els) => addEdge(params, els));
 
-  const updatePos = () => {
-    setElements((elms) => {
-      return elms.map((el) => {
-        if (isNode(el)) {
-          return {
-            ...el,
-            position: {
-              x: Math.random() * window.innerWidth,
-              y: Math.random() * window.innerHeight,
-            },
-          };
-        }
-
-        return el;
-      });
-    });
-  };
-
   return (
     <ReactFlow
       elements={elements}
@@ -45,10 +29,6 @@ const EdgeTypesFlow = () => {
       <MiniMap />
       <Controls />
       <Background />
-
-      <button onClick={updatePos} style={{ position: 'absolute', right: 10, top: 30, zIndex: 4 }}>
-        change pos
-      </button>
     </ReactFlow>
   );
 };

example/src/Overview/index.js

@@ -128,7 +128,7 @@ const OverviewFlow = () => {
       onSelectionChange={onSelectionChange}
       style={{ width: '100%', height: '100%' }}
       onLoad={onLoad}
-      connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
+      connectionLineStyle={{ stroke: '#ddd' }}
       snapToGrid={true}
       snapGrid={[16, 16]}
     >

src/components/ConnectionLine/index.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState, CSSProperties } from 'react';
 import cc from 'classcat';
 
 import { getBezierPath } from '../Edges/BezierEdge';
-import { getStepPath } from '../Edges/StepEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
 import { ElementId, Node, Transform, HandleElement, Position, ConnectionLineType, HandleType } from '../../types';
 
@@ -80,12 +79,18 @@ export default ({
       targetPosition,
     });
   } else if (connectionLineType === ConnectionLineType.Step) {
-    dAttr = getStepPath({
+    dAttr = getSmoothStepPath({
+      xOffset,
+      yOffset,
+      centerX,
       centerY,
       sourceX,
       sourceY,
+      sourcePosition: sourceHandle?.position,
       targetX,
       targetY,
+      targetPosition,
+      borderRadius: 0,
     });
   } else if (connectionLineType === ConnectionLineType.SmoothStep) {
     dAttr = getSmoothStepPath({