From 56bcf2f6522d1965fa910aeeb5462b4b039773ff Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 16 May 2023 12:33:09 +0200
Subject: [PATCH] feat(svelte): add labelStyle prop for edges

---
 packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte | 5 ++++-
 packages/svelte/src/lib/components/BaseEdge/types.ts        | 5 ++++-
 .../src/lib/components/EdgeWrapper/EdgeWrapper.svelte       | 2 ++
 packages/svelte/src/lib/components/edges/BezierEdge.svelte  | 1 +
 .../svelte/src/lib/components/edges/SmoothStepEdge.svelte   | 1 +
 packages/svelte/src/lib/components/edges/StepEdge.svelte    | 1 +
 .../svelte/src/lib/components/edges/StraightEdge.svelte     | 1 +
 packages/svelte/src/lib/types/edges.ts                      | 2 ++
 packages/svelte/src/routes/edges/+page.svelte               | 6 ++----
 9 files changed, 18 insertions(+), 6 deletions(-)

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 @@
 <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>
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<EdgeProps, 'interactionWidth' | 'label' | 'style'> & {
+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<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'
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,