From 854a9d3606868ddb2da7daba88d0ee151f4f3807 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 26 Sep 2023 16:01:00 +0200
Subject: [PATCH] feat(svelte) added connectionLineContainerStyle and
 connectionLineStyle props

---
 .../lib/components/ConnectionLine/ConnectionLine.svelte    | 7 +++++--
 .../svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte  | 4 +++-
 packages/svelte/src/lib/container/SvelteFlow/types.ts      | 2 ++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
index 31d67711..9f53f486 100644
--- a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
+++ b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
@@ -3,13 +3,16 @@
 
   import { useStore } from '$lib/store';
 
+  export let containerStyle: string = '';
+  export let style: string = '';
+
   const { connectionPath, width, height, connection } = useStore();
 </script>
 
 {#if $connectionPath}
-  <svg width={$width} height={$height} class="svelte-flow__connectionline">
+  <svg width={$width} height={$height} class="svelte-flow__connectionline" style={containerStyle}>
     <slot name="connectionLineComponent">
-      <g class={cc(['svelte-flow__connection', $connection.connectionStatus])}>
+      <g class={cc(['svelte-flow__connection', $connection.connectionStatus])} {style}>
         <path d={$connectionPath} fill="none" class="svelte-flow__connection-path" />
       </g>
     </slot>
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index c77c0b29..ec54dfea 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -39,6 +39,8 @@
   export let connectionRadius: $$Props['connectionRadius'] = undefined;
   export let connectionLineType: $$Props['connectionLineType'] = undefined;
   export let connectionMode: $$Props['connectionMode'] = ConnectionMode.Strict;
+  export let connectionLineStyle: $$Props['connectionLineStyle'] = '';
+  export let connectionLineContainerStyle: $$Props['connectionLineContainerStyle'] = '';
   export let onMoveStart: $$Props['onMoveStart'] = undefined;
   export let onMove: $$Props['onMove'] = undefined;
   export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
@@ -154,7 +156,7 @@
     <Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag}>
       <ViewportComponent>
         <EdgeRenderer on:edgeclick on:edgecontextmenu />
-        <ConnectionLine>
+        <ConnectionLine containerStyle={connectionLineContainerStyle} style={connectionLineStyle}>
           <slot name="connectionLineComponent" slot="connectionLineComponent" />
         </ConnectionLine>
         <div class="svelte-flow__edgelabel-renderer" />
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 8f038bcb..00fed6d6 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -39,6 +39,8 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   initialViewport?: Viewport;
   connectionRadius?: number;
   connectionMode?: ConnectionMode;
+  connectionLineStyle?: string;
+  connectionLineContainerStyle?: string;
   selectionMode?: SelectionMode;
   snapGrid?: SnapGrid;
   defaultMarkerColor?: string;