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',
+		target: '2'
-		class: 'edge-class-test'
 	},
 	{
-		id: 'edge-with-style',
+		id: 'second-edge',
 		source: '1',
-		target: '3',
+		target: '3'
-		style: 'stroke: red;'
 	}
 ];

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'
+	}
+];

tests/playwright/e2e/pane.spec.ts

@@ -1,15 +1,36 @@
 import { test, expect } from '@playwright/test';
 
 import { FRAMEWORK } from './constants';
+import { transform } from 'typescript';
 
-test.describe('PANE', () => {
+const MATCH_ALL_NUMBERS = /[\d\.]+/g;
-  test.beforeEach(async ({ page }) => {
+
-    // Go to the starting url before each test.
+// Type "Locator" not exported...
-    await page.goto('/tests/pane');
+async function getTransform(element) {
+  const transformString = await element.evaluate((el) => {
+    return el.style.transform;
   });
 
-  test.describe('pan', () => {
+  // Parses all numbers in f.ex "translate(590px, 324px) scale(2)""
-    test('panning the pane', async ({ page }) => {
+  const transforms = transformString.match(MATCH_ALL_NUMBERS);
+  return {
+    translateX: parseFloat(transforms![0]),
+    translateY: parseFloat(transforms![1]),
+    scale: parseFloat(transforms![2]),
+  };
+}
+
+test.describe('PANE DEFAULT', () => {
+  test.beforeEach(async ({ page }) => {
+    // Go to the starting url before each test.
+    await page.goto('/tests/pane/default');
+
+    // Wait till the edges are rendered
+    await page.waitForSelector('#first-edge', { timeout: 5000 });
+  });
+
+  test.describe('pan & zoom', () => {
+    test('panning the pane moves it', async ({ page }) => {
       const pane = page.locator(`.${FRAMEWORK}-flow__pane`);
       const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
 
@@ -17,20 +38,151 @@ test.describe('PANE', () => {
 
       const paneBox = await pane.boundingBox();
 
-      const viewportTransformBeforePan = await viewport.evaluate((element) => {
+      const transformsBefore = await getTransform(viewport);
-        return element.style.transform;
-      });
 
       await pane.hover();
       await page.mouse.down();
-      await page.mouse.move(paneBox!.x + 150, paneBox!.y + 100);
+      // Move pane by 100, 100
-      await page.mouse.up();
+      await page.mouse.move(paneBox!.x + paneBox!.width * 0.5 + 100, paneBox!.y + paneBox!.height * 0.5 + 100);
 
-      const viewportTransformAfterPan = await viewport.evaluate((element) => {
+      const transformsAfter = await getTransform(viewport);
-        return element.style.transform;
-      });
 
-      expect(viewportTransformBeforePan).toBe(viewportTransformAfterPan);
+      expect(transformsAfter.translateX - transformsBefore.translateX).toBe(100);
+      expect(transformsAfter.translateY - transformsBefore.translateY).toBe(100);
+    });
+
+    test('scrolling the default pane zooms it', async ({ page }) => {
+      const pane = page.locator(`.${FRAMEWORK}-flow__pane`);
+      const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
+
+      await expect(pane).toBeAttached();
+
+      const transformsBefore = await getTransform(viewport);
+
+      await pane.hover();
+      await page.mouse.wheel(0, 100);
+
+      const transformsAfter = await getTransform(viewport);
+
+      expect(transformsAfter.scale).not.toBe(transformsBefore.scale);
+    });
+  });
+
+  test.describe('minZoom & maxZoom', () => {
+    test('minZoom works as intended', async ({ page }) => {
+      const pane = page.locator(`.${FRAMEWORK}-flow__pane`);
+      const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
+
+      await expect(pane).toBeAttached();
+
+      await pane.hover();
+
+      // Zoom out
+      await page.mouse.wheel(5000, 5000);
+
+      const transformsMinZoom = await getTransform(viewport);
+      expect(transformsMinZoom.scale).toBe(0.25);
+    });
+
+    test('maxZoom works as intended', async ({ page }) => {
+      const pane = page.locator(`.${FRAMEWORK}-flow__pane`);
+      const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
+
+      await expect(pane).toBeAttached();
+
+      await pane.hover();
+
+      // Zoom in
+      await page.mouse.wheel(-5000, -5000);
+
+      const transformsMaxZoom = await getTransform(viewport);
+      expect(transformsMaxZoom.scale).toBe(4);
+    });
+  });
+
+  test.describe('autoPan', () => {
+    test('autoPanOnNodeDrag works as intended', async ({ page }) => {
+      const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
+      const node = page.locator('[data-id="1"]');
+
+      await expect(node).toBeAttached();
+
+      const transformBefore = await getTransform(viewport);
+
+      await node.hover();
+      await page.mouse.down();
+      await page.mouse.move(0, 0);
+      await page.waitForTimeout(500);
+      await page.mouse.move(100, 100);
+
+      const transformAfter = await getTransform(viewport);
+
+      await expect(transformAfter.translateX).toBeGreaterThan(transformBefore.translateX);
+      await expect(transformAfter.translateY).toBeGreaterThan(transformBefore.translateY);
+    });
+
+    test('autoPanOnConnect works as intended', async ({ page }) => {
+      const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
+      const handle = page.locator('[data-id="1"] .svelte-flow__handle');
+
+      await expect(handle).toBeAttached();
+
+      const transformBefore = await getTransform(viewport);
+
+      await handle.hover();
+      await page.mouse.down();
+      await page.mouse.move(0, 0);
+      await page.waitForTimeout(500);
+      await page.mouse.move(100, 100);
+
+      const transformAfter = await getTransform(viewport);
+
+      await expect(transformAfter.translateX).toBeGreaterThan(transformBefore.translateX);
+      await expect(transformAfter.translateY).toBeGreaterThan(transformBefore.translateY);
     });
   });
 });
+
+test.describe('PANE NON-DEFAULT', () => {
+  test.beforeEach(async ({ page }) => {
+    // Go to the starting url before each test.
+    await page.goto('/tests/pane/non-default');
+
+    // Wait till the edges are rendered
+    await page.waitForSelector('#first-edge', { timeout: 5000 });
+  });
+
+  test.describe('pan & zoom', () => {
+    test('panOnScroll pans the pane on scrolling', async ({ page }) => {
+      const pane = page.locator(`.${FRAMEWORK}-flow__pane`);
+      const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
+
+      await expect(pane).toBeAttached();
+
+      const transformsBefore = await getTransform(viewport);
+
+      await pane.hover();
+      await page.mouse.wheel(100, 100);
+
+      const transformsAfter = await getTransform(viewport);
+
+      expect(transformsAfter.translateX).not.toBe(transformsBefore.translateX);
+      expect(transformsAfter.translateY).not.toBe(transformsBefore.translateY);
+    });
+
+    test('intialViewport', async ({ page }) => {
+      const pane = page.locator(`.${FRAMEWORK}-flow__pane`);
+      const viewport = page.locator(`.${FRAMEWORK}-flow__viewport`);
+
+      await expect(pane).toBeAttached();
+
+      const viewportTransform = await getTransform(viewport);
+
+      expect(viewportTransform.translateX).toBe(1.23);
+      expect(viewportTransform.translateY).toBe(9.87);
+      expect(viewportTransform.scale).toBe(1.234);
+    });
+  });
+});
+
+//TODO: Inverse: Not zooming/panning when disabled