Multiple shapes into a groupTemplate

@quim96 wrote:

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

Posts: 2

Participants: 2

Read full topic