Links between expanded group nodes with different zOrder

GoJS
1

Hi,
When there’s a link between 2 groups which are expanded, the link goes inside the group and meets the end node/port.
Yet, if one of the groups has an higher zOrder than the other group, the higher zOrder group floats over other groups and as result, the link does not continue into the group but end at the edge of the group.
Is there any way to tell GOJS to go inside the group, regardless zOrder ?
Regards,
Tany

2

Is the group opaque? I suspect that the link route does continue to connect with the actual node, but you don’t see that part of the link which is behind the group.

One solution is to always have links in front of nodes. Just set { layerName: "Foreground" } on your Link template(s).

Or if you are already using the “Foreground” Layer for other purposes, just set { layerName: "Background" } on all of your Node and Group templates.

Or do some combination of both.

3

Works fine,
Thanks

4

Walter,
I played around with the { layerName: “Foreground” } attribute.
You are right, even though groups have zOrder bigger than each other, still, the links beween the groups go directly into the connected elements and are not hidden when groups overlap.
Yet,
Since the link template is set tp { layerName: “Foreground” }, when overlaping groups, the groups nodes are hidden by the floating group (higher zOrder), but the links are still shown.
I mean intra links between nodes on the hidden group, not links between the groups.
Take a look at this sample code.
It has 2 groups CC and DD which are interconnected via link. Group CC nodes has ZOrder=10 while group DD nodes has zOrder=9. So, if you move group CC over group DD, group DD nodes are hidden, the links bewteen the groups is still shown which is great. But the the intra link on group DD, is also shown.
How can group CC hide the intra group DD links and still show the inter links group ?

var nodeDataArray = [
{ key: “A”, isGroup:true, zOrder: 0 },
{ key: “CC”, isGroup:true, group: “A”, zOrder: 10 },
{ key: “DD”, isGroup:true, group: “A”, zOrder: 9 },
{ key: 5, source: “icons/switch.png”, group: “CC”, zOrder: 10 },
{ key: 6, source: “icons/switch.png”, group: “CC”, zOrder: 10 },
{ key: 7, source: “icons/switch.png”, group: “CC”, zOrder: 10 },
{ key: 8, source: “icons/switch.png”, group: “CC”, zOrder: 10 },
{ key: 9, source: “icons/Router.svg”, group: “DD”, zOrder: 9 },
{ key: 10, source: “icons/Router.svg”, group: “DD”, zOrder: 9 },
{ key: 11, source: “icons/Router.svg”, group: “DD”, zOrder: 9 },
{ key: 12, source: “icons/Router.svg”, group: “DD”, zOrder: 9 }
];

var linkDataArray = [ { from : 1, to: 2 }, { from : 4, to: 5 }, { from : 8, to: 9 }, { from : 10, to: 11 } ];

var $ = go.GraphObject.make;

var diagram = new go.Diagram("myDiagramDiv");
diagram.contentAlignment = go.Spot.Top;
diagram.undoManager.isEnabled = true;

//diagram.layout = $(go.GridLayout);

diagram.nodeTemplate =
        $(go.Node, "Spot",  // the Shape automatically fits around the TextBlock
			    new go.Binding("position", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                new go.Binding("zOrder"),
$(go.Picture, { width: 50, height: 50 }, new go.Binding("source") )
        );

diagram.groupTemplate =
        $(go.Group, "Auto",
                {
                    isSubGraphExpanded: false,
                    layout: $(go.GridLayout)
                },
                new go.Binding("zOrder"),
                $(go.Shape, "RoundedRectangle", // surrounds everything
                        { parameter1: 10, fill: "whitesmoke" }),
                $(go.Panel, "Vertical",  // position header above the subgraph
                        { defaultAlignment: go.Spot.Left },
                        $(go.Panel, "Vertical",  // the header
                                { defaultAlignment: go.Spot.Top },
                                //$("SubGraphExpanderButton"),
                                $("SubGraphExpanderButton",
                                        {
                                            "_subGraphExpandedFigure": "TriangleUp",
                                            "_subGraphCollapsedFigure": "TriangleDown",
                                            "_buttonFillNormal": "white",
                                            "_buttonStrokeNormal": "black",
                                            "_buttonFillOver": "lightgreen",
                                            "_buttonStrokeOver": "green",
                                        }
                                       ),
								$(go.Placeholder,     // represents area for all member parts
                                {  background: "white" })
                        ),
                    $(go.TextBlock, new go.Binding("text", "key"))
                )
        );
diagram.linkTemplate = $(go.Link,
    { layerName: "Foreground"},
    $(go.Shape),
    $(go.Shape, { toArrow: "Standard" } ));

diagram.model = new go.GraphLinksModel(nodeDataArray,linkDataArray);
5

Every Part can be independently controlled by which Layer it is in and with what zOrder it has within a Layer.

So if you want to specify the zOrder for nodes, you also need to do so for links. For example, add the same “zOrder” Binding to links:

    diagram.linkTemplate = $(go.Link,
      new go.Binding("zOrder"),
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" }));

and specify it in the data:

    var linkDataArray = [
      { from: 8, to: 9, zOrder: 10 },
      { from: 10, to: 11, zOrder: 9 }
    ];