AvoidsNodes invalid in group within group

GoJS
1

Hi all,
In the group, I have set layout to go.TreeLayout and set
layerSpacing: 120,arrangementSpacing: new go.Size(40, 40)
then I set link to AvoidsNodes, and turn groups to AvoidsNodes:false, but the link still though nodes:
Wrong avoid in my group after nodes and links append:

image.png1734×510 15.5 KB

Then the result I want is that manual modification’s display:
image.png1705×426 14.4 KB

I increase the distance between nodes but still invalid. Is there any other way?

Thank you for your time and I look forward to your reply.
Best Regards,
Peter

2

Have you tried setting Group.avoidable to false?

3

Yes, I have already set it Group.avoidable to false, and solved part of AvoidsNodes invalid problem.
The problem like that have been solved:

image (1).png971×369 3.62 KB

But the above problem still exists. And I think because these nodes are in the group,setting Group.avoidable : false isn’t the key to solving the previous problems

4

I just tried this example and was unable to reproduce any problem:

Here’s the complete code:

  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv");

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

    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.AvoidsNodes, corner: 10 },
        $(go.Shape),
        $(go.Shape, { toArrow: "OpenTriangle" })
      );

    myDiagram.groupTemplate =
      $(go.Group, "Auto",
        { avoidable: false },
        $(go.Shape, { fill: "whitesmoke" }),
        $(go.Placeholder, { padding: 10 })
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue", group: 11 },
      { key: 2, text: "Beta", color: "orange", group: 11 },
      { key: 3, text: "Gamma", color: "lightgreen", group: 12 },
      { key: 4, text: "Delta", color: "pink", group: 11 },
      { key: 11, text: "Group 11", isGroup: true, group: 13 },
      { key: 12, text: "Group 12", isGroup: true, group: 13 },
      { key: 13, text: "Group A", isGroup: true },
    ],
    [
      { from: 1, to: 3 },
      { from: 1, to: 4 }
    ]);
  }
5

I made a sample to reproduce the problem, this will only happen when append nodes and links, initialization layout will not have this problem:

image.png1493×447 3.51 KB

In this sample, you need double click node:8 to append nodes and links

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AvoidsNodes is invaild</title>
    <meta charset="UTF-8">
    <!--<script type="text/javascript" language="javascript" src="../Test/GoJS.js"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.28/go-debug.js"></script>
    <script id="code">

        function init() {
            if (window.goSamples) goSamples();          // init for these samples -- you don't need to call this
            var $ = go.GraphObject.make;                // for conciseness in defining templates
            myDiagram =
                $(go.Diagram, "myDiagramDiv");

            // define the Node template
            myDiagram.nodeTemplate =
                $(go.Node, "Auto",
                { doubleClick: nodeDoubleClick },
                $(go.Shape, { fill: "white", stroke:"white" }),
                    $(go.TextBlock, { margin: 50 },
                        new go.Binding("text"))
                );

            // define the Link template
            myDiagram.linkTemplate =
                //this AvoidsNodes is invaild when I append nodes/links like that
                $(go.Link, go.Link.AvoidsNodes,
                    { corner: 5 },
                    $(go.Shape, { strokeWidth: 4, stroke: "#00a4a4" }));  // the link shape

            myDiagram.model = $(go.GraphLinksModel);
            myDiagram.model.nodeDataArray = [
                { key: 8, group: 66 ,text:"8"},
                { key: 66, isGroup: true, group: 88 },
                { key: 88, isGroup: true }];
            myDiagram.model.linkDataArray = [];

            myDiagram.groupTemplate = $(go.Group, "Auto",
                {
                    layout: go.GraphObject.make(go.TreeLayout,
                        { arrangement: go.TreeLayout.ArrangementVertical, layerSpacing: 100 },
                    ),
                    isSubGraphExpanded: true,
                    //avoidable for group is false
                    avoidable: false
                },
                go.GraphObject.make(go.Shape, "Rectangle",
                    { fill: null, stroke: "gray", strokeWidth: 2 }),
                go.GraphObject.make(go.Panel, "Vertical",
                    { defaultAlignment: go.Spot.Left, margin: 30 },
                    go.GraphObject.make(go.Panel, "Horizontal",
                        { defaultAlignment: go.Spot.Top },
                        // the SubGraphExpanderButton is a panel that functions as a button to expand or collapse the subGraph
                        go.GraphObject.make("SubGraphExpanderButton"),
                        go.GraphObject.make(go.TextBlock,
                            { font: "Bold 18px Sans-Serif", margin: 4 }
                        ),
                        // create a placeholder to represent the area where the contents of the group are
                        go.GraphObject.make(go.Placeholder,
                            { padding: new go.Margin(10, 30) })
                    )
                ));

            //to append nodes and links
            function nodeDoubleClick(e, obj) {
                var clicked = obj.part;
                if (clicked !== null) {
                    var thisemp = clicked.data;
                    myDiagram.startTransaction("add employee");
                    var newNodeList =
                        [
                            { key: 2, group: 66, text:"2"},
                            { key: 3, group: 66, text: "3"},
                            { key: 4, group: 66, text: "4"},
                            { key: 5, group: 66, text: "5"},
                            { key: 6, group: 66, text: "6"},
                            { key: 7, group: 66, text: "7"},
                            { key: 1, group: 66, text: "1"},
                            { key: 9, group: 66, text: "9"},
                            { key: 10, group: 66, text: "10" },
                            { key: 11, group: 66, text: "11" }
                        ];
                    var newLinkList =
                        [
                            { from: 2, to: 3 },
                            { from: 3, to: 4 },
                            { from: 4, to: 5 },
                            { from: 5, to: 6 },
                            { from: 6, to: 1 },
                            { from: 7, to: 1 },
                            { from: 7, to: 8 },
                            { from: 8, to: 9 },
                            { from: 9, to: 10 },
                            { from: 10, to: 11 }
                        ];
                    myDiagram.model.addNodeDataCollection(newNodeList);
                    myDiagram.model.addLinkDataCollection(newLinkList);
                    myDiagram.commitTransaction("add employee");
                }
            }
        }

    </script>
</head>
<body onload="init()">
    <div id="sample">
        <div id="myDiagramDiv" style="background-color: #696969; border: solid 1px black; height: 1000px"></div>
    </div>
</body>
</html>

Thanks a lot and Merry Christmas.
Peter

6

Thanks for the reproducible sample. We’ll look into it, although work is slower this week than normal.

7

Try the beta 1.8.7 library at GoJS - Build Interactive Diagrams for the Web.

8

High efficiency and solve the problem now, thanks a lot!