Circle Shape does not move to extreme right when placeholder in a group is expanded

GoJS
1

Hi Guys,
I have a horizontal panel in a group which contains a circle shape with alignment = go.Spot.Right, but when I drag a node within the group, the paceholder width & height increases but the shape doesn’t align to right. Here is my code:
> goJsDiagram.groupTemplate =

				$$(go.Group, "Auto",
				   {  layout: $$(go.LayeredDigraphLayout,
				   { direction: 0, columnSpacing: 10 })},
				      $$(go.Shape, "Rectangle", // surrounds everything
				    	 { fill: "#808080", stroke: "#808080", strokeWidth:2 }),
				      $$(go.Panel, "Vertical",  // position header above the subgraph
				         { defaultAlignment: go.Spot.Left },
				            $$(go.Panel, "Horizontal",  // the header
				               { height: 50, defaultAlignment: go.Spot.Top },
				                  $$("SubGraphExpanderButton",{ margin: new go.Margin(5, 5, 0, 5) }),  // this Panel acts as a Button
				                  $$(go.Panel, "Vertical",
				                     $$(go.TextBlock,     // group title near top, next to button
				                        { margin: new go.Margin(5,5,0,0), stroke:"rgba(249,249,249)", font: "Bold 9pt Sans-Serif", alignment: go.Spot.Left},
				                         new go.Binding("text", "name")),
				                     $$(go.TextBlock,     // group title near top, next to button
				                        { margin: new go.Margin(0,5,0,0), stroke:"rgba(249,249,249)", font: "Bold 6pt Sans-Serif", alignment: go.Spot.Left },
				                         new go.Binding("text", "summaryLine1")),
				                     $$(go.TextBlock,     // group title near top, next to button
							            { margin: new go.Margin(0,5,0,0), stroke:"rgba(249,249,249)", font: "Bold 6pt Sans-Serif", alignment: go.Spot.Left },
							             new go.Binding("text", "EmptyLine")),
				                     $$(go.TextBlock,     // group title near top, next to button
									    { margin: new go.Margin(0,5,0,0), stroke:"rgba(249,249,249)", font: "Bold 6pt Sans-Serif", alignment: go.Spot.Left },
									     new go.Binding("text", "summaryLine2"))
				                  ),
				                  $$(go.Panel, "Auto",
				                	{ alignment: go.Spot.Right },
				                	$$(go.Shape, "Circle",
				                       { width: 35, height: 35, strokeWidth: 3, fill : "#808080", margin: 2, name:"FABRICCIRCLE" },
				                        new go.Binding("stroke","", function(data){
				                       	   return "#22ca6d";
				                       	})
				                    ),
				                	$$(go.Picture,
								        { width: 25, height: 25 },
									     new go.Binding("source", "iconUrl"))		
				                  )
				            ),
				            $$(go.Placeholder,
				            // represents area for all member parts
				               { padding: new go.Margin(40, 40), background: "rgba(249,249,249)" })
				      )
				);

Image1
Image11152×648 32.7 KB

2

I suggest that you change the “Horizontal” type of the Panel to “Table” and set stretch on that panel to at go.GraphObject.Horizontal. Remember to set the GraphObject.column and alignment or stretch on each element of the panel.

3

Thanks for the reply @walter, Now the Circle is aligned to the right as needed. There is one more issue which is showing, the 2nd column which has 3 lines of text is also getting stretched and there is a space seen between expander button and the text. Is there a way to avoid this?
My updated code is as follows:

$$(go.Group, "Auto",
  	   {  layout: $$(go.LayeredDigraphLayout,
  			   { direction: 0, columnSpacing: 10 })},
  			      $$(go.Shape, "Rectangle", // surrounds everything
  			    	 { fill: ngMapsThemes.default.group.fill, stroke: ngMapsThemes.default.group.stroke.group, strokeWidth: ngMapsThemes.default.group.strokeWidth.group }),
  			      $$(go.Panel, "Vertical",  // position header above the subgraph
  			         { defaultAlignment: go.Spot.Left },
  			            $$(go.Panel, "Table",  // the header
  			               { height: 50, defaultAlignment: go.Spot.Top, stretch: go.GraphObject.Horizontal },
  			                  $$("SubGraphExpanderButton", { margin: new go.Margin(5, 5, 0, 5), column: 0, alignment: go.Spot.TopLeft }),  // this Panel acts as a Button
  			                  $$(go.Panel, "Vertical", { column: 1, alignment: go.Spot.Left },
  			                     $$(go.TextBlock,     // group title near top, next to button
  			                        { margin: new go.Margin(5,5,0,0), stroke: ngMapsThemes.default.group.stroke.text, font: ngMapsThemes.default.group.font.header, alignment: go.Spot.Left },
  			                         new go.Binding("text", "name")),
  			                     $$(go.TextBlock,     // group title near top, next to button
  			                        { margin: new go.Margin(0,5,0,0), stroke: ngMapsThemes.default.group.stroke.text, font: ngMapsThemes.default.group.font.body, alignment: go.Spot.Left },
  			                         new go.Binding("text", "summaryLine1")),
  			                     $$(go.TextBlock,     // group title near top, next to button
  						            { margin: new go.Margin(0,5,0,0), stroke: ngMapsThemes.default.group.stroke.text, font: ngMapsThemes.default.group.font.body, alignment: go.Spot.Left },
  						             new go.Binding("text", "EmptyLine")),
  			                     $$(go.TextBlock,     // group title near top, next to button
  								    { margin: new go.Margin(0,5,0,0), stroke: ngMapsThemes.default.group.stroke.text, font: ngMapsThemes.default.group.font.body, alignment: go.Spot.Left },
  								     new go.Binding("text", "summaryLine2"))
  			                  ),
  			                  $$(go.Panel, "Auto",
  			                	{ alignment: go.Spot.Right, column: 2 },
  			                	$$(go.Shape, "Circle",
  			                       { width: ngMapsThemes.default.group.circle.width, height: ngMapsThemes.default.group.circle.height, 
  			                		strokeWidth: ngMapsThemes.default.group.strokeWidth.circle, fill : ngMapsThemes.default.group.fill, margin: ngMapsThemes.default.group.margin.circle, name:"FABRICCIRCLE" },
  			                        new go.Binding("stroke","", function(data) {
  			                        	if(!ngMapsThemes.default.group.stroke.circle[data.fabricStatus]) //If the fabric status is different from what is defined in ngMapsThemes,
  			                        		return ngMapsThemes.default.group.stroke.circle.Partial;	//Then we will return Partial stroke for now
  			                        	
  			                        	return ngMapsThemes.default.group.stroke.circle[data.fabricStatus];
  			                       	})
  			                    ),
  			                	$$(go.Picture,
  							        { width: 25, height: 25 },
  								     new go.Binding("source", "iconUrl"))		
  			                  )
  			            ),
  			            $$(go.Placeholder,
  			            // represents area for all member parts
  			               { padding: new go.Margin(40, 40), background: "rgba(249,249,249)" })
  			      )
  	);

Image3
Image31152×672 40.6 KB

4

Instead of setting alignment: go.Spot.Left on your Vertical Panel of TextBlocks, set stretch: go.GraphObject.Horizontal.

5

Thanks a lot @walter. It works perfectly now.