From 52a47a7a2632813d5e22dc3c29fb2676ab97750c Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 23 Oct 2023 16:01:22 +0200
Subject: [PATCH] refactor(react): pass fitView for ssr

---
 .../react/src/components/ReactFlowProvider/index.tsx   |  3 +++
 packages/react/src/container/ReactFlow/Wrapper.tsx     | 10 +++++++++-
 packages/react/src/container/ReactFlow/index.tsx       |  2 +-
 packages/react/src/store/index.ts                      |  4 +++-
 packages/react/src/store/initialState.ts               |  6 ++++--
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/ReactFlowProvider/index.tsx b/packages/react/src/components/ReactFlowProvider/index.tsx
index d529c34c..07f011ca 100644
--- a/packages/react/src/components/ReactFlowProvider/index.tsx
+++ b/packages/react/src/components/ReactFlowProvider/index.tsx
@@ -12,12 +12,14 @@ function ReactFlowProvider({
   initialEdges,
   initialWidth,
   initialHeight,
+  fitView,
 }: {
   children: ReactNode;
   initialNodes?: Node[];
   initialEdges?: Edge[];
   initialWidth?: number;
   initialHeight?: number;
+  fitView?: boolean;
 }) {
   const storeRef = useRef<UseBoundStoreWithEqualityFn<StoreApi<ReactFlowState>> | null>(null);
 
@@ -27,6 +29,7 @@ function ReactFlowProvider({
       edges: initialEdges,
       width: initialWidth,
       height: initialHeight,
+      fitView,
     });
   }
 
diff --git a/packages/react/src/container/ReactFlow/Wrapper.tsx b/packages/react/src/container/ReactFlow/Wrapper.tsx
index 9f78d979..d658c5a3 100644
--- a/packages/react/src/container/ReactFlow/Wrapper.tsx
+++ b/packages/react/src/container/ReactFlow/Wrapper.tsx
@@ -10,12 +10,14 @@ function Wrapper({
   edges,
   width,
   height,
+  fitView,
 }: {
   children: ReactNode;
   nodes?: Node[];
   edges?: Edge[];
   width?: number;
   height?: number;
+  fitView?: boolean;
 }) {
   const isWrapped = useContext(StoreContext);
 
@@ -26,7 +28,13 @@ function Wrapper({
   }
 
   return (
-    <ReactFlowProvider initialNodes={nodes} initialEdges={edges} initialWidth={width} initialHeight={height}>
+    <ReactFlowProvider
+      initialNodes={nodes}
+      initialEdges={edges}
+      initialWidth={width}
+      initialHeight={height}
+      fitView={fitView}
+    >
       {children}
     </ReactFlowProvider>
   );
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index 55c3b5be..3d612b7c 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -185,7 +185,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
         data-testid="rf__wrapper"
         id={id}
       >
-        <Wrapper nodes={nodes} edges={edges} width={width} height={height}>
+        <Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView}>
           <GraphView
             onInit={onInit}
             onNodeClick={onNodeClick}
diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts
index 3602f52e..ad42fd6e 100644
--- a/packages/react/src/store/index.ts
+++ b/packages/react/src/store/index.ts
@@ -29,15 +29,17 @@ const createRFStore = ({
   edges,
   width,
   height,
+  fitView,
 }: {
   nodes?: Node[];
   edges?: Edge[];
   width?: number;
   height?: number;
+  fitView?: boolean;
 }) =>
   createWithEqualityFn<ReactFlowState>(
     (set, get) => ({
-      ...getInitialState({ nodes, edges, width, height }),
+      ...getInitialState({ nodes, edges, width, height, fitView }),
       setNodes: (nodes: Node[]) => {
         const { nodes: storeNodes, nodeOrigin, elevateNodesOnSelect } = get();
         const nextNodes = updateNodes(nodes, storeNodes, { nodeOrigin, elevateNodesOnSelect });
diff --git a/packages/react/src/store/initialState.ts b/packages/react/src/store/initialState.ts
index a2bc69ae..54522474 100644
--- a/packages/react/src/store/initialState.ts
+++ b/packages/react/src/store/initialState.ts
@@ -15,17 +15,19 @@ const getInitialState = ({
   edges = [],
   width,
   height,
+  fitView,
 }: {
   nodes?: Node[];
   edges?: Edge[];
   width?: number;
   height?: number;
+  fitView?: boolean;
 } = {}): ReactFlowStore => {
   const nextNodes = updateNodes(nodes, [], { nodeOrigin: [0, 0], elevateNodesOnSelect: false });
 
   let transform: Transform = [0, 0, 1];
 
-  if (width && height) {
+  if (fitView && width && height) {
     const nodesWithDimensions = nextNodes.map((node) => ({
       ...node,
       width: node.size?.width,
@@ -89,7 +91,7 @@ const getInitialState = ({
     autoPanOnConnect: true,
     autoPanOnNodeDrag: true,
     connectionRadius: 20,
-    onError: devWarn,
+    onError: () => null,
     isValidConnection: undefined,
 
     lib: 'react',