refactor(react): pass fitView for ssr

This commit is contained in:
moklick
2023-10-23 16:01:22 +02:00
parent f2b36f2d33
commit 52a47a7a26
5 changed files with 20 additions and 5 deletions
@@ -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,
});
}
@@ -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>
);
@@ -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}
+3 -1
View File
@@ -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 });
+4 -2
View File
@@ -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',