Hi, I have faced with an issue with RoundedRectangle shape that is using inside group template. In the next screenshot, you can see that link from Gamma node is pointing to the center of the Epsilon group.
However, if I change shape from RoundedRectangle to Rectangle, this hidden spot disappears from the group center.
What am I doing wrong? My goal is to force a link that connected from the node inside group to the group itself follow by group perimeter without jumping to the group center while connected node moving.
Code:
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "Rectangle",
{
fill: "white",
portId: "", cursor: "pointer",
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
},
new go.Binding("fill", "color")),
$(go.TextBlock,
{
font: "bold 14px sans-serif",
stroke: '#333',
margin: 6,
isMultiline: false,
editable: true
},
new go.Binding("text", "text").makeTwoWay()),
);
myDiagram.groupTemplate =
$(go.Group, "Vertical",
{
selectionObjectName: "PANEL",
ungroupable: true
},
$(go.TextBlock,
{
font: "bold 19px sans-serif",
isMultiline: false,
editable: true
},
new go.Binding("text", "text").makeTwoWay(),
new go.Binding("stroke", "color")),
$(go.Panel, "Auto",
{ name: "PANEL" },
$(go.Shape, "Rectangle", // <---- Here is the problem spot RoundedRectangle
{
fill: "rgba(128,128,128,0.2)", stroke: "gray", strokeWidth: 3,
portId: "", cursor: "pointer",
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
}),
$(go.Placeholder, { margin: 10, background: "transparent" })
)
);
myDiagram.linkTemplate =
$(go.Link,
new go.Binding("fromSpot"),
new go.Binding("toSpot"),
$(go.Shape),
$(go.Shape, { toArrow: "Standard"})
)
var nodeDataArray = [
{ key: 3, text: "Gamma", color: "lightgreen", group: 5, loc: "300 100" },
{ key: 4, text: "Delta", color: "pink", group: 5, loc: "500 300" },
{ key: 5, text: "Epsilon", color: "green", isGroup: true },
{ key: 6, text: "Test", color: "blue", group: 5, loc: "100 -300" }
];
var linkDataArray = [
{ from: 3, to: 5, color: "purple" }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}