SVGs Not Scaling Correctly

[kitschpatrol]

Hi,

Thank you for Tweakpane.

I have a use-case where the entire Tweakpane gets scaled up with a CSS transform, e.g. a transform: scale(2.0); on a div containing the Pane.

This works really well in general since Tweakpane is all vectors, but I did notice an issue with SVG graphics like those found in the graph monitor and the FPS graph plugin. Basically, the SVG seems to get scaled twice, and then is partially clipped from view.

I dug around a bit and it seems like this is a result of calling getBoundingClientRect() when calculating the graph's layout, which changes as a result of the scale transformation on the parent.

I have a branch here which seems to fix the issue by using the view element's .clientWidth and .clientHeight instead, which reflects the unscaled values:

I'm happy to submit this as a PR if you agree with the approach, but I'm not sure if there are unintended side-effects I haven't considered. I also noticed that getBoundingClientRect() is used in pointer-handler.ts, but haven't encountered issues with it. (I think in some cases of user input coming from the root window coordinates, you do want the scaled dimensions.)

I think Cubic Bezier from the Essentials Plugin would need the same fix as well.

I also experimented with setting the viewBox on the SVG. This approach fixes the scaling, but has the disadvantage of not scaling up the line weights.

[kitschpatrol]

And here's a diff of the same fix for Cubic Bezier.

[cocopon]

Thank you for reporting the issue. You got a point and the proposed fix looks good to me. Creating a PR would be appreciated.

PointerHandler works fine because the scale of transform affects both x/y and width/height, and the relative value　doesn't change as a result.

[kitschpatrol]

Great thank you. I've opened PRs on both Tweakpane and the Plugin Essentials repo with the fix.

[cocopon]

Released in 4.0.2, thank you for your contribution! (and I'll do merge your PR with plugin-essentials later)