I'm being ambitious and attempting to show a React Three Fibre Canvas inside of a React Flow node.
This works, however when the view zooms, the canvas resizes inside the node
Zoomed out
Zoomed in
I'm trying to figure out who to affect the size of the canvas so the image stays the same size (and the other things that will be appearing above it)
The canvas wrapper is
const Wrapper = styled.div`
width: 100%;
height: 100%;
margin: 0 0;
padding: 0 0;
`;
And the image is scaled to fit to screen
const scale = useAspect(
1024, // Pixel-width
512, // Pixel-height
1, // Optional scaling factor
);
The node container is fixed
style={{ width: '200px', height: '200px' }
I suppose I need to work out what is changing when you zoom on the ReactFlow diagram, and how I can adjust the size of the container or Three viewport to respect this zoom level?