BTMorton / angular2-grid

A drag/drop/resize grid-based plugin directive for angular2
https://bmorton.co.uk/angular/
MIT License
354 stars 159 forks source link

Setting sizey programmatically effects the order of other grid items #306

Open madnaelo opened 4 years ago

madnaelo commented 4 years ago

Setting sizey programmatically of one grid item effects the order of other grid items randomly. This happens only if the items are already displayed.

For reproducing: Use demo source from angular2-grid. And add the following methods with some event of your choice:

      expandWidget(myWidget: any) {
          myWidget.gridItemConfig.sizey = 10;
      }

      collapseWidget(myWidget: any) {
          myWidget.gridItemConfig.sizey = 1;
      }
madnaelo commented 4 years ago

I have employed a workaround fix for that. That is, disable the collision detection method.

expandWidget(myWidget: any) {
    // disable the collision detection of angular2-grid's library
    const getCollisionMethod = NgGrid.prototype['_getCollisions'];
    NgGrid.prototype['_getCollisions'] =
      function (pos: NgGridItemPosition, dims: NgGridItemSize) {
        return [];
      }

    // your logic
    myWidget.gridItemConfig.sizey = 10;

    // re-enable the collision detection
    setTimeout(() => {
        NgGrid.prototype['_getCollisions'] = getCollisionMethod;
    }, 100);
}

NOTE: this is only suitable for expand/collapse type of functionality. While For resize and drag/drop it might cause other problems