chore(examples): add another custom edge

example/src/Edges/CustomEdge2.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from 'react';
+import { EdgeProps, getBezierPath, getMarkerEnd, EdgeText, getEdgeCenter } from 'react-flow-renderer';
+
+const CustomEdge: FC<EdgeProps> = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  data,
+  arrowHeadType,
+  markerEndId,
+}) => {
+  const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
+  const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
+  const [centerX, centerY] = getEdgeCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+  });
+
+  return (
+    <>
+      <path id={id} style={style} className="react-flow__edge-path" d={edgePath} markerEnd={markerEnd} />
+      <EdgeText
+        x={centerX}
+        y={centerY}
+        label={data.text}
+        labelStyle={{ fill: 'white' }}
+        labelShowBg
+        labelBgStyle={{ fill: 'red' }}
+        labelBgPadding={[2, 4]}
+        labelBgBorderRadius={2}
+        onClick={() => console.log(data)}
+      />
+      ;
+    </>
+  );
+};
+
+export default CustomEdge;

example/src/Edges/index.tsx

@@ -17,6 +17,7 @@ import ReactFlow, {
 } from 'react-flow-renderer';
 
 import CustomEdge from './CustomEdge';
+import CustomEdge2 from './CustomEdge2';
 
 const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
@@ -33,6 +34,7 @@ const initialElements: Elements = [
   { id: '6', type: 'output', data: { label: 'Output 6' }, position: { x: 50, y: 550 } },
   { id: '7', type: 'output', data: { label: 'Output 7' }, position: { x: 250, y: 550 } },
   { id: '8', type: 'output', data: { label: 'Output 8' }, position: { x: 525, y: 600 } },
+  { id: '9', type: 'output', data: { label: 'Output 9' }, position: { x: 675, y: 500 } },
   { id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', className: 'normal-edge' },
   { id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
   { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
@@ -72,10 +74,18 @@ const initialElements: Elements = [
     data: { text: 'custom edge' },
     arrowHeadType: ArrowHeadType.ArrowClosed,
   },
+  {
+    id: 'e5-9',
+    source: '5',
+    target: '9',
+    type: 'custom2',
+    data: { text: 'custom edge 2' },
+  },
 ];
 
 const edgeTypes: EdgeTypesType = {
   custom: CustomEdge,
+  custom2: CustomEdge2,
 };
 
 const EdgesFlow = () => {