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) 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 9f8d1b98..5f4293ca 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/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), - height: get(store.height), + width, + height, minZoom: get(store.minZoom), maxZoom: get(store.maxZoom), panZoom