feat(svelte): add drag n drop example

packages/svelte/src/routes/drag-n-drop/+page.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { createNodes, createEdges, SvelteFlowProvider } from '../../lib/index';
+
+  import Flow from './Flow.svelte';
+  
+  const nodes = createNodes(
+    [
+      {
+        id: '1',
+        type: 'input',
+        data: { label: 'Input Node' },
+        position: { x: 150, y: 5 }
+      },
+      {
+        id: '2',
+        type: 'default',
+        data: { label: 'Node' },
+        position: { x: 0, y: 150 }
+      },
+      {
+        id: '3',
+        type: 'output',
+        data: { label: 'Output Node' },
+        position: { x: 300, y: 150 }
+      }
+    ],
+    { origin: [0.5, 0.5] }
+  );
+
+  const edges = createEdges([
+    {
+      id: '1-2',
+      type: 'default',
+      source: '1',
+      target: '2',
+      label: 'Edge Text'
+    },
+    {
+      id: '1-3',
+      type: 'smoothstep',
+      source: '1',
+      target: '3'
+    }
+  ]);
+</script>
+
+<SvelteFlowProvider
+  {nodes}
+  {edges}
+>
+  <Flow />
+</SvelteFlowProvider>

packages/svelte/src/routes/drag-n-drop/Flow.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import SvelteFlow, {
+    Controls,
+    Background,
+    BackgroundVariant,
+    Minimap,
+    useSvelteFlow,
+    type Node
+  } from '../../lib/index';
+  import Sidebar from './Sidebar.svelte';
+
+  const svelteFlow = useSvelteFlow();
+
+  const onDragOver = (event: DragEvent) => {
+    event.preventDefault();
+
+    console.log(event)
+
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = 'move';
+    }
+  };
+
+  const onDrop = (event: DragEvent) => {
+    event.preventDefault();
+
+    if (!event.dataTransfer) {
+      return null;
+    }
+
+    const type = event.dataTransfer.getData('application/svelteflow');
+    const position = svelteFlow.project({
+      x: event.clientX,
+      y: event.clientY - 40,
+    });
+    const newNode: Node = {
+      id: `${Math.random()}`,
+      type,
+      position,
+      data: { label: `${type} node` },
+    };
+
+    svelteFlow.nodes.update(nds => nds.concat(newNode));
+  };
+</script>
+
+<main>
+  <SvelteFlow
+    fitView
+    on:dragover={onDragOver}
+    on:drop={onDrop}
+  >
+    <Controls />
+    <Background variant={BackgroundVariant.Dots} />
+    <Minimap />
+  </SvelteFlow>
+  <Sidebar />
+</main>
+
+<style>
+  main {
+    height: 100%;
+    display: flex;
+  }
+</style>

packages/svelte/src/routes/drag-n-drop/Sidebar.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import {
+    useSvelteFlow
+  } from '../../lib/index';
+
+  const onDragStart = (event: DragEvent, nodeType: string) => {
+    if (!event.dataTransfer) {
+      return null;
+    }
+
+    event.dataTransfer.setData('application/svelteflow', nodeType);
+    event.dataTransfer.effectAllowed = 'move';
+  };
+
+  const { zoomIn, zoomOut, fitView, viewport, nodes } = useSvelteFlow();
+</script>
+
+<aside>
+  <div class="label">You can drag these nodes to the pane on the left.</div>
+  <div class="input-node node" on:dragstart={(event) => onDragStart(event, 'input')} draggable={true}>
+    Input Node
+  </div>
+  <div
+    class="default-node node"
+    on:dragstart={(event) => onDragStart(event, 'default')}
+    draggable={true}
+  >
+    Default Node
+  </div>
+  <div
+    class="output-node node"
+    on:dragstart={(event) => onDragStart(event, 'output')}
+    draggable={true}
+  >
+    Output Node
+  </div>
+</aside>
+
+<style>
+  .label {
+    margin: 0.5rem 0 .25rem 0;
+  }
+
+  aside {
+    width: 20vw;
+    background: #f4f4f4;
+    padding: 0.4rem 0.8rem;
+    font-size: 12px;
+  }
+
+  .node {
+    margin-bottom: 0.5rem;
+    border: 1px solid #111;
+    padding: .5rem 1rem;
+    font-weight: 700;
+    border-radius: 3px;
+    cursor: grab;
+  }
+</style>