export htmlattributes as props where possible

examples/svelte/src/routes/examples/edges/ButtonEdge.svelte

@@ -3,10 +3,10 @@
 		getBezierPath,
 		BaseEdge,
 		type EdgeProps,
-		EdgeLabelRenderer,
 		useSvelteFlow,
 		MarkerType,
-		EdgeReconnectAnchor
+		EdgeReconnectAnchor,
+		EdgeLabel
 	} from '@xyflow/svelte';
 
 	let {
@@ -39,39 +39,34 @@
 
 {#if !reconnecting}
 	<BaseEdge path={edgePath} {markerEnd} {style} />
-	<EdgeLabelRenderer>
-		<div
-			class="edgeButtonContainer nodrag nopan"
-			style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
+	<EdgeLabel x={labelX} y={labelY}>
+		<button
+			class="edgeButton"
+			onclick={(event) => {
+				event.stopPropagation();
+				updateEdge('e5-6', {
+					markerEnd: {
+						type: MarkerType.Arrow,
+						color: '#FFCC00',
+						markerUnits: 'userSpaceOnUse',
+						width: 20,
+						height: 20,
+						strokeWidth: 2
+					},
+					markerStart: {
+						type: MarkerType.ArrowClosed,
+						color: '#FFCC00',
+						orient: 'auto-start-reverse',
+						markerUnits: 'userSpaceOnUse',
+						width: 20,
+						height: 20
+					}
+				});
+			}}
 		>
-			<button
-				class="edgeButton"
-				onclick={(event) => {
-					event.stopPropagation();
-					updateEdge('e5-6', {
-						markerEnd: {
-							type: MarkerType.Arrow,
-							color: '#FFCC00',
-							markerUnits: 'userSpaceOnUse',
-							width: 20,
-							height: 20,
-							strokeWidth: 2
-						},
-						markerStart: {
-							type: MarkerType.ArrowClosed,
-							color: '#FFCC00',
-							orient: 'auto-start-reverse',
-							markerUnits: 'userSpaceOnUse',
-							width: 20,
-							height: 20
-						}
-					});
-				}}
-			>
-				×
-			</button>
-		</div>
-	</EdgeLabelRenderer>
+			×
+		</button>
+	</EdgeLabel>
 {/if}
 
 {#if selected}
@@ -80,14 +75,6 @@
 {/if}
 
 <style>
-	.edgeButtonContainer {
-		position: absolute;
-		font-size: 12pt;
-		/* everything inside EdgeLabelRenderer has no pointer events by default */
-		/* if you have an interactive element, set pointer-events: all */
-		pointer-events: all;
-	}
-
 	.edgeButton {
 		width: 20px;
 		height: 20px;
@@ -95,8 +82,7 @@
 		border: 1px solid #fff;
 		cursor: pointer;
 		border-radius: 50%;
-		font-size: 12px;
-		line-height: 1;
+		font-size: 10px;
 	}
 
 	.edgeButton:hover {

examples/svelte/src/routes/examples/overview/CustomEdge.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
-	import {
-		BaseEdge,
-		EdgeLabelRenderer,
-		useEdges,
-		getBezierPath,
-		type EdgeProps
-	} from '@xyflow/svelte';
+	import { BaseEdge, useEdges, getBezierPath, type EdgeProps, EdgeLabel } from '@xyflow/svelte';
 
 	let { ...props }: EdgeProps = $props();
 
@@ -29,20 +23,13 @@
 
 <BaseEdge {path} {labelX} {labelY} {...props} />
 
-<EdgeLabelRenderer>
-	<button
-		style:transform={`translate(-50%,-50%) translate(${labelX}px,${labelY}px)`}
-		class="edge-button"
-		onclick={onClick}
-	>
-		✕
-	</button>
-</EdgeLabelRenderer>
+<EdgeLabel x={labelX} y={labelY} selectEdgeOnClick>
+	<button class="edge-button" onclick={onClick}> ✕ </button>
+</EdgeLabel>
 
 <style>
 	.edge-button {
 		border-radius: 50%;
-		position: absolute;
 		border: none;
 		width: 1rem;
 		height: 1rem;
@@ -50,7 +37,6 @@
 		justify-content: center;
 		align-items: center;
 		font-size: 8px;
-		pointer-events: all;
 		cursor: pointer;
 		background-color: #eee;
 	}