Updating slot content does not recalculate auto width/height

[chrisj74]

Hi,

Firstly thanks for the great component.

I have just installed 2.2.0 and have been trying out the auto width and height properties. My use case is an embedded tinymce text editor. It starts with an auto-size so the container grows as you type. Then when it is resized the width and height become numeric values. Very similar to PowerPoint or other rich editor interfaces.

Everything is fine until a resize is initiated. The VDR container snaps to a very small size (2px x 2px), this seems to be the initial size before the editor content is loaded/updated.

I can see that when the vdr component is mounted it does some dimension calculation taking auto into account, but there is nothing I can see that does any recalculation either in response to slot updates or prior to handling resize.

I have tried setting the minHeight/minWidth with and without the width/height using the onResizeStart callback, but this does not help.

Happy to help get this sorted, but would need some direction about the best way to resolve.

Thanks

[chrisj74]

Hi, I have fixed this locally in my fork.

Do you have a way to PR?

[mauricius]

Ehy @chrisj74 sorry these days I'm too busy to check issues. Sure PRs are always welcome, please make sure to add also tests for it. How did you solve this issue?

[chrisj74]

Hi @mauricius , I'll look at adding a test. The issue was solved by recalculating the dimensions on the mousedown handler.

Where the w/h was set to auto the right and bottom were not updated after the wrapper contents change. So I abstracted the dimension calculations into their own method, called it from the mounted hook and recalled it from the handleDown method wrapped in a check for the auto value of w or h.

This recalculates the right and bottom properties correctly before calling the resize method.

I will look at

it('should fallback to numeric values for width and height when the component is resized', function (done) {

as this test does not cater for the change in width after the mounted hook has fired.

Anyway, thanks for the great library, I will do my best to get the test written.

Commit is here:

https://github.com/chrisj74/vue-draggable-resizable/commit/431740630c56fa8f344d140c54d72603c3763c26