diff --git a/examples/vite-app/src/examples/Subflow/index.tsx b/examples/vite-app/src/examples/Subflow/index.tsx index db021f52..75bd3629 100644 --- a/examples/vite-app/src/examples/Subflow/index.tsx +++ b/examples/vite-app/src/examples/Subflow/index.tsx @@ -22,7 +22,6 @@ const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node); const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge); const defaultViewport = { x: 0, y: 0, zoom: 1.5 }; - const initialNodes: Node[] = [ { id: '1', diff --git a/packages/core/src/store/index.ts b/packages/core/src/store/index.ts index 5ff9bf05..5c4d65a6 100644 --- a/packages/core/src/store/index.ts +++ b/packages/core/src/store/index.ts @@ -3,7 +3,7 @@ import { createStore } from 'zustand'; import { clampPosition, getDimensions, internalsSymbol } from '../utils'; import { applyNodeChanges, createSelectionChange, getSelectionChanges } from '../utils/changes'; import { getHandleBounds } from '../components/Nodes/utils'; -import { createNodeInternals, fitView, updateNodesAndEdgesSelections } from './utils'; +import { createNodeInternals, fitView, updateAbsoluteNodePositions, updateNodesAndEdgesSelections } from './utils'; import initialState from './initialState'; import type { ReactFlowState, @@ -99,6 +99,8 @@ const createRFStore = () => return res; }, []); + updateAbsoluteNodePositions(nodeInternals, nodeOrigin); + const nextFitViewOnInitDone = fitViewOnInitDone || (fitViewOnInit && !fitViewOnInitDone && fitView(get, { initial: true, ...fitViewOnInitOptions })); diff --git a/packages/core/src/store/utils.ts b/packages/core/src/store/utils.ts index 0224e656..caf860af 100644 --- a/packages/core/src/store/utils.ts +++ b/packages/core/src/store/utils.ts @@ -20,7 +20,6 @@ type ParentNodes = Record; function calculateXYZPosition( node: Node, nodeInternals: NodeInternals, - parentNodes: ParentNodes, result: XYZPosition, nodeOrigin: NodeOrigin ): XYZPosition { @@ -33,7 +32,6 @@ function calculateXYZPosition( return calculateXYZPosition( parentNode, nodeInternals, - parentNodes, { x: (result.x ?? 0) + parentNodePosition.x, y: (result.y ?? 0) + parentNodePosition.y, @@ -43,6 +41,41 @@ function calculateXYZPosition( ); } +export function updateAbsoluteNodePositions( + nodeInternals: NodeInternals, + nodeOrigin: NodeOrigin, + parentNodes?: ParentNodes +) { + nodeInternals.forEach((node) => { + if (node.parentNode && !nodeInternals.has(node.parentNode)) { + throw new Error(`Parent node ${node.parentNode} not found`); + } + + if (node.parentNode || parentNodes?.[node.id]) { + const { x, y, z } = calculateXYZPosition( + node, + nodeInternals, + { + ...node.position, + z: node[internalsSymbol]?.z ?? 0, + }, + nodeOrigin + ); + + node.positionAbsolute = { + x, + y, + }; + + node[internalsSymbol]!.z = z; + + if (parentNodes?.[node.id]) { + node[internalsSymbol]!.isParent = true; + } + } + }); +} + export function createNodeInternals( nodes: Node[], nodeInternals: NodeInternals, @@ -83,35 +116,7 @@ export function createNodeInternals( nextNodeInternals.set(node.id, internals); }); - nextNodeInternals.forEach((node) => { - if (node.parentNode && !nextNodeInternals.has(node.parentNode)) { - throw new Error(`Parent node ${node.parentNode} not found`); - } - - if (node.parentNode || parentNodes[node.id]) { - const { x, y, z } = calculateXYZPosition( - node, - nextNodeInternals, - parentNodes, - { - ...node.position, - z: node[internalsSymbol]?.z ?? 0, - }, - nodeOrigin - ); - - node.positionAbsolute = { - x, - y, - }; - - node[internalsSymbol]!.z = z; - - if (parentNodes[node.id]) { - node[internalsSymbol]!.isParent = true; - } - } - }); + updateAbsoluteNodePositions(nextNodeInternals, nodeOrigin, parentNodes); return nextNodeInternals; } @@ -142,6 +147,7 @@ export function fitView(get: StoreApi['getState'], options: Inte if (nodes.length > 0 && nodesInitialized) { const bounds = getRectOfNodes(nodes, nodeOrigin); + const [x, y, zoom] = getTransformForBounds( bounds, width,