From f70c5bb68f1d8c216b9d191d4bcc42d93f4def29 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 30 Aug 2024 12:58:31 +0200
Subject: [PATCH 1/2] fix(react,svelte): calculate viewport dimensions inside
 of fitView action

---
 packages/react/src/hooks/useViewportHelper.ts |  5 ++++-
 packages/svelte/src/lib/store/index.ts        | 12 ++++++++----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/hooks/useViewportHelper.ts b/packages/react/src/hooks/useViewportHelper.ts
index a495ec89..1e653d19 100644
--- a/packages/react/src/hooks/useViewportHelper.ts
+++ b/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(
               {
diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts
index 24279a45..7d196fa4 100644
--- a/packages/svelte/src/lib/store/index.ts
+++ b/packages/svelte/src/lib/store/index.ts
@@ -19,7 +19,8 @@ import {
   type UpdateConnection,
   type ConnectionState,
   type NodeOrigin,
-  getFitViewNodes
+  getFitViewNodes,
+  getDimensions
 } from '@xyflow/system';
 
 import type { EdgeTypes, NodeTypes, Node, Edge, FitViewOptions } from '$lib/types';
@@ -152,18 +153,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),
-        height: get(store.height),
+        width,
+        height,
         minZoom: get(store.minZoom),
         maxZoom: get(store.maxZoom),
         panZoom

From 02390f9966d51c80e4e1b488733b5bf7322ad710 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 13 Sep 2024 11:09:39 +0200
Subject: [PATCH 2/2] chore(changeset): add

---
 .changeset/smart-insects-tease.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/smart-insects-tease.md

diff --git a/.changeset/smart-insects-tease.md b/.changeset/smart-insects-tease.md
new file mode 100644
index 00000000..a2bb7f65
--- /dev/null
+++ b/.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)