Panning and zooming not working on nested

[bpatzak]

Hi, I got impression, that when I have two nested containers and apply panZoom on one of then, the entities in the second container do not pan and zoom.
The problem is demonstrated here: https://codepen.io/bpatzak/pen/XWmzMwv
The zooming does not work and the red rectangle (in nested container subjected to panZoom) moves only when the mouse is inside the rectangle.
Any help will be appreciated.

[Fuzzyma]

Didnt find a mistake after having a short look. Might be a bug. Have to look into that deeper. Sorry for the inconvinience!

[benjaminbours]

Same issue for me 👍

After investigation about the zoom, I realised the difference between a zoom from the root svg and the nested one is that for the root, there are values for the clientWidth and clientHeight properties, when for the nested one I always get 0.

Looking at the current master of the core library I found this commit svgdotjs/svg.js@a6dae04, which differ from the current released code, but it will make it clearer why it's not zooming when released.

So first it's not an issue with this plugin, it comes from the main library. And then, my current fix is this

      const nested = draw
        .nested()
        .size("50%", "100%")
        .attr({
          style: "width: 50%; height: 100%;",
        })
        .panZoom({ zoomMin: 0.1, zoomMax: 20, zoomFactor: 0.5 });

Apparently, the attributes width and height are not detected properly by the zoom function, and in the current released code, when it's the case the fallback is to get value from the style.

[Fuzzyma]

Thank you for investigating @benjaminbours. I simply hadnt the brain ressources atm...
But after knowing the bug its pretty clear 😄

Yes, clientHeight and width is only defined on a root element because the specs says so. Thats why we try to get the dimensions differently. In the current released version (3.0.16) there was an additional getComputedStyle check for width and height but that often just leads to "auto" if no stye is set. Thats why in 3.1.0 it was remoed and the zoom function will throw if there is no width/height set on the element or clientHeight/width is not usable.

But I just realized that it wont throw with percentage values which it shoult... need to a add a check for that

PS: in 3.1.0 your fix therefore wont work.