From eca85310e165cf7fbc5d08f36d512fc71a5fc8f4 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Wed, 25 Oct 2023 13:23:37 +0200
Subject: [PATCH] restrucutred svelte examples

---
 .../src/components/Header/Header.svelte       |  2 +-
 examples/svelte/src/routes/+layout.server.ts  |  6 +-
 .../src/routes/{ => examples}/+layout.svelte  |  2 +-
 .../svelte/src/routes/examples/+page.svelte   |  1 +
 .../add-node-on-drop/+page.svelte             |  0
 .../add-node-on-drop/Flow.svelte              |  0
 .../custom-connection-line/+page.svelte       |  0
 .../ConnectionLine.svelte                     |  0
 .../custom-connection-line/CustomNode.svelte  |  0
 .../{ => examples}/customnode/+page.svelte    |  0
 .../customnode/CustomNode.svelte              |  0
 .../routes/{ => examples}/dagre/+page.svelte  |  0
 .../{ => examples}/dagre/nodes-and-edges.ts   |  0
 .../{ => examples}/drag-n-drop/+page.svelte   |  0
 .../{ => examples}/drag-n-drop/Flow.svelte    |  0
 .../{ => examples}/drag-n-drop/Sidebar.svelte |  0
 .../routes/{ => examples}/edges/+page.svelte  |  0
 .../routes/{ => examples}/figma/+page.svelte  |  0
 .../{ => examples}/interaction/+page.svelte   |  0
 .../{ => examples}/intersections/+page.svelte |  0
 .../{ => examples}/intersections/+server.ts   |  0
 .../{ => examples}/intersections/Flow.svelte  |  0
 .../intersections/nodes-and-edges.ts          |  0
 .../{ => examples}/overview/+page.svelte      |  0
 .../{ => examples}/overview/CustomEdge.svelte |  0
 .../{ => examples}/overview/CustomNode.svelte |  0
 .../overview/CustomNodeDragHandle.svelte      |  0
 .../routes/{ => examples}/stress/+page.svelte |  0
 .../{ => examples}/subflows/+page.svelte      |  0
 .../{ => examples}/subflows/DebugNode.svelte  |  0
 .../two-way-viewport/+page.svelte             |  0
 .../two-way-viewport/Flow.svelte              |  0
 .../{ => examples}/usesvelteflow/+page.svelte |  0
 .../{ => examples}/usesvelteflow/Flow.svelte  |  0
 .../usesvelteflow/Sidebar.svelte              |  0
 .../useupdatenodeinternals/+page.svelte       |  0
 .../useupdatenodeinternals/CustomNode.svelte  |  0
 .../useupdatenodeinternals/Flow.svelte        |  0
 .../{ => examples}/validation/+page.svelte    |  0
 .../{ => examples}/validation/style.css       |  0
 .../src/routes/tests/nodes/+page.svelte       |  9 +++
 .../svelte/src/routes/tests/nodes/Flow.svelte | 12 +++
 .../src/routes/tests/nodes/nodesAndEdges.ts   | 73 +++++++++++++++++++
 examples/svelte/svelte.config.js              |  5 +-
 44 files changed, 104 insertions(+), 6 deletions(-)
 rename examples/svelte/src/routes/{ => examples}/+layout.svelte (81%)
 create mode 100644 examples/svelte/src/routes/examples/+page.svelte
 rename examples/svelte/src/routes/{ => examples}/add-node-on-drop/+page.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/add-node-on-drop/Flow.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/custom-connection-line/+page.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/custom-connection-line/ConnectionLine.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/custom-connection-line/CustomNode.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/customnode/+page.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/customnode/CustomNode.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/dagre/+page.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/dagre/nodes-and-edges.ts (100%)
 rename examples/svelte/src/routes/{ => examples}/drag-n-drop/+page.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/drag-n-drop/Flow.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/drag-n-drop/Sidebar.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/edges/+page.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/figma/+page.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/interaction/+page.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/intersections/+page.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/intersections/+server.ts (100%)
 rename examples/svelte/src/routes/{ => examples}/intersections/Flow.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/intersections/nodes-and-edges.ts (100%)
 rename examples/svelte/src/routes/{ => examples}/overview/+page.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/overview/CustomEdge.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/overview/CustomNode.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/overview/CustomNodeDragHandle.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/stress/+page.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/subflows/+page.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/subflows/DebugNode.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/two-way-viewport/+page.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/two-way-viewport/Flow.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/usesvelteflow/+page.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/usesvelteflow/Flow.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/usesvelteflow/Sidebar.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/useupdatenodeinternals/+page.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/useupdatenodeinternals/CustomNode.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/useupdatenodeinternals/Flow.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/validation/+page.svelte (100%)
 rename examples/svelte/src/routes/{ => examples}/validation/style.css (100%)
 create mode 100644 examples/svelte/src/routes/tests/nodes/+page.svelte
 create mode 100644 examples/svelte/src/routes/tests/nodes/Flow.svelte
 create mode 100644 examples/svelte/src/routes/tests/nodes/nodesAndEdges.ts

diff --git a/examples/svelte/src/components/Header/Header.svelte b/examples/svelte/src/components/Header/Header.svelte
index 202e513b..0bd941b7 100644
--- a/examples/svelte/src/components/Header/Header.svelte
+++ b/examples/svelte/src/components/Header/Header.svelte
@@ -31,7 +31,7 @@
 	<div class="logo">Svelte Flow</div>
 	<select on:change={onChange} value={$page.route.id}>
 		{#each routes as route}
-			<option value={`/${route}`}>{route}</option>
+			<option value={`/examples/${route}`}>{route}</option>
 		{/each}
 	</select>
 </header>
diff --git a/examples/svelte/src/routes/+layout.server.ts b/examples/svelte/src/routes/+layout.server.ts
index b64f1170..c968a610 100644
--- a/examples/svelte/src/routes/+layout.server.ts
+++ b/examples/svelte/src/routes/+layout.server.ts
@@ -2,7 +2,7 @@ import { redirect } from '@sveltejs/kit';
 
 /** @type {import('./$types').LayoutServerLoad} */
 export function load({ route }) {
-  if (route.id === '/') {
-    throw redirect(307, '/overview');
-  }
+	if (route.id === '/') {
+		throw redirect(307, '/examples/overview');
+	}
 }
diff --git a/examples/svelte/src/routes/+layout.svelte b/examples/svelte/src/routes/examples/+layout.svelte
similarity index 81%
rename from examples/svelte/src/routes/+layout.svelte
rename to examples/svelte/src/routes/examples/+layout.svelte
index 84598fec..cf9f655f 100644
--- a/examples/svelte/src/routes/+layout.svelte
+++ b/examples/svelte/src/routes/examples/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Header } from '../components/Header';
+	import { Header } from '$components/Header';
 </script>
 
 <div class="app">
diff --git a/examples/svelte/src/routes/examples/+page.svelte b/examples/svelte/src/routes/examples/+page.svelte
new file mode 100644
index 00000000..45db2228
--- /dev/null
+++ b/examples/svelte/src/routes/examples/+page.svelte
@@ -0,0 +1 @@
+<div>this redirects to /overview</div>
diff --git a/examples/svelte/src/routes/add-node-on-drop/+page.svelte b/examples/svelte/src/routes/examples/add-node-on-drop/+page.svelte
similarity index 100%
rename from examples/svelte/src/routes/add-node-on-drop/+page.svelte
rename to examples/svelte/src/routes/examples/add-node-on-drop/+page.svelte
diff --git a/examples/svelte/src/routes/add-node-on-drop/Flow.svelte b/examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte
similarity index 100%
rename from examples/svelte/src/routes/add-node-on-drop/Flow.svelte
rename to examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte
diff --git a/examples/svelte/src/routes/custom-connection-line/+page.svelte b/examples/svelte/src/routes/examples/custom-connection-line/+page.svelte
similarity index 100%
rename from examples/svelte/src/routes/custom-connection-line/+page.svelte
rename to examples/svelte/src/routes/examples/custom-connection-line/+page.svelte
diff --git a/examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte b/examples/svelte/src/routes/examples/custom-connection-line/ConnectionLine.svelte
similarity index 100%
rename from examples/svelte/src/routes/custom-connection-line/ConnectionLine.svelte
rename to examples/svelte/src/routes/examples/custom-connection-line/ConnectionLine.svelte
diff --git a/examples/svelte/src/routes/custom-connection-line/CustomNode.svelte b/examples/svelte/src/routes/examples/custom-connection-line/CustomNode.svelte
similarity index 100%
rename from examples/svelte/src/routes/custom-connection-line/CustomNode.svelte
rename to examples/svelte/src/routes/examples/custom-connection-line/CustomNode.svelte
diff --git a/examples/svelte/src/routes/customnode/+page.svelte b/examples/svelte/src/routes/examples/customnode/+page.svelte
similarity index 100%
rename from examples/svelte/src/routes/customnode/+page.svelte
rename to examples/svelte/src/routes/examples/customnode/+page.svelte
diff --git a/examples/svelte/src/routes/customnode/CustomNode.svelte b/examples/svelte/src/routes/examples/customnode/CustomNode.svelte
similarity index 100%
rename from examples/svelte/src/routes/customnode/CustomNode.svelte
rename to examples/svelte/src/routes/examples/customnode/CustomNode.svelte
diff --git a/examples/svelte/src/routes/dagre/+page.svelte b/examples/svelte/src/routes/examples/dagre/+page.svelte
similarity index 100%
rename from examples/svelte/src/routes/dagre/+page.svelte
rename to examples/svelte/src/routes/examples/dagre/+page.svelte
diff --git a/examples/svelte/src/routes/dagre/nodes-and-edges.ts b/examples/svelte/src/routes/examples/dagre/nodes-and-edges.ts
similarity index 100%
rename from examples/svelte/src/routes/dagre/nodes-and-edges.ts
rename to examples/svelte/src/routes/examples/dagre/nodes-and-edges.ts
diff --git a/examples/svelte/src/routes/drag-n-drop/+page.svelte b/examples/svelte/src/routes/examples/drag-n-drop/+page.svelte
similarity index 100%
rename from examples/svelte/src/routes/drag-n-drop/+page.svelte
rename to examples/svelte/src/routes/examples/drag-n-drop/+page.svelte
diff --git a/examples/svelte/src/routes/drag-n-drop/Flow.svelte b/examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte
similarity index 100%
rename from examples/svelte/src/routes/drag-n-drop/Flow.svelte
rename to examples/svelte/src/routes/examples/drag-n-drop/Flow.svelte
diff --git a/examples/svelte/src/routes/drag-n-drop/Sidebar.svelte b/examples/svelte/src/routes/examples/drag-n-drop/Sidebar.svelte
similarity index 100%
rename from examples/svelte/src/routes/drag-n-drop/Sidebar.svelte
rename to examples/svelte/src/routes/examples/drag-n-drop/Sidebar.svelte
diff --git a/examples/svelte/src/routes/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte
similarity index 100%
rename from examples/svelte/src/routes/edges/+page.svelte
rename to examples/svelte/src/routes/examples/edges/+page.svelte
diff --git a/examples/svelte/src/routes/figma/+page.svelte b/examples/svelte/src/routes/examples/figma/+page.svelte
similarity index 100%
rename from examples/svelte/src/routes/figma/+page.svelte
rename to examples/svelte/src/routes/examples/figma/+page.svelte
diff --git a/examples/svelte/src/routes/interaction/+page.svelte b/examples/svelte/src/routes/examples/interaction/+page.svelte
similarity index 100%
rename from examples/svelte/src/routes/interaction/+page.svelte
rename to examples/svelte/src/routes/examples/interaction/+page.svelte
diff --git a/examples/svelte/src/routes/intersections/+page.svelte b/examples/svelte/src/routes/examples/intersections/+page.svelte
similarity index 100%
rename from examples/svelte/src/routes/intersections/+page.svelte
rename to examples/svelte/src/routes/examples/intersections/+page.svelte
diff --git a/examples/svelte/src/routes/intersections/+server.ts b/examples/svelte/src/routes/examples/intersections/+server.ts
similarity index 100%
rename from examples/svelte/src/routes/intersections/+server.ts
rename to examples/svelte/src/routes/examples/intersections/+server.ts
diff --git a/examples/svelte/src/routes/intersections/Flow.svelte b/examples/svelte/src/routes/examples/intersections/Flow.svelte
similarity index 100%
rename from examples/svelte/src/routes/intersections/Flow.svelte
rename to examples/svelte/src/routes/examples/intersections/Flow.svelte
diff --git a/examples/svelte/src/routes/intersections/nodes-and-edges.ts b/examples/svelte/src/routes/examples/intersections/nodes-and-edges.ts
similarity index 100%
rename from examples/svelte/src/routes/intersections/nodes-and-edges.ts
rename to examples/svelte/src/routes/examples/intersections/nodes-and-edges.ts
diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/examples/overview/+page.svelte
similarity index 100%
rename from examples/svelte/src/routes/overview/+page.svelte
rename to examples/svelte/src/routes/examples/overview/+page.svelte
diff --git a/examples/svelte/src/routes/overview/CustomEdge.svelte b/examples/svelte/src/routes/examples/overview/CustomEdge.svelte
similarity index 100%
rename from examples/svelte/src/routes/overview/CustomEdge.svelte
rename to examples/svelte/src/routes/examples/overview/CustomEdge.svelte
diff --git a/examples/svelte/src/routes/overview/CustomNode.svelte b/examples/svelte/src/routes/examples/overview/CustomNode.svelte
similarity index 100%
rename from examples/svelte/src/routes/overview/CustomNode.svelte
rename to examples/svelte/src/routes/examples/overview/CustomNode.svelte
diff --git a/examples/svelte/src/routes/overview/CustomNodeDragHandle.svelte b/examples/svelte/src/routes/examples/overview/CustomNodeDragHandle.svelte
similarity index 100%
rename from examples/svelte/src/routes/overview/CustomNodeDragHandle.svelte
rename to examples/svelte/src/routes/examples/overview/CustomNodeDragHandle.svelte
diff --git a/examples/svelte/src/routes/stress/+page.svelte b/examples/svelte/src/routes/examples/stress/+page.svelte
similarity index 100%
rename from examples/svelte/src/routes/stress/+page.svelte
rename to examples/svelte/src/routes/examples/stress/+page.svelte
diff --git a/examples/svelte/src/routes/subflows/+page.svelte b/examples/svelte/src/routes/examples/subflows/+page.svelte
similarity index 100%
rename from examples/svelte/src/routes/subflows/+page.svelte
rename to examples/svelte/src/routes/examples/subflows/+page.svelte
diff --git a/examples/svelte/src/routes/subflows/DebugNode.svelte b/examples/svelte/src/routes/examples/subflows/DebugNode.svelte
similarity index 100%
rename from examples/svelte/src/routes/subflows/DebugNode.svelte
rename to examples/svelte/src/routes/examples/subflows/DebugNode.svelte
diff --git a/examples/svelte/src/routes/two-way-viewport/+page.svelte b/examples/svelte/src/routes/examples/two-way-viewport/+page.svelte
similarity index 100%
rename from examples/svelte/src/routes/two-way-viewport/+page.svelte
rename to examples/svelte/src/routes/examples/two-way-viewport/+page.svelte
diff --git a/examples/svelte/src/routes/two-way-viewport/Flow.svelte b/examples/svelte/src/routes/examples/two-way-viewport/Flow.svelte
similarity index 100%
rename from examples/svelte/src/routes/two-way-viewport/Flow.svelte
rename to examples/svelte/src/routes/examples/two-way-viewport/Flow.svelte
diff --git a/examples/svelte/src/routes/usesvelteflow/+page.svelte b/examples/svelte/src/routes/examples/usesvelteflow/+page.svelte
similarity index 100%
rename from examples/svelte/src/routes/usesvelteflow/+page.svelte
rename to examples/svelte/src/routes/examples/usesvelteflow/+page.svelte
diff --git a/examples/svelte/src/routes/usesvelteflow/Flow.svelte b/examples/svelte/src/routes/examples/usesvelteflow/Flow.svelte
similarity index 100%
rename from examples/svelte/src/routes/usesvelteflow/Flow.svelte
rename to examples/svelte/src/routes/examples/usesvelteflow/Flow.svelte
diff --git a/examples/svelte/src/routes/usesvelteflow/Sidebar.svelte b/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
similarity index 100%
rename from examples/svelte/src/routes/usesvelteflow/Sidebar.svelte
rename to examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
diff --git a/examples/svelte/src/routes/useupdatenodeinternals/+page.svelte b/examples/svelte/src/routes/examples/useupdatenodeinternals/+page.svelte
similarity index 100%
rename from examples/svelte/src/routes/useupdatenodeinternals/+page.svelte
rename to examples/svelte/src/routes/examples/useupdatenodeinternals/+page.svelte
diff --git a/examples/svelte/src/routes/useupdatenodeinternals/CustomNode.svelte b/examples/svelte/src/routes/examples/useupdatenodeinternals/CustomNode.svelte
similarity index 100%
rename from examples/svelte/src/routes/useupdatenodeinternals/CustomNode.svelte
rename to examples/svelte/src/routes/examples/useupdatenodeinternals/CustomNode.svelte
diff --git a/examples/svelte/src/routes/useupdatenodeinternals/Flow.svelte b/examples/svelte/src/routes/examples/useupdatenodeinternals/Flow.svelte
similarity index 100%
rename from examples/svelte/src/routes/useupdatenodeinternals/Flow.svelte
rename to examples/svelte/src/routes/examples/useupdatenodeinternals/Flow.svelte
diff --git a/examples/svelte/src/routes/validation/+page.svelte b/examples/svelte/src/routes/examples/validation/+page.svelte
similarity index 100%
rename from examples/svelte/src/routes/validation/+page.svelte
rename to examples/svelte/src/routes/examples/validation/+page.svelte
diff --git a/examples/svelte/src/routes/validation/style.css b/examples/svelte/src/routes/examples/validation/style.css
similarity index 100%
rename from examples/svelte/src/routes/validation/style.css
rename to examples/svelte/src/routes/examples/validation/style.css
diff --git a/examples/svelte/src/routes/tests/nodes/+page.svelte b/examples/svelte/src/routes/tests/nodes/+page.svelte
new file mode 100644
index 00000000..12dec33c
--- /dev/null
+++ b/examples/svelte/src/routes/tests/nodes/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { SvelteFlowProvider } from '@xyflow/svelte';
+
+	import Flow from './Flow.svelte';
+</script>
+
+<SvelteFlowProvider>
+	<Flow />
+</SvelteFlowProvider>
diff --git a/examples/svelte/src/routes/tests/nodes/Flow.svelte b/examples/svelte/src/routes/tests/nodes/Flow.svelte
new file mode 100644
index 00000000..6686c907
--- /dev/null
+++ b/examples/svelte/src/routes/tests/nodes/Flow.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+	import { initialNodes, initialEdges } from './nodesAndEdges';
+	import { SvelteFlow } from '@xyflow/svelte';
+
+	import '@xyflow/svelte/dist/style.css';
+
+	const nodes = writable(initialNodes);
+	const edges = writable(initialEdges);
+</script>
+
+<SvelteFlow {nodes} {edges} fitView />
diff --git a/examples/svelte/src/routes/tests/nodes/nodesAndEdges.ts b/examples/svelte/src/routes/tests/nodes/nodesAndEdges.ts
new file mode 100644
index 00000000..37e2d999
--- /dev/null
+++ b/examples/svelte/src/routes/tests/nodes/nodesAndEdges.ts
@@ -0,0 +1,73 @@
+import type { Edge, Node } from '@xyflow/svelte';
+
+export const initialNodes: Node[] = [
+	{
+		id: '1',
+		data: { label: '1' },
+		position: { x: 0, y: 0 },
+		class: 'test-class',
+		style: 'background-color: red;'
+	},
+	{
+		id: '2',
+		data: { label: '2' },
+		position: { x: -100, y: 100 }
+	},
+	{
+		id: '3',
+		data: { label: '3' },
+		position: { x: 100, y: 100 }
+	},
+	{
+		id: '4',
+		data: { label: '4' },
+		position: { x: 0, y: 200 }
+	},
+	{
+		id: 'notDraggable',
+		data: { label: 'notDraggable' },
+		position: { x: 0, y: 300 },
+		draggable: false
+	},
+	{
+		id: 'notSelectable',
+		data: { label: 'notSelectable' },
+		position: { x: 0, y: 400 },
+		selectable: false
+	},
+	{
+		id: 'notConnectable',
+		data: { label: 'notConnectable' },
+		position: { x: 0, y: 500 },
+		connectable: false
+	},
+	{
+		id: 'notDeletable',
+		data: { label: 'notDeletable' },
+		position: { x: 0, y: 600 },
+		connectable: false
+	},
+	{
+		id: 'hidden',
+		data: { label: 'hidden' },
+		position: { x: 0, y: 700 },
+		hidden: true
+	}
+];
+
+export const initialEdges: Edge[] = [
+	{
+		id: '1-2',
+		type: 'default',
+		source: '1',
+		target: '2',
+		label: 'edge'
+	},
+	{
+		id: '1-3',
+		type: 'default',
+		source: '1',
+		target: '3',
+		label: 'edge'
+	}
+];
diff --git a/examples/svelte/svelte.config.js b/examples/svelte/svelte.config.js
index 1cf26a00..80719d79 100644
--- a/examples/svelte/svelte.config.js
+++ b/examples/svelte/svelte.config.js
@@ -11,7 +11,10 @@ const config = {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter(),
+		alias: {
+			$components: './src/components'
+		}
 	}
 };