react-xarrows icon indicating copy to clipboard operation
react-xarrows copied to clipboard

scaling arrows

Open james-hafer opened this issue 4 years ago • 2 comments

Awesome work, this is extremely easy to use!

When allowing end users to zoom in and out by using transform: 'scale(.8)' for example, the lines cannot find the nodes properly.

Using your example on code sandbox, if you update canvas style to be this when on 'FewArrows' you can reproduce the issue. export const canvasStyle = { width: '100%', height: '40vh', background: 'white', overflow: 'auto', display: 'flex', pointerEvents: 'none', transform: 'scale(.8)', };

image

james-hafer avatar Sep 01 '21 16:09 james-hafer

I see this issue always comes back... this is easy to fix, but this is a quite common issue so I consider adding 'scale' property to the API as scaling is a common use case. it will take time as the entire lib is rewritten to me much modular, so for now, please see #68 or #30. this should help you for now. (use SVGcanvasStyle={{transform: `scale(${1 / scale})`}} )

i will leave this open until next release

Eliav2 avatar Sep 01 '21 21:09 Eliav2

Awesome, that does the trick, thank you!

james-hafer avatar Sep 01 '21 21:09 james-hafer