Added tests for pane

examples/svelte/src/routes/tests/pane/default/Flow.svelte

@@ -9,4 +9,4 @@
 	const edges = writable(initialEdges);
 </script>
 
-<SvelteFlow {nodes} {edges} fitView />
+<SvelteFlow {nodes} {edges} fitView minZoom={0.25} maxZoom={4} />

examples/svelte/src/routes/tests/pane/default/nodesAndEdges.ts

@@ -21,15 +21,13 @@ export const initialNodes: Node[] = [
 
 export const initialEdges: Edge[] = [
 	{
-		id: 'edge-with-class',
+		id: 'first-edge',
 		source: '1',
-		target: '2',
-		class: 'edge-class-test'
+		target: '2'
 	},
 	{
-		id: 'edge-with-style',
+		id: 'second-edge',
 		source: '1',
-		target: '3',
-		style: 'stroke: red;'
+		target: '3'
 	}
 ];

examples/svelte/src/routes/tests/pane/non-default/+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/tests/pane/non-default/Flow.svelte

@@ -0,0 +1,19 @@
+<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}
+	panOnScroll={true}
+	initialViewport={{ x: 1.23, y: 9.87, zoom: 1.234 }}
+	autoPanOnConnect={false}
+	autoPanOnNodeDrag={false}
+/>

examples/svelte/src/routes/tests/pane/non-default/nodesAndEdges.ts

@@ -0,0 +1,33 @@
+import type { Edge, Node } from '@xyflow/svelte';
+
+export const initialNodes: Node[] = [
+	{
+		id: '1',
+		data: { label: '1' },
+		position: { x: 0, y: 0 },
+		type: 'input'
+	},
+	{
+		id: '2',
+		data: { label: '2' },
+		position: { x: -100, y: 100 }
+	},
+	{
+		id: '3',
+		data: { label: '3' },
+		position: { x: 100, y: 100 }
+	}
+];
+
+export const initialEdges: Edge[] = [
+	{
+		id: 'first-edge',
+		source: '1',
+		target: '2'
+	},
+	{
+		id: 'second-edge',
+		source: '1',
+		target: '3'
+	}
+];