Banded TreeLayout with inconsistent band sizes

@ctaylor wrote:

I'm using a custom layout which inherits from TreeLayout to draw shaded bands. The height of the bands is inconsistent, as shown by the red arrows in this image:

gojs-band-heights.png435x828 19.3 KB

You can see here the bottom band is smaller than the others, causing the globe icon to be outside the band. For other diagrams this is a real problem, as there isn't enough space to show the link (the links are green:the tiny blob of green you can see below the 'cog' nodes):

I need either the bands to be a consistent size, set in code (as all the nodes will have a similar size) or to adequately contain the nodes inside them, preferably with a bit of margin for aesthetics.

Here's my layout:

function BandedTreeLayout() {
    go.TreeLayout.call(this);
    this.layerStyle = go.TreeLayout.LayerUniform;
    this.sorting = go.TreeLayout.SortingAscending;
}
go.Diagram.inherit(BandedTreeLayout, go.TreeLayout);

BandedTreeLayout.prototype.commitLayers = function(layerRects, offset) {
    var bands = this.diagram.findPartForKey("_BANDS");
    if (bands) {
      var model = this.diagram.model;
      bands.location = this.arrangementOrigin.copy().add(offset);
      var arr = bands.data.itemArray;
      for (var i = 0; i < layerRects.length; i++) {
        var itemdata = arr[i];
        if (itemdata) {
            var size = layerRects[i];
            // I've tried various things here, but they only affect the last band...
            //size.height = 600;
            //size.addMargin(new go.Margin(50));
            model.setDataProperty(itemdata, "bounds", size);
        }
      }
    }
    if (window.console) console.log('Layers: ' + layerRects.length);
    for (var it = this.network.vertexes.iterator; it.next();) {
        var v = it.value;
        var n = v.node;
        if (!n.data.dns) {
            continue;
        }
        if (layerRects[n.data.tierOffset]) {
            var pos = v.bounds.position;
            pos.y = layerRects[n.data.tierOffset].y;
            n.move(pos);
        } else {
            if (window.console) console.log('Could not find layerRects with offset ' + n.data.tierOffset);
        }
    }
};
// end BandedTreeLayout

And here's the bands template (wrapped in a function as it's called by a couple of different diagrams) with some comments from me about what I've tried:

function getBandsTemplate($) {
    return $(go.Part, "Position",
    new go.Binding("itemArray"),
    {
        isLayoutPositioned: false,
        layerName: "Background",
        pickable: false,
        selectable: false,
        itemTemplate:
        $(go.Panel, HORIZONTAL ? "Vertical" : "Horizontal",
            new go.Binding("position", "bounds", function(b) {
                return b.position;
            }),
            new go.Binding("desiredSize", "bounds", function (r) {
                if (r.size.height < 300) r.size.height = 300; // this does nothing
                return r.size;
            }),
            $(go.Shape,
                { stroke: null, strokeWidth: 0 },
                new go.Binding("desiredSize", "bounds", function (r) {
                    return r.size; // tried various things here to no avail
                }),
                new go.Binding("fill", "itemIndex", function(i) {
                    return i % 2 === 0 ? "#FFFFFF" : "#EEEEEE";
                }).ofObject())
        )
    });
}

I'm calling the layout like this, again with additional comments for what I've tried:

layout: $(BandedTreeLayout,
{
    angle: HORIZONTAL ? 0 : 90,
    arrangement: HORIZONTAL ? go.TreeLayout.ArrangementVertical : go.TreeLayout.ArrangementHorizontal,
    layerSpacing: 100, // affects all bands, meaning some are too big
    nodeSpacing: 100 // does not help this problem
})

Thanks.

Posts: 1

Participants: 1

Read full topic