Removing a node in selectionDeleted

GoJS
1

Hello,

I am trying to remove a node but currently when I run dia.model.removeNodeData(parentNode) I see that the nodeData is still there. I checked in the console logs and the data is the exact same with the exception that nodeDataArray has a property _gohasid where the parentNode does not have that. I tried to remove with parentNode.key but that didn’t work either. Can you help me figure out what I am doing wrong in trying to remove the node?

    dia.addDiagramListener("SelectionDeleted", (e) => {
      e.subject.each((node: go.Node) => {
        const removedNode = node.data; // verified and accurate

        const parentNode = this.diagramState.nodeDataArray.find(n => n.key === removedNode?.subGraphKey); //verified and accurate
        const hasSiblings = this.hmiDiagramComponent?.diagram.model.nodeDataArray.some(n => n.subGraphKey === removedNode.subGraphKey); // verified and accurate
        if(!hasSiblings && parentNode){
          //correctly entering the if statement
          dia.model.removeNodeData(parentNode); //parentNode is not being deleted.
        }
      })
    });
2

It sounds like the references are different. This is usually because GoJS models are mutable, while state is typically immutable when using gojs-react.

So in your case, instead of calling diagramState.nodeDataArray.find, you probably should be getting the parentNode from the model, ensuring the call to removeNodeData has the model’s reference.

    dia.addDiagramListener("SelectionDeleted", (e) => {
      e.subject.each((node: go.Node) => {
        const removedNode = node.data;

        const parentNode = node.diagram.model.findNodeDataForKey(removedNode?.subGraphKey);  
        const hasSiblings = node.diagram.model.nodeDataArray.some(n => n.subGraphKey === removedNode.subGraphKey);
        if(!hasSiblings && parentNode) {
          dia.model.removeNodeData(parentNode);
        }
      })
    });
3

When I try it, it seems to work well.

However, please note that removing the group data object from the model will not remove any references to that group data object. You can see that each of the remaining simple Nodes still has a data.group property value.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2024 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.js"></script>
  <script id="code">
const myDiagram =
  new go.Diagram("myDiagramDiv", {
      "SelectionDeleted": e => {
        e.subject.each(node => {
          if (node instanceof go.Node) {
            const grpdata = e.diagram.model.findNodeDataForKey(node.data.group);
            console.log(node.data, " containing group: ", grpdata);
            if (grpdata) e.diagram.model.removeNodeData(grpdata);
          }
        });
      },
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = myDiagram.model.toJson();
        }
      }
    });

myDiagram.nodeTemplate =
  new go.Node("Auto")
    .add(
      new go.Shape({ fill: "white" })
        .bind("fill", "color"),
      new go.TextBlock({ margin: 8 })
        .bind("text")
    );

myDiagram.groupTemplate.layout = new go.TreeLayout({ angle: 90 });

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

Thanks @jhardy working with findNodeDataForKey solved my issue.