diff --git a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
index c684cfc5..0ea8a77d 100644
--- a/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
+++ b/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte
@@ -1,5 +1,5 @@
{label}
diff --git a/packages/svelte/src/lib/components/BaseEdge/types.ts b/packages/svelte/src/lib/components/BaseEdge/types.ts
index 0941ccad..32ed066b 100644
--- a/packages/svelte/src/lib/components/BaseEdge/types.ts
+++ b/packages/svelte/src/lib/components/BaseEdge/types.ts
@@ -1,6 +1,9 @@
import type { EdgeProps } from '$lib/types';
-export type BaseEdgeProps = Pick & {
+export type BaseEdgeProps = Pick<
+ EdgeProps,
+ 'interactionWidth' | 'label' | 'labelStyle' | 'style'
+> & {
id?: string;
path: string;
labelX?: number;
diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
index ba8a0d1b..2753c4ae 100644
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/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}
diff --git a/packages/svelte/src/lib/components/edges/BezierEdge.svelte b/packages/svelte/src/lib/components/edges/BezierEdge.svelte
index 780168b1..8bbd1464 100644
--- a/packages/svelte/src/lib/components/edges/BezierEdge.svelte
+++ b/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}
diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
index f5093c54..333c8a3c 100644
--- a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
+++ b/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}
diff --git a/packages/svelte/src/lib/components/edges/StepEdge.svelte b/packages/svelte/src/lib/components/edges/StepEdge.svelte
index c51d6bcb..3056d7d6 100644
--- a/packages/svelte/src/lib/components/edges/StepEdge.svelte
+++ b/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}
diff --git a/packages/svelte/src/lib/components/edges/StraightEdge.svelte b/packages/svelte/src/lib/components/edges/StraightEdge.svelte
index 8b095be9..bf849418 100644
--- a/packages/svelte/src/lib/components/edges/StraightEdge.svelte
+++ b/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}
diff --git a/packages/svelte/src/lib/types/edges.ts b/packages/svelte/src/lib/types/edges.ts
index 24f8af72..6a5ced4f 100644
--- a/packages/svelte/src/lib/types/edges.ts
+++ b/packages/svelte/src/lib/types/edges.ts
@@ -12,6 +12,7 @@ import type { Node } from '$lib/types';
export type DefaultEdge = BaseEdge & {
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'
diff --git a/packages/svelte/src/routes/edges/+page.svelte b/packages/svelte/src/routes/edges/+page.svelte
index e6eddc2b..abd48eec 100644
--- a/packages/svelte/src/routes/edges/+page.svelte
+++ b/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,