Emit @resized whenever pixel width/height changes

[pmorch]

Until now, @resized was only emitted when the user "manually" resized the grid
items. Not if e.g. the user changes the width the window, which causes w and h to stay
the same, but the width in pixels changes.

With this commit, all changes to GridItem-s that cause width and
height to change (in pixles) also cause @resized to be emitted.

About Whether to $emit('resized'....) or Some Other Event Name

Here I'm re-using the @resized event name, because it is actually an event that occurs when the GridItem resizes in pixels.

But I understand the counter-argument that says: This should be a different event, because it doesn't occur when the user resizes a GridItem (with the mouse) but when the GridItem resize indirectly, e.g. because of a window resize.The doc for the existing resize event is:

Resize event

Every time an item is being resized and changes size

    /**
     * 
     * @param i the item id/index
     * @param newH new height in grid rows 
     * @param newW new width in grid columns
     * @param newHPx new height in pixels
     * @param newWPx new width in pixels
     * 
     */
    resizedEvent: function(i, newH, newW, newHPx, newWPx){
        console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
    },

In my opinion that is ambiguous and could be read either way. And I decided that since newHPx and newWPx changes, emitting a @resized event is appropriate. It does mean that current listeners for the @resized event will get events under more circumstances than today, though.

We could also add an extra parameter to the event, e.g. draggedResize which is true or false so event recipients can determine whether the cause was a drag operation or an indirect operation.

If the general consensus is for another event name, I'll change the name of the event. What made me abandon this approach was that I couldn't come up with a better name for the event.

[pmorch]

PRs #336 and #337 together allow for keeping legacy HTML/javascript contents in a GridItem, where the content needs to be redrawn with the width or height changes. (I'm looking at you, HighCharts).

See vue-grid-layout static width-height - CodeSandbox for these two PRs working together.

[gmsa]

Using the same event name for now, thanks!

[pmorch]

Hi @gadzan,

The resize event is emitted when resize starts. The resized event is emitted when resizing is finished. This example illustrates wonderfully when resize and resized are emitted. They are clearly distinguishable in that example.

In this PR resize was untouched. However, as discussed above, the resized event (with d) is now also emitted newHPx and newWPx changes, e.g. when you resize the browser window. And no, as it currently is, it is not possible to distinguish between the "old" and "new" resized events. I specifically mentioned/documented/discussed this in the PR before it was accepted. As far as I remember, I think it would be easy to add a draggedResize field to the event to be able to distinguish between them.

Both before and after this PR, if the user initiates the resize by dragging a handle on one of the grid items, both resize and resized are emitted.

If the a resize of the grid items occurs because of other factors, resized is emitted without an initial resize .

Does that make it more clear?

Doesn't listening to resized do what you want; notify you after the resize is settled?