refactor(react): pass fitView for ssr
This commit is contained in:
@@ -12,12 +12,14 @@ function ReactFlowProvider({
|
|||||||
initialEdges,
|
initialEdges,
|
||||||
initialWidth,
|
initialWidth,
|
||||||
initialHeight,
|
initialHeight,
|
||||||
|
fitView,
|
||||||
}: {
|
}: {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
initialNodes?: Node[];
|
initialNodes?: Node[];
|
||||||
initialEdges?: Edge[];
|
initialEdges?: Edge[];
|
||||||
initialWidth?: number;
|
initialWidth?: number;
|
||||||
initialHeight?: number;
|
initialHeight?: number;
|
||||||
|
fitView?: boolean;
|
||||||
}) {
|
}) {
|
||||||
const storeRef = useRef<UseBoundStoreWithEqualityFn<StoreApi<ReactFlowState>> | null>(null);
|
const storeRef = useRef<UseBoundStoreWithEqualityFn<StoreApi<ReactFlowState>> | null>(null);
|
||||||
|
|
||||||
@@ -27,6 +29,7 @@ function ReactFlowProvider({
|
|||||||
edges: initialEdges,
|
edges: initialEdges,
|
||||||
width: initialWidth,
|
width: initialWidth,
|
||||||
height: initialHeight,
|
height: initialHeight,
|
||||||
|
fitView,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -10,12 +10,14 @@ function Wrapper({
|
|||||||
edges,
|
edges,
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
|
fitView,
|
||||||
}: {
|
}: {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
nodes?: Node[];
|
nodes?: Node[];
|
||||||
edges?: Edge[];
|
edges?: Edge[];
|
||||||
width?: number;
|
width?: number;
|
||||||
height?: number;
|
height?: number;
|
||||||
|
fitView?: boolean;
|
||||||
}) {
|
}) {
|
||||||
const isWrapped = useContext(StoreContext);
|
const isWrapped = useContext(StoreContext);
|
||||||
|
|
||||||
@@ -26,7 +28,13 @@ function Wrapper({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ReactFlowProvider initialNodes={nodes} initialEdges={edges} initialWidth={width} initialHeight={height}>
|
<ReactFlowProvider
|
||||||
|
initialNodes={nodes}
|
||||||
|
initialEdges={edges}
|
||||||
|
initialWidth={width}
|
||||||
|
initialHeight={height}
|
||||||
|
fitView={fitView}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</ReactFlowProvider>
|
</ReactFlowProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -185,7 +185,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
|
|||||||
data-testid="rf__wrapper"
|
data-testid="rf__wrapper"
|
||||||
id={id}
|
id={id}
|
||||||
>
|
>
|
||||||
<Wrapper nodes={nodes} edges={edges} width={width} height={height}>
|
<Wrapper nodes={nodes} edges={edges} width={width} height={height} fitView={fitView}>
|
||||||
<GraphView
|
<GraphView
|
||||||
onInit={onInit}
|
onInit={onInit}
|
||||||
onNodeClick={onNodeClick}
|
onNodeClick={onNodeClick}
|
||||||
|
|||||||
@@ -29,15 +29,17 @@ const createRFStore = ({
|
|||||||
edges,
|
edges,
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
|
fitView,
|
||||||
}: {
|
}: {
|
||||||
nodes?: Node[];
|
nodes?: Node[];
|
||||||
edges?: Edge[];
|
edges?: Edge[];
|
||||||
width?: number;
|
width?: number;
|
||||||
height?: number;
|
height?: number;
|
||||||
|
fitView?: boolean;
|
||||||
}) =>
|
}) =>
|
||||||
createWithEqualityFn<ReactFlowState>(
|
createWithEqualityFn<ReactFlowState>(
|
||||||
(set, get) => ({
|
(set, get) => ({
|
||||||
...getInitialState({ nodes, edges, width, height }),
|
...getInitialState({ nodes, edges, width, height, fitView }),
|
||||||
setNodes: (nodes: Node[]) => {
|
setNodes: (nodes: Node[]) => {
|
||||||
const { nodes: storeNodes, nodeOrigin, elevateNodesOnSelect } = get();
|
const { nodes: storeNodes, nodeOrigin, elevateNodesOnSelect } = get();
|
||||||
const nextNodes = updateNodes(nodes, storeNodes, { nodeOrigin, elevateNodesOnSelect });
|
const nextNodes = updateNodes(nodes, storeNodes, { nodeOrigin, elevateNodesOnSelect });
|
||||||
|
|||||||
@@ -15,17 +15,19 @@ const getInitialState = ({
|
|||||||
edges = [],
|
edges = [],
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
|
fitView,
|
||||||
}: {
|
}: {
|
||||||
nodes?: Node[];
|
nodes?: Node[];
|
||||||
edges?: Edge[];
|
edges?: Edge[];
|
||||||
width?: number;
|
width?: number;
|
||||||
height?: number;
|
height?: number;
|
||||||
|
fitView?: boolean;
|
||||||
} = {}): ReactFlowStore => {
|
} = {}): ReactFlowStore => {
|
||||||
const nextNodes = updateNodes(nodes, [], { nodeOrigin: [0, 0], elevateNodesOnSelect: false });
|
const nextNodes = updateNodes(nodes, [], { nodeOrigin: [0, 0], elevateNodesOnSelect: false });
|
||||||
|
|
||||||
let transform: Transform = [0, 0, 1];
|
let transform: Transform = [0, 0, 1];
|
||||||
|
|
||||||
if (width && height) {
|
if (fitView && width && height) {
|
||||||
const nodesWithDimensions = nextNodes.map((node) => ({
|
const nodesWithDimensions = nextNodes.map((node) => ({
|
||||||
...node,
|
...node,
|
||||||
width: node.size?.width,
|
width: node.size?.width,
|
||||||
@@ -89,7 +91,7 @@ const getInitialState = ({
|
|||||||
autoPanOnConnect: true,
|
autoPanOnConnect: true,
|
||||||
autoPanOnNodeDrag: true,
|
autoPanOnNodeDrag: true,
|
||||||
connectionRadius: 20,
|
connectionRadius: 20,
|
||||||
onError: devWarn,
|
onError: () => null,
|
||||||
isValidConnection: undefined,
|
isValidConnection: undefined,
|
||||||
|
|
||||||
lib: 'react',
|
lib: 'react',
|
||||||
|
|||||||
Reference in New Issue
Block a user