feat(svelte) added nodedrag events

examples/svelte/src/routes/overview/+page.svelte

@@ -167,6 +167,15 @@
 		event.preventDefault();
 		console.log('on pane contextmenu', event);
 	}}
+	on:nodedrag={(event) => {
+		console.log('on node drag', event);
+	}}
+	on:nodedragstart={(event) => {
+		console.log('on node drag start', event);
+	}}
+	on:nodedragstop={(event) => {
+		console.log('on node drag stop', event);
+	}}
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />

packages/svelte/src/lib/actions/drag/index.ts

@@ -1,22 +1,28 @@
 import { get } from 'svelte/store';
-import { XYDrag } from '@xyflow/system';
+import { XYDrag, type OnDrag } from '@xyflow/system';
 
 import type { SvelteFlowStore } from '$lib/store/types';
 
-type UseDragParams = {
+export type UseDragParams = {
   store: SvelteFlowStore;
   disabled?: boolean;
   noDragClass?: string;
   handleSelector?: string;
   nodeId?: string;
   isSelectable?: boolean;
+  onDrag?: OnDrag;
+  onDragStart?: OnDrag;
+  onDragStop?: OnDrag;
 };
 
 export default function drag(domNode: Element, params: UseDragParams) {
+  const { store, onDrag, onDragStart, onDragStop } = params;
   const dragInstance = XYDrag({
     domNode,
+    onDrag,
+    onDragStart,
+    onDragStop,
     getStoreItems: () => {
-      const { store } = params;
       const snapGrid = get(store.snapGrid);
 
       return {

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -97,6 +97,15 @@
       disabled: false,
       handleSelector: dragHandle,
       noDragClass: 'nodrag',
+      onDrag: (event, _, node, nodes) => {
+        dispatch('nodedrag', { event, node, nodes });
+      },
+      onDragStart: (event, _, node, nodes) => {
+        dispatch('nodedragstart', { event, node, nodes });
+      },
+      onDragStop: (event, _, node, nodes) => {
+        dispatch('nodedragstop', { event, node, nodes });
+      },
       store
     }}
     bind:this={nodeRef}

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -72,6 +72,9 @@
       on:connectstart
       on:connect
       on:connectend
+      on:nodedrag
+      on:nodedragstart
+      on:nodedragstop
     />
   {/each}
 </div>

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

@@ -154,6 +154,9 @@
           on:connectstart
           on:connect
           on:connectend
+          on:nodedrag
+          on:nodedragstart
+          on:nodedragstop
         />
         <NodeSelection />
       </ViewportComponent>

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

@@ -12,7 +12,8 @@ import type {
   CoordinateExtent,
   PanOnScrollMode,
   IsValidConnection,
-  HandleType
+  HandleType,
+  NodeBase
 } from '@xyflow/system';
 
 import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '$lib/types';
@@ -74,4 +75,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   'on:connectend'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
   'on:paneclick'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
   'on:panecontextmenu'?: CustomEvent<{ event: MouseEvent }>;
+  'on:nodedrag'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
+  'on:nodedragstop'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
+  'on:nodedragstart'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
 };