Automatic height resizing of group on dragging

Hi Walter,

I need to automatically resize a group on heights when dragging a node inside (can be also another group). Now the group automatically resize on x dimension but not on y dimension. What I really need is to show always the ports contained in a right vertical panels, which ports are positioned on the bottom right of the group. Is possible to keep always a distance between a dragged object and the ports? I don’t want the object to cover the ports after dragging.
Here’s an example (complex let me say…):

I put a fixed height (250px) but it could be better to calculate it dinamically in order to show ports…
Here’s the code for group:

      myDiagram.groupTemplate =
    	  $gj(go.Group, "Spot",
    		  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
    		  // Groups containing Groups lay out their members horizontally
    		  layout: makeLayout(),
    		  cursor: "move",
    		  dragComputation: stayInGroup,
              containingGroupChanged: function(prt, oldgroup, newgroup) {
				  			processParentGroup(prt); //non recursive
    			  new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    			  new go.Binding("layout", "horiz", makeLayout),
    			  new go.Binding("background", "isHighlighted", function(h) {
    				  return h ? "rgba(0,255,0,0.6)" : "white";
    			  $gj(go.Panel, "Auto",
    					  $gj(go.Shape, "RoundedRectangle",
    						  fill: null, 
    						  strokeWidth: 3
    						  new go.Binding("stroke", "horiz", defaultColor),
    						  new go.Binding("stroke", "color")),
    						  $gj(go.Panel, "Vertical",  // title above Placeholder
    								  $gj(go.Panel, "Horizontal",  // button next to TextBlock
    									  name: "hover-screenshot-panel",
    									  stretch: go.GraphObject.Horizontal, 
    									  //background: defaultColor(false), 
    									  portId: "totale",
    									  // allows links to/from all sides
    									  fromSpot: go.Spot.Right,
    									  toSpot: go.Spot.Left,
    									  fromLinkable: true,
    									  toLinkable: true,
   										  toMaxLinks: 1,
									  new go.Binding("background", "horiz", defaultColor),
									  new go.Binding("background", "color"),
										  alignment: go.Spot.Left,
										  editable: false,
										  margin: 5,
										  font: defaultFont(false),
										  //opacity: 0.75,  // allow some color to show through
										  //stroke: "#404040"
										  stroke: "white"
									  new go.Binding("font", "horiz", defaultFont),
									  new go.Binding("text", "text").makeTwoWay())
    								  ),	// end Horizontal Panel
    								  $gj(go.Panel, "Table",{},
	    									  padding: 15, 
	    									  alignment: go.Spot.TopLeft, 
	    						    		  minSize: new go.Size(250, 150)
	    									  width: 200, height: 250, scale: 1.0, 
	    								      alignment: go.Spot.Center,
	    								    new go.Binding("source", "source")
    						  )  // end Vertical Panel
    			  ), // end of Panel Auto
    			  $gj(go.Panel, "Vertical",
    				  //alignment: new go.Spot(1,0.6,50,0), outer right
    				  alignment: new go.Spot(1,1,-50,-50), //bottom right
    				  name: "VPANEL"
    					  new go.Binding("itemArray", "rightArray"),
    						  _side: "right",
    						  fromSpot: go.Spot.Right, toSpot: go.Spot.Right,
    						  fromLinkable: false, toLinkable: false, 
    						  cursor: "pointer"
    						  //contextMenu: portMenu
    							  new go.Binding("portId", "portId"),
    							  $gj(go.Shape, "Rectangle",
    								  stroke: null, strokeWidth: 0,
    								  desiredSize: portSize,
    								  margin: new go.Margin(3, 0),
    								  fill: "blue"
    									  { margin: new go.Margin(5, 0, 0, 25), 
    								  font: "bold 12px sans-serif",
    								  alignment: go.Spot.Left, 
    								  fromLinkable: false, 
    								  toLinkable: false,
    								  shadowVisible: false
   									  new go.Binding("text", "portId")
								  $gj("CheckBox", "checked",
									{ "ButtonIcon.stroke": "green",
									  "_buttonFillOver": "lightgreen", 
									  "_buttonStrokeOver": "green",
									  "Button.width": 20, "Button.height": 20,
									  margin:new go.Margin(3, 0),
					                  "_doClick": function(e, obj) {
    					  )  // end itemTemplate
    			  )  // end Vertical Panel

Thank you in advance

Try constructing your group like this:

$(go.Group, "Auto",
  $(go.Shape, "RoundedRectangle", ...),  // outer shape
  $(go.Panel, "Vertical", ...
    $(go.Panel, "Horizontal", ...  // title above placeholder
      // $("SubGraphExpanderButton", ...),  // expander button, optional
      $(go.TextBlock, ...)
    ),  // end Horizontal Panel
    $(go.Panel, "Table",
      $(go.Panel, "Viewbox",
        { row: 0, rowSpan: 2, alignment: go.Spot.Center, stretch: go.GraphObject.Fill, viewboxStretch: go.GraphObject.Uniform },
        $(go.Picture, ...)  // background image
        { row: 0, padding: 5, minSize: new go.Size(100, NaN), alignment: go.Spot.TopLeft }),
      $(go.Panel, "Vertical",  // ports panel
        { row: 1, alignment: go.Spot.BottomRight, margin: 3 },
    )  // end Table Panel
  )  // end Vertical Panel

The key here is that the ports are within your table panel instead of positioned by a Spot panel. Then the background image is within a viewbox panel such that it can uniformly stretch to fill the table.

It works perfectly!
Thank you