refactor(react): pass fitView for ssr
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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 });
|
||||
|
||||
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user