Angular-gridster2: Granular Resize event on GristerItem

[ronnyek]

I'm including a component into the the gridster item, and need to effectively tell it to recompute size while the gridster item gets resized. I can subscribe to the the global onItemResized() event, but dont really have a great way to get access to my inner component from that event. I (perhaps falsely) assume if I can bind to an event on the gridsteritem level, I'd have some way trigger an event on my component within;

It also seems like its updating change only after you drop... which I think is usually fine, but if I want the compoennt in the gridster item to kinda fit the resized gridsteritem. Is there a way to subscribe to get updates as the dragging during resizing?

[CollinGraf314]

Possibly related stackblitz:
https://stackblitz.com/edit/angular-xjdard
https://angular-xjdard.stackblitz.io

I hope this helps.

[ronnyek]

I was thinking probably something more along the lines of this:
https://github.com/ronnyek/angular-gridster2/commit/22585c7b6f7ba7b3a96cccafc9794b5d2a1053d0

@tiberiuzuld is there any reason why this would be a bad idea? It does work, and definitely helps me more easily tie resize events in my UI.

[inorganik]

@ronnyek I think you should make a pull request because this is exactly what we need! Thanks.

The problem with the current implementation, is that itemResizedCallback doesn't give us a reference to the item actually passed - so I am passing an array of an abstract class that holds a GridsterItem property, but from the provided item reference I can't access other arbitrary properties or functions of my abstract class. So we can't do anything with it in the context of the item.

In @CollinGraf314's example, he is only using 1 component which is filling the entire grid. This example couldn't be applied when you have 2, 3, 4, etc items in the grid, which is the point of a grid.

[inorganik]

Here is the solution I came up with, given an abstract class Widget. Assign itemResize to your itemResizeCallback in your Gridster config.

itemResize(item: GridsterItem, itemComponent: GridsterItemComponentInterface) {
    const widget: Widget[] = this.dashboardWidgets.filter(widg =>
      (widg.gridsterItemData.x === item.x &&
        widg.gridsterItemData.y === item.y &&
        widg.gridsterItemData.cols === item.cols &&
        widg.gridsterItemData.rows === item.rows)
    );
    // widget const will only contain 1 widget, but itemResize gets called
    // for each resized item.
    widget.map(widg => widg.updateSize(itemComponent));
  }

Then you need only implement a public method updateSize in your Widget class. From there you can do things in the context of the widget.

[CollinGraf314]

@inorganik In my example it is true I am only using a single grid element, but it does not fill up the entire grid unless you looked at the screen through a view-port smaller than 640px, in which case the default angular-gridster mobile breakpoint was active and the grid was simply listing items. You can add multiple elements to my example and it will still work the same.

In my example, the gridster config option itemResizeCallback: this.itemResize.bind(this) allows me to call my itemResize function within the scope of my component and thus have access to all of my components variables, which means there is no need for creating an abstract class or calling another class function.

[CollinGraf314]

closing due to inactivity on thread.