Delete Node only after successful API response otherwise cancel delete

GoJS
#1

I have overridden event listener SelectionDeleting, which call server side API for delete record from DB, but before this response digram event listner deletes node.

I want to implement delete selected node only after successful deletion of record from DB.
undoManager.isEnabled is set to ‘false’, so can not do things like ‘myDiagram.commandHandler.undo()’

Please let me know if there is any other way.

#2

Yes, all actions happen immediately in the browser “in realtime”. If the user selects some parts and hits the delete key, those parts (and unselected links connected to selected nodes) are deleted.

So do you want to wait with the actual deletion until you get confirmation from the server that the deletion is allowed? Then I suggest that you override the CommandHandler.deleteSelection method to send the collection of selected Parts (probably just the keys of those Parts) to the server. When the server decides to actually do the deletion, it sends a message to the browser with a list of the keys to be deleted, which you handle in code by actually deleting those Parts within a single transaction.

If you have not already done so, you will want to turn on having the model always manage unique keys for links. Set GraphLinksModel.linkKeyProperty to the name of the link data property you want to use.

#3

Do you have any example to refer, that would be really helpful.

#4 
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          //"undoManager.isEnabled": true,  // don't turn on the UndoManager
          "commandHandler.deleteSelection": function() {
            // remember the keys of the Parts to be deleted
            var todelete = { nodes: [], links: [] }; 
            this.diagram.selection.each(function(part) {
              if (part instanceof go.Link) todelete.links.push(part.key);
              else todelete.nodes.push(part.key);
              part.opacity = 0.3;
            });
            // show what the user selected for deletion
            console.log(JSON.stringify(todelete));
            setTimeout(function() {
              // Execute this when getting a message from the server that some nodes should be deleted.
              // Assume todelete is passed from the server, not just a closed-over local variable here.
              myDiagram.commit(function(diag) {
                todelete.links.forEach(function(key) {
                  var link = diag.findLinkForKey(key);
                  if (link !== null) diag.remove(link);
                });
                todelete.nodes.forEach(function(key) {
                  var node = diag.findNodeForKey(key);
                  if (node !== null) diag.remove(node);
                });
              }, "execute deletion");
            }, 3000);  // pretend to wait for a server response
          },
          "ModelChanged": function(e) {     // just for demonstration purposes,
            if (e.isTransactionFinished) {  // show the model data in the page's TextArea
              document.getElementById("mySavedModel").textContent = e.model.toJson();
            }
          }
        });

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

    myDiagram.linkTemplate =
      $(go.Link,
        $(go.Shape),
        $(go.Shape, { toArrow: "Standard" })
      );

    myDiagram.model = $(go.GraphLinksModel, {
      linkKeyProperty: "key",
      nodeDataArray: [
        { key: 1, text: "Alpha", color: "lightblue" },
        { key: 2, text: "Beta", color: "orange" },
        { key: 3, text: "Gamma", color: "lightgreen" },
        { key: 4, text: "Delta", color: "pink" }
      ],
      linkDataArray: [
        { from: 1, to: 2 },
        { from: 1, to: 3 },
        { from: 2, to: 2 },
        { from: 3, to: 4 },
        { from: 4, to: 1 }
      ]
    });
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
</body>
</html>
1 Like
#5

Yes it worked, thank you so much for your quick responce.