From edbc67e8c4a16f0a36d8ea6dfd88774ec48b8028 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 19 Sep 2023 14:36:04 +0200
Subject: [PATCH 1/5] feat(svelte) fixed on:connectstart and on:connectend

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

diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index ff1ca8e4..ac938374 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -70,7 +70,16 @@
         updateConnection,
         cancelConnection,
         panBy,
-        onConnect: onConnectExtended,
+        onConnect: (params) => {
+          addEdge(params);
+          dispatch('connect', params);
+        },
+        onConnectStart: (event, params) => {
+          dispatch('connectstart', { event, params });
+        },
+        onConnectEnd: (event) => {
+          dispatch('connectend', event);
+        },
         getTransform: () => $transform
       });
     }
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index b6d12104..26b60f82 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -64,9 +64,9 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   'on:nodemousemove'?: CustomEvent<Node>;
   'on:nodemouseleave'?: CustomEvent<Node>;
   'on:edgeclick'?: CustomEvent<Edge>;
-  'on:connectstart'?: CustomEvent<OnConnectStartParams>;
+  'on:connectstart'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
   'on:connect'?: CustomEvent<Connection>;
-  'on:connectend'?: CustomEvent<OnConnectStartParams>;
+  'on:connectend'?: CustomEvent<MouseEvent | TouchEvent>;
   'on:paneclick'?: CustomEvent;
   'on:panecontextmenu'?: CustomEvent;
 };

From e27566f27921930d3d02e608a32228b4c984030d Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 19 Sep 2023 14:54:43 +0200
Subject: [PATCH 2/5] fix(svelte) fixed type for on:connectstart

---
 packages/svelte/src/lib/container/SvelteFlow/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 26b60f82..db9ae308 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -64,7 +64,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   'on:nodemousemove'?: CustomEvent<Node>;
   'on:nodemouseleave'?: CustomEvent<Node>;
   'on:edgeclick'?: CustomEvent<Edge>;
-  'on:connectstart'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
+  'on:connectstart'?: CustomEvent<{ event: MouseEvent | TouchEvent; params: OnConnectStartParams }>;
   'on:connect'?: CustomEvent<Connection>;
   'on:connectend'?: CustomEvent<MouseEvent | TouchEvent>;
   'on:paneclick'?: CustomEvent;

From 1c2bcbef34e539d395cdf1bbdaad062dab5cf6f4 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Tue, 19 Sep 2023 15:23:10 +0200
Subject: [PATCH 3/5] fix(svelte) adjusted svelteflow types for connect events

---
 .../src/lib/components/Handle/Handle.svelte     | 17 +++++++++++------
 .../src/lib/container/SvelteFlow/types.ts       | 14 ++++++++++----
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index ac938374..c3af20ed 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -70,15 +70,20 @@
         updateConnection,
         cancelConnection,
         panBy,
-        onConnect: (params) => {
-          addEdge(params);
-          dispatch('connect', params);
+        onConnect: (connection) => {
+          addEdge(connection);
+          dispatch('connect', { connection: connection });
         },
-        onConnectStart: (event, params) => {
-          dispatch('connectstart', { event, params });
+        onConnectStart: (event, startParams) => {
+          dispatch('connectstart', {
+            event,
+            nodeId: startParams.nodeId,
+            handleId: startParams.handleId,
+            handleType: startParams.handleType
+          });
         },
         onConnectEnd: (event) => {
-          dispatch('connectend', event);
+          dispatch('connectend', { event });
         },
         getTransform: () => $transform
       });
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index db9ae308..a529bc02 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -12,7 +12,8 @@ import type {
   OnMoveEnd,
   CoordinateExtent,
   PanOnScrollMode,
-  IsValidConnection
+  IsValidConnection,
+  HandleType
 } from '@xyflow/system';
 
 import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '$lib/types';
@@ -64,9 +65,14 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   'on:nodemousemove'?: CustomEvent<Node>;
   'on:nodemouseleave'?: CustomEvent<Node>;
   'on:edgeclick'?: CustomEvent<Edge>;
-  'on:connectstart'?: CustomEvent<{ event: MouseEvent | TouchEvent; params: OnConnectStartParams }>;
-  'on:connect'?: CustomEvent<Connection>;
-  'on:connectend'?: CustomEvent<MouseEvent | TouchEvent>;
+  'on:connectstart'?: CustomEvent<{
+    event: MouseEvent | TouchEvent;
+    nodeId?: string;
+    handleId?: string;
+    handleType?: HandleType;
+  }>;
+  'on:connect'?: CustomEvent<{ connection: Connection }>;
+  'on:connectend'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
   'on:paneclick'?: CustomEvent;
   'on:panecontextmenu'?: CustomEvent;
 };

From accfc9d200c1bd68a7f542796edd2063092f7533 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 19 Sep 2023 15:37:08 +0200
Subject: [PATCH 4/5] chore(svelte): cleanup handle component

---
 .../src/lib/components/Handle/Handle.svelte      | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/svelte/src/lib/components/Handle/Handle.svelte b/packages/svelte/src/lib/components/Handle/Handle.svelte
index c3af20ed..d5310923 100644
--- a/packages/svelte/src/lib/components/Handle/Handle.svelte
+++ b/packages/svelte/src/lib/components/Handle/Handle.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { getContext, createEventDispatcher } from 'svelte';
   import cc from 'classcat';
-  import { Position, type Connection, XYHandle, isMouseEvent } from '@xyflow/system';
+  import { Position, XYHandle, isMouseEvent } from '@xyflow/system';
 
   import { useStore } from '$lib/store';
   import type { HandleComponentProps } from '$lib/types';
@@ -43,15 +43,6 @@
     updateConnection
   } = store;
 
-  function dispatchEvent(eventName: string, params?: Connection) {
-    dispatch(eventName, params || { nodeId, handleId, type });
-  }
-
-  function onConnectExtended(params: Connection) {
-    addEdge(params);
-    dispatchEvent('connect', params);
-  }
-
   function onPointerDown(event: MouseEvent | TouchEvent) {
     const isMouseTriggered = isMouseEvent(event);
 
@@ -72,7 +63,10 @@
         panBy,
         onConnect: (connection) => {
           addEdge(connection);
-          dispatch('connect', { connection: 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 });
         },
         onConnectStart: (event, startParams) => {
           dispatch('connectstart', {

From a33351fb9f68d5f862fb332b73569f224f5c3bbd Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 19 Sep 2023 15:43:37 +0200
Subject: [PATCH 5/5] refactor(svelte): use same data passing convention for
 all custom events

---
 .../components/EdgeWrapper/EdgeWrapper.svelte    |  4 ++--
 .../components/NodeWrapper/NodeWrapper.svelte    | 16 ++++++++--------
 .../svelte/src/lib/container/Pane/Pane.svelte    |  6 +++---
 .../svelte/src/lib/container/SvelteFlow/types.ts | 15 +++++++--------
 4 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
index c7390408..aabff7b7 100644
--- a/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
+++ b/packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
@@ -41,13 +41,13 @@
   $: markerStartUrl = markerStart ? `url(#${getMarkerId(markerStart, $flowId)})` : undefined;
   $: markerEndUrl = markerEnd ? `url(#${getMarkerId(markerEnd, $flowId)})` : undefined;
 
-  function onClick() {
+  function onClick(event: MouseEvent | TouchEvent) {
     if (selectable) {
       addSelectedEdges([id]);
     }
 
     const edge = $edges.find((e) => e.id === id);
-    dispatch('edgeclick', edge);
+    dispatch('edgeclick', { event, edge });
   }
 </script>
 
diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
index 0e697afd..17c8e4ce 100644
--- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
@@ -69,21 +69,21 @@
     };
   });
 
-  function dispatchEvent(eventName: string) {
+  function dispatchEvent(eventName: string, event?: MouseEvent | TouchEvent) {
     const node = $nodes.find((n) => n.id === id);
-    dispatch(eventName, node);
+    dispatch(eventName, { node, event });
   }
 
-  function onSelectNodeHandler(event: MouseEvent) {
+  function onSelectNodeHandler(event: MouseEvent | TouchEvent) {
     if (selectable && (!selectNodesOnDrag || !draggable)) {
       // this handler gets called within the drag start event when selectNodesOnDrag=true
       addSelectedNodes([id]);
     }
 
     // @todo: support multiselection
-
-    dispatchEvent('nodeclick');
+    dispatchEvent('nodeclick', event);
   }
+
   // @todo: add selectable state
 </script>
 
@@ -112,9 +112,9 @@
     style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
     {style}
     on:click={onSelectNodeHandler}
-    on:mouseenter={() => dispatchEvent('nodemouseenter')}
-    on:mouseleave={() => dispatchEvent('nodemouseleave')}
-    on:mousemove={() => dispatchEvent('nodemousemove')}
+    on:mouseenter={(event) => dispatchEvent('nodemouseenter', event)}
+    on:mouseleave={(event) => dispatchEvent('nodemouseleave', event)}
+    on:mousemove={(event) => dispatchEvent('nodemousemove', event)}
   >
     <svelte:component
       this={nodeComponent}
diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index d98fb106..1305ccdc 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -64,8 +64,8 @@
   $: hasActiveSelection = $elementsSelectable && (isSelecting || $selectionRectMode === 'user');
   $: _panOnDrag = $panActivationKeyPressed || panOnDrag;
 
-  function onClick(event: MouseEvent) {
-    dispatch('paneclick', event);
+  function onClick(event: MouseEvent | TouchEvent) {
+    dispatch('paneclick', { event });
 
     unselectNodesAndEdges();
     selectionRectMode.set(null);
@@ -180,7 +180,7 @@
       return;
     }
 
-    dispatch('panecontextmenu', event);
+    dispatch('panecontextmenu', { event });
   };
 </script>
 
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index a529bc02..97d5a3a9 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -3,7 +3,6 @@ import type {
   Connection,
   ConnectionLineType,
   NodeOrigin,
-  OnConnectStartParams,
   Viewport,
   SelectionMode,
   SnapGrid,
@@ -60,11 +59,11 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   onMove?: OnMove;
   onMoveEnd?: OnMoveEnd;
 
-  'on:nodeclick'?: CustomEvent<Node>;
-  'on:nodemouseenter'?: CustomEvent<Node>;
-  'on:nodemousemove'?: CustomEvent<Node>;
-  'on:nodemouseleave'?: CustomEvent<Node>;
-  'on:edgeclick'?: CustomEvent<Edge>;
+  'on:nodeclick'?: CustomEvent<{ event: MouseEvent | TouchEvent; node: Node }>;
+  'on:nodemouseenter'?: CustomEvent<{ event: MouseEvent; node: Node }>;
+  'on:nodemousemove'?: CustomEvent<{ event: MouseEvent; node: Node }>;
+  'on:nodemouseleave'?: CustomEvent<{ event: MouseEvent; node: Node }>;
+  'on:edgeclick'?: CustomEvent<{ event: MouseEvent; edge: Edge }>;
   'on:connectstart'?: CustomEvent<{
     event: MouseEvent | TouchEvent;
     nodeId?: string;
@@ -73,6 +72,6 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   }>;
   'on:connect'?: CustomEvent<{ connection: Connection }>;
   'on:connectend'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
-  'on:paneclick'?: CustomEvent;
-  'on:panecontextmenu'?: CustomEvent;
+  'on:paneclick'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
+  'on:panecontextmenu'?: CustomEvent<{ event: MouseEvent }>;
 };