Merge pull request #3412 from wbkd/svelte-flow-expose-on-connect

Svelte flow expose/fix on:connectstart on:connectend

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>
 

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);
 
@@ -70,7 +61,24 @@
         updateConnection,
         cancelConnection,
         panBy,
-        onConnect: onConnectExtended,
+        onConnect: (connection) => {
+          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 });
+        },
+        onConnectStart: (event, startParams) => {
+          dispatch('connectstart', {
+            event,
+            nodeId: startParams.nodeId,
+            handleId: startParams.handleId,
+            handleType: startParams.handleType
+          });
+        },
+        onConnectEnd: (event) => {
+          dispatch('connectend', { event });
+        },
         getTransform: () => $transform
       });
     }

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}

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>
 

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -3,7 +3,6 @@ import type {
   Connection,
   ConnectionLineType,
   NodeOrigin,
-  OnConnectStartParams,
   Viewport,
   SelectionMode,
   SnapGrid,
@@ -12,7 +11,8 @@ import type {
   OnMoveEnd,
   CoordinateExtent,
   PanOnScrollMode,
-  IsValidConnection
+  IsValidConnection,
+  HandleType
 } from '@xyflow/system';
 
 import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '$lib/types';
@@ -59,14 +59,19 @@ 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:connectstart'?: CustomEvent<OnConnectStartParams>;
-  'on:connect'?: CustomEvent<Connection>;
-  'on:connectend'?: CustomEvent<OnConnectStartParams>;
-  'on:paneclick'?: CustomEvent;
-  'on:panecontextmenu'?: CustomEvent;
+  '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;
+    handleId?: string;
+    handleType?: HandleType;
+  }>;
+  'on:connect'?: CustomEvent<{ connection: Connection }>;
+  'on:connectend'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
+  'on:paneclick'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
+  'on:panecontextmenu'?: CustomEvent<{ event: MouseEvent }>;
 };