feat(svelte): add drag n drop example

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

@@ -12,10 +12,9 @@
   import { KeyHandler } from '$lib/components/KeyHandler';
   import { ConnectionLine } from '$lib/components/ConnectionLine';
   import { useStore } from '$lib/store';
-  import type { SvelteFlowProps, SvelteFlowEvents } from './types';
+  import type { SvelteFlowProps } from './types';
 
   type $$Props = SvelteFlowProps;
-  type $$Events = SvelteFlowEvents;
 
   export let id: $$Props['id'] = '1';
   export let fitView: $$Props['fitView'] = undefined;
@@ -98,6 +97,9 @@
   style={style}
   class={cc(['svelte-flow', className])}
   data-testid="rf__wrapper"
+  on:dragover
+  on:drop
+  {...$$restProps}
 >
   <KeyHandler {selectionKey} {deleteKey} />
   <Zoom {initialViewport}>

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

@@ -1,3 +1,4 @@
+import type { DOMAttributes } from 'svelte/elements';
 import type {
   Connection,
   ConnectionLineType,
@@ -17,7 +18,7 @@ import type {
   IsValidConnection
 } from '$lib/types';
 
-export type SvelteFlowProps = {
+export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   id?: string;
   nodeTypes?: NodeTypes;
   edgeTypes?: EdgeTypes;
@@ -37,19 +38,17 @@ export type SvelteFlowProps = {
 
   connectionLineType?: ConnectionLineType;
   isValidConnection?: IsValidConnection;
-};
 
-export type SvelteFlowEvents = {
-  'node:click': CustomEvent<Node>;
-  'node:mouseenter': CustomEvent<Node>;
-  'node:mousemove': CustomEvent<Node>;
-  'node:mouseleave': CustomEvent<Node>;
-  'edge:click': CustomEvent<Edge>;
-  'connect:start': CustomEvent<OnConnectStartParams>;
-  connect: CustomEvent<Connection>;
-  'connect:end': CustomEvent<OnConnectStartParams>;
-  'pane:click': CustomEvent;
-  'pane:contextmenu': CustomEvent;
+  'on:node:click'?: CustomEvent<Node>;
+  'on:node:mouseenter'?: CustomEvent<Node>;
+  'on:node:mousemove'?: CustomEvent<Node>;
+  'on:node:mouseleave'?: CustomEvent<Node>;
+  'on:edge:click'?: CustomEvent<Edge>;
+  'on:connect:start'?: CustomEvent<OnConnectStartParams>;
+  'on:connect'?: CustomEvent<Connection>;
+  'on:connect:end'?: CustomEvent<OnConnectStartParams>;
+  'on:pane:click'?: CustomEvent;
+  'on:pane:contextmenu'?: CustomEvent;
 };
 
 export type SvelteFlowSlots = {

packages/svelte/src/lib/hooks/useSvelteFlow.ts

@@ -1,9 +1,10 @@
-import type { Viewport, ZoomInOut } from '@reactflow/system';
+import type { Project, Viewport, XYPosition, ZoomInOut } from '@reactflow/system';
 
 import { useStore } from '$lib/store';
 import type { FitViewOptions } from '$lib/types';
 import { get, writable, type Writable } from 'svelte/store';
 import type { SvelteFlowStore } from '$lib/store/types';
+import { pointToRendererPoint } from '@reactflow/utils';
 
 export function useSvelteFlow(): {
   zoomIn: ZoomInOut;
@@ -12,9 +13,10 @@ export function useSvelteFlow(): {
   viewport: Writable<Viewport>;
   nodes: SvelteFlowStore['nodes'];
   edges: SvelteFlowStore['edges'];
+  project: Project;
 } {
   // how to get the new context here? fit view doesn't work, because the store is not updated (uses old nodes store)
-  const { zoomIn, zoomOut, fitView, transform, nodes, edges } = useStore();
+  const { zoomIn, zoomOut, fitView, snapGrid: snapGridStore, transform, nodes, edges } = useStore();
 
   const transformValues = get(transform);
   const viewportWritable = writable({
@@ -35,6 +37,10 @@ export function useSvelteFlow(): {
     zoomIn,
     zoomOut,
     fitView,
+    project: (position: XYPosition) => {
+      const snapGrid = get(snapGridStore);
+      return pointToRendererPoint(position, get(transform), snapGrid !== null, snapGrid || [1, 1]);
+    },
     nodes,
     edges,
     viewport: viewportWritable

packages/svelte/src/lib/store/index.ts

@@ -292,6 +292,7 @@ export function createStore(params: CreateStoreParams): SvelteFlowStore {
     store.fitViewOnInitDone.set(false);
     store.selectionRect.set(null);
     store.selectionRectMode.set(null);
+    store.snapGrid.set(null);
 
     resetSelectedElements();
     cancelConnection();