Resizing Placeholder in a group

GoJS
1

Hi I am not able to resize the Placeholder in a group, can you please tell me how to do that. My group template is given below :-

         myDiagram.groupTemplateMap.add("OfNodes",
         GoJs(go.Group, "Auto",
           {
               background: "transparent",
               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,
               handlesDragDropForMembers: true,  // don't need to define handlers on member Nodes and Links
               resizable: true,
               resizeObjectName: 'Placeholdr',
               mouseEnter: function (e, obj) { showPorts(obj.part, true); },
               mouseLeave: function (e, obj) { showPorts(obj.part, false); },
               // Groups containing Nodes lay out their members vertically
               layout: null      
           },
           new go.Binding("background", "isHighlighted", function (h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
           GoJs(go.Shape, "Rectangle",
             { fill: null, stroke: "#33D3E5", strokeWidth: 2 }),
           GoJs(go.Panel, "Table",  // title above Placeholder
           { name: "PANEL", stretch: go.GraphObject.Fill },
             GoJs(go.Panel, "Horizontal",  // button next to TextBlock
               { row: 0, column: 0, stretch: go.GraphObject.Horizontal, background: "#33D3E5" },
               GoJs("SubGraphExpanderButton",
                 { alignment: go.Spot.Right, margin: 5 }),
               GoJs(go.TextBlock,
                 {
                     alignment: go.Spot.Left,
                     editable: true,
                     margin: 5,
                     font: "bold 16px sans-serif",
                     opacity: 0.75,
                     stroke: "#404040"
                 },
                 new go.Binding("text", "text").makeTwoWay())
             ),  // end Horizontal Panel
             GoJs(go.Placeholder,
               { row: 1, column: 0, padding: 5, name: "Placeholdr" })

           ),  // end Vertical Panel
           makePort("T", go.Spot.Top, false, true),
         makePort("L", go.Spot.Left, true, true),
         makePort("R", go.Spot.Right, true, true),
         makePort("B", go.Spot.Bottom, true, false)
         ));

I tried resizing the panel but then the collapsing doesn’t work properly on clicking the SubGraphExpanderButton (i.e. the button with minus sign).

         myDiagram.groupTemplateMap.add("OfNodes",
         GoJs(go.Group, "Auto",
           {
               background: "transparent",
               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,
               handlesDragDropForMembers: true,  // don't need to define handlers on member Nodes and Links
               resizable: true,
               resizeObjectName: 'PANEL',
               mouseEnter: function (e, obj) { showPorts(obj.part, true); },
               mouseLeave: function (e, obj) { showPorts(obj.part, false); },
               // Groups containing Nodes lay out their members vertically
               layout: null      
           },
           new go.Binding("background", "isHighlighted", function (h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
           GoJs(go.Shape, "Rectangle",
             { fill: null, stroke: "#33D3E5", strokeWidth: 2 }),
           GoJs(go.Panel, "Table",  // title above Placeholder
           { name: "PANEL", stretch: go.GraphObject.Fill },
             GoJs(go.Panel, "Horizontal",  // button next to TextBlock
               { row: 0, column: 0, stretch: go.GraphObject.Horizontal, background: "#33D3E5" },
               GoJs("SubGraphExpanderButton",
                 { alignment: go.Spot.Right, margin: 5 }),
               GoJs(go.TextBlock,
                 {
                     alignment: go.Spot.Left,
                     editable: true,
                     margin: 5,
                     font: "bold 16px sans-serif",
                     opacity: 0.75,
                     stroke: "#404040"
                 },
                 new go.Binding("text", "text").makeTwoWay())
             ),  // end Horizontal Panel
             
                  GoJs(go.Placeholder,
               { row: 1, column: 0, padding: 5 })

           ),  // end Vertical Panel
           makePort("T", go.Spot.Top, false, true),
         makePort("L", go.Spot.Left, true, true),
         makePort("R", go.Spot.Right, true, true),
         makePort("B", go.Spot.Bottom, true, false)
         ));

So kindly tell me a way to resize Placeholder or how to correct the behavior of collapse button in the second template.

2

The whole point of using a Placeholder in a Group is to have the same area as its collection of member Parts. If you want the user to resize the group, don’t use a Placeholder.
http://gojs.net/latest/intro/sizedGroups.html

It is possible to resize a panel containing a Placeholder, but that requires more effort to implement, since to keep the panel from being resized improperly it may require a custom ResizingTool, a custom Layout, and a custom Node.dragComputation.

3

Thanks… I got my part from the “swimlanes” example