search

cocopon / tweakpane

:control_knobs: Compact GUI for fine-tuning parameters and monitoring value changes
https://tweakpane.github.io/docs/
MIT License
3.41k stars 85 forks source link

SVGs Not Scaling Correctly #584

Closed kitschpatrol closed 6 months ago

kitschpatrol commented 7 months ago

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.

Tweakpane Scale Issue

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:

Tweakpane Scale Issue Fix

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 commented 7 months ago

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

cocopon commented 7 months ago

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 commented 7 months ago

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

cocopon commented 6 months ago

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