Multiple shapes into a groupTemplate

GoJS
1

I try to implement two shapes into a group template but the second shape doesn’t appear correctly. The size of the second is always fixed. My code is:

        myDiagram.groupTemplateMap.add("OfNodes",
            $(go.Group, "Auto", // the whole node panel
                {
                    selectionAdorned: true,
                    layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
                    fromSpot: go.Spot.AllSides,
                    toSpot: go.Spot.AllSides,
                    isShadowed: true,
                    shadowColor: "#C5C1AA",
                    mouseDrop: finishDrop


                },


                go.Panel.Auto, {

                    ungroupable: true,
                    // highlight when dragging into the Group
                    mouseDragEnter: function(e, grp, prev) {
                        highlightGroup(e, grp, true);
                    },
                    mouseDragLeave: function(e, grp, next) {
                        highlightGroup(e, grp, false);
                    },
                    computesBoundsAfterDrag: true,
                    // when the selection is dropped into a Group, add the selected Parts into that Group;
                    // if it fails, cancel the tool, rolling back any changes
                    mouseDrop: finishDrop,
                    contextMenu: partContextMenu,
                    handlesDragDropForMembers: true, // don't need to define handlers on member Nodes and Links
                    // Groups containing Nodes lay out their members vertically
                    layout: $(go.GridLayout, {
                        wrappingColumn: 1,
                        alignment: go.GridLayout.Position,
                        cellSize: new go.Size(1, 1),
                        spacing: new go.Size(1, 1)
                    })
                },
                new go.Binding("background", "isHighlighted", function(h) {
                    return h ? "rgba(255,0,0,0.2)" : "transparent";
                }).ofObject(),



                $(go.Shape, "Rectangle", {
                    parameter1: 0, //Recuadre al voltant d'on es pot crear el vincles
                    fill: "white",
                    stroke: "#756875",
                    strokeWidth: 3,
                    portId: "10", //Això permet multiples punts de sortida
                    fromLinkable: true,
                    fromLinkableSelfNode: true,
                    fromLinkableDuplicates: true,
                    toLinkable: true,
                    toLinkableSelfNode: true,
                    toLinkableDuplicates: true,
                    cursor: "pointer"

                }),
                $(go.Shape, "Rectangle", {
                    parameter1: 0, //Recuadre al voltant d'on es pot crear el vincles
                    fill: "red",
                    stroke: "#756875",
                    strokeWidth: 3,
                    portId: "10", //Això permet multiples punts de sortida
                    cursor: "pointer",
                    margin:5
                }),



                $(go.Panel, go.Panel.Vertical, // title above Placeholder
                    $(go.Panel, go.Panel.Horizontal, // button next to TextBlock
                        {
                            stretch: go.GraphObject.Horizontal,
                            margin: 1
                        },
                        $(go.TextBlock, {
                                alignment: go.Spot.Center,
                                editable: true,
                                isMultiline: false,
                                margin: 5,
                                stroke: "#009900",
                                font: "bold 16px sans-serif",
                                //contextMenu: partContextMenu
                            },

                            new go.Binding("text", "text").makeTwoWay()

                        ),
                        $("SubGraphExpanderButton", {
                            alignment: go.Spot.Right,
                            margin: 5
                        })

                    ), // end Horizontal Panel
                    $(go.Placeholder, {
                        padding: 5,
                        alignment: go.Spot.TopLeft
                    })
                ) // end Vertical Panel
            )); // end Group and call to add to template Map

The result is this:

I want something like this:

I hope that somebody can help me.
Thank you very much

2

The problem is that you have added the “red” “Rectangle” Shape as the second element of an “Auto” Panel (in this case which is also your Group). That means the first “white” Shape will surround all of its other elements, including the “red” Shape and also the “Vertical” Panel of header and items.

Since the “red” Shape had no size given to it either via a property or via some panel constraint, it got its default default size, which is 100x100.

If you really want nesting of a “Vertical” Panel surrounded by a “red” Shape surrounded by a “white” Shape, you’ll need to insert an “Auto” Panel as the second element of your existing outer “Auto” Panel/Group. That would consist of only your “red” Shape and the existing “Vertical” Panel.

Group, "Auto",
    Panel, "Auto",
        Shape, // fill: "white"
        Panel, "Auto",
            Shape,  // fill: "red"
            Panel, "Vertical",
                Panel, "Horizontal", . . .  // with TextBlock and "SubGraphExpanderButton"
                Placeholder

Please read GoJS Panels -- Northwoods Software and GoJS Sizing of GraphObjects -- Northwoods Software for more details.