CommitTransaction method is different in 1.7.16 and 1.7.23, and leads to a problem

Hi all,
When I use the following code in the 1.7.16 release, UndoManager.history will remember the name of Diagram.commitTransaction I have set. But in the 1.7.23 release, UndoManager.history return “Layout” instead of my setting.
> Diagram.startTransaction(“ChangeModelAndShow”+aUsefulList);
//In this transaction, I will append links and nodes
> Model.addNodeDataCollection(this.modelControler.newNodeDataList);
> Model.addLinkDataCollection(this.modelControler.newLinkDataList);
> Diagram.commitTransaction(“ChangeModelAndShow”+aUsefulList);

The wrong result in 1.7.23:( I did above code two times, one of which is just show one node, another series is append node and links )

The correct result in 1.7.16:( I did above code two times, one of which is just show one node, another series is append node and links )

Thank you for your time and I look forward to your reply!
Best Regards.

In addition, although not particularly related. I used the typescript, and using the previous d.ts, so I don’t know whether it will affect or not.

Hmmm. I doubt that your using TypeScript made any difference.

In reviewing all changes between 1.7.16 and 1.7.23, I really cannot pinpoint anything that might cause such a difference in behavior. It would help if you could describe your app better. What Layouts are you using?

It would also help if you could try to narrow down exactly when the change in behavior happened. You can do this easily by referring to individual GoJS libraries at Page Not Found -- Northwoods Software, where “v” should vary from “16” to “23”. Maybe you could even replace the library dynamically while your app is running.

Thanks

Hi walter,
Thank you very much for your reply, and I confirmed that these two versions have difference may cause the problem:1.7.22&1.7.23. And the group layout is reason why the above problems will arise. And must be group within the group.
For some reason, I think I can not tell the contents of the project, sorry. But I made a simple that can reproduce this problem based GoJS sample, you may find reason by follow step:

  1. Make breakpoint on myDiagram.commitTransaction("add employee");(line 36 in the example below), then double click one node

  2. After completing step1, type myDiagram.undoManager.history.o on console to get undoManager’s history.

  3. Change GoJS release version to 1.7.22 to found difference.

Thank you!
Best Regards.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Org Chart Editor</title>
<meta name="description" content="An organization chart editor -- edit details and change relationships." />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.23/go-debug.js"></script>

<script id="code">
  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;  // for conciseness in defining templates
    myDiagram =
      $(go.Diagram, "myDiagramDiv", // must be the ID or reference to div
        {
            "toolManager.hoverDelay": 1,        //tip's disappear 1s left
            initialContentAlignment: go.Spot.Center,
            "undoManager.isEnabled": true,      //can redo/undo
            "animationManager.isEnabled": false,//NOT ALLOW animation
            hasHorizontalScrollbar: false,      //cancel scrollbar
            hasVerticalScrollbar: false,        //cancel scrollbar
            allowCopy: false                    //NOT ALLOW COPY
        });

    function nodeDoubleClick(e, obj) {
      var clicked = obj.part;
      if (clicked !== null) {
        var thisemp = clicked.data;
        myDiagram.startTransaction("add employee");
        var newemp = [{ key: 10, group: 66 }, { key: 3, group: 66 }];
        var aa = [{from : 1 , to:10}];
        myDiagram.model.addNodeDataCollection(newemp);
        myDiagram.model.addLinkDataCollection(aa);
        myDiagram.commitTransaction("add employee");
      }
    }

    // define the Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { doubleClick: nodeDoubleClick },
        // define the node's outer shape
        $(go.Shape, "Rectangle",
          {
            name: "SHAPE", fill: "white", stroke: null
          }),
        
        );  // end Node

    // define the Link template
    myDiagram.linkTemplate =
      $(go.Link, go.Link.Orthogonal,
        { corner: 5},
        $(go.Shape, { strokeWidth: 4, stroke: "#00a4a4" }));  // the link shape

    myDiagram.model = $(go.GraphLinksModel);
    myDiagram.model.nodeDataArray = [
        { key: 1, group: 66 }, { key: 2, group: 66 }, { key: 66, isGroup: true,group:88 }, {key:88,isGroup:true}];
    myDiagram.model.linkDataArray = [{ from: 1, to: 2 }];
      
    myDiagram.groupTemplate = $(go.Group, "Auto",
        { // define the group's internal layout
            layout: go.GraphObject.make(go.TreeLayout,
                { arrangement: go.TreeLayout.ArrangementVertical, isRealtime: false, layerSpacing: 100 },
            ),
            // the group begins unexpanded;
            // upon expansion, a Diagram Listener will generate contents for the group
            isSubGraphExpanded: true
        },
        go.GraphObject.make(go.Shape, "Rectangle",
            { fill: null, stroke: "gray", strokeWidth: 2 }),
        go.GraphObject.make(go.Panel, "Vertical",
            { defaultAlignment: go.Spot.Left, margin: 30 },
            go.GraphObject.make(go.Panel, "Horizontal",
                { defaultAlignment: go.Spot.Top },
                // the SubGraphExpanderButton is a panel that functions as a button to expand or collapse the subGraph
                go.GraphObject.make("SubGraphExpanderButton"),
                go.GraphObject.make(go.TextBlock,
                    { font: "Bold 18px Sans-Serif", margin: 4 }
            ),
            // create a placeholder to represent the area where the contents of the group are
            go.GraphObject.make(go.Placeholder,
                { padding: new go.Margin(10, 30) })
        )
        )); 
      
  }

</script>
</head>
<body onload="init()">
    <div id="sample">
        <div id="myDiagramDiv" style="background-color: #696969; border: solid 1px black; height: 1000px"></div>
    </div>
</body>
</html>

There was a bug fix there having to do with cases where a Group.layout wasn’t being performed depending on how things were initialized. We’ll investigate. Thanks for narrowing down the version.

Thanks for posting the sample.

Great! I am glad to see that you are going to solve this problem.
Thank you, Walter.

Try 1.7.28 which at the moment is in GoJS - Build Interactive Diagrams for the Web. I suppose you could just refer to the library there to try your app.

Verified on 1.7.28, and now the problem has been solved.
Thanks.