No transaction recorded when deleting a node after fresh load

GoJS
1

It has been noticed that there is no transaction history present when a node is deleted right after a diagram is loaded, without making any other interactions. In this case, in the ModelChanged event, the object property on the event object is null. On the other hand, if the diagram is just loaded and the canvas is slightly moved before going to delete a node - everything looks normal, transaction history is present (so the transaction can be undone) and the object property has a value in the ModelChanged event. The node is being deleted by selecting it and clicking on a close button in the selection adornment of the node. Please advise.

2

In the no transaction history case, is the node deleted before the “InitialLayoutCompleted” DiagramEvent? If so, then the deletion is happening as part of the initial load & layout.

3

I’m unable to reproduce this problem. Here’s my code. What’s different in your situation?

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>

  <script src="https://cdn.jsdelivr.net/npm/gojs/release/go-debug.js"></script>
  <script id="code">
const myDiagram =
  new go.Diagram("myDiagramDiv", {
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        console.log(e.toString(), e.object);
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();
        }
      }
    });

myDiagram.nodeTemplate =
  new go.Node("Auto")
    .add(
      new go.Shape({ fill: "white" })
        .bind("fill", "color"),
      new go.TextBlock({ margin: 8 })
        .bind("text"),
       go.GraphObject.build("Button", {
          alignment: go.Spot.TopLeft,
          click: (e, button) => e.diagram.commit(d => {
            d.remove(button.part);
          })
         })
         .add(new go.Shape("XLine", { width: 8, height: 8, stroke: 'red' }))
    );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 2 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }
]);
  </script>
</body>
</html>
4

The node is deleted after the InitialLayoutCompleted event. It is not reproducible for me on every occasion. I refresh the browser, wait for a few seconds, select a node and click the delete button.

5

I’m also using the GoJS Angular module. Not sure if that is a variable that could cause this.

6

Does the sample code that I gave you, above, accurately represent the situation? What additional details are needed to reproduce the problem?

7

I resolved this. I don’t know exactly the reason why it happened but I found out it was caused by an asynchronous action which also called updateModelData approximately at the same time the diagram was in initialization. I can’t explain why only the deletion of nodes did not go to the history but the location change of any part on the diagram or bringing a new node from the palette all went to the history so could be undone. Another thing I noticed is that if node is selected not by directly clicking on it but by drawing a selection rectangle and having that node captured before clicking the delete button on its selection adornment then it also worked fine and went to the history.