How to fill an horizontal panel with two element

GoJS
1

Hello,
I’m creating a graph with some nodes with a shape and a text inside.
The shape it has to be always in the leftmost position and the text it has to fill the remaining space.

Something like this:

This is the code for the node template:

myDiagram.nodeTemplate =
                $(go.Node, "Auto",
                    {
                        fromSpot: go.Spot.BottomSide,
                        toSpot: go.Spot.TopSide,
                    },
                    new go.Binding("text", "text"),
                    $(
                        go.Panel,
                        "Auto",
                        $(go.Shape, "RoundedRectangle",
                            {
                                fill: "lightgray",
                                stroke: null,
                                desiredSize: new go.Size(250, 50)
                            },
                            new go.Binding("fill", "fill")
                        ),

                        $(go.Panel, "Horizontal",
                            {
                                stretch: go.GraphObject.Fill,
                            },
                            $(go.Shape, "RoundedRectangle",
                                {
                                    width: 20,
                                    height: 20,
                                    fill: "lightgreen"
                                },
                            ),

                            $(go.TextBlock,
                                {
                                    stretch: go.GraphObject.Fill,
                                    width: 225,
                                    height: 20,
                                    textAlign: "center",
                                    background: "lightgreen"
                                },
                                new go.Binding("text", "text2")
                            ),
                        )
                    )
                );

As you can see I fixed the width in the TextBlock, but I would like to use something like go.GraphObject.Fill in order to obtain a dynamic solution. Is it possible?

2

I tried the Spot alignment and I found a solution that fits perfectly

myDiagram.nodeTemplate =
                $(go.Node, "Auto",
                    {
                        fromSpot: go.Spot.BottomSide,
                        toSpot: go.Spot.TopSide,
                    },
                    new go.Binding("text", "text"),
                    $(
                        go.Panel,
                        "Auto",
                        $(go.Shape, "RoundedRectangle",
                            {
                                fill: "lightgray",
                                stroke: null,
                                desiredSize: new go.Size(250, 50)
                            },
                            new go.Binding("fill", "fill")
                        ),

                        $(go.Shape, "RoundedRectangle",
                            {
                                width: 20,
                                height: 20,
                                alignment: new go.Spot(0, 0.5),
                                fill: "lightgreen"
                            },
                        ),

                        $(go.TextBlock,
                            {
                                alignment: new go.Spot(0.5, 0.5),
                                background: "lightgreen"
                            },
                            new go.Binding("text", "text2")
                        ),
                    )

                );
3

I would use a “Table” Panel instead of a “Horizontal” Panel for holding the Shape and the TextBlock. “Table” Panels can stretch horizontally and allow one or more cells to stretch horizontally too. I suppose “Horizontal” Panels can stretch horizontally too, but they cannot stretch any of their elements horizontally.

By the way, it seems that you have an extraneous “Auto” Panel. The Node itself is an “Auto” Panel, and there’s no reason to have an “Auto” Panel that always only has a single element in it.

4

Hi Walter,
thanks for you reply, could you please provide an example about what you said?

Thanks

EDIT:
I tried what you proposed but the “Table” doesn’t stretch at all

Walter1.PNG720×193 3.98 KB 

 myDiagram.nodeTemplate =
                $(go.Node,
                    "Auto",
                    {
                        fromSpot: go.Spot.BottomSide,
                        toSpot: go.Spot.TopSide,
                    },
                    new go.Binding("text", "text"),

                    $(go.Shape, "RoundedRectangle",
                        {
                            fill: "lightgray",
                            stroke: null,
                            desiredSize: new go.Size(250, 50)
                        },
                        new go.Binding("fill", "fill")
                    ),

                    $(
                        go.Panel,
                        "Table",
                        {
                            padding: 0.5,
                            background: "red",
                            stretch: go.GraphObject.Horizontal,
                        },
                        $(go.Shape, "RoundedRectangle",
                            {
                                column: 0,
                                width: 20,
                                height: 20,
                                fill: "lightgreen",
                            },
                        ),
                        $(go.TextBlock,
                            {
                                column: 1,
                                background: "lightgreen",
                            },
                            new go.Binding("text", "text1")
                        ),
                    )
                );
5

I just tried this and it seems to work as I described:

      $(go.Node, "Auto",
        { desiredSize: new go.Size(250, 50) },
        $(go.Shape, "RoundedRectangle",
          {
            fill: "lightgray", strokeWidth: 0,
            portId: "", fromSpot: go.Spot.BottomSide, toSpot: go.Spot.TopSide
          },
          new go.Binding("fill", "color")),
        $(go.Panel, "Table",
          { stretch: go.GraphObject.Horizontal, background: "lightgreen" },
          $(go.RowColumnDefinition, { column: 0, sizing: go.RowColumnDefinition.None }),
          $(go.Shape, { column: 0, width: 10, height: 10, fill: "red" }),
          $(go.TextBlock, { column: 1, margin: 8 },
            new go.Binding("text"))
        )
      )
6

You’re right, I didn’t get the result because I didn’t set margin: 8 and the go.RowColumnDefinition.
Thanks for your reply