Save selected Data to JSON to update in HTTP Put method

GoJS
1

Hi,
I have triggered the selection through addDiagramListener and assigned to variable like below… But upon calling to JSON the output is undefined…

And also using the forum replies tried to execute writejson method, but the diagram copy Parts function is looking for next input, which is not clear and stuck…

this.diagram.addDiagramListener('ChangedSelection', (e) => {
      const node = this.diagram.selection.first();
      console.log(node.data.toJson);
      
      console.log(this.writejson(node));
});

writejson(mynode: any) {
  mynode = this.diagram.selection.first();
  var tempDiag = new go.Diagram();
  tempDiag.model = this.diagram.model.copy();
  this.diagram.copyParts(mynode, tempDiag, false);
  return tempDiag.model.toJson();
  }

While calling addModelChangedListener the whole Model JSON is received… But I need to save only the selection of data to JSON…

Could you update the corrections needed here or other suggestions… Appreciate your help on this.

2

You have the right idea to use a second Model. Here’s the complete source code for my sample:

<!DOCTYPE html>
<html>
<head>
  <title>JSON-formatted Selection</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      "undoManager.isEnabled": true,
      "ChangedSelection": e => {
        const m2 = e.diagram.model.copy();  // does not copy data
        e.diagram.selection.each(part => {
          if (part instanceof go.Link) {
            m2.addLinkData(part.data);  // assume GraphLinksModel
          } else {
            m2.addNodeData(part.data);
          }
        });
        document.getElementById("mySavedModel").textContent = m2.toJson();
      }
    });

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

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>

Actually, the node template doesn’t matter, so you can delete that.

3

Thanks, upon pushing to m2 diagram am able to call as JSON object for http put request

4

Data is not available to subscribe with http PUT method, when I call this m2Obj = m2copy of the selection as JSON from the above addDiagramListener() or out of AfterViewInit()…

But, this.diagrama.model for add and remove nodedata array are working fine and getting updated which are not inside ngAfterViewInit().