chore(edge-toolbar): cleanup

examples/react/src/examples/EdgeToolbar/CustomEdge.tsx

@@ -1,19 +1,39 @@
-import { getBezierPath, BaseEdge, EdgeProps, useReactFlow } from '@xyflow/react';
+import { getBezierPath, BaseEdge, EdgeProps, useReactFlow, getStraightPath, getSmoothStepPath } from '@xyflow/react';
 import { EdgeToolbar } from '@xyflow/react';
 
-export function CustomEdge({ id, data, ...props }: EdgeProps) {
-  const [edgePath, labelX, labelY] = getBezierPath(props);
+const getPath = (props: EdgeProps) => {
+  switch (props.data!.type) {
+    case 'smoothstep':
+      return getSmoothStepPath(props);
+    case 'straight':
+      return getStraightPath(props);
+    default:
+      return getBezierPath(props);
+  }
+};
+
+export function CustomEdge(props: EdgeProps) {
+  const [edgePath, centerX, centerY] = getPath(props);
   const { setEdges } = useReactFlow();
 
   const deleteEdge = () => {
-    setEdges((edges) => edges.filter((edge) => edge.id !== id));
+    setEdges((edges) => edges.filter((edge) => edge.id !== props.id));
   };
 
   return (
     <>
-      <BaseEdge id={id} path={edgePath} />
-      <EdgeToolbar edgeId={id} x={labelX} y={labelY} isVisible>
-        <button onClick={deleteEdge}>Delete</button>
+      <BaseEdge id={props.id} path={edgePath} />
+      <EdgeToolbar
+        edgeId={props.id}
+        x={centerX + 0}
+        y={centerY + 0}
+        alignX={props.data?.align?.[0] ?? 'center'}
+        alignY={props.data?.align?.[1] ?? 'center'}
+        isVisible
+      >
+        <button style={{}} onClick={deleteEdge}>
+          Delete
+        </button>
       </EdgeToolbar>
     </>
   );

examples/react/src/examples/EdgeToolbar/index.tsx

@@ -6,7 +6,6 @@ import {
   EdgeTypes,
   MiniMap,
   Node,
-  NodeOrigin,
   Position,
   ReactFlow,
 } from '@xyflow/react';
@@ -44,24 +43,24 @@ const initialEdges: Edge[] = [
     source: '1',
     target: '2',
     type: 'custom',
+    data: { type: 'smoothstep', align: ['left', 'bottom'] },
   },
   {
     id: 'e3-2',
     source: '3',
     target: '2',
     type: 'custom',
+    data: { type: 'bezier', align: ['right', 'bottom'] },
   },
   {
     id: 'e1-3',
     source: '1',
     target: '3',
     type: 'custom',
+    data: { type: 'straight', align: ['center', 'center'] },
   },
 ];
 
-// const defaultEdgeOptions = { zIndex: 0 };
-const nodeOrigin: NodeOrigin = [0.5, 0.5];
-
 export default function EdgeToolbarExample() {
   return (
     <ReactFlow
@@ -71,9 +70,7 @@ export default function EdgeToolbarExample() {
       minZoom={0.2}
       maxZoom={4}
       fitView
-      // defaultEdgeOptions={defaultEdgeOptions}
       edgeTypes={edgeTypes}
-      nodeOrigin={nodeOrigin}
     >
       <Background variant={BackgroundVariant.Dots} />
       <MiniMap />

examples/svelte/src/routes/examples/edge-toolbar/+page.svelte

@@ -55,8 +55,6 @@
 	let edges = $state.raw<Edge[]>(initialEdges);
 </script>
 
-<div style="height: 100vh;">
-	<SvelteFlow bind:nodes bind:edges {edgeTypes} fitView>
-		<Background />
-	</SvelteFlow>
-</div>
+<SvelteFlow bind:nodes bind:edges {edgeTypes} fitView>
+	<Background />
+</SvelteFlow>