Double Tree Collapse / Expand

GoJS
1

Hi there again!

Hoping you can offer a pointer. I have a double tree diagram and I’d like to give the user the ability to expand / collapse. In real terms this means collapsing just the inner nodes leaving the root node and outer leaves. The diagram looks like this expanded:

image
image1675×431 48.2 KB

After pressing the collapse button I’d want it to look like this:

image
image1392×481 28.2 KB

The user can do this already by clicking on each of the leaf nodes but that’s a bit time consuming if the diagram is particularly large.

Any pointers on how to achieve do this. The button itself will likely be ouside of the GoJS diagram although I have no objections to it being part of the diagram if it makes it easier?

2 
myDiagram.commit(diag => diag.findTreeRoots().first().collapseTree(2));

Or call Node.expandTree, or call expandTree and then collapseTree to make sure it’s “evenly” expanded.

3

This worked generally but because we have a slightly different implementation where the extreme right or left nodes are actually the ‘parents’ we had to implement this in another way. In case it helps anyone this method will either colalpse or expand depending on current state:

    $scope.accordianBowTie = function () {
        var root = dblBowTieDiagram.findNodeForKey(0);
        dblBowTieDiagram.nodes.each(function (node) {
            if (node.data.category == "FAR_LEFT" || node.data.category == "FAR_RIGHT") {
                dblBowTieDiagram.commit(function (diag) {
                    if (node.data.collapsed === undefined || !node.data.collapsed) {
                        diag.model.set(node.data, "collapsed", false); // will be negated
                        diag.model.addLinkData({ from: root.key, to: node.key });
                    }
                    else if (node.data.collapsed) {
                        $scope.removeNodeLink(dblBowTieDiagram, node.key);
                    }
                    var vis = !node.data.collapsed;
                    diag.model.set(node.data, "collapsed", vis);
                    $scope.toggleNodeTree(dblBowTieDiagram, node, !vis);
                });
            }
        });
        $scope.zoomToFit(); 
    }