From bba97aa01a661398b8d5cb6912bf9ffdf82f0548 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 26 Sep 2023 15:45:06 +0200
Subject: [PATCH] feat(svelte) added connectionLineComponent

---
 .../src/components/Header/Header.svelte       |  3 +-
 .../custom-connection-line/+page.svelte       | 35 +++++++++++++++++++
 .../ConnectionLine.svelte                     | 11 ++++++
 .../custom-connection-line/CustomNode.svelte  | 34 ++++++++++++++++++
 .../ConnectionLine/ConnectionLine.svelte      |  8 +++--
 .../container/SvelteFlow/SvelteFlow.svelte    |  4 ++-
 6 files changed, 90 insertions(+), 5 deletions(-)
 create mode 100644 examples/svelte/src/routes/custom-connection-line/+page.svelte
 create mode 100644 examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte
 create mode 100644 examples/svelte/src/routes/custom-connection-line/CustomNode.svelte

diff --git a/examples/svelte/src/components/Header/Header.svelte b/examples/svelte/src/components/Header/Header.svelte
index 6fa79b68..3d0c9ff5 100644
--- a/examples/svelte/src/components/Header/Header.svelte
+++ b/examples/svelte/src/components/Header/Header.svelte
@@ -13,7 +13,8 @@
 		'subflows',
 		'usesvelteflow',
 		'useupdatenodeinternals',
-		'validation'
+		'validation',
+		'custom-connection-line'
 	];
 
 	const onChange = (event: Event) => {
diff --git a/examples/svelte/src/routes/custom-connection-line/+page.svelte b/examples/svelte/src/routes/custom-connection-line/+page.svelte
new file mode 100644
index 00000000..c5bcab3f
--- /dev/null
+++ b/examples/svelte/src/routes/custom-connection-line/+page.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { SvelteFlow } from '@xyflow/svelte';
+	import { Background, BackgroundVariant, type Edge, type Node } from '@xyflow/svelte';
+	import { writable } from 'svelte/store';
+
+	import CustomNode from './CustomNode.svelte';
+	import ConnectionLine from './ConnectionLine.svelte';
+
+	import '@xyflow/svelte/dist/style.css';
+
+	const nodeTypes = {
+		custom: CustomNode
+	};
+
+	const nodes = writable<Node[]>([
+		{
+			id: 'connectionline-1',
+			type: 'custom',
+			data: { label: 'Node 1' },
+			position: { x: 250, y: 5 }
+		}
+	]);
+
+	const edges = writable<Edge[]>([]);
+</script>
+
+<div style="height:100vh;">
+	<SvelteFlow {nodeTypes} {nodes} {edges} fitView>
+		<ConnectionLine slot="connectionLineComponent" />
+		<Background variant={BackgroundVariant.Lines} />
+	</SvelteFlow>
+</div>
+
+<style>
+</style>
diff --git a/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte b/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte
new file mode 100644
index 00000000..977359f1
--- /dev/null
+++ b/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { useStore } from '@xyflow/svelte';
+
+	const { connectionPath, connection } = useStore();
+</script>
+
+{#if $connectionPath}
+	<g class={$connection.connectionStatus}>
+		<path d={$connectionPath} fill="none" stroke="red" />
+	</g>
+{/if}
diff --git a/examples/svelte/src/routes/custom-connection-line/CustomNode.svelte b/examples/svelte/src/routes/custom-connection-line/CustomNode.svelte
new file mode 100644
index 00000000..0f4cc6bd
--- /dev/null
+++ b/examples/svelte/src/routes/custom-connection-line/CustomNode.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Handle, Position, type NodeProps } from '@xyflow/svelte';
+
+  type $$Props = NodeProps;
+
+  export let isConnectable: $$Props['isConnectable'];
+
+  const DEFAULT_HANDLE_STYLE = 'width: 10px; height: 10px; bottom: -5px;';
+</script>
+
+<div style="background: #DDD; padding: 25px">
+  <div>Node</div>
+  <Handle
+    type="source"
+    id="red"
+    position={Position.Bottom}
+    style={DEFAULT_HANDLE_STYLE + 'left: 15%; background: red;'}
+    {isConnectable}
+  />
+  <Handle
+    type="source"
+    position={Position.Bottom}
+    id="blue"
+    style={DEFAULT_HANDLE_STYLE + 'left: 50%; background: blue;'}
+    {isConnectable}
+  />
+  <Handle
+    type="source"
+    position={Position.Bottom}
+    id="orange"
+    style={DEFAULT_HANDLE_STYLE + 'left: 85%; background: orange;'}
+    {isConnectable}
+  />
+</div>
diff --git a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
index f2abe041..31d67711 100644
--- a/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
+++ b/packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte
@@ -8,8 +8,10 @@
 
 {#if $connectionPath}
   <svg width={$width} height={$height} class="svelte-flow__connectionline">
-    <g class={cc(['svelte-flow__connection', $connection.connectionStatus])}>
-      <path d={$connectionPath} fill="none" class="svelte-flow__connection-path" />
-    </g>
+    <slot name="connectionLineComponent">
+      <g class={cc(['svelte-flow__connection', $connection.connectionStatus])}>
+        <path d={$connectionPath} fill="none" class="svelte-flow__connection-path" />
+      </g>
+    </slot>
   </svg>
 {/if}
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 600622ce..c77c0b29 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -154,7 +154,9 @@
     <Pane on:paneclick panOnDrag={panOnDrag === undefined ? true : panOnDrag}>
       <ViewportComponent>
         <EdgeRenderer on:edgeclick on:edgecontextmenu />
-        <ConnectionLine />
+        <ConnectionLine>
+          <slot name="connectionLineComponent" slot="connectionLineComponent" />
+        </ConnectionLine>
         <div class="svelte-flow__edgelabel-renderer" />
         <NodeRenderer
           on:nodeclick