chore(svelte-examples): pull out of lib package (#3363)

* chore(svelte-examples): pull out of lib package

* chore(svelte-examples): cleanup

* chore(examples): add readme files

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { SvelteFlowProvider } from '@xyflow/svelte';
+
+	import Flow from './Flow.svelte';
+</script>
+
+<SvelteFlowProvider>
+	<Flow />
+</SvelteFlowProvider>

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

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+	import {
+		SvelteFlow,
+		Controls,
+		Background,
+		BackgroundVariant,
+		MiniMap,
+		useSvelteFlow,
+		type Node
+	} from '@xyflow/svelte';
+	import Sidebar from './Sidebar.svelte';
+
+	import '@xyflow/svelte/dist/style.css';
+
+	const nodes = writable([
+		{
+			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 }
+		}
+	]);
+
+	const edges = writable([
+		{
+			id: '1-2',
+			type: 'default',
+			source: '1',
+			target: '2',
+			label: 'Edge Text'
+		},
+		{
+			id: '1-3',
+			type: 'smoothstep',
+			source: '1',
+			target: '3'
+		}
+	]);
+
+	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));
+	};
+
+	$: {
+		console.log($nodes);
+	}
+</script>
+
+<main>
+	<SvelteFlow {nodes} {edges} fitView on:dragover={onDragOver} on:drop={onDrop}>
+		<Controls />
+		<Background variant={BackgroundVariant.Dots} />
+		<MiniMap />
+	</SvelteFlow>
+	<Sidebar />
+</main>
+
+<style>
+	main {
+		height: 100%;
+		display: flex;
+	}
+</style>

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { useSvelteFlow } from '@xyflow/svelte';
+
+	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 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: 0.5rem 1rem;
+		font-weight: 700;
+		border-radius: 3px;
+		cursor: grab;
+	}
+</style>