Merge pull request #3417 from wbkd/svelte-flow-node-drag

feat(svelte) added nodedrag events

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

@@ -144,9 +144,21 @@
 	on:connectend={(event) => console.log('on connect end', event)}
 	on:paneclick={(event) => console.log('on pane click', event)}
 	on:panecontextmenu={(event) => {
-		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);
+	}}
+	on:nodecontextmenu={(event) => {
+		event.detail.event.preventDefault();
+		console.log('on node contextmenu', event);
+	}}
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />

packages/svelte/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.0.21
+
+- add `on:nodedragstart`, `on:nodedrag` and `on:nodedragstop`
+- add `on:nodecontextmenu`
+
 ## 0.0.20
 
 - [breaking change] use same convention for all custom events: Always pass the original event if possible and additional data

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}
@@ -115,6 +124,7 @@
     on:mouseenter={(event) => dispatchEvent('nodemouseenter', event)}
     on:mouseleave={(event) => dispatchEvent('nodemouseleave', event)}
     on:mousemove={(event) => dispatchEvent('nodemousemove', event)}
+    on:contextmenu={(event) => dispatchEvent('nodecontextmenu', event)}
   >
     <svelte:component
       this={nodeComponent}

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

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

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

@@ -154,6 +154,10 @@
           on:connectstart
           on:connect
           on:connectend
+          on:nodedragstart
+          on:nodedrag
+          on:nodedragstop
+          on:nodecontextmenu
         />
         <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,8 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   'on:connectend'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
   'on:paneclick'?: CustomEvent<{ event: MouseEvent | TouchEvent }>;
   'on:panecontextmenu'?: CustomEvent<{ event: MouseEvent }>;
+  'on:nodedragstart'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
+  'on:nodedrag'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
+  'on:nodedragstop'?: CustomEvent<{ event: MouseEvent; node: NodeBase; nodes: NodeBase[] }>;
+  'on:nodecontextmenu'?: CustomEvent<{ event: MouseEvent; node: NodeBase }>;
 };