Resized event is called too many times

[Tropicalista]

Software version (please complete the following information):

• Browser [ chrome]
• Vue Version [ 2.5.7]
• vue-grid-layout Version: [2.3.3]

Describe the bug
In documentation you said that resizedEvent is called 'Every time an item is finished being resized and changes size'.

However after some tests it seems that resized event is called too many times.

For example on layout creation and also when I start resizing and during resizing.

To Reproduce
Steps to reproduce the behavior:

1. Create a simple layout
2. Add a resized event and check the console

Expected behavior
ResizedEvent should be called when user stop to resize and lift the resize handler. Otherwise I don't have any clue when a resize action is ended.

A solution can be to have a resizeStop event.

Check this: https://codesandbox.io/s/vue-template-1vcqv?fontsize=14

[Tropicalista]

I want also add that a moved property is added on layout updated event.

A solution could be to add a resized property too.

[mattgreenfield]

I'm finding this event a little confusing too. Really I'd like it to fire when the user finishes resizing the grid item so that I can save the new layout in my database.
It currently fires when the page resizes and when the page mounts.

[gadzan]

I'm finding this event a little confusing too. Really I'd like it to fire when the user finishes resizing the grid item so that I can save the new layout in my database.
It currently fires when the page resizes and when the page mounts.

Same here. Check this, 8886f3a
it looks like this commit makes 'Resize' and 'Resized' event no difference.

[pmorch]

This was introduced by PR #337, that I submitted. I included a discussion there about the merits of the same vs different event names. Perhaps the wrong choice was made there. Perhaps when resizing the window another event entirely should be emitted, or perhaps the event data should contain a flag indicating why the event was fired. At least I explicitly mentioned this in the PR :-)

I tried to look at https://codesandbox.io/s/vue-template-1vcqv?fontsize=14

SyntaxError
expected expression, got '<'

Is there a working codesandbox.io?

However, example 2 is working, and yes, two resized events are emitted for each grid item.

The problem before was that only the first one was emitted; before the grid-item got its final size.

[gmsa]

Yes, looking back now probably not the smartest move keeping the event with the same name. I'll work on changing it in the next release.

[pmorch]

There is at least one more problem. The resized event contains pixel sizes. Either they should be correct or they should be omitted. As it is now, the pixel sizes in the first batch of resized events are just plain wrong.

Let's say we rename the events I introduced to pixelresized events. Then first there would be resized events with bogus pixel sizes and then pixelresized events with correct pixel sizes.

I think the real problem is that two sets of events are emitted during mounting. There should be a single set of resized (or pixelresized) events emitted with correct pixel sizes, and it should be emitted after the layout has stabilized.

After mount, it would be fine if pixelresized events are emitted when only pixel sizes change.

[mattgreenfield]

If it helps at all, here's my use cases for 2 different types of resize event;

1. USER RESIZE: When the user drags the corner of a grid item and resizes, make an API call to update the database.
   • I don't want this to run at any other time, ie not on page mount or page resize.
   • I only need this to fire on mouse up and not at intervals whilst the user is dragging
2. RESIZE: When the container width changes (could be the window or any container element) I need to tell some of the children to update widths and re-render. e.g. I'm using Leaflet for a map and when the grid item gets bigger I need to tell Leaflet to download and render more of the map.
   • I also want this to run when the user has resized the grid item (point no.1)
   • But I may want to run this (debounced) at intervals whilst the user is still dragging the corner around

I can't personally see a use case for either of these firing on page load / first mount.

[pmorch]

@mattgreenfield: Don't you need to initialize Leaflet with an initial pixel size? If no events fire at initial load, how do you know when to initialize leaflet and with which pixel size?

[rin4ik]

@gmsa is there any possibility to totally disable resized event?

[gmsa]

@rin4ik what exactly is the problem you're having with the event?

[rin4ik]

@gmsa I am using a layout-updated event only for changing widgets. I am worried about performance because a lot of events fired on initial load and afterward when dragging and resizing grid items. would be great to have a possibility to disable those events if they are not used for the layout-updated event. for my use case, I only need breakpoint-changed and layout-updated events. this would be a great performance boost

[gmsa]

Unless you have hundreds of widgets, shouldn't be a problem