Undo does not work when reparenting to the top of the tree grid

[taauntik]

Forum Post

Hi,

We have found a bug with the state tracking manager. When dragging records to the top of the tree grid, it does not track the change.

Select "Gate 3" record
Drag it to the very top of the grid so that it is above "Kastrup Airport"
Press Undo
Expected behaviour is the record goes back to where it was originally. What actually happens is nothing.

This is reproducible in the Tree Grid demo: https://www.bryntum.com/products/grid/examples/tree/

We made a few changes to allow 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();