Merge branch 'main' into fix-fit-view-origin

.changeset/smart-insects-tease.md

@@ -0,0 +1,6 @@
+---
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+---
+
+Calculate viewport dimensions in fitView instead of using stored dimensions. Fixes [#4652](https://github.com/xyflow/xyflow/issues/4652)

packages/react/src/hooks/useViewportHelper.ts

@@ -6,6 +6,7 @@ import {
   fitView,
   type XYPosition,
   rendererPointToPoint,
+  getDimensions,
 } from '@xyflow/system';
 
 import { useStoreApi } from '../hooks/useStore';
@@ -64,9 +65,11 @@ const useViewportHelper = (): ViewportHelperFunctions => {
         return { x, y, zoom };
       },
       fitView: (options) => {
-        const { nodeLookup, width, height, minZoom, maxZoom, panZoom } = store.getState();
+        const { nodeLookup, minZoom, maxZoom, panZoom, domNode } = store.getState();
         const fitViewNodes = getFitViewNodes(nodeLookup, options);
 
+        const { width, height } = getDimensions(domNode!);
+
         return panZoom
           ? fitView(
               {

packages/svelte/src/lib/store/index.ts

@@ -20,7 +20,8 @@ import {
   type ConnectionState,
   type NodeOrigin,
   getFitViewNodes,
-  updateAbsolutePositions
+  updateAbsolutePositions,
+  getDimensions
 } from '@xyflow/system';
 
 import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions } from '$lib/types';
@@ -156,18 +157,21 @@ export function createStore({
 
   function fitView(options?: FitViewOptions) {
     const panZoom = get(store.panZoom);
+    const domNode = get(store.domNode);
 
-    if (!panZoom) {
+    if (!panZoom || !domNode) {
       return Promise.resolve(false);
     }
 
+    const { width, height } = getDimensions(domNode);
+
     const fitViewNodes = getFitViewNodes(get(store.nodeLookup), options);
 
     return fitViewSystem(
       {
         nodes: fitViewNodes,
-        width: get(store.width),
+        width,
-        height: get(store.height),
+        height,
         minZoom: get(store.minZoom),
         maxZoom: get(store.maxZoom),
         panZoom