Expanding a group to an non occupied area

Hi,
I’m trying to expand a group without overlapping an existing expanded group or nodes.
Is there any way to expand a group to a location where there are no other nodes or group ?
Is there any way to know what are the group placeHolder X,Y bounds ?

Normally a diagram’s layout would move other nodes out of the way upon expanding a group. If you aren’t using one, you’ll need to figure out how to move the nodes/groups.

To get the size of the group, you can look at its actualBounds.

Please try to run the below code:
You should get 3 groups ,A,B,C. Please expand group B and see what happens. If you collapse it and expand it for the second time, it “learns” its neighbors location.
Thanks

var nodeKey=0;
var nodeDataArray = [
{ key: nodeKey++, source: “icons/lan-sw.png”, group: “A” },
{ key: nodeKey++, source: “icons/lan-sw.png”, group: “A” },
{ key: “A”, isGroup:true },
{ key: nodeKey++, source: “icons/lan-sw.png”, group: “B” },
{ key: nodeKey++, source: “icons/lan-sw.png”, group: “B” },
{ key: “B”, isGroup: true},
{ key: nodeKey++, source: “icons/lan-sw.png”, group: “C” },
{ key: nodeKey++, source: “icons/lan-sw.png”, group: “C” },
{ key: “C”, isGroup: true}
];

var linkDataArray = [];
var $ = go.GraphObject.make;

var diagram = new go.Diagram("myDiagramDiv");
diagram.contentAlignment = go.Spot.Top;
diagram.undoManager.isEnabled = true;
diagram.layout = $(go.GridLayout);

diagram.nodeTemplate =
        $(go.Node, "Spot",  
			    new go.Binding("position", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
				$(go.TextBlock,
                        {   isMultiline: false, editable: true },
                            new go.Binding("text", "loc")
                ),
                $(go.Picture, { width: 50, height: 50 }, new go.Binding("source") )
        );

diagram.groupTemplate =
        $(go.Group, "Auto",
                {
                    isSubGraphExpanded: false
                },
                $(go.Shape, "RoundedRectangle", // surrounds everything
                        { fill: "whitesmoke" }),
                $(go.Panel, "Vertical",                  
                        $("SubGraphExpanderButton"),
                         $(go.TextBlock,     // group title near top, next to button
                                        { font: "Bold 12pt Sans-Serif", margin: new go.Margin(10,0,10,0) },
                                        new go.Binding("text", "key")
                                        ),
						$(go.Placeholder,     // represents area for all member parts
                                {  background: "white",  padding: 5, alignment: go.Spot.TopLeft } 
						 )
						
                ),
				
        );

diagram.model = new go.GraphLinksModel(nodeDataArray,linkDataArray);

What version are you using? It works for me with minor adjustments.

Please change your textbox binding in nodeTemaple to “loc”,namely :
$(go.TextBlock,
{ isMultiline: false, editable: true, alignment: go.Spot.Bottom },
new go.Binding(“text”, “loc”)
)

Then, expand “Beta” group. See what happens…
By the way, i’m using gojs 1.7.11.

I’ve updated the codepen above with your suggested changes, and I also added a GridLayout to the Group. I suspect this is what you’ll want to do so that the nodes can be taken into account as the group first expands.

You’ll notice we use a similar technique in the Regrouping sample (although groups don’t start collapsed there).

I see the difference.
Well, let mt try present the special use case i have :
We implement a map editor where the user drag nodes to the diagram and connect them via links.
We also let the user group ALL nodes to a bunch of groups depending on some node value, (for example, group by site Id)
Once the user selects this option, all nodes are divided into groups and the groups span in a grid, although we do not use automatic layout. Then, the user can move the groups to a desired location and locate them wherever he wants on the diagram. The user can also save the diagram as JSON into a database.
Now, once the user expands one of the group, we need that all other groups or nodes move aside and when he collapse the group, the group should restore it last location.
If we use auto layout, the groups do move aside, but then every other operation is affected by the auto layout, for example, if the user decide to add new node to the map, the map is invalidated and auto layout again.
We can avoid auto layout but, it is complicated, since we need to remember the context of the operation, like if the node was dragged before grouping or after grouping and so on.
So, we need to implement a semi auto layout , namely, we should move all group aside when expanding a group and restoring its original location when collapsing and this is WITHOUT auto layout.
Any thoughts ?

Fundamentally the Diagram.layout (in conjunction with any Group.layouts) is responsible for positioning all Nodes. The default value of Diagram.layout is an instance of Layout, which only positions any nodes that do not have a real location (!node.location.isReal()).

So if you want to have flexible/dynamic ways of deciding whether and how to move a node, it would be best to implement a custom Layout class.

For more information about layout invalidation, GoJS Layouts -- Northwoods Software. But it’s not clear that you will want to use these mechanisms.

OK,
Thanks