add svelte version

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

@@ -1,5 +1,4 @@
 import { getBezierPath, BaseEdge, EdgeProps, useReactFlow } from '@xyflow/react';
-
 import { EdgeToolbar } from '@xyflow/react';
 
 export function CustomEdge({ id, data, ...props }: EdgeProps) {
@@ -13,7 +12,7 @@ export function CustomEdge({ id, data, ...props }: EdgeProps) {
   return (
     <>
       <BaseEdge id={id} path={edgePath} />
-      <EdgeToolbar edgeId={id} labelX={labelX} labelY={labelY} isVisible>
+      <EdgeToolbar edgeId={id} x={labelX} y={labelY} isVisible>
         <button onClick={deleteEdge}>Delete</button>
       </EdgeToolbar>
     </>

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

@@ -1,15 +1,14 @@
 import {
-  ReactFlow,
-  MiniMap,
   Background,
   BackgroundVariant,
   Controls,
-  Node,
   Edge,
-  NodeTypes,
-  Position,
-  NodeOrigin,
   EdgeTypes,
+  MiniMap,
+  Node,
+  NodeOrigin,
+  Position,
+  ReactFlow,
 } from '@xyflow/react';
 
 import { CustomEdge } from './CustomEdge';
@@ -28,13 +27,13 @@ const initialNodes: Node[] = [
   {
     id: '2',
     data: { label: 'Node 2', toolbarPosition: Position.Top },
-    position: { x: 200, y: 0 },
+    position: { x: 100, y: 150 },
     className: 'react-flow__node-default',
   },
   {
     id: '3',
     data: { label: 'Node 3', toolbarPosition: Position.Top },
-    position: { x: 100, y: 150 },
+    position: { x: 200, y: 0 },
     className: 'react-flow__node-default',
   },
 ];
@@ -47,20 +46,20 @@ const initialEdges: Edge[] = [
     type: 'custom',
   },
   {
-    id: 'e2-3',
-    source: '2',
-    target: '3',
+    id: 'e3-2',
+    source: '3',
+    target: '2',
     type: 'custom',
   },
   {
-    id: 'e3-1',
-    source: '3',
-    target: '1',
+    id: 'e1-3',
+    source: '1',
+    target: '3',
     type: 'custom',
   },
 ];
 
-const defaultEdgeOptions = { zIndex: 0 };
+// const defaultEdgeOptions = { zIndex: 0 };
 const nodeOrigin: NodeOrigin = [0.5, 0.5];
 
 export default function EdgeToolbarExample() {
@@ -72,7 +71,7 @@ export default function EdgeToolbarExample() {
       minZoom={0.2}
       maxZoom={4}
       fitView
-      defaultEdgeOptions={defaultEdgeOptions}
+      // defaultEdgeOptions={defaultEdgeOptions}
       edgeTypes={edgeTypes}
       nodeOrigin={nodeOrigin}
     >

examples/svelte/src/components/Header/Header.svelte

@@ -13,6 +13,7 @@
 		'detached-handle',
 		'drag-n-drop',
 		'edges',
+		'edge-toolbar',
 		'figma',
 		'handle-connect',
 		'interaction',

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { Background, Position, SvelteFlow, type Edge, type Node } from '@xyflow/svelte';
+
+	import '@xyflow/svelte/dist/style.css';
+
+	import CustomEdge from './CustomEdge.svelte';
+
+	const edgeTypes = {
+		custom: CustomEdge
+	};
+
+	const initialNodes: Node[] = [
+		{
+			id: '1',
+			data: { label: 'Node 1', toolbarPosition: Position.Top },
+			position: { x: 0, y: 0 },
+			class: 'svelte-flow__node-default'
+		},
+		{
+			id: '2',
+			data: { label: 'Node 2', toolbarPosition: Position.Top },
+			position: { x: 100, y: 150 },
+			class: 'svelte-flow__node-default'
+		},
+		{
+			id: '3',
+			data: { label: 'Node 3', toolbarPosition: Position.Top },
+			position: { x: 200, y: 0 },
+			class: 'svelte-flow__node-default'
+		}
+	];
+
+	const initialEdges: Edge[] = [
+		{
+			id: 'e1-2',
+			source: '1',
+			target: '2',
+			type: 'custom'
+		},
+		{
+			id: 'e3-2',
+			source: '3',
+			target: '2',
+			type: 'custom'
+		},
+		{
+			id: 'e1-3',
+			source: '1',
+			target: '3',
+			type: 'custom'
+		}
+	];
+
+	let nodes = $state.raw<Node[]>(initialNodes);
+	let edges = $state.raw<Edge[]>(initialEdges);
+</script>
+
+<div style="height: 100vh;">
+	<SvelteFlow bind:nodes bind:edges {edgeTypes} fitView>
+		<Background />
+	</SvelteFlow>
+</div>

examples/svelte/src/routes/examples/edge-toolbar/CustomEdge.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { getBezierPath, BaseEdge, type EdgeProps, useSvelteFlow } from '@xyflow/svelte';
+	import { EdgeToolbar } from '@xyflow/svelte';
+
+	const { deleteElements } = useSvelteFlow();
+
+	let { id, sourceX, sourceY, targetX, targetY }: EdgeProps = $props();
+
+	let [edgePath, labelX, labelY] = $derived(
+		getBezierPath({
+			sourceX,
+			sourceY,
+			targetX,
+			targetY
+		})
+	);
+
+	const deleteEdge = () => {
+		deleteElements({ edges: [{ id }] });
+	};
+</script>
+
+<BaseEdge {id} path={edgePath} />
+<EdgeToolbar edgeId={id} x={labelX} y={labelY} isVisible>
+	<button onclick={deleteEdge}>Delete</button>
+</EdgeToolbar>