Delete only the outgoing links of a node while deleting the node

GoJS
1

HI,

I am looking out for a way to delete the node with its outgoing links but not the incoming ones. Any ideas how to do it would be appreciated.

Thanks,
Kanika

2 
      myDiagram = $(go.Diagram, . . .,
          {
            "commandHandler.deletesConnectedLinks": false,
            "SelectionDeleting": function(e) {
              var outs = new go.Set();
              e.diagram.selection.each(function(n) {
                if (!(n instanceof go.Node)) return;
                outs.addAll(n.findLinksOutOf());
              });
              outs.each(function(n) { n.isSelected = true; });
            },
3

Hi Walter,

Ahem, it ain’t working. It just deleted the node and not the outgoing links with it. The links are in their place.

4

It works in the sample that I tried it in. Here’s a complete sample:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          "commandHandler.deletesConnectedLinks": false,
          "SelectionDeleting": function(e) {
            var outs = new go.Set();
            e.diagram.selection.each(function(n) {
              if (!(n instanceof go.Node)) return;
              outs.addAll(n.findLinksOutOf());
            });
            outs.each(function(n) { n.isSelected = true; });
          },
          "undoManager.isEnabled": true
        });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape,
          { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
          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: 3, to: 4 }
    ]);
  }
  </script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>
5

Hi Walter,

in my case, the code is something like -

  const handleDeleteNode = (e) => {
    const d = diagramRef.current;
    if (!d) return;
    let outs = new go.Set();
    d.selection.each(function(n) {
      if (!(n instanceof go.Node)) return;
      outs.addAll(n.findLinksOutOf());
    });
    outs.each(function(n) { n.isSelected = true; });
    d.commandHandler.deleteSelection();
  };

so when i tried to debug I found that my links are not set to true for isSelected. Any idea why?

6

How is handleDeleteNode used, and when is it called?

7

Hi Walter,
got the issue, handleDeleteNode is the function called on when delete is triggered. The issue was maxSelectionCount: 1,. Thus only the node was getting deleted.

Thanks for your help and quick responses!

Regards,
Kanika