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] 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