Prevent node exceeding group's boundaries

@neomib wrote:

I have a map that looks like this:

map.png730×445 281 KB

As you can see the nodes exceed their group’s boundaries.

How can I prevent that?
Here is my code:

 this.diagram.nodeTemplate =
            $(go.Node, "Auto",
                {locationSpot: go.Spot.Center, selectionAdorned: false,dragComputation: this.avoidNodeOverlap},
                $(go.Panel, "Auto",
                    {name: "PANEL"},
                    new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
                    $(go.Shape, "Rectangle",  // default figure
                        {
                            portId: "", // the default port: if no spot on link data, use closest side
                            fromLinkable: false, toLinkable: false, cursor: "pointer",
                            strokeWidth: 3,
                        },
                        new go.Binding("stroke", '', (n) => {
                            return n.isActive ? 'yellow' : n.stroke;
                        }),
                        new go.Binding("fill", '', (n) => {
                            return n.highlight || n.isActive ? n.stroke : n.fill;
                        }),
                        new go.Binding("figure")),
                    $(go.TextBlock,
                        {margin: 10, font: "bold 32px sans-serif", cursor: "pointer"},  // some room around the text
                        new go.Binding("text", "text"),
                        new go.Binding("stroke", '', (n) => {
                            return n.isDarkFill ? 'white' : 'black';
                        })),
                    {
                        contextClick: (e, node) => {
                            if (!this.props.userMaps.currentMap.literature.isHeatmap) {
                                this.props.nodeRightClick(node.part.data, e.viewPoint);
                            }
                        },
                    }
                ));

this.diagram.groupTemplate =
            $(go.Group, "Auto",
            new go.Binding("", "display", (display, graphObj) => {
                graphObj.setProperties(display.layout);
            }),
                $(go.Panel, "Auto",
                    $(go.Shape, "Ellipse",
                        {
                            name: "OBJSHAPE",
                            parameter1: 14,
                            margin: new go.Margin(50, 0, 0, 0)
                        },
                        new go.Binding("fill", "fill"))
                ),
                $(go.Panel, "Vertical",
                    $(go.Panel, "Spot",
                        { isClipping: true, stretch: go.GraphObject.Horizontal, height: 200 },
                        new go.Binding("visible", "display", (display) => display !== undefined),
                        $(go.Shape,
                            new go.Binding("", "display", (display, graphObj) => {
                                graphObj.setProperties(display.shape);
                            }),
                        ),
                        $(go.Picture,
                            new go.Binding("source", "display", (display) => display.img),
                        ),
                        $(go.TextBlock,
                            {
                                name: "GROUPTEXT",
                                alignment: go.Spot.Center,
                                // alignmentFocus: new go.Spot(0, -2, 0, 0),
                                font: "Bold 32px Sans-Serif",
                                stroke: "white"
                            },
                            new go.Binding("text", "text")),
                    ),
                   
                    $(go.Placeholder, { padding: 48 }),
                ),
                
            );

Posts: 2

Participants: 2

Read full topic