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 @@
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 @@
+
this redirects to /overview
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 @@
+
+
+
+
+
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 @@
+
+
+
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'
+ }
}
};