feat(svelte): add labelStyle prop for edges

packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import EdgeLabelRenderer from '$lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte';
+  import { EdgeLabelRenderer } from '$lib/components/EdgeLabelRenderer';
   import type { BaseEdgeProps } from './types';
 
   type $$Props = BaseEdgeProps;
@@ -9,10 +9,12 @@
   export let label: $$Props['label'] = undefined;
   export let labelX: $$Props['labelX'] = undefined;
   export let labelY: $$Props['labelY'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
   export let markerStart: $$Props['markerStart'] = undefined;
   export let markerEnd: $$Props['markerEnd'] = undefined;
   export let style: $$Props['style'] = undefined;
   export let interactionWidth: $$Props['interactionWidth'] = 20;
+
 </script>
 
 <path
@@ -40,6 +42,7 @@
     <div
       class="svelte-flow__edge-label"
       style:transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
+      style={labelStyle}
     >
       {label}
     </div>

packages/svelte/src/lib/components/BaseEdge/types.ts

@@ -1,6 +1,9 @@
 import type { EdgeProps } from '$lib/types';
 
-export type BaseEdgeProps = Pick<EdgeProps, 'interactionWidth' | 'label' | 'style'> & {
+export type BaseEdgeProps = Pick<
+  EdgeProps,
+  'interactionWidth' | 'label' | 'labelStyle' | 'style'
+> & {
   id?: string;
   path: string;
   labelX?: number;

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -24,6 +24,7 @@
   export let animated: $$Props['animated'] = false;
   export let selected: $$Props['selected'] = false;
   export let label: $$Props['label'] = undefined;
+  export let labelStyle: $$Props['labelStyle'] = undefined;
   export let markerStart: $$Props['markerStart'] = undefined;
   export let markerEnd: $$Props['markerEnd'] = undefined;
   export let sourceHandleId: $$Props['sourceHandleId'] = undefined;
@@ -66,6 +67,7 @@
     {animated}
     {selected}
     {label}
+    {labelStyle}
     {data}
     {style}
     {sourceHandleId}

packages/svelte/src/lib/components/edges/BezierEdge.svelte

@@ -22,6 +22,7 @@
   {labelY}
   id={$$props.id}
   label={$$props.label}
+  labelStyle={$$props.labelStyle}
   markerStart={$$props.markerStart}
   markerEnd={$$props.markerEnd}
   interactionWidth={$$props.interactionWidth}

packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte

@@ -22,6 +22,7 @@
   {labelY}
   id={$$props.id}
   label={$$props.label}
+  labelStyle={$$props.labelStyle}
   markerStart={$$props.markerStart}
   markerEnd={$$props.markerEnd}
   interactionWidth={$$props.interactionWidth}

packages/svelte/src/lib/components/edges/StepEdge.svelte

@@ -23,6 +23,7 @@
   {labelY}
   id={$$props.id}
   label={$$props.label}
+  labelStyle={$$props.labelStyle}
   markerStart={$$props.markerStart}
   markerEnd={$$props.markerEnd}
   interactionWidth={$$props.interactionWidth}

packages/svelte/src/lib/components/edges/StraightEdge.svelte

@@ -20,6 +20,7 @@
   {labelY}
   id={$$props.id}
   label={$$props.label}
+  labelStyle={$$props.labelStyle}
   markerStart={$$props.markerStart}
   markerEnd={$$props.markerEnd}
   interactionWidth={$$props.interactionWidth}

packages/svelte/src/lib/types/edges.ts

@@ -12,6 +12,7 @@ import type { Node } from '$lib/types';
 
 export type DefaultEdge<EdgeData = any> = BaseEdge<EdgeData> & {
   label?: string;
+  labelStyle?: string;
   style?: string;
   class?: string;
   sourceNode?: Node;
@@ -67,6 +68,7 @@ export type EdgeProps = Pick<
   | 'animated'
   | 'selected'
   | 'label'
+  | 'labelStyle'
   | 'interactionWidth'
   | 'markerStart'
   | 'markerEnd'

packages/svelte/src/routes/edges/+page.svelte

@@ -101,9 +101,7 @@
     source: '5',
     target: '7',
     label: 'label with styled bg',
-    //labelBgPadding: [8, 4],
-    // labelBgBorderRadius: 4,
-    // labelBgStyle: { fill: '#FFCC00', color: '#fff', fillOpacity: 0.7 },
+    labelStyle: 'background: #FFCC00; color: #fff; opacity: 0.7',
     markerEnd: {
       type: MarkerType.ArrowClosed,
     },
@@ -125,7 +123,7 @@
     source: '5',
     target: '6',
     label: 'hi',
-    // labelStyle: 'fill: red; font-weight: 700',
+    labelStyle: 'background: red; font-weight: 700; padding: 5px;',
     style: 'stroke: #ffcc0',
     markerEnd: {
       type: MarkerType.Arrow,