diff --git a/.changeset/curly-cows-repeat.md b/.changeset/curly-cows-repeat.md new file mode 100644 index 00000000..87b3935f --- /dev/null +++ b/.changeset/curly-cows-repeat.md @@ -0,0 +1,7 @@ +--- +'@xyflow/svelte': patch +'@xyflow/system': patch +'@xyflow/react': patch +--- + +Fix initial `fitView` not working correctly for `nodeOrigin` other than [0,0] diff --git a/.changeset/cyan-frogs-lick.md b/.changeset/cyan-frogs-lick.md new file mode 100644 index 00000000..11109aab --- /dev/null +++ b/.changeset/cyan-frogs-lick.md @@ -0,0 +1,6 @@ +--- +'@xyflow/svelte': patch +'@xyflow/react': patch +--- + +Improve `fitView` to respect clamped node positions based on `nodeExtent` diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts index 7d196fa4..5f4293ca 100644 --- a/packages/svelte/src/lib/store/index.ts +++ b/packages/svelte/src/lib/store/index.ts @@ -20,6 +20,7 @@ import { type ConnectionState, type NodeOrigin, getFitViewNodes, + updateAbsolutePositions, getDimensions } from '@xyflow/system'; @@ -97,6 +98,7 @@ export function createStore({ function updateNodeInternals(updates: Map) { const nodeLookup = get(store.nodeLookup); + const parentLookup = get(store.parentLookup); const { changes, updatedInternals } = updateNodeInternalsSystem( updates, nodeLookup, @@ -109,6 +111,8 @@ export function createStore({ return; } + updateAbsolutePositions(nodeLookup, parentLookup, { nodeOrigin, nodeExtent }); + if (!get(store.fitViewOnInitDone) && get(store.fitViewOnInit)) { const fitViewOptions = get(store.fitViewOptions); const fitViewOnInitDone = fitViewSync({ diff --git a/packages/system/src/utils/store.ts b/packages/system/src/utils/store.ts index 73b6afc9..ec55759a 100644 --- a/packages/system/src/utils/store.ts +++ b/packages/system/src/utils/store.ts @@ -61,11 +61,14 @@ export function updateAbsolutePositions( ) { const _options = mergeObjects(defaultOptions, options); for (const node of nodeLookup.values()) { - if (!node.parentId) { - continue; + if (node.parentId) { + updateChildNode(node, nodeLookup, parentLookup, _options); + } else { + const positionWithOrigin = getNodePositionWithOrigin(node, _options.nodeOrigin); + const extent = isCoordinateExtent(node.extent) ? node.extent : _options.nodeExtent; + const clampedPosition = clampPosition(positionWithOrigin, extent, getNodeDimensions(node)); + node.internals.positionAbsolute = clampedPosition; } - - updateChildNode(node, nodeLookup, parentLookup, _options); } }