ramnathv / htmlwidgets

HTML Widgets for R
http://htmlwidgets.org
Other
792 stars 205 forks source link

Binding resize method is never called. #456

Closed derpylz closed 1 year ago

derpylz commented 1 year ago

Dear htmlwidgets team,

In version 1.6.0, in the RStudio viewer, the resize method of the binding is never called because the sizeObj.getWidth() and sizeObj.getHeight() functions always return the initial height and width of the element.

This is most likely caused by the change in commit 479cfe5cc871434e726b70cd3ef9c17c6fe0b84e. In lines 299-304 and 310-315:

var rect = cel.getBoundingClientRect();

return {
  getWidth: function() { return rect.width; },
  getHeight: function() { return rect.height; }
};

rect is always the boundingClientRect of the element when it was first called, so rect.width and rect.height never update.

And because the resizeHandler checks if the width or height have changed from the last values, before calling the resize method of the binding, this never happens.

I've tested this with the example widget (using htmlwidgets::scaffoldWidget("mywidget")) in versions 1.5.4 and 1.6.0. Version 1.5.4 contains the old size calculation using

getWidth: function() { return cel.offsetWidth; },
getHeight: function() { return cel.offsetHeight; }

and it correctly calculates the size and calls the resize method. In version 1.6.0 it does not work.

This issue only appears in the Rstudio viewer and not in shiny, as far as I've tested. This makes sense, as the viewer uses separate functions for calculating the dimensions.

I hope this helps, let me know, if I should create a pull request with a fix.

derpylz commented 1 year ago

I've created an example htmlwidget for quickly testing and verifying this issue: https://github.com/derpylz/testhtmlwidgets160

cpsievert commented 1 year ago

Yikes, thank you for reporting this!

Flugcojt commented 1 year ago

I'm not sure if it caused by the same reason, but on my machine 1.5.4 produces different sizing results than 1.6.2.

I have used test repo from @derpylz.

image

image