Is it possible to add a group to a TreeLayout?

GoJS
1

I have a basic diagram that is using a TreeLayout, and I need to add a group box around some nodes. Is it possible to do that?

Right now when I define the groupTemplate it moves the parent node but it does not draw the box around the other nodes.

Here is the my current code I have. I get a Tree view how I want, but the Group is all the way up to the left side and there is no box around the rest of the nodes.

   let myDiagram = $(go.Diagram, "nodesList",
      {
        initialDocumentSpot: go.Spot.TopCenter,
        initialViewportSpot: go.Spot.TopCenter,
        layout:
          $(go.TreeLayout,
            {
              arrangement: go.TreeLayout.ArrangementVertical,
              angle: 90
            }
          )
      });


    myDiagram.nodeTemplate = $(go.Node, "Auto", {
      locationSpot: go.Spot.Center
    }, $(go.Shape, "RoundedRectangle", {
      fill: "white",
      portId: "",
      cursor: "pointer",
      fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
      toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
    },
    new go.Binding("fill", "color")),
    new go.Binding("figure"),
    $(go.TextBlock, {
      font: "bold 14px sans-serif",
      stroke: "#333",
      margin: 6,
      isMultiline: true,
      editable: false
    },
    new go.Binding("text", "text")));

    // GROUP
    myDiagram.groupTemplate = $(go.Group, "Vertical", 
      {
        selectionObjectName: "PANEL",
        ungroupable: false,
      },
      $(go.TextBlock,
        {
          font: "bold 15px sans-serif",
          editable: false
        },
        new go.Binding("text", "text").makeTwoWay(),
        new go.Binding("stroke", "color")
      ),
      $(go.Panel, "Auto",
        {
          name: "PANEL",
        },
        $(go.Shape, "Rectangle", 
          {
            fill: null,
            stroke: "gray",
            strokeWidth: 3,
            portId: "",
            cursor: "pointer",
            fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
            toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
          }
        ),
        $(go.Placeholder, { margin: 10, background: "transparent" })
      )
    );

    myDiagram.linkTemplate = 
      $(go.Link, {
        routing: go.Link.Orthogonal,
        corner: 0
      },
        $(go.Shape, { strokeWidth: 2, stroke: "white" })
      );

    myDiagram.model = new go.TreeModel(this.assetsObject);
2

Yes, but you have to use GraphLinksModel, not TreeModel, if you want to use Groups. For example, Groups as Nodes in Trees

Do you have a screenshot or sketch for what you want to build?

3

here is a sample.

image
image668×542 10.7 KB

I tried to use the Basic GoJS Sample but it didn’t let me make it in a tree view.

4

WHen I switch to GraphLinksModel, I get this.

image

is it possible for the group to be displayed like a tree?

5

I figured it out.
On my groupTemplated I added a Layout.

...
        layout: $(go.TreeLayout, {
          angle: 90
        }),
...

that worked.

6

By the way, if you want to obscure text in a diagram, temporarily set the TextBlock.stroke to be “transparent”.

7

thanks for the help. One more question. Is it possible to layout the group element side by side? Example here I have 2 trees inside a group and I would like to have them side by side. But they are showing up under each other

image
image386×572 2.21 KB

8

Set TreeLayout.arrangement to go.TreeLayout.ArrangementHorizontal.

9

Is there source available to reference for this example that you referred to?

Regards
Dan

10

As with almost all of our samples, the complete source code is right there in the page. Just invoke your browser’s View Page Source command. Or download the HTML page.