Problem facing in undo functionality

GoJS
1

I want to implement undo functionality in my gojs project. But in one scenario I am facing some issue . My scenario is that when I am droping a node in my graph I am opening a modal dialog and after selecting some data on that modal dialog I am converting that dropped node to a group.The code written for converting the code is given below.So to user there is only one node dropped in the graph area.But internally to GOJS two transaction happened.So when user is using the undo functionality he need to click undo button two times.I want this thing to be done in one go . How to accomplish this.

var key1 = generateUUID();

        var data = model.nodeDataArray[model.nodeDataArray.length - 1];

        //model.startTransaction("starttransaction");
        model.setDataProperty(data, "text", txt);
        //model.commitTransaction("changeName");

        //model.startTransaction("changeId");
        model.setDataProperty(data, "touchPointId", id);
        //model.commitTransaction("changeId");

        //model.startTransaction("changecId");
        model.setDataProperty(data, "connectionId", cid);
        //model.commitTransaction("changecId");

        //model.startTransaction("changeUid");
        model.setDataProperty(data, "key", key1);
        //model.commitTransaction("changeUid");

        //model.startTransaction("changeType");
        model.setDataProperty(data, "type", type);
        //model.commitTransaction("changeType");

        //model.startTransaction("changegeo");
        model.setDataProperty(data, "geometryString", shape);
        //model.commitTransaction("changegeo");

        //model.startTransaction("changegrp");
        model.setDataProperty(data, "group", key);
        //model.commitTransaction("changegrp");

        //model.startTransaction("changecategory");
        model.setDataProperty(data, "category", "Default");
        //model.commitTransaction("changecategory");

        //model.startTransaction("changeangle");
        model.setDataProperty(data, "angle", angle);
        //model.commitTransaction("changeangle");


        this.addDatas([{
            key: key,
            touchPointId: id,
            connectionId: cid,
            isGroup: true,
            text: val,
            type: 1
        }]);
2

First, just as with all software involving databases, you should conduct all of the work within a single transaction. Do not start and commit a transaction with each little modification. Please read GoJS Transactions -- Northwoods Software.

Second, if you always want to show a modal dialog when the user drag-and-drops into the diagram, in an “ExternalObjectsDropped” DiagramEvent listener you might want to remember what they dropped and where, and then delete what was dropped (e.diagram.removeParts(e.diagram.selection)), and then open your dialog. So the drag-and-drop transaction will finish with no apparent effect, and no transaction is ongoing while the modal dialog is showing.

After they have chosen their options you can create what you want where you want, all within a single transaction.

3

Hi Walter ,
Based on your reply I have implemented the below code

var status = dropedData.diagram.removeParts(dropedData.diagram.selection);

but I think one transaction is automatically done by GOJS before I am applying the remove parts method.

4

I cannot tell if you have done what I suggested or if you are doing something different.

I also cannot tell if you have read about transactions.