From 026ecf5ff3482089cc63712db3f9ccf07b9df91e Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 21 Jan 2025 11:47:20 +0100
Subject: [PATCH] make custom connection line component a normal prop instead
 of a snippet

---
 .../ConnectionLine/ConnectionLine.svelte         | 16 +++++++++-------
 .../lib/container/SvelteFlow/SvelteFlow.svelte   | 10 ++++++----
 .../svelte/src/lib/container/SvelteFlow/types.ts |  4 ++--
 .../svelte/src/lib/store/initial-store.svelte.ts |  4 ----
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
index 490088d6..4bb26b43 100644
--- a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
+++ b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import cc from 'classcat';
-  import type { Snippet } from 'svelte';
+  import type { Component } from 'svelte';
   import {
     ConnectionLineType,
     getBezierPath,
@@ -13,14 +13,16 @@
 
   let {
     store,
+    type,
     containerStyle = '',
     style = '',
-    connectionLine
+    LineComponent
   }: {
     store: SvelteFlowStore;
+    type: ConnectionLineType;
     containerStyle: string;
     style: string;
-    connectionLine?: Snippet;
+    LineComponent?: Component;
   } = $props();
 
   let path = $derived.by(() => {
@@ -37,7 +39,7 @@
       targetPosition: store.connection.toPosition
     };
 
-    switch (store.connectionLineType) {
+    switch (type) {
       case ConnectionLineType.Bezier: {
         const [path] = getBezierPath(pathParams);
         return path;
@@ -50,7 +52,7 @@
       case ConnectionLineType.SmoothStep: {
         const [path] = getSmoothStepPath({
           ...pathParams,
-          borderRadius: store.connectionLineType === ConnectionLineType.Step ? 0 : undefined
+          borderRadius: type === ConnectionLineType.Step ? 0 : undefined
         });
         return path;
       }
@@ -66,8 +68,8 @@
     style={containerStyle}
   >
     <g class={cc(['svelte-flow__connection', getConnectionStatus(store.connection.isValid)])}>
-      {#if connectionLine}
-        {@render connectionLine()}
+      {#if LineComponent}
+        <LineComponent></LineComponent>
       {:else}
         <path d={path} {style} fill="none" class="svelte-flow__connection-path" />
       {/if}
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index aa8dad04..9d53b489 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext, setContext, onDestroy } from 'svelte';
   import cc from 'classcat';
-  import { PanOnScrollMode } from '@xyflow/system';
+  import { ConnectionLineType, PanOnScrollMode } from '@xyflow/system';
 
   import { key, createStore } from '$lib/store';
   import { Zoom } from '$lib/container/Zoom';
@@ -33,7 +33,6 @@
     onMoveStart,
     onMoveEnd,
     onMove,
-    connectionLine,
     onnodeclick,
     onnodecontextmenu,
     onnodedrag,
@@ -58,8 +57,10 @@
     panOnScroll = false,
     panOnDrag = true,
     selectionOnDrag = true,
-    connectionLineContainerStyle = '',
+    connectionLineComponent,
     connectionLineStyle = '',
+    connectionLineContainerStyle = '',
+    connectionLineType = ConnectionLineType.Bezier,
     attributionPosition,
     children,
     nodes = $bindable([]),
@@ -167,9 +168,10 @@
         />
         <ConnectionLine
           {store}
+          type={connectionLineType}
+          LineComponent={connectionLineComponent}
           containerStyle={connectionLineContainerStyle}
           style={connectionLineStyle}
-          {connectionLine}
         />
         <div class="svelte-flow__edgelabel-renderer"></div>
         <div class="svelte-flow__viewport-portal"></div>
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 6564b5d3..4d9588b8 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -35,7 +35,7 @@ import type {
   IsValidConnection
 } from '$lib/types';
 
-import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
 import type { EdgeEvents, NodeEvents, NodeSelectionEvents, PaneEvents } from '$lib/types/events';
 
 export type SvelteFlowProps = NodeEvents &
@@ -180,7 +180,7 @@ export type SvelteFlowProps = NodeEvents &
      */
     connectionMode?: ConnectionMode;
     /** Provide a custom snippet to be used insted of the default connection line */
-    connectionLine?: Snippet;
+    connectionLineComponent?: Component;
     /** Styles to be applied to the connection line */
     connectionLineStyle?: string;
     /** Styles to be applied to the container of the connection line */
diff --git a/packages/svelte/src/lib/store/initial-store.svelte.ts b/packages/svelte/src/lib/store/initial-store.svelte.ts
index d598cf97..1ed91bd4 100644
--- a/packages/svelte/src/lib/store/initial-store.svelte.ts
+++ b/packages/svelte/src/lib/store/initial-store.svelte.ts
@@ -2,7 +2,6 @@ import {
   infiniteExtent,
   SelectionMode,
   ConnectionMode,
-  ConnectionLineType,
   devWarn,
   adoptUserNodes,
   getViewportForBounds,
@@ -225,9 +224,6 @@ export const getInitialStore = (signals: StoreSignals) => {
         return this._connection;
       }
     });
-    connectionLineType: ConnectionLineType = $derived(
-      signals.props.connectionLineType ?? ConnectionLineType.Bezier
-    );
     connectionMode: ConnectionMode = $derived(
       signals.props.connectionMode ?? ConnectionMode.Strict
     );