How to make expanded group incoming/outgoing links on top

GoJS
1

Hello,

I was trying to find similar issues in the forum, but none of the suggested solutions worked. The problem I have is, when expanding the group, I want it’s subgraph to appear in the front of all other nodes, which can be done easily by setting any included child layerName to be Foreground, but the incoming or outgoing links then appear behind it, which is not right in my case.

What I did is added a new layer ExpandedGroups, which is behind the Foreground:

image
image797×47 12.6 KB

And whenever we expand the subgraph I move related parts into appropriate layers - incoming and outgoing links into Foreground, group with it’s contents into ExpandedGroups. Links, which were temporary moved to the Foreground layer does not appear on top of the expanded group… I’ve also tried zOrder, but that didn’t worked.

The event listener which I’ve attached to the group:

image
image784×268 42.6 KB

Inspiration for this I took from the other issue in the forum: Force Nodes to be always on top when expanding a group

Current diagram preview:

image
image781×659 28.4 KB

image
image749×623 28.9 KB

How can I achieve the result I need?

P.S: GoJS version is 1.7.26

Thanks,
Ovidijus

2

Yikes – that is a very old version of GoJS.

I think you want to call Group | GoJS API instead of only looking at the links directly connected with the group or that are members of the group. A link connecting a member node with a node that is not a member, is not a member of the group.

3

That would only actually give me an iterator with combination of group.findLinksOutOf() and group.findLinksInto(). However, this does not solve the problem, neither a new version (tried it just now).

4

Does this demonstrate what you want? The details of the templates do not matter for this discussion, of course – just the behavior when the part is selected or deselected. Note that it does not depend on an additional Layer, although you are welcome to use one if you like.

    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, editable: true },
          new go.Binding("text").makeTwoWay()),
        {
          selectionChanged: function(n) {
            n.layerName = n.isSelected ? "Foreground" : "";
            n.findLinksConnected().each(function(l) {
                l.layerName = n.isSelected ? "Foreground" : "";
              });
          }
        }
      );

    myDiagram.groupTemplate =
      $(go.Group, "Vertical",
        $(go.TextBlock, { font: "bold 12pt sans-serif" },
          new go.Binding("text")),
        $(go.Panel, "Auto",
          $(go.Shape, { fill: "whitesmoke" }),
          $(go.Placeholder, { padding: 10 })
        ),
        {
          selectionChanged: function(g) {
            var mems = g.findSubGraphParts();
            mems.add(g);
            mems.each(function(m) {
              m.layerName = g.isSelected ? "Foreground" : "";
              if (m instanceof go.Node) m.findLinksConnected().each(function(l) {
                  l.layerName = g.isSelected ? "Foreground" : "";
                });
            });
          }
        }
      );

    myDiagram.linkTemplate =
      $(go.Link,
        new go.Binding("layerName", "isSelected", function(s) { return s ? "Foreground" : ""; }).ofObject(),
        $(go.Shape, { strokeWidth: 2 }),
        $(go.Shape, { toArrow: "Standard" })
      );
5

Yes, this is exactly what I was chasing after. Thank you Walter!