Nested GraphObject Sizing

GoJS
1

Hello, I’m stuck trying to figure out what I’ve done wrong in the following construction. I’m trying to make sure the TextBlock and RoundedRectangle are keeping a minimum width. I’m noticing that this is causing render problems particularly for boundaries of parent templates that use this Panel. Anything stick out as things gone wrong/done improperly especially with the combinations of the stretch and minSize/maxSize properties?

        return $(go.Panel, "Horizontal", {
            shadowVisible: false,
            stretch: go.GraphObject.Horizontal,
        },
        new go.Binding("minSize", "", function(nodeData, thisObj) {
            var parentPanelWidth = thisObj.panel.actualBounds.width;
            return new go.Size(parentPanelWidth, 24);
        }).ofObject(),

        $(go.Panel, "Auto", {
                stretch: go.GraphObject.Horizontal,
            },
            new go.Binding("minSize", "", function(data, thisObj) {
                var parentPanelWidth = thisObj.panel.actualBounds.width;=
                return new go.Size(parentPanelWidth, 24);
            }).ofObject(),
            $(go.Shape, "RoundedRectangle", {
                fill: "#E4E6E7",
                stroke: null,
                height: 24,
                stretch: go.GraphObject.Horizontal,
            }),
            $(go.Panel, "Horizontal", {
                    stretch: go.GraphObject.Fill,
                },
                new go.Binding("maxSize", "", function(data, thisObj) {
                    var parentPanelWidth = thisObj.panel.actualBounds.width;
                    var parentPanelHeight = thisObj.panel.actualBounds.height;
                    return new go.Size(parentPanelWidth, parentPanelHeight);
                }).ofObject(),
                $(go.TextBlock, {
                        stretch: go.GraphObject.Horizontal,
                        font: '12px "Open Sans", sans-serif',
                        textAlign: "left",
                        editable: true,
                        height: 24,
                        overflow: go.TextBlock.OverflowEllipsis,
                        maxLines: 1,
                        row: 0,
                        verticalAlignment: go.Spot.Center,
                        name: "AnnotationTextBlock"
                    },
                    new go.Binding("margin", "", function(nodeData, thisObj) {
                        if (data.instanceType === "FlowLogicInstanceType") {
                            return new go.Margin(0, 0, 0, 8);
                        }
                        return new go.Margin(0, 0, 0, 8);
                    }),
                    new go.Binding("text", "comment").makeTwoWay()
                ), {
                    toolTip: $(go.Adornment, "Auto",
                        $(go.Panel, "Auto", {
                                background: "black",
                            },
                            $(go.TextBlock, {
                                    margin: 7,
                                    stroke: "white",
                                    font: '10px "Open Sans", sans-serif',
                                    maxSize: new go.Size(175, NaN)
                                },
                                new go.Binding("text", "", function(nodeData) {
                                    if (nodeData.comment) {
                                        return nodeData.comment;
                                    }
                                    return "";
                                })
                            )
                        )
                    )
                }
            )
        )
    );
2

I don’t have the data to go along with the node template.

I recommend that you use go-debug.js to debug the problem. There are binding errors trying to figure out the value for minSize.

Can you show with two good small illustrations exactly what sizing behavior you want?

3

There were indeed things wrong with the binding for minSize. If I removed either binding, it would work properly (but not achieve the desired sizing). I ended up removing the ofObject calls on each of the bindings and I was able to achieve the desired sizing without hitting errors. Do you know why that might be the case?

4

Might the panel not have been measured yet and thus the conversion function was returning NaN?

I still don’t know what kind of sizing constraints you were trying to implement, but I’m glad you found something acceptable.