Aligning child/parent nodes based on port/link location and not node size

GoJS
1

So it seem that the way layeredDiagraph and tree layouts align child items is based on the total size of the node’s bounds, irrespective of where the node’s to/From ports are.

Is there a way to make those layouts line items up based on those ports, rather than the node bounds (to force straight lines for links)?

e.g to go from the left hand style to the right:

image
image1777×620 1.73 KB

I see a bunch of settings that are close to the behavior I’m looking for, but nothing quite right. I assume I’ll need to subclass tree or layeredDiagraph?

2

That should just work, if the node locationObject uses that port object or something that contains it at the middle. For example:

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          layout: $(go.TreeLayout, { angle: 90 })
        });

    myDiagram.nodeTemplate =
      $(go.Node, "Horizontal",
        { locationObjectName: "PORT" },
        $(go.TextBlock, new go.Binding("text", "l")),
        $(go.Shape, { name: "PORT", width: 50, height: 30, fill: "white", portId: "" }),
        $(go.TextBlock, new go.Binding("text", "r")));

    myDiagram.model = new go.TreeModel([
      { key: 1, l: "left", r: "right" },
      { key: 2, parent: 1, l: "a very long string", r: "short" },
      { key: 3, parent: 2, l: "left" },
      { key: 4, parent: 3, r: "right" }
    ]);

results in:
image

3

Hmm, I’m setting the template with an auto panel and that shape as the port:

    taskTemplateMap.add("task",
        GO(go.Node, "Spot", {},
            GO(go.Panel, "Auto", {
                    isPanelMain: true,
                    alignment: go.Spot.Center,
                    doubleClick: ...
                },
                GO(go.Shape, "SmallRoundedRectangle", {
                    portId: "",
                    strokeWidth: 2,
                    stroke: GO(go.Brush, {color: "#33A3FF"}),
                    fill: GO(go.Brush, {color: "#B5DEFF"})
                }),
4

Gotta set Node.locationObject, so that the default layout behavior knows what to line up with. Otherwise it uses the whole Node.

5

Aha, that fixed it. Thanks!