feat(react): ssr

packages/react/src/store/index.ts

@@ -24,10 +24,20 @@ import type {
   FitViewOptions,
 } from '../types';
 
-const createRFStore = ({ nodes, edges }: { nodes?: Node[]; edges?: Edge[] }) =>
+const createRFStore = ({
+  nodes,
+  edges,
+  width,
+  height,
+}: {
+  nodes?: Node[];
+  edges?: Edge[];
+  width?: number;
+  height?: number;
+}) =>
   createWithEqualityFn<ReactFlowState>(
     (set, get) => ({
-      ...getInitialState({ nodes, edges }),
+      ...getInitialState({ nodes, edges, width, height }),
       setNodes: (nodes: Node[]) => {
         const { nodes: storeNodes, nodeOrigin, elevateNodesOnSelect } = get();
         const nextNodes = updateNodes(nodes, storeNodes, { nodeOrigin, elevateNodesOnSelect });

packages/react/src/store/initialState.ts

@@ -1,15 +1,45 @@
-import { devWarn, infiniteExtent, ConnectionMode, updateNodes } from '@xyflow/system';
+import {
+  devWarn,
+  infiniteExtent,
+  ConnectionMode,
+  updateNodes,
+  getRectOfNodes,
+  getTransformForBounds,
+  Transform,
+} from '@xyflow/system';
 
 import type { Edge, Node, ReactFlowStore } from '../types';
 
-const getInitialState = ({ nodes = [], edges = [] }: { nodes?: Node[]; edges?: Edge[] }): ReactFlowStore => {
+const getInitialState = ({
+  nodes = [],
+  edges = [],
+  width,
+  height,
+}: {
+  nodes?: Node[];
+  edges?: Edge[];
+  width?: number;
+  height?: number;
+}): ReactFlowStore => {
   const nextNodes = updateNodes(nodes, [], { nodeOrigin: [0, 0], elevateNodesOnSelect: false });
 
+  let transform: Transform = [0, 0, 1];
+
+  if (width && height) {
+    const nodesWithDimensions = nextNodes.map((node) => ({
+      ...node,
+      width: node.dimensions?.width,
+      height: node.dimensions?.height,
+    }));
+    const bounds = getRectOfNodes(nodesWithDimensions, [0, 0]);
+    transform = getTransformForBounds(bounds, width, height, 0.5, 2, 0.1);
+  }
+
   return {
     rfId: '1',
     width: 0,
     height: 0,
-    transform: [0, 0, 1],
+    transform,
     nodes: nextNodes,
     edges: edges,
     onNodesChange: null,