Arrows scaling changes when using zoomable-UI.

[chakeson]

Hello,

Issue: When using zoomable-UI, resizing the window each Xarrow seems to change height and width. Thus breaking the arrow links.

Example: Here is a sandbox with it https://codesandbox.io/s/xarrows-and-zoomable-ui-83t0kh?file=/src/App.js When you resize the window it detects it and renders them incorrectly.

What I tried: I tried forcing renders as in issue #30, doesn't seem to work. Setting the SVGcanvasStyle as in issue #94 does not work either. Tried SVGcanvasStyle={{transform: "scale(1)"}} as well. Calling updateXarrow() on resizes doesn't seem to work either. Moving it out of the Zoom-move element negates the use of it.

[m3schroder]

Changing that svg canvas style worked for me actually

[chakeson]

Changing that svg canvas style worked for me actually

Hey @m3schroder I tried these separately and in mixed combinations and couldn't get it to properly keep anchoring

SVGcanvasStyle={{ transform: "scale(1)" }}
SVGcanvasProps={{ transform: "scale(1)" }}
divContainerStyle={{ transform: "scale(1)" }}
divContainerProps={{ transform: "scale(1)" }}

Can you post the exact change that made it work?

[m3schroder]

@chakeson Yes I did 1/scale instead of just scale

[chakeson]

@m3schroder I can't seem to get it to work, can you share exactly what you tried? Maybe the fork of the sandbox?

[metzy23]

I'm also having this problem. It works fine when I use zoom instead of transform: scale(), but from what I understand, it is not a good idea to use zoom. Can someone share an example of a working solution using transform: scale()?