I have a map that looks like this:
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 }),
),
);