Undo not updating node to right position

[marciogurka]

Forum post

Using the same sample code I shared above:

• Move Gates 1 to 4 to the root level
• Select "Gate 4" and parent "Gates 6-10"
• Drag the selected rows to the top of the grid
• Press undo

import { StringHelper, StateTrackingManager, TreeGrid, GridRowModel } from '../../build/grid.module.js?470766';
import shared from '../_shared/shared.module.js?470766';

class Gate extends GridRowModel {
    static get fields() {
        return [
            {
                name : 'capacity',
                type : 'number'
            },
            'domestic',
            'airline',
            'manager'
        ];
    }
}

class Terminal extends GridRowModel {
    static fields = [
        'lounges',
        'concourses'
    ];
}

// Transform a parent node to a leaf node when all its children are removed
Gate.convertEmptyParentToLeaf = true;


const tree = new TreeGrid({

    appendTo : 'container',

    features : {
        cellEdit   : true,
        filter     : true,
        rowReorder : true,
        stripe     : true
    },

    loadMask : 'Loading tree data...',

    columns : [
        { text : 'Id', field : 'id', width : 40, editor : false },
        { text : 'ParentIndex', field : 'parentIndex', width : 40, hidden : true },
        {
            text        : 'Name',
            field       : 'name',
            flex        : 3,
            type        : 'tree',
            touchConfig : { editor : false },
            htmlEncode  : false,
            renderer({ value, record, row }) {
                if (record instanceof Terminal) {
                    row.addCls('terminal');
                    return `${StringHelper.encodeHtml(value)}<div class="lounge-list">
                        <div>Lounges</div>
                        <ul>
                            ${record.lounges?.map(name => `<li>
                                <i class="b-fa b-fa-martini-glass"></i>${StringHelper.encodeHtml(name)}
                            </li>`).join('')}
                        </ul>
                    </div>`;
                }

                // Have to wrap in a div to not get assigned as a text-node, which would render O`Hare as `O&39;Hare`
                return `<div>${StringHelper.encodeHtml(value)}</div>`;
            }
            // You can customize expand/collapse icons
            // expandIconCls   : 'b-fa b-fa-plus-square',
            // collapseIconCls : 'b-fa b-fa-minus-square'
        },
        { type : 'aggregate', text : 'Capacity', field : 'capacity', flex : 1 },
        { text : 'Domestic', field : 'domestic', flex : 1 },
        { text : 'Airline', field : 'airline', flex : 1 },
        { text : 'Responsible<br/>Manager', field : 'manager', width : 100, htmlEncodeHeaderText : false }
    ],

    store : {
        modelClass : Gate,
        readUrl    : 'data/kastrup-airport.json',
        autoLoad   : true,
        // The default model is a Gate (see above) and in this createRecord method below, we can decide at runtime based
        // on the data which model class to use. This is useful when your record types aren't homogenous.
        createRecord(data) {
            let modelClass = this.modelClass;
            if (data.type === 'terminal') {
                modelClass = Terminal;
            }
            return new modelClass(data, this);
        }
    },

    tbar : [
        {
            type        : 'button',
            ref         : 'customButton',
            icon        : 'b-fa-folder-open',
            pressedIcon : 'b-fa-plane',
            text        : 'Use custom tree icons',
            toggleable  : true,
            onToggle({ pressed }) {
                tree.store.readUrl = 'data/' + (pressed ? 'ohare-airport.json' : 'kastrup-airport.json');
                tree.element.classList[pressed ? 'add' : 'remove']('ohare-airport');
                tree.store.load();
            }
        },
        {
            type     : 'button',
            ref      : 'expandAllButton',
            icon     : 'b-fa-angle-double-down',
            text     : 'Expand all',
            onAction : () => tree.expandAll()
        },
        {
            type     : 'button',
            ref      : 'collapseAllButton',
            icon     : 'b-fa-angle-double-up',
            text     : 'Collapse all',
            onAction : () => tree.collapseAll()
        },
 {
            type     : 'button',
            text     : 'Undo',
            onAction : () => { 
console.log(tree.store.stm.canUndo);
tree.store.stm.undo();


}
        },
        '->',
        {
            ref     : 'selectionModeButton',
            text    : 'Selection configuration',
            tooltip : 'Configure tree-related selectionMode settings',
            icon    : 'b-fa-cog',
            menu    : {
                items : [{
                    text    : 'includeChildren',
                    checked : false,
                    tooltip : 'Activate to select all descendants when their parent gets selected',
                    onToggle({ checked }) {
                        tree.selectionMode.includeChildren = checked;
                    }

                }, {
                    text    : 'includeParents = all',
                    ref     : 'parentsAll',
                    checked : false,
                    tooltip : 'Activate to select parent when all its descendants gets selected',
                    onToggle({ menu, checked }) {
                        if (!menu._isSettingChecked) {
                            tree.selectionMode.includeParents = checked;

                            if (checked) {
                                menu._isSettingChecked = true;
                                menu.widgetMap.parentsSome.checked = false;
                                delete menu._isSettingChecked;
                            }
                        }
                    }
                }, {
                    text    : 'includeParents = some',
                    ref     : 'parentsSome',
                    checked : false,
                    tooltip : 'Activate to select parent when some of its descendants gets selected',
                    onToggle({ menu, checked }) {
                        if (!menu._isSettingChecked) {
                            tree.selectionMode.includeParents = checked ? 'some' : false;
                            if (checked) {
                                menu._isSettingChecked = true;
                                menu.widgetMap.parentsAll.checked = false;
                                delete menu._isSettingChecked;
                            }
                        }
                    }
                }]
            }

        }
    ]
});


const stm = new StateTrackingManager({
    autoRecord : true
});
stm.addStore(tree.store);
stm.enable();

Reordering.and.undo.bug.mov