Merge pull request #5120 from xyflow/fix/fit-view-uncontrolled

Fix/fit view uncontrolled

.changeset/lovely-rabbits-yawn.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Handle fitView for uncontrolled flows

packages/react/src/store/index.ts

@@ -45,7 +45,7 @@ const createStore = ({
     async function resolveFitView() {
       const { nodeLookup, panZoom, fitViewOptions, fitViewResolver, width, height, minZoom, maxZoom } = get();
 
-      if (!panZoom || !fitViewResolver) {
+      if (!panZoom) {
         return;
       }
 
@@ -61,7 +61,7 @@ const createStore = ({
         fitViewOptions
       );
 
-      fitViewResolver.resolve(true);
+      fitViewResolver?.resolve(true);
       /**
        * wait for the fitViewport to resolve before deleting the resolver,
        * we want to reuse the old resolver if the user calls fitView again in the mean time

tests/playwright/e2e/pane.spec.ts

@@ -20,18 +20,21 @@ test.describe('Pane default', () => {
       await expect(pane).toBeAttached();
 
       const paneBox = await pane.boundingBox();
-
       const transformsBefore = await getTransform(viewport);
+      const movementPx = 100;
 
       await pane.hover();
       await page.mouse.down();
       // Move pane by 100, 100
-      await page.mouse.move(paneBox!.x + paneBox!.width * 0.5 + 100, paneBox!.y + paneBox!.height * 0.5 + 100);
+      await page.mouse.move(
+        paneBox!.x + paneBox!.width * 0.5 + movementPx,
+        paneBox!.y + paneBox!.height * 0.5 + movementPx
+      );
 
       const transformsAfter = await getTransform(viewport);
 
-      expect(Math.floor(transformsAfter.translateX - transformsBefore.translateX)).toBe(100);
+      expect(movementPx - Math.floor(transformsAfter.translateX - transformsBefore.translateX)).toBeLessThan(1);
-      expect(Math.floor(transformsAfter.translateY - transformsBefore.translateY)).toBe(100);
+      expect(movementPx - Math.floor(transformsAfter.translateY - transformsBefore.translateY)).toBeLessThan(1);
     });
 
     test('scrolling the default pane zooms it', async ({ page }) => {