How to put nodes inside groups and keep positions

[luciamaj]

I’m trying to building a static Diagram with go.js (nodes and groups have fixed positions). My groups are in the desired spots but when I add a child node to one of them everything moves. How can I fix my layout? My js file

var goVar = go.GraphObject.make;
myDiagram =
    goVar(go.Diagram, "myDiagramDiv",
        {
            isReadOnly: true,
            initialAutoScale: go.Diagram.Uniform
        });

myDiagram.nodeTemplate =
    goVar(go.Node, "Auto",
        new go.Binding("location", "loc", go.Point.parse),
        goVar(go.Shape, "RoundedRectangle",
            new go.Binding("fill", "color"),
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        ),
        goVar(go.TextBlock, "text",
            { margin: 10 },
            new go.Binding("text", "key"),
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        )
    )

myDiagram.groupTemplate =
    goVar(go.Group, "Vertical",
        goVar(go.Panel, "Auto",
            goVar(go.Shape, "RoundedRectangle",
                {
                    parameter1: 20,
                    fill: "rgba(0,0,0,0)",
                    strokeWidth: 3,
                },
                new go.Binding("stroke", "borderColor"),
            ),
            new go.Binding("desiredSize", "size", go.Size.parse),
            goVar(go.Placeholder,
                { padding: 5 })
        ),
        goVar(go.TextBlock,
            { alignment: go.Spot.TopRight, font: "Bold 12pt Sans-Serif" },
            new go.Binding("text", "key"),
            new go.Binding("stroke", "borderColor"),
        ),
        new go.Binding("position", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    );

jQuery.getJSON("data.json", load);


function load(jsondata) {
    myDiagram.model = new go.GraphLinksModel(jsondata["nodes"], jsondata["links"]);
}

[walter]

“everything moves”? Could you show some small before and after screenshots?

You haven’t set any Diagram.layout or Group.layout property, have you? If you haven’t, then I don’t see how “everything moves”.

[luciamaj]

Thank you for your fast answer :) Here you can see what I mean.
(outside the group)

(inside group “a”)

[walter]

I couldn’t read your code because it wasn’t formatted correctly. Please indent properly and then surround the code with triple-backquotes. Code Formatting
I have edited your post.

I don’t see anything odd about your code, so I cannot explain why you are getting odd behavior when you add a node. Perhaps you could explain how you do that?

[luciamaj]

This is the json I’m using to create the nodes, the first 4 elements are the big group containers, the last one is the node I’m trying to place inside the first group.

{
    "nodes": [
        {
            "key": "a", 
            "loc": "0 0",
            "isGroup": "true",
            "borderColor": "#90E4E3",
            "size": "1000, 250",
            "nodeId": "1",
            "category": "simple"
        },
        {
            "key": "Serie B", 
            "loc": "0 300",
            "isGroup": "true",
            "borderColor": "#8AE784",
            "size": "300, 250",
            "nodeId": "2",
            "category": "simple"
        },
        {
            "key": "Serie C", 
            "loc": "350 300",
            "isGroup": "true",
            "borderColor": "#E78484",
            "size": "300, 250",
            "nodeId": "3",
            "category": "simple"
        },
        {
            "key": "serie D", 
            "loc": "700 300",
            "isGroup": "true",
            "borderColor": "#DAE784",
            "size": "300, 250",
            "nodeId": "4",
            "category": "simple"
        },
        {
            "key": "Milan", 
            "borderColor": "#90E4E3",
            "nodeId": "1",
            "category": "simple",
            "group": "a"
        }
    ]
}

[walter]

I think what has happened is that adding a node without a location causes the layout to give it a real location, which in this case was at (0, 0).

Because your Group template uses a Placeholder, the group’s location is where the placeholder is. (By default, that’s at the top-left corner of the placeholder.) Any position that you set or that it gets through a binding will be ignored.

You have given the whole panel a particular desiredSize via a binding, so the panel is a lot bigger than it needs to be to hold the placeholder. But because the placeholder is in an “Auto” panel, by default it is centered in that panel. (You could change that by setting its alignment.)

If the “Milan” node is at (0, 0), then the placeholder will be around (0, 0). But the placeholder must be center-aligned in its panel, which means the group will be centered around the placeholder. (More or less – the TextBlock causes it to be slightly asymmetrical vertically.) That means the position of the group, i.e. its top-left corner, has to be way towards the left, at a significant negative X value.

I’m not sure about how you intend to use groups and nodes. Perhaps you should not use a Placeholder: GoJS Sized Groups -- Northwoods Software

Planogram