Spread itemArray items evenly along height

@turnert wrote:

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")
            ),

Posts: 3

Participants: 2

Read full topic