I have an item array which I want to spread evenly based on the height (to a minimum) of a panel - between the two blue lines:
I’m using a template similar to the Thermometer one, using a Spot panel.
Below is the relevant areas - the ColumnSpace is rectangle that is in between the blue lines in the screenshot, and the vertical “product ports” panel is where the black squares are.
I want these black squares to distribute evenly along the height of the ColumnSpace as it resizes. Is this possible? (note: My minSize binding does work as expected)
$go(go.Shape, // Core column
{
isPanelMain: true,
name: "ColumnSpace",
width: 25,
height: 400,
strokeWidth: 0,
fill: "rgba(0,0,0,.05)"
},
new go.Binding("height").makeTwoWay(),
new go.Binding("minSize", "products", (products: any[]) => {
const portsHeight = products.length * 8;
return new go.Size(25, portsHeight);
}),
new go.Binding("fill", "color")
),
$go(go.Panel, "Vertical", // Product Ports
{
alignment: go.Spot.Right,
alignmentFocus: go.Spot.Left,
alignmentFocusName: "Products",
stretch: go.GraphObject.Vertical,
defaultStretch: go.GraphObject.Vertical,
itemTemplate:
$go(go.Panel, "Auto",
$go(go.Shape, {
height: 5,
width: 5,
margin: new go.Margin(1, 0)
})
)
},
new go.Binding("itemArray", "products"),
new go.Binding("height", "height", (height: number) => {
return height;
}).ofObject("ColumnSpace")
),