react-archer arrow wrong scale after zoom change and window resize about react-archer HOT 7 OPEN

Hi!

Thank you for the very detailed and reproducible issue 😊
I'll have a look at this when I have some time but I am quite busy these days 😞

Feel free to dive in the library's code and have a look too if you want to go faster.

My guesses: when you zoom in and out without changing the window size, react-archer does not re-render because nothing changes from its perspective.

However, when you resize the window, the main component is re-rendered. see

So any re-render while zoomed in becomes buggy, because the computed positions become erroneous.
I guess that we could confirm this hypothesis by adding a new element while zoomed in and validating that we see the problem as well.

The goal is then to understand why the positions are not correct when the panzoom is active 🤔

from react-archer.

This may not be relevant to a permanent solution for the react-archer library but I came up with a workaround I'll share in case it is useful. I have only a basic understanding of javascript and so this probably has some issues but it seems to work for my usecase.

I got a scale value used in the PanZoom transform and inverted it to later pass into the ArcherContainer

    var scale = 1.0
    if(this.mainPanzoomRef.current !== null){
      scale = 1 / this.mainPanzoomRef.current.state.scale
      scale = scale
    }
ref={this.mainPanzoomRef}
...
<ArcherContainer scale={scale}>

I replaced the return line in getPointCoordinatesFromAnchorPosition and applied the passed in scale multiplier

    var retPos = absolutePosition.substract(parentCoordinates);
    retPos.x = retPos.x * this.props.scale
    retPos.y = retPos.y * this.props.scale

    return retPos;

I commented out the setState call in refreshScreen. Without this uncommented a rerender of the arrows triggered by a button seemed to look like it is the right scale and position however a screen resize still had similar behavior as before, but commenting out this line fixed the issue for me.

refreshScreen = (): void => {
    //this.setState({ ...this.state });
  };

from react-archer.

Glad that you have a workaround! I need to think this through and see if there's something cleaner, there must be 🤔
I might have done something wrong with the core of the library itself.

from react-archer.

Any update on this by chance? I'm having the exact same issue:

• I attempted the workaround described above, but didn't have any luck with it
• As an alternative, I called the refreshScreen method whenever the zoom level changed in attempt to mimic the window re-sizing, but no luck there either

Going to continue to dig into the calculation in the meantime and see if I can figure anything out!

from react-archer.

Hi @tsnolan23 !

I had a quick look but couldn't manage to identify the issue. I had not prioritized since there was a workaround.

I don't have much time to investigate unfortunately 😞

Does it happen only on Chrome or on all browsers?

from react-archer.

@pierpo Seems to be all browsers - tested in Chrome, Firefox and Safari

from react-archer.

Hi, some modifications or workarounds about this bug ???

from react-archer.