You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Thanks for your reply!
I have a special situation where the position of the ReactFlow layout is pre-calculated, and it is aligned with other components (ReactFlow's sibling component). The setViewport can only adjust the flow's viewport, but I want both the flow component and the other components to be adjusted together. So I used transform: scale() to achieve it.
React Flow needs the dimensions of the flow to figure out things - supporting scaling by transforms would add an immens overhead to this, because it would have to be respected in many internal calculations. You can however resize the flow component and adjust the zoom level of the viewport at the same time to achieve the same effect. (napkin math: halving the size while halving the zoom level should yield the same same effect as scaling)
Describe the Bug
I'm trying to add the CSS style property
transform: scale(0.7)
to the reactflow component, but the edge path is shifted.I don't know where the reason comes from. Maybe it's a react issue or an SVG issue?
Thanks!
Your Example Website or App
https://stackblitz.com/edit/vitejs-vite-q272d9?file=src%2FApp.jsx
Steps to Reproduce the Bug or Issue
Just like what's in the repro demo.
Expected behavior
You can click the button on the demo page, if scaling it after a while, it goes well, without shifting.
Screenshots or Videos
No response
Platform
Additional context
No response
The text was updated successfully, but these errors were encountered: