Issue with commandManager.initBatchCommand() and commandManager.storeBatchCommand() not storing all actions in a single batch in the undo stack

[goyaljai1]

Introduction

I'm using commandManager.initBatchCommand() and commandManager.storeBatchCommand() to group multiple actions into a single batch command in the undo stack. However, I'm encountering an issue where not all actions are being stored in the undo stack as a batch when I use these functions. Instead, only some of the actions are being saved, while others are missing from the batch command.

When I check commandManager.undoStack without using the batch command functions, all actions are recorded as separate commands, which confirms that they are being processed individually. My goal is to store these actions together as a single batch command in the undo stack.

Is there something I might be missing in the implementation of initBatchCommand() and storeBatchCommand() that would allow all actions to be captured as a single batch? Any guidance or suggestions would be appreciated!

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS, JointJS+

[kumilingus]

Can you give an example of when it doesn't behave the way you expect?

[goyaljai1]

I'm working on a container shape that can toggle its visibility by clicking a button on it. The toggleVisibility() function handles this toggling, and it may run recursively if there are nested containers.

To allow the entire toggle operation to be stored as a single action in the undo stack, I'm trying to use commandManager.initBatchCommand() and commandManager.storeBatchCommand() to capture it in one step. However, when I use these functions, not all actions are getting recorded. On the other hand, if I don't use these functions, all actions are successfully stored in the undo stack.

Here is the implementation:

this.paper.on('element:button:pointerdown', (elementView, evt) => {
          this.commandManager.initBatchCommand(); 
          this.toggleVisibility(elementView, evt);
         this.commandManager.storeBatchCommand()
        });

// Function to handle visibility toggling
    toggleVisibility(elementView: any, evt: any, visibilityState = '') {
        evt.stopPropagation();
        const model = elementView.model;
        let visibility;
        if (visibilityState === '')
            visibility = model.attr('buttonLabel/text') === '–' ? 'hidden' : 'visible';
        else visibility = visibilityState

        if (visibility === 'hidden') {
            if (model.attr('visibility/status') != 'hidden') {
                model.attr('originalDimensions/width', model.get('size').width)
                model.attr('originalDimensions/height', model.get('size').height)
            }
        }
        else {
            model.resize(model.attr('originalDimensions/width'), model.attr('originalDimensions/height'));
        }

        model.attr('visibility/status', visibility);

        const buttonText = visibility === 'visible' ? '–' : '＋'; //--
        const embeddedItemIds = model.get("embeds");


        let allEmbeddedIdsSet = this.getAllEmbeddedIds(model);
        allEmbeddedIdsSet = allEmbeddedIdsSet.add(model.id)
        if (embeddedItemIds) {
            const embeddedItemIdsSet = new Set(embeddedItemIds);
            const filteredEmbeddedItems: any[] = [];

            // Function to update visibility for a single item
            const updateVisibility = (item: any, visibility: string) => {
                this.selection.collection.remove(item);
                const attributes = item.attr();
                for (const key in attributes) {
                    item.attr(${key}/visibility, visibility);
                }
            };

            // Collect embedded items, and if they are containers, call toggleVisibility recursively
            this.graph.getElements().forEach(element => {
                if (embeddedItemIdsSet.has(element.id)) {
                    if (element.attributes['type'] === 'app.Container' || element.attributes['type'] === 'app.VerticalContainer' || element.attributes['type'] === 'app.HorizontalContainer') {
                        this.toggleVisibility(element.findView(this.paper), evt, visibilityState = visibility);
                    }
                    filteredEmbeddedItems.push(element);

                }
            });

            // Update visibility of links
            this.graph.getLinks().forEach(link => {
                const targetId = link.attributes['target'].id;
                const sourceId = link.attributes['source'].id;
                const isTargetInEmbedded = embeddedItemIdsSet.has(targetId);
                const isSourceInEmbedded = embeddedItemIdsSet.has(sourceId);

                if ((isTargetInEmbedded && isSourceInEmbedded) || (isSourceInEmbedded && targetId === model.id) || (allEmbeddedIdsSet.has(targetId) && allEmbeddedIdsSet.has(sourceId)) || (allEmbeddedIdsSet.has(sourceId) && allEmbeddedIdsSet.has(targetId))) {
                    filteredEmbeddedItems.push(link);
                }
                if ((isTargetInEmbedded && !isSourceInEmbedded && sourceId !== model.id) || allEmbeddedIdsSet.has(link.attributes['originalConnections'].targetId)) {

                    if (link.attributes['originalConnections'].targetId === '') {
                        link.attributes['originalConnections'].targetId = targetId;
                    }
                    if (visibility === 'hidden') {
                        link.target(model);
                    } else {
                        const storedTarget = link.attributes['originalConnections'].targetId;
                        if (storedTarget != '') {
                            const targetElement = this.graph.getCell(storedTarget!);
                            if (targetElement) {
                                link.target(targetElement);
                                link.attributes['originalConnections'].targetId = ''
                            }
                        }
                    }
                }
                if ((isSourceInEmbedded && !isTargetInEmbedded && targetId !== model.id) || allEmbeddedIdsSet.has(link.attributes['originalConnections'].sourceId)) {
                    if (link.attributes['originalConnections'].sourceId === '') {
                        link.attributes['originalConnections'].sourceId = sourceId
                    }
                    if (visibility === 'hidden') {
                        link.source(model);
                    } else {
                        const storedSource = link.attributes['originalConnections'].sourceId;
                        if (storedSource != '') {
                            const sourceElement = this.graph.getCell(storedSource!);
                            if (sourceElement) {
                                link.source(sourceElement);
                                link.attributes['originalConnections'].sourceId = ''
                            }
                        }
                    }
                }
            });

            // Update visibility for all collected items
            filteredEmbeddedItems.forEach(item => {
                updateVisibility(item, visibility);
            });
        }

        model.attr('label/visibility', visibility)
        model.attr('buttonLabel/text', buttonText);

        // Resize model based on visibility
        if (visibility === 'hidden') {
            if (model.attributes['type'] === 'app.Container') {
                model.resize(40, 40);
            }
            else if (model.attributes['type'] === 'app.VerticalContainer') {
                model.resize(200, 150);
                model.attr('label/visibility', 'visible')
                model.attr('label/y', 15)
                model.resize(model.get('size').width, model.get('size').height / 5);
                model.attr('header/visibility', visibility)
            }
            else if (model.attributes['type'] === 'app.HorizontalContainer') {
                model.resize(200, 150);
                model.attr('label/visibility', 'visible')
                model.attr('label/y', 200 / 12)
                model.resize(model.get('size').width / 6, model.get('size').height);
                model.attr('header/visibility', visibility)
            }
            this.selection.collection.remove(model);
        } else if (visibility === 'visible') {
            if (model.attributes['type'] === 'app.VerticalContainer') {
                model.attr('label/y', model.attributes['offset'] * 75)
                model.attr('header/visibility', visibility)
            }
            if (model.attributes['type'] === 'app.HorizontalContainer') {
                // model.resize(model.get('size').width, model.get('size').height/5);
                model.attr('label/y', model.attributes['offset'] * 100)
                model.attr('header/visibility', visibility)
            }
        }

        // Hide the inspector container
        const inspectorContainer = document.querySelector('.inspector-container') as HTMLDivElement;
        if (inspectorContainer) {
            inspectorContainer.style.display = 'none';
        }
    }

[kumilingus]

What actions exactly are not stored? The commandManager does filter out redundant or void actions (e.g. if an element is added and then removed in a single batch - it's not added to the undoStack).

[goyaljai1]

Actions getting stored if I am using commandManager.initBatchCommand() and commandManager.storeBatchCommand()

[
    {
        "action": "change:attrs",
        "data": {
            "id": "7b00256c-9917-4b96-a82d-d42782def29e",
            "type": "standard.Path",
            "previous": {
                "attrs": {
                    "root": {
                        "cursor": "move",
                        "visibility": "visible"
                    },
                    "body": {
                        "d": "\n                            M calc(0.2 * w) calc(0.55 * h)\n                            Q calc(-0.01 * w) calc(0.378 * h) calc(0.25 * w) calc(0.28 * h)\n                            Q calc(0.38 * w) calc(-.02 * h) calc(0.63 * w) calc(0.23 * h)\n                            Q calc(0.9 * w) calc(0.16 * h) calc(0.87 * w) calc(0.5 * h)\n                            Q calc(0.98 * w) calc(0.735 * h) calc(0.77 * w) calc(0.73 * h)\n                            Q calc(0.56 * w) calc(0.97 * h) calc(0.33 * w) calc(0.74 * h)\n                            Q calc(0.134 * w) calc(0.8 * h) calc(0.2 * w) calc(0.55 * h)\n                            ",
                        "strokeWidth": 2,
                        "stroke": "#353535",
                        "fill": "#FFFFFF",
                        "strokeDasharray": "0"
                    },
                    "label": {
                        "textVerticalAnchor": "top",
                        "textAnchor": "middle",
                        "x": "calc(w/2)",
                        "y": "calc(h + 5)",
                        "fontSize": 11,
                        "fill": "#353535",
                        "fontFamily": "Open Sans",
                        "fontWeight": "Normal",
                        "refY": null,
                        "stroke": "#353535",
                        "strokeWidth": 0,
                        "text": "Cloud"
                    }
                }
            },
            "next": {
                "attrs": {
                    "root": {
                        "cursor": "move",
                        "visibility": "hidden"
                    },
                    "body": {
                        "d": "\n                            M calc(0.2 * w) calc(0.55 * h)\n                            Q calc(-0.01 * w) calc(0.378 * h) calc(0.25 * w) calc(0.28 * h)\n                            Q calc(0.38 * w) calc(-.02 * h) calc(0.63 * w) calc(0.23 * h)\n                            Q calc(0.9 * w) calc(0.16 * h) calc(0.87 * w) calc(0.5 * h)\n                            Q calc(0.98 * w) calc(0.735 * h) calc(0.77 * w) calc(0.73 * h)\n                            Q calc(0.56 * w) calc(0.97 * h) calc(0.33 * w) calc(0.74 * h)\n                            Q calc(0.134 * w) calc(0.8 * h) calc(0.2 * w) calc(0.55 * h)\n                            ",
                        "strokeWidth": 2,
                        "stroke": "#353535",
                        "fill": "#FFFFFF",
                        "strokeDasharray": "0",
                        "visibility": "hidden"
                    },
                    "label": {
                        "textVerticalAnchor": "top",
                        "textAnchor": "middle",
                        "x": "calc(w/2)",
                        "y": "calc(h + 5)",
                        "fontSize": 11,
                        "fill": "#353535",
                        "fontFamily": "Open Sans",
                        "fontWeight": "Normal",
                        "refY": null,
                        "stroke": "#353535",
                        "strokeWidth": 0,
                        "text": "Cloud",
                        "visibility": "hidden"
                    }
                }
            }
        },
        "batch": true,
        "options": {
            "propertyPath": "attrs/root/visibility"
        }
    },
    {
        "action": "change:attrs",
        "data": {
            "id": "0fda289e-39d9-4be0-97a0-355928bd52a6",
            "type": "app.Container",
            "previous": {
                "attrs": {
                    "body": {
                        "width": "calc(w)",
                        "height": "calc(h)",
                        "strokeWidth": 2,
                        "stroke": "#353535",
                        "fill": "transparent",
                        "cursor": "default",
                        "rx": 2,
                        "ry": 2,
                        "strokeDasharray": "0",
                        "visibility": "visible"
                    },
                    "visibility": {
                        "status": "visible"
                    },
                    "originalDimensions": {
                        "width": 200,
                        "height": 150
                    },
                    "label": {
                        "textVerticalAnchor": "middle",
                        "textAnchor": "middle",
                        "x": "calc(0.5*w)",
                        "fontSize": 11,
                        "fill": "#353535",
                        "fontFamily": "Open Sans",
                        "fontWeight": "Normal",
                        "pointerEvents": "none",
                        "strokeWidth": 0,
                        "text": "Container",
                        "visibility": "visible",
                        "y": "calc(h + 8)"
                    },
                    "button": {
                        "cursor": "pointer",
                        "ref": "buttonLabel",
                        "width": 15,
                        "height": "calc(1.5*h)",
                        "x": 5,
                        "y": 5,
                        "event": "element:button:pointerdown",
                        "fill": "#cfcfd1",
                        "stroke": "black",
                        "strokeWidth": 1
                    },
                    "buttonLabel": {
                        "pointerEvents": "none",
                        "x": 12,
                        "y": 13,
                        "textAnchor": "middle",
                        "textVerticalAnchor": "middle",
                        "fill": "black",
                        "fontSize": 8,
                        "fontWeight": "bold",
                        "text": "–"
                    }
                }
            },
            "next": {
                "attrs": {
                    "body": {
                        "width": "calc(w)",
                        "height": "calc(h)",
                        "strokeWidth": 2,
                        "stroke": "#353535",
                        "fill": "transparent",
                        "cursor": "default",
                        "rx": 2,
                        "ry": 2,
                        "strokeDasharray": "0",
                        "visibility": "visible"
                    },
                    "visibility": {
                        "status": "hidden"
                    },
                    "originalDimensions": {
                        "width": 200,
                        "height": 150
                    },
                    "label": {
                        "textVerticalAnchor": "middle",
                        "textAnchor": "middle",
                        "x": "calc(0.5*w)",
                        "fontSize": 11,
                        "fill": "#353535",
                        "fontFamily": "Open Sans",
                        "fontWeight": "Normal",
                        "pointerEvents": "none",
                        "strokeWidth": 0,
                        "text": "Container",
                        "visibility": "hidden",
                        "y": "calc(h + 8)"
                    },
                    "button": {
                        "cursor": "pointer",
                        "ref": "buttonLabel",
                        "width": 15,
                        "height": "calc(1.5*h)",
                        "x": 5,
                        "y": 5,
                        "event": "element:button:pointerdown",
                        "fill": "#cfcfd1",
                        "stroke": "black",
                        "strokeWidth": 1
                    },
                    "buttonLabel": {
                        "pointerEvents": "none",
                        "x": 12,
                        "y": 13,
                        "textAnchor": "middle",
                        "textVerticalAnchor": "middle",
                        "fill": "black",
                        "fontSize": 8,
                        "fontWeight": "bold",
                        "text": "＋"
                    }
                }
            }
        },
        "batch": true,
        "options": {
            "propertyPath": "attrs/visibility/status"
        }
    },
    {
        "action": "change:size",
        "data": {
            "id": "0fda289e-39d9-4be0-97a0-355928bd52a6",
            "type": "app.Container",
            "previous": {
                "size": {
                    "width": 200,
                    "height": 150
                }
            },
            "next": {
                "size": {
                    "width": 40,
                    "height": 40
                }
            }
        },
        "batch": true,
        "options": {}
    }
]

Actions stored in normal undo stack without using the above 2 functions:

[
    {
        "action": "change:attrs",
        "data": {
            "id": "0fda289e-39d9-4be0-97a0-355928bd52a6",
            "type": "app.Container",
            "previous": {
                "attrs": {
                    "body": {
                        "width": "calc(w)",
                        "height": "calc(h)",
                        "strokeWidth": 2,
                        "stroke": "#353535",
                        "fill": "transparent",
                        "cursor": "default",
                        "rx": 2,
                        "ry": 2,
                        "strokeDasharray": "0",
                        "visibility": "visible"
                    },
                    "visibility": {
                        "status": "visible"
                    },
                    "originalDimensions": {
                        "width": 200,
                        "height": 150
                    },
                    "label": {
                        "textVerticalAnchor": "middle",
                        "textAnchor": "middle",
                        "x": "calc(0.5*w)",
                        "fontSize": 11,
                        "fill": "#353535",
                        "fontFamily": "Open Sans",
                        "fontWeight": "Normal",
                        "pointerEvents": "none",
                        "strokeWidth": 0,
                        "text": "Container",
                        "visibility": "visible",
                        "y": "calc(h + 8)"
                    },
                    "button": {
                        "cursor": "pointer",
                        "ref": "buttonLabel",
                        "width": 15,
                        "height": "calc(1.5*h)",
                        "x": 5,
                        "y": 5,
                        "event": "element:button:pointerdown",
                        "fill": "#cfcfd1",
                        "stroke": "black",
                        "strokeWidth": 1
                    },
                    "buttonLabel": {
                        "pointerEvents": "none",
                        "x": 12,
                        "y": 13,
                        "textAnchor": "middle",
                        "textVerticalAnchor": "middle",
                        "fill": "black",
                        "fontSize": 8,
                        "fontWeight": "bold",
                        "text": "–"
                    }
                }
            },
            "next": {
                "attrs": {
                    "body": {
                        "width": "calc(w)",
                        "height": "calc(h)",
                        "strokeWidth": 2,
                        "stroke": "#353535",
                        "fill": "transparent",
                        "cursor": "default",
                        "rx": 2,
                        "ry": 2,
                        "strokeDasharray": "0",
                        "visibility": "visible"
                    },
                    "visibility": {
                        "status": "hidden"
                    },
                    "originalDimensions": {
                        "width": 200,
                        "height": 150
                    },
                    "label": {
                        "textVerticalAnchor": "middle",
                        "textAnchor": "middle",
                        "x": "calc(0.5*w)",
                        "fontSize": 11,
                        "fill": "#353535",
                        "fontFamily": "Open Sans",
                        "fontWeight": "Normal",
                        "pointerEvents": "none",
                        "strokeWidth": 0,
                        "text": "Container",
                        "visibility": "visible",
                        "y": "calc(h + 8)"
                    },
                    "button": {
                        "cursor": "pointer",
                        "ref": "buttonLabel",
                        "width": 15,
                        "height": "calc(1.5*h)",
                        "x": 5,
                        "y": 5,
                        "event": "element:button:pointerdown",
                        "fill": "#cfcfd1",
                        "stroke": "black",
                        "strokeWidth": 1
                    },
                    "buttonLabel": {
                        "pointerEvents": "none",
                        "x": 12,
                        "y": 13,
                        "textAnchor": "middle",
                        "textVerticalAnchor": "middle",
                        "fill": "black",
                        "fontSize": 8,
                        "fontWeight": "bold",
                        "text": "–"
                    }
                }
            }
        },
        "batch": false,
        "options": {
            "propertyPath": "attrs/visibility/status"
        }
    },
    {
        "action": "change:attrs",
        "data": {
            "id": "7b00256c-9917-4b96-a82d-d42782def29e",
            "type": "standard.Path",
            "previous": {
                "attrs": {
                    "root": {
                        "cursor": "move",
                        "visibility": "visible"
                    },
                    "body": {
                        "d": "\n                            M calc(0.2 * w) calc(0.55 * h)\n                            Q calc(-0.01 * w) calc(0.378 * h) calc(0.25 * w) calc(0.28 * h)\n                            Q calc(0.38 * w) calc(-.02 * h) calc(0.63 * w) calc(0.23 * h)\n                            Q calc(0.9 * w) calc(0.16 * h) calc(0.87 * w) calc(0.5 * h)\n                            Q calc(0.98 * w) calc(0.735 * h) calc(0.77 * w) calc(0.73 * h)\n                            Q calc(0.56 * w) calc(0.97 * h) calc(0.33 * w) calc(0.74 * h)\n                            Q calc(0.134 * w) calc(0.8 * h) calc(0.2 * w) calc(0.55 * h)\n                            ",
                        "strokeWidth": 2,
                        "stroke": "#353535",
                        "fill": "#FFFFFF",
                        "strokeDasharray": "0"
                    },
                    "label": {
                        "textVerticalAnchor": "top",
                        "textAnchor": "middle",
                        "x": "calc(w/2)",
                        "y": "calc(h + 5)",
                        "fontSize": 11,
                        "fill": "#353535",
                        "fontFamily": "Open Sans",
                        "fontWeight": "Normal",
                        "refY": null,
                        "stroke": "#353535",
                        "strokeWidth": 0,
                        "text": "Cloud"
                    }
                }
            },
            "next": {
                "attrs": {
                    "root": {
                        "cursor": "move",
                        "visibility": "hidden"
                    },
                    "body": {
                        "d": "\n                            M calc(0.2 * w) calc(0.55 * h)\n                            Q calc(-0.01 * w) calc(0.378 * h) calc(0.25 * w) calc(0.28 * h)\n                            Q calc(0.38 * w) calc(-.02 * h) calc(0.63 * w) calc(0.23 * h)\n                            Q calc(0.9 * w) calc(0.16 * h) calc(0.87 * w) calc(0.5 * h)\n                            Q calc(0.98 * w) calc(0.735 * h) calc(0.77 * w) calc(0.73 * h)\n                            Q calc(0.56 * w) calc(0.97 * h) calc(0.33 * w) calc(0.74 * h)\n                            Q calc(0.134 * w) calc(0.8 * h) calc(0.2 * w) calc(0.55 * h)\n                            ",
                        "strokeWidth": 2,
                        "stroke": "#353535",
                        "fill": "#FFFFFF",
                        "strokeDasharray": "0"
                    },
                    "label": {
                        "textVerticalAnchor": "top",
                        "textAnchor": "middle",
                        "x": "calc(w/2)",
                        "y": "calc(h + 5)",
                        "fontSize": 11,
                        "fill": "#353535",
                        "fontFamily": "Open Sans",
                        "fontWeight": "Normal",
                        "refY": null,
                        "stroke": "#353535",
                        "strokeWidth": 0,
                        "text": "Cloud"
                    }
                }
            }
        },
        "batch": false,
        "options": {
            "propertyPath": "attrs/root/visibility"
        }
    },
    {
        "action": "change:attrs",
        "data": {
            "id": "7b00256c-9917-4b96-a82d-d42782def29e",
            "type": "standard.Path",
            "previous": {
                "attrs": {
                    "root": {
                        "cursor": "move",
                        "visibility": "hidden"
                    },
                    "body": {
                        "d": "\n                            M calc(0.2 * w) calc(0.55 * h)\n                            Q calc(-0.01 * w) calc(0.378 * h) calc(0.25 * w) calc(0.28 * h)\n                            Q calc(0.38 * w) calc(-.02 * h) calc(0.63 * w) calc(0.23 * h)\n                            Q calc(0.9 * w) calc(0.16 * h) calc(0.87 * w) calc(0.5 * h)\n                            Q calc(0.98 * w) calc(0.735 * h) calc(0.77 * w) calc(0.73 * h)\n                            Q calc(0.56 * w) calc(0.97 * h) calc(0.33 * w) calc(0.74 * h)\n                            Q calc(0.134 * w) calc(0.8 * h) calc(0.2 * w) calc(0.55 * h)\n                            ",
                        "strokeWidth": 2,
                        "stroke": "#353535",
                        "fill": "#FFFFFF",
                        "strokeDasharray": "0"
                    },
                    "label": {
                        "textVerticalAnchor": "top",
                        "textAnchor": "middle",
                        "x": "calc(w/2)",
                        "y": "calc(h + 5)",
                        "fontSize": 11,
                        "fill": "#353535",
                        "fontFamily": "Open Sans",
                        "fontWeight": "Normal",
                        "refY": null,
                        "stroke": "#353535",
                        "strokeWidth": 0,
                        "text": "Cloud"
                    }
                }
            },
            "next": {
                "attrs": {
                    "root": {
                        "cursor": "move",
                        "visibility": "hidden"
                    },
                    "body": {
                        "d": "\n                            M calc(0.2 * w) calc(0.55 * h)\n                            Q calc(-0.01 * w) calc(0.378 * h) calc(0.25 * w) calc(0.28 * h)\n                            Q calc(0.38 * w) calc(-.02 * h) calc(0.63 * w) calc(0.23 * h)\n                            Q calc(0.9 * w) calc(0.16 * h) calc(0.87 * w) calc(0.5 * h)\n                            Q calc(0.98 * w) calc(0.735 * h) calc(0.77 * w) calc(0.73 * h)\n                            Q calc(0.56 * w) calc(0.97 * h) calc(0.33 * w) calc(0.74 * h)\n                            Q calc(0.134 * w) calc(0.8 * h) calc(0.2 * w) calc(0.55 * h)\n                            ",
                        "strokeWidth": 2,
                        "stroke": "#353535",
                        "fill": "#FFFFFF",
                        "strokeDasharray": "0",
                        "visibility": "hidden"
                    },
                    "label": {
                        "textVerticalAnchor": "top",
                        "textAnchor": "middle",
                        "x": "calc(w/2)",
                        "y": "calc(h + 5)",
                        "fontSize": 11,
                        "fill": "#353535",
                        "fontFamily": "Open Sans",
                        "fontWeight": "Normal",
                        "refY": null,
                        "stroke": "#353535",
                        "strokeWidth": 0,
                        "text": "Cloud"
                    }
                }
            }
        },
        "batch": false,
        "options": {
            "propertyPath": "attrs/body/visibility"
        }
    },
    {
        "action": "change:attrs",
        "data": {
            "id": "7b00256c-9917-4b96-a82d-d42782def29e",
            "type": "standard.Path",
            "previous": {
                "attrs": {
                    "root": {
                        "cursor": "move",
                        "visibility": "hidden"
                    },
                    "body": {
                        "d": "\n                            M calc(0.2 * w) calc(0.55 * h)\n                            Q calc(-0.01 * w) calc(0.378 * h) calc(0.25 * w) calc(0.28 * h)\n                            Q calc(0.38 * w) calc(-.02 * h) calc(0.63 * w) calc(0.23 * h)\n                            Q calc(0.9 * w) calc(0.16 * h) calc(0.87 * w) calc(0.5 * h)\n                            Q calc(0.98 * w) calc(0.735 * h) calc(0.77 * w) calc(0.73 * h)\n                            Q calc(0.56 * w) calc(0.97 * h) calc(0.33 * w) calc(0.74 * h)\n                            Q calc(0.134 * w) calc(0.8 * h) calc(0.2 * w) calc(0.55 * h)\n                            ",
                        "strokeWidth": 2,
                        "stroke": "#353535",
                        "fill": "#FFFFFF",
                        "strokeDasharray": "0",
                        "visibility": "hidden"
                    },
                    "label": {
                        "textVerticalAnchor": "top",
                        "textAnchor": "middle",
                        "x": "calc(w/2)",
                        "y": "calc(h + 5)",
                        "fontSize": 11,
                        "fill": "#353535",
                        "fontFamily": "Open Sans",
                        "fontWeight": "Normal",
                        "refY": null,
                        "stroke": "#353535",
                        "strokeWidth": 0,
                        "text": "Cloud"
                    }
                }
            },
            "next": {
                "attrs": {
                    "root": {
                        "cursor": "move",
                        "visibility": "hidden"
                    },
                    "body": {
                        "d": "\n                            M calc(0.2 * w) calc(0.55 * h)\n                            Q calc(-0.01 * w) calc(0.378 * h) calc(0.25 * w) calc(0.28 * h)\n                            Q calc(0.38 * w) calc(-.02 * h) calc(0.63 * w) calc(0.23 * h)\n                            Q calc(0.9 * w) calc(0.16 * h) calc(0.87 * w) calc(0.5 * h)\n                            Q calc(0.98 * w) calc(0.735 * h) calc(0.77 * w) calc(0.73 * h)\n                            Q calc(0.56 * w) calc(0.97 * h) calc(0.33 * w) calc(0.74 * h)\n                            Q calc(0.134 * w) calc(0.8 * h) calc(0.2 * w) calc(0.55 * h)\n                            ",
                        "strokeWidth": 2,
                        "stroke": "#353535",
                        "fill": "#FFFFFF",
                        "strokeDasharray": "0",
                        "visibility": "hidden"
                    },
                    "label": {
                        "textVerticalAnchor": "top",
                        "textAnchor": "middle",
                        "x": "calc(w/2)",
                        "y": "calc(h + 5)",
                        "fontSize": 11,
                        "fill": "#353535",
                        "fontFamily": "Open Sans",
                        "fontWeight": "Normal",
                        "refY": null,
                        "stroke": "#353535",
                        "strokeWidth": 0,
                        "text": "Cloud",
                        "visibility": "hidden"
                    }
                }
            }
        },
        "batch": false,
        "options": {
            "propertyPath": "attrs/label/visibility"
        }
    },
    {
        "action": "change:attrs",
        "data": {
            "id": "0fda289e-39d9-4be0-97a0-355928bd52a6",
            "type": "app.Container",
            "previous": {
                "attrs": {
                    "body": {
                        "width": "calc(w)",
                        "height": "calc(h)",
                        "strokeWidth": 2,
                        "stroke": "#353535",
                        "fill": "transparent",
                        "cursor": "default",
                        "rx": 2,
                        "ry": 2,
                        "strokeDasharray": "0",
                        "visibility": "visible"
                    },
                    "visibility": {
                        "status": "hidden"
                    },
                    "originalDimensions": {
                        "width": 200,
                        "height": 150
                    },
                    "label": {
                        "textVerticalAnchor": "middle",
                        "textAnchor": "middle",
                        "x": "calc(0.5*w)",
                        "fontSize": 11,
                        "fill": "#353535",
                        "fontFamily": "Open Sans",
                        "fontWeight": "Normal",
                        "pointerEvents": "none",
                        "strokeWidth": 0,
                        "text": "Container",
                        "visibility": "visible",
                        "y": "calc(h + 8)"
                    },
                    "button": {
                        "cursor": "pointer",
                        "ref": "buttonLabel",
                        "width": 15,
                        "height": "calc(1.5*h)",
                        "x": 5,
                        "y": 5,
                        "event": "element:button:pointerdown",
                        "fill": "#cfcfd1",
                        "stroke": "black",
                        "strokeWidth": 1
                    },
                    "buttonLabel": {
                        "pointerEvents": "none",
                        "x": 12,
                        "y": 13,
                        "textAnchor": "middle",
                        "textVerticalAnchor": "middle",
                        "fill": "black",
                        "fontSize": 8,
                        "fontWeight": "bold",
                        "text": "–"
                    }
                }
            },
            "next": {
                "attrs": {
                    "body": {
                        "width": "calc(w)",
                        "height": "calc(h)",
                        "strokeWidth": 2,
                        "stroke": "#353535",
                        "fill": "transparent",
                        "cursor": "default",
                        "rx": 2,
                        "ry": 2,
                        "strokeDasharray": "0",
                        "visibility": "visible"
                    },
                    "visibility": {
                        "status": "hidden"
                    },
                    "originalDimensions": {
                        "width": 200,
                        "height": 150
                    },
                    "label": {
                        "textVerticalAnchor": "middle",
                        "textAnchor": "middle",
                        "x": "calc(0.5*w)",
                        "fontSize": 11,
                        "fill": "#353535",
                        "fontFamily": "Open Sans",
                        "fontWeight": "Normal",
                        "pointerEvents": "none",
                        "strokeWidth": 0,
                        "text": "Container",
                        "visibility": "hidden",
                        "y": "calc(h + 8)"
                    },
                    "button": {
                        "cursor": "pointer",
                        "ref": "buttonLabel",
                        "width": 15,
                        "height": "calc(1.5*h)",
                        "x": 5,
                        "y": 5,
                        "event": "element:button:pointerdown",
                        "fill": "#cfcfd1",
                        "stroke": "black",
                        "strokeWidth": 1
                    },
                    "buttonLabel": {
                        "pointerEvents": "none",
                        "x": 12,
                        "y": 13,
                        "textAnchor": "middle",
                        "textVerticalAnchor": "middle",
                        "fill": "black",
                        "fontSize": 8,
                        "fontWeight": "bold",
                        "text": "–"
                    }
                }
            }
        },
        "batch": false,
        "options": {
            "propertyPath": "attrs/label/visibility"
        }
    },
    {
        "action": "change:attrs",
        "data": {
            "id": "0fda289e-39d9-4be0-97a0-355928bd52a6",
            "type": "app.Container",
            "previous": {
                "attrs": {
                    "body": {
                        "width": "calc(w)",
                        "height": "calc(h)",
                        "strokeWidth": 2,
                        "stroke": "#353535",
                        "fill": "transparent",
                        "cursor": "default",
                        "rx": 2,
                        "ry": 2,
                        "strokeDasharray": "0",
                        "visibility": "visible"
                    },
                    "visibility": {
                        "status": "hidden"
                    },
                    "originalDimensions": {
                        "width": 200,
                        "height": 150
                    },
                    "label": {
                        "textVerticalAnchor": "middle",
                        "textAnchor": "middle",
                        "x": "calc(0.5*w)",
                        "fontSize": 11,
                        "fill": "#353535",
                        "fontFamily": "Open Sans",
                        "fontWeight": "Normal",
                        "pointerEvents": "none",
                        "strokeWidth": 0,
                        "text": "Container",
                        "visibility": "hidden",
                        "y": "calc(h + 8)"
                    },
                    "button": {
                        "cursor": "pointer",
                        "ref": "buttonLabel",
                        "width": 15,
                        "height": "calc(1.5*h)",
                        "x": 5,
                        "y": 5,
                        "event": "element:button:pointerdown",
                        "fill": "#cfcfd1",
                        "stroke": "black",
                        "strokeWidth": 1
                    },
                    "buttonLabel": {
                        "pointerEvents": "none",
                        "x": 12,
                        "y": 13,
                        "textAnchor": "middle",
                        "textVerticalAnchor": "middle",
                        "fill": "black",
                        "fontSize": 8,
                        "fontWeight": "bold",
                        "text": "–"
                    }
                }
            },
            "next": {
                "attrs": {
                    "body": {
                        "width": "calc(w)",
                        "height": "calc(h)",
                        "strokeWidth": 2,
                        "stroke": "#353535",
                        "fill": "transparent",
                        "cursor": "default",
                        "rx": 2,
                        "ry": 2,
                        "strokeDasharray": "0",
                        "visibility": "visible"
                    },
                    "visibility": {
                        "status": "hidden"
                    },
                    "originalDimensions": {
                        "width": 200,
                        "height": 150
                    },
                    "label": {
                        "textVerticalAnchor": "middle",
                        "textAnchor": "middle",
                        "x": "calc(0.5*w)",
                        "fontSize": 11,
                        "fill": "#353535",
                        "fontFamily": "Open Sans",
                        "fontWeight": "Normal",
                        "pointerEvents": "none",
                        "strokeWidth": 0,
                        "text": "Container",
                        "visibility": "hidden",
                        "y": "calc(h + 8)"
                    },
                    "button": {
                        "cursor": "pointer",
                        "ref": "buttonLabel",
                        "width": 15,
                        "height": "calc(1.5*h)",
                        "x": 5,
                        "y": 5,
                        "event": "element:button:pointerdown",
                        "fill": "#cfcfd1",
                        "stroke": "black",
                        "strokeWidth": 1
                    },
                    "buttonLabel": {
                        "pointerEvents": "none",
                        "x": 12,
                        "y": 13,
                        "textAnchor": "middle",
                        "textVerticalAnchor": "middle",
                        "fill": "black",
                        "fontSize": 8,
                        "fontWeight": "bold",
                        "text": "＋"
                    }
                }
            }
        },
        "batch": false,
        "options": {
            "propertyPath": "attrs/buttonLabel/text"
        }
    },
    [
        {
            "action": "change:size",
            "data": {
                "id": "0fda289e-39d9-4be0-97a0-355928bd52a6",
                "type": "app.Container",
                "previous": {
                    "size": {
                        "width": 200,
                        "height": 150
                    }
                },
                "next": {
                    "size": {
                        "width": 40,
                        "height": 40
                    }
                }
            },
            "batch": true,
            "options": {}
        }
    ]
]

[kumilingus]

That seems ok. If there is no batch, there is multiple records with change:attrs in the undostack.
If there is a batch, the records with change:attrs are all consolidated into one record.