refactor(edges): siplify edge path / label position handling, repair edge labels

examples/vite-app/src/examples/EdgeRouting/index.tsx

@@ -77,10 +77,6 @@ const edges: Edge[] = [
     id: 'e1-2',
     source: '1',
     target: '2',
-    type: 'smoothstep',
-    markerEnd: {
-      type: MarkerType.ArrowClosed,
-    },
     pathOptions: {
       offset: 30,
     },
@@ -90,10 +86,6 @@ const edges: Edge[] = [
     id: 'e3-4',
     source: '3',
     target: '4',
-    type: 'smoothstep',
-    markerEnd: {
-      type: MarkerType.ArrowClosed,
-    },
     pathOptions: {
       borderRadius: 2,
     },
@@ -104,24 +96,21 @@ const edges: Edge[] = [
     id: 'e4-5',
     source: '5',
     target: '6',
-    type: 'smoothstep',
-    markerEnd: {
-      type: MarkerType.ArrowClosed,
-    },
   },
 
   {
     id: 'e7-8',
     source: '7',
     target: '8',
-    type: 'smoothstep',
-    markerEnd: {
-      type: MarkerType.ArrowClosed,
-    },
   },
 ];
 
 const defaultEdgeOptions = {
+  label: 'Edge Label',
+  type: 'default',
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+  },
   style: {
     strokeWidth: 1,
   },

examples/vite-app/src/examples/Edges/CustomEdge.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { EdgeProps, getBezierPath } from 'reactflow';
 
 const CustomEdge: FC<EdgeProps> = ({
@@ -11,7 +11,7 @@ const CustomEdge: FC<EdgeProps> = ({
   targetPosition,
   data,
 }) => {
-  const edgePath = getBezierPath({
+  const [edgePath] = getBezierPath({
     sourceX,
     sourceY,
     sourcePosition,

examples/vite-app/src/examples/Edges/CustomEdge2.tsx

@@ -1,5 +1,5 @@
-import React, { FC } from 'react';
-import { EdgeProps, getBezierPath, EdgeText, getBezierEdgeCenter } from 'reactflow';
+import { FC } from 'react';
+import { EdgeProps, getBezierPath, EdgeText } from 'reactflow';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,
@@ -11,7 +11,7 @@ const CustomEdge: FC<EdgeProps> = ({
   targetPosition,
   data,
 }) => {
-  const edgePath = getBezierPath({
+  const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -19,19 +19,13 @@ const CustomEdge: FC<EdgeProps> = ({
     targetY,
     targetPosition,
   });
-  const [centerX, centerY] = getBezierEdgeCenter({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-  });
 
   return (
     <>
       <path id={id} className="react-flow__edge-path" d={edgePath} />
       <EdgeText
-        x={centerX}
-        y={centerY}
+        x={labelX}
+        y={labelY}
         label={data.text}
         labelStyle={{ fill: 'white' }}
         labelShowBg