From 3f94dfa84cdab9aae690599214a6c1650f06d3d6 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 28 Nov 2023 15:48:19 +0100
Subject: [PATCH] feat(svelte) added onedgecreate function

---
 .../svelte/src/routes/examples/edges/+page.svelte     | 11 ++++++++++-
 .../svelte/src/lib/components/Handle/Handle.svelte    | 11 ++++++++++-
 .../src/lib/container/SvelteFlow/SvelteFlow.svelte    |  2 ++
 packages/svelte/src/lib/container/SvelteFlow/types.ts |  5 ++++-
 packages/svelte/src/lib/container/SvelteFlow/utils.ts |  1 +
 packages/svelte/src/lib/store/initial-store.ts        |  6 ++++--
 packages/svelte/src/lib/types/general.ts              |  4 +++-
 7 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte
index 403b0ef6..575984ca 100644
--- a/examples/svelte/src/routes/examples/edges/+page.svelte
+++ b/examples/svelte/src/routes/examples/edges/+page.svelte
@@ -145,7 +145,16 @@
 	]);
 </script>
 
-<SvelteFlow {nodes} {edges} fitView nodeDragThreshold={2}>
+<SvelteFlow
+	{nodes}
+	{edges}
+	fitView
+	nodeDragThreshold={2}
+	onedgecreate={(e) => {
+		console.log('on edge create', e);
+		return e;
+	}}
+>
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 	<MiniMap />
diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index 655bcc6b..7d3010bd 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -55,6 +55,7 @@
     isValidConnection,
     lib,
     addEdge,
+    onedgecreate,
     panBy,
     cancelConnection,
     updateConnection,
@@ -80,8 +81,16 @@
         cancelConnection,
         panBy,
         onConnect: (connection) => {
-          addEdge(connection);
+          if ($onedgecreate) {
+            const modifiedConnection = $onedgecreate(connection);
+            if (modifiedConnection) {
+              addEdge(modifiedConnection);
+              dispatch('connect', { connection });
+            }
+            return;
+          }
 
+          addEdge(connection);
           // @todo: should we change/ improve the stuff we are passing here?
           // instead of source/target we could pass fromNodeId, fromHandleId, etc
           dispatch('connect', { connection });
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 59bff1f4..21ceec49 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -71,6 +71,7 @@
   export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true;
   export let onerror: $$Props['onerror'] = undefined;
   export let ondelete: $$Props['ondelete'] = undefined;
+  export let onedgecreate: $$Props['onedgecreate'] = undefined;
   export let attributionPosition: $$Props['attributionPosition'] = undefined;
   export let proOptions: $$Props['proOptions'] = undefined;
   export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
@@ -149,6 +150,7 @@
       autoPanOnNodeDrag,
       onerror,
       ondelete,
+      onedgecreate,
       connectionMode,
       nodeDragThreshold
     };
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index daab48e9..9116dc60 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -26,7 +26,8 @@ import type {
   EdgeTypes,
   DefaultEdgeOptions,
   FitViewOptions,
-  OnDelete
+  OnDelete,
+  OnEdgeCreate
 } from '$lib/types';
 import type { Writable } from 'svelte/store';
 
@@ -89,4 +90,6 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   onMoveEnd?: OnMoveEnd;
   onerror?: OnError;
   ondelete?: OnDelete;
+
+  onedgecreate?: OnEdgeCreate;
 };
diff --git a/packages/svelte/src/lib/container/SvelteFlow/utils.ts b/packages/svelte/src/lib/container/SvelteFlow/utils.ts
index 9abdb3e9..0281cd55 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/utils.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/utils.ts
@@ -64,6 +64,7 @@ export type UpdatableStoreProps = {
   connectionMode?: UnwrapWritable<SvelteFlowStore['connectionMode']>;
   onerror?: UnwrapWritable<SvelteFlowStore['onerror']>;
   ondelete?: UnwrapWritable<SvelteFlowStore['ondelete']>;
+  onedgecreate?: UnwrapWritable<SvelteFlowStore['onedgecreate']>;
   nodeDragThreshold?: UnwrapWritable<SvelteFlowStore['nodeDragThreshold']>;
 };
 
diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts
index dbbb17fc..8f358cf9 100644
--- a/packages/svelte/src/lib/store/initial-store.ts
+++ b/packages/svelte/src/lib/store/initial-store.ts
@@ -35,7 +35,8 @@ import type {
   Node,
   Edge,
   FitViewOptions,
-  OnDelete
+  OnDelete,
+  OnEdgeCreate
 } from '$lib/types';
 import { createNodesStore, createEdgesStore } from './utils';
 import { initConnectionProps, type ConnectionProps } from './derived-connection-props';
@@ -130,6 +131,7 @@ export const getInitialStore = ({
     lib: readable<string>('svelte'),
     onlyRenderVisibleElements: writable<boolean>(false),
     onerror: writable<OnError>(devWarn),
-    ondelete: writable<OnDelete>(undefined)
+    ondelete: writable<OnDelete>(undefined),
+    onedgecreate: writable<OnEdgeCreate>(undefined)
   };
 };
diff --git a/packages/svelte/src/lib/types/general.ts b/packages/svelte/src/lib/types/general.ts
index 14764318..62666705 100644
--- a/packages/svelte/src/lib/types/general.ts
+++ b/packages/svelte/src/lib/types/general.ts
@@ -4,7 +4,8 @@ import type {
   HandleType,
   Position,
   XYPosition,
-  ConnectingHandle
+  ConnectingHandle,
+  Connection
 } from '@xyflow/system';
 
 import type { Node } from './nodes';
@@ -35,3 +36,4 @@ export type HandleComponentProps = {
 export type FitViewOptions = FitViewOptionsBase<Node>;
 
 export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void;
+export type OnEdgeCreate = (connection: Connection) => Edge | Connection | void;