Group is moved when expand or collapse

GoJS
1

Hi,

In my diagram, When expand or collapse group then that group is moved a little bit to the left side.
Please see the image below to clearly this question:
Before collapse:

before_Collapse.png516×506 9.22 KB

After collapse:
after_collapse.png585×565 8.46 KB

Please also see the group template:

 $(go.Group, "Auto",
			{
        		fromSpot: go.Spot.AllSides,
        		toSpot: go.Spot.AllSides,
        		isSubGraphExpanded:true
			},
			new go.Binding("location", "", toLocation).makeTwoWay(go.Point.stringify),
			$(go.Shape, "Rectangle", { fill: "white", stroke: "#4472C4", strokeWidth: 2 }),
			$(go.Panel, go.Panel.Vertical,  // title above Placeholder
			          $(go.Panel, go.Panel.Horizontal,  // button next to
														// TextBlock
			            { stretch: go.GraphObject.Horizontal, margin: 1 },
			            $("SubGraphExpanderButton",
			              { alignment: go.Spot.Right, margin: 5, click: function(e, button) {
			            	    var group = button.part;
			            	    if (group instanceof go.Adornment) group = group.adornedPart;
			            	    if (!(group instanceof go.Group)) return;
			            	    var diagram = group.diagram;
			            	    if (diagram === null) return;
			            	    var cmd = diagram.commandHandler;
			            	    if (group.isSubGraphExpanded) {
			            	      if (!cmd.canCollapseSubGraph(group)) return;
			            	    } else {
			            	      if (!cmd.canExpandSubGraph(group)) return;
			            	    }
			            	    e.handled = true;
			            	    
			            	    var linksToGroupOnly = group.findLinksConnected();
			            	    var externalLinksConnected = group.findExternalLinksConnected();
			            	    var externalNodesConnected = group.findExternalNodesConnected();
			            	    
			            	    diagram.startTransaction("expand-collapse");
			            	    if (group.isSubGraphExpanded) {
			            	      cmd.collapseSubGraph(group);
			          	    	  showGroupLinkGroup(externalLinksConnected,linksToGroupOnly);     				            	     
			            	    } else {
			            	      cmd.expandSubGraph(group);
			            	      //hide Groups link, show Nodes link
			            	      hideGroupLinkGroup(group,externalNodesConnected,externalLinksConnected,linksToGroupOnly)
			            	    }
			            	    diagram.commitTransaction("expand-collapse");
			            	  } 
			              }),
			            $(go.TextBlock,
			              {
			                alignment: go.Spot.Left,
			                margin: 5,
			                font: "bold 18px 'Open Sans'",
			                stroke: "#4472C4"
			              },
			              new go.Binding("text", "label"))
			          ),  // end Horizontal Panel
			          

			
				       	$(go.Panel, 
					  	          $(go.Placeholder,{padding:5})
					       	)
			        )
	); // end Group

Do you guys have any idea for this?

2

Is this the same issue as How to keep new location when group moved? ?

3

No, It’s not.
May be the issue come TextBlock of HEADER. but i don’t know how to fix it.

4

OK, I was just confirming that there’s no Diagram.layout that might be automatically moving nodes due to the change of size of a node.

In that case I have no idea.

BTW, it’s wasteful to have a Panel that contains only a single object. (Exceptions include if you have set the Panel.background or something like that.)

5

I fixed. Just add more this line( bold line)
$(go.Panel, go.Panel.Vertical, // title above Placeholder
{ margin: 5, defaultAlignment: go.Spot.Left } …)

But still now, i don’t know reason for that issue!!!
One more thing, i’m not using any Diagram.layout in my diagram.

2 Likes