Using fitView with resizable container

[pjaspinski]

Hi, I stumbled upon a problem when using ReactFlow with React-RND.
React-RND provides a resizable component, in which I want to place a ReactFlow diagram.

Here is a sandbox. You can drag the dark border to resize the container and see the issue.

Implementation
When user stops resizing the component, the onResizeStop event is fired. I use it to set updated container dimensions to the state.

onResizeStop={(e, direction, ref, delta, position) => {
  setDiagramWidth(ref.style.width);
  setDiagramHeight(ref.style.height);
}}

This state is then passed as props to the component containing ReactFlow diagram.

<Diagram width={diagramWidth} height={diagramHeight}></Diagram>

These are then used to set dimensions of a div containing the diagram.

return (
  <div style={{ height, width }}>
    <ReactFlow
      // ...
    >
        // ...
    </ReactFlow>
  </div>
);

In the diagram component there is also a useEffect that calls fitView when these props change.

React.useEffect(() => {
  fitView();
}, [width, height, fitView]);

Problem
It seems that fitView always uses dimensions from before the last resizing. I couldn't find a solution that would fully fix it. Is there a way to force it to use updated dimensions? Or is it a problem with fitView's implementation?

I would really appreciate any help on this one.

[pjaspinski]

I achieved this behaviour by adding a fitVIewToDimensions function, that takes dimensions as a parameter. If anyone faces this problem in the future, here is my fork.

Edit:
There is actually a way to achieve this behavior without modifying this library. You can use useStoreState to get height and width from the react-flow's store and then make a useEffect with fitView that is dependent on these dimensions.

[Krithika3]

@pjaspinski do you have a code snippet for the same? I am trying to do something similar (resize my chart as my window resizes) and would be of help to me

[pjaspinski]

I don't have access to the codebase that I was working on when I created this issue, but I guess, that it was something along these lines:

const Component = () => {
  const {width, height} = useStore(sizeSelector);

  useEffect(() => {
    fitView();
  }, [width, height]);

  return ...;
};

Just check what is the structure of this lib's internal state and prepare sizeSelector that will get you these dimensions. Hope it helps!

[shazlehu]

I've been searching for this answer for months, and at long last, here it is.

In Typescript:

  const widthSelector = (state: { width: any }) => state.width;
  const heightSelector = (state: { height: any }) => state.height;
  const reactFlowWidth = useStore(widthSelector);
  const reactFlowHeight = useStore(heightSelector);

  useEffect(() => {
    reactFlowInstance.fitView();
  }, [reactFlowWidth, reactFlowHeight, reactFlowInstance]);