Premium support for our pure JavaScript UI components


Post by jjoshua »

Hello
We've noticed that there is an issue when you are undoing a cut operation. This seems to only be a problem at the top level of a tree grid.
I've attached a video of the bug. I was able to reproduce this on your tree grid demo, using this code:

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

class Gate extends GridRowModel {

    static get fields() {

        return [

            {

                name: 'capacity',

                type: 'number'

            },

            'domestic',

            'airline',

            'manager'

        ];

    }

}



// Transform a parent node to a leaf node when all its children are removed

Gate.convertEmptyParentToLeaf = true;



let tree = new TreeGrid({



selectionMode: {row: true, checkbox: {hideable: false}},

    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 }

        // 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,

    stm: new StateTrackingManager({ disable: false, autoRecord: true }),

listeners: {

                    change: event => {tree.focusCell({record: event.records[0]})}

}

},



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 b-fa-angle-double-down',

        text: 'Expand all',

        onAction: () => tree.expandAll()

    },

    {

        type: 'button',

        ref: 'collapseAllButton',

        icon: 'b-fa b-fa-angle-double-up',

        text: 'Collapse all',

        onAction: () => tree.collapseAll()

    },

    {

        type: 'button',

        text: 'Undo',

        onAction: () => {

            tree.store.stm.undo();

        }

    },

    {

        type: 'button',

        text: 'Redo',

        onAction: () => {

            tree.store.stm.redo();

        }

    },

    {

        type: 'button',

        text: 'delete',

        onAction: () => {

            tree.store.remove(tree.selectedRecords);

        }

    }

]

});





tree.store.stm.enable();
Attachments
Screen Recording 2023-04-28 at 09.18.38.mov
(4.54 MiB) Downloaded 26 times

Post by marcio »

Hey jjoshua,

Thanks for the report and example, I created a ticket to check/fix that https://github.com/bryntum/support/issues/6673

Best regards,
Márcio


Post by nickolay »

Hi @jjoshua. It seems this exception is caused by this listener in your code:

        listeners : {
            change : event => {
                tree.focusCell({ record : event.records[0] });
            }
        }

It tries to focus the non-existing cell. The flow is as follows:

1) The store is loaded with data. Stm transaction for that is created.
2) Some records are marked for "Cut" operation with CTRL+X (no actual changes in the data happens yet, because there's no CTRL+V)
3) Undo is clicked, reverting the store load transaction. The store becomes empty, the view becomes empty too.
4) Listener is trying to focus a non-existing cell.

Please verify it on your end?


Post by jjoshua »

Hi @nickolay

I have removed the listener but I still see the same issue. In the video I attached, the grid starts with 2 airports at the top and 5 gates below the airports. I then cut the 5 gates and paste them between the 2 airports. When I click undo, I expect all 5 gates to return to the bottom of the grid, but only 1 gate does and 4 gates remain between the 2 airports. The grid doesn't appear empty at any point so I don't think it matches the flow you described.

Could this issue be caused by something else?

Thanks for your help


Post by nickolay »

Did you attach a new video? Or you mean in the old one? In the old one it seems there's no "paste" operation, only "cut".


Post by jjoshua »

Yes I was referring to the video on my first post. Let me describe the issue in words as well. In a tree grid, if you have multiple top level records and you use the cut operation to reorder these records, when you use undo, it will not undo all the records that were cut, only one record. For example if I have rows in this order (top to bottom) [ 1 2 3 4 5 ] and cut the middle rows to the bottom so that I now have this [ 1 5 2 3 4 ], when I click undo, I am left with [1 2 5 3 4] because not all the rows that were cut were restored to the original place.

I hope that makes more sense.


Post by nickolay »

Ah, sorry, the videos in the forum thread and the ticket are different - the video in the ticket (on github) demonstrates the scenario I was describing. I'll be checking your scenario now.


Post by nickolay »

Ok, please see the video I've posted in the ticket - it seems the issue is not reproducible. Please verify on your end using the latest code (5.3.5 or preferably nightly build)?


Post by jjoshua »

Please see the video attached to this message. I've recorded another video with audio where I have explained the issue more clearly. I am using the same code on 5.3.5 demo and I still see this issue. I also noticed that the same issue happens when using drag and drop instead of cut-paste. To reproduce this issue you must only use top level items.

Thanks for you help and sorry for the confusion.

Attachments
Screen Recording 2023-05-25 at 10.45.43.mov
(11.45 MiB) Downloaded 22 times

Post by nickolay »

Thank you for clarifications, I'll be checking it soon.


Post Reply