Building a tree inside out dynamically?

GoJS
1

My evaluation of this library is going great, we will be creating a PO shortly, however, I have one more question.

One of the diagrams I’m building is using the Tree layout, I want to build the tree, but sort of from the middle and allow the user to dynamically expand “left” or “right”. Think of a box in the middle with a “+” on the left and “+” on the right. When you click the left “+” the node is now a child (which previously wasn’t) . is this possible?

2

I think this is what I want, correct?

3

If you are using a TreeModel, then yes, I think the forum topic that you found provides a solution.

1 Like
4

The only other modifification is that I’d like the “Parent” button to toggle the collapse/expand, so when you click “+” (I build the parents, if not already done) and its state is now “-” and when you tap the “-” I want it to collapse the parents.

5

Well, I assume you do not literally mean “collapsing” the parent node, because that would make the clicked node and its subtree invisible too. Do you mean that you want to hide the parent node, while leaving the clicked node (and its subtree) unchanged? Did you also want to hide the grandparent node and any other ancestor nodes, along with their subtrees, other than the clicked node, of course?

6

yes " Did you also want to hide the grandparent node and any other ancestor nodes, along with their subtrees, other than the clicked node, of course?"

7

Forgot to mention I swiched to GraphLinksModel rather than the TreeModel.

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

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
          {
            initialContentAlignment: go.Spot.Center,  // for v1.*
            layout: $(go.TreeLayout)
          });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape,
          { fill: "white", portId: "" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: new go.Margin(8, 24) },
          new go.Binding("text")),
        $("Button", { name: "BUTTON", alignment: go.Spot.Left },
          $(go.Shape, "Circle", { width: 10, fill: "red", strokeWidth: 0 }),
          {
            click: function(e, button) {
              var node = button.part;
              var root = node.findTreeRoot();
              if (node !== root) {
                var vis = root.visible;
                e.diagram.commit(function(diag) {
                  root.findTreeParts().each(function(part) {
                    if (part instanceof go.Node && part !== node && !part.isInTreeOf(node)) {
                      part.visible = !vis;
                    }
                  });
                });
              }
            }
          }),
        $("TreeExpanderButton", { alignment: go.Spot.Right }),
        {
          linkConnected: function(node) { node.findObject("BUTTON").visible = node.findLinksInto().count > 0; },
          linkDisconnected: function(node) { node.findObject("BUTTON").visible = node.findLinksInto().count > 0; },
        }
      );

    myDiagram.model = new go.GraphLinksModel(
      [
        { key: 1, text: "Alpha", color: "lightblue" },
        { key: 2, text: "Beta", color: "orange" },
        { key: 3, text: "Gamma", color: "lightgreen" },
        { key: 4, text: "Delta", color: "pink" },
        { key: 0, text: "Root" }
      ],
      [
        { from: 0, to: 1 },
        { from: 1, to: 2 },
        { from: 1, to: 3 },
        { from: 3, to: 4 }
      ]);
  }

produces:

image
image.png757×156 6.56 KB

Clicking on a red circle button, such as on “Gamma” results in:
image