Gridstack.js: Removendo o widget pai da grade aninhada da última linha da grade principal, fazendo com que alguns dos widgets da grade principal perdessem suas posições

Oi,

Eu experimentei um comportamento estranho ao redimensionar e remover uma grade aninhada de sua grade pai.

Eu tenho duas grades, uma delas está aninhada no item específico da outra.
É possível adicionar e remover widgets em ambas as grades marcando / desmarcando algumas caixas de seleção.
Quando eu removo widgets da grade aninhada, eu redimensiono seu widget de grade pai para sempre ter no máximo a altura da grade aninhada.
Quando a grade aninhada fica vazia, ela deve ser removida da grade principal.

Na verdade tudo funciona bem até um caso específico:

1. a grade aninhada está na última linha da grade principal
2. o redimensionamento da grade aninhada é feito com grid.resize ()
3. remova o último widget da grade aninhada com gridNested.removeWidget ()
4. remova o widget pai da grade aninhada da grade principal com grid.removeWidget ().

Quando essas etapas são concluídas, os últimos widgets da grade principal perderam sua posição e pularam para a primeira linha da grade principal - todos os seus atributos de dados permanecem corretos, apenas sua posição fica errada (topo: 0, inferior: altura da grade ) Quando eu adiciono novamente a grade aninhada, tudo volta para a posição correta, mas depois de remover a grade aninhada novamente, a coisa estranha acontece novamente. Uma vez, quando eu executei as etapas acima e tento remover os widgets da grade principal, esses widgets também continuam flutuando para a primeira linha e depois voltam depois de adicionar um widget. Quando eu movo a grade aninhada para qualquer lugar diferente da última linha, o reposicionamento incorreto não acontecerá.

Conforme investiguei, o estranho reposicionamento não acontecerá apenas depois que eu redimensionei uma vez o widget pai da grade aninhada, até que a adição e remoção de widgets em ambas as grades funcione bem. Então parece que o redimensionamento atrapalha as coisas.

Infelizmente, não posso fornecer um violino que funcione, pois isso é apenas uma parte de um script maior, só posso anexar capturas de tela aprovadas de como ele se parece.

Antes de remover a grade aninhada (com bordas):

Depois de remover a grade aninhada, alguns dos outros widgets desapareceram de sua posição original e flutuaram para a primeira linha da grade principal, enquanto seu lugar é mantido na grade na posição correta (espaço em branco vazio na parte inferior):

Minhas grades são inicializadas com estas opções:

grid = $('#grid.grid-stack').gridstack({
            width: 2,
            cellHeight: 84,
            verticalMargin: 4,
            animate: true,
            disableOneColumnMode: true,
            height: 0
}).data('gridstack');        

gridNested = $('#gridNested.grid-stack').gridstack({
            width: 2,
            cellHeight: 80,
            verticalMargin: 4,
            animate: true,
            disableOneColumnMode: true,
            float: true,
            height: 0
}).data('gridstack');

A estrutura HTML é semelhante a esta:

<div id="grid"  class="grid-stack grid-stack-2">
    <div id="element1" class="grid-stack-item element nestedblock" data-id="1" data-gs-width="2" data-gs-height="1" data-gs-min-width="2" data-gs-max-width="2" data-gs-max-height="8" data-gs-y="0" data-gs-x="0">
         <div class="grid-stack-item-content">
             <div id="gridNested" class="grid-stack grid-stack-2">
                 <div id="element20" class="grid-stack-item element" data-id="20" data-gs-width="1" data-gs-height="1" data-gs-min-width="1" data-gs-max-width="2" data-gs-max-height="1" data-gs-y="0" data-gs-x="0">
                     <div class="grid-stack-item-content">
                        <!--contents-->
                    </div>
                </div>
                <div id="element21" class="grid-stack-item element" data-id="21" data-gs-width="1" data-gs-height="1" data-gs-min-width="1" data-gs-max-width="2" data-gs-max-height="1" data-gs-y="0" data-gs-x="1">
                     <div class="grid-stack-item-content">
                        <!--contents-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="element2" class="grid-stack-item element" data-id="2" data-gs-width="1" data-gs-height="1" data-gs-min-width="1" data-gs-max-width="2" data-gs-max-height="1" data-gs-y="1" data-gs-x="0">
         <div class="grid-stack-item-content">
             <!--contents-->
         </div>
    </div>
    <div id="element3" class="grid-stack-item element" data-id="3" data-gs-width="1" data-gs-height="1" data-gs-min-width="1" data-gs-max-width="2" data-gs-max-height="1" data-gs-y="1" data-gs-x="1">
         <div class="grid-stack-item-content">
             <!--contents-->
         </div>
    </div>
</div>

Eu redimensiono o widget pai da grade aninhada desta maneira:

function resizeNestedParentWidget(){
    var nestedParentWidget = $('#grid .grid-stack-item.nestedblock');
    var nestedGridHeight = parseInt($('#gridNested').attr('data-gs-current-height'));
    var nestedParentWidgetCurrentHeight = parseInt($(nestedParentWidget).attr('data-gs-height'));
    if(nestedGridHeight < nestedParentWidgetCurrentHeight){
        grid.resize(nestedParentWidget,null,nestedGridHeight);
    }
}

Eu removo widgets da grade aninhada desta forma:

![gridstack1](https://cloud.githubusercontent.com/assets/15252130/25693244/9b3f9ac8-30a8-11e7-9621-1c13cfe5acdb.jpg)

var elem = $('#grid #element'+elemID);
gridNested.removeWidget(elem);

if($('#gridNested .grid-stack-item').length < 1){
    grid.removeWidget($('#grid .grid-stack-item.nestedblock'));
} else {
    resizeNestedParentWidget();
}

O que estou fazendo de errado? Eu uso mal alguma coisa? Ou encontrei um bug? :)

Desde já, obrigado.