Sorry, but I do not get that behavior when I am using your code.
Here’s what I get after the third link:
In case you are wondering why the links are not evenly spread out along the bottom of the “Alpha” node, that is because drawing a new link intentionally does not try to reroute any other links. After all, the user might have reshaped those links by hand and they probably do not want that work to be lost just because they drew a new link. But you could do that if you wanted by implementing a “LinkDrawn” DiagramEvent listener that calls Link.invalidateRoute on those other links.
Here’s the complete source code that I am using:
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center, // for v1.*
"undoManager.isEnabled": true,
"ModelChanged": function(e) { // just for demonstration purposes,
if (e.isTransactionFinished) { // show the model data in the page's TextArea
document.getElementById("mySavedModel").textContent = e.model.toJson();
}
}
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ layoutConditions: go.Part.LayoutAdded | go.Part.LayoutRemoved, zOrder: 2 },
//{ resizable: false, fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides, minSize: new go.Size(108, 67) },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{ resizable: false, resizeObjectName: "PANEL", /*resizeAdornmentTemplate: nodeResizeAdornmentTemplate,*/ desiredSize: new go.Size(108, 67), minSize: new go.Size(108, 67), maxSize: new go.Size(220, 120) },
new go.Binding("angle").makeTwoWay(),
new go.Binding("position", "position", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
$(go.Shape, //nodeShape,
{
fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides,
portId: "",
parameter1: 2,
fill: "white" /*nodebackground*/, /*stroke: nodeStroke, */ strokeWidth: 2,
spot1: new go.Spot(0, 0, 1, 1),
spot2: new go.Spot(1, 1, -1, 0),
minSize: new go.Size(95, 59),
maxSize: new go.Size(220, 120),
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
},
new go.Binding("figure", "figure").makeTwoWay(),
new go.Binding("fill", "fill").makeTwoWay(),
new go.Binding("stroke", "stroke").makeTwoWay()
),
$(go.Panel, "Vertical",
{
alignment: go.Spot.Top,
stretch: go.GraphObject.Horizontal,
minSize: new go.Size(108, 67)
},
$(go.Panel, "Table",
{
background: "lightblue",
stretch: go.GraphObject.Horizontal,
width: 15.5, height: 13,
margin: new go.Margin(2, 3, 0, 3)
},
$(go.Shape, "StopSign", {
alignment: go.Spot.TopLeft, margin: 2,
fill: "red", width: 8, height: 8, stroke: null,
//visible: visible
}, new go.Binding("visible", "visible").makeTwoWay()),
$("Button", {
alignment: go.Spot.Right,
width: 16,
height: 15,
margin: new go.Margin(0, 0, 0, 90),
//click: add_IP_OP,
visible: false,
cursor: "pointer"
}, new go.Binding("visible", "stroke", function(color) {
debugger;
if (color == "gray" && MbtDiagramInstance.getModelTitleName != "Published Model")
return true;
else
return false;
}),
$(go.TextBlock, {
text: '',
textAlign: "center",
font: '10px FontAwesome'
}),
)),
$(go.TextBlock,
{
font: "12px Arial, sans-serif", //stroke: lightText,
margin: new go.Margin(4, 6, 4, 6),
stretch: go.GraphObject.Horizontal, textAlign: "center",
height: 38,
maxLines: 3,
verticalAlignment: go.Spot.Center,
},
//n ew go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding("text", "text").makeTwoWay()),
{
toolTip:
$("ToolTip",
new go.Binding("visible", "text", function(t) {
if (t.trim('') == "Associated FL Name :")
t = '';
return !!t;
}).ofObject("TB"),
$(go.TextBlock,
{ name: "TB", margin: 4, font: "bold 12px Verdana,serif", stroke: "black" },
new go.Binding("text" /*, "", diagramNodeInfo*/))
)
}),
{ contextMenu: $(go.Adornment) },
makePort("T", go.Spot.Top, go.Spot.TopSide),
makePort("L", go.Spot.Left, go.Spot.LeftSide),
makePort("R", go.Spot.Right, go.Spot.RightSide),
makePort("B", go.Spot.Bottom, go.Spot.BottomSide)
);
function makePort(id, align, spot) {
var port = $(go.Shape,
{
fill: "transparent",
stroke: null,
portId: id,
alignment: align,
cursor: "pointer",
fromSpot: spot,
fromLinkable: true,
fromLinkableDuplicates: true,
fromLinkableSelfNode: true,
toSpot: spot,
toLinkable: true,
toLinkableSelfNode: true,
toLinkableDuplicates: true,
toolTip: // define a tooltip for each node that displays the color as text
$(go.Adornment, "Auto",
$(go.Shape, { fill: "#FFFFCC" }),
$(go.TextBlock, { margin: 4 },
new go.Binding("text" /*, "", diagramInfo*/))
) // end of Adornment
});
if (align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom)) {
port.height = 3;
port.stretch = go.GraphObject.Horizontal;
} else {
port.width = 3;
port.stretch = go.GraphObject.Vertical;
}
return port;
}
myDiagram.linkTemplate =
$(go.Link,
{
routing: go.Link.AvoidsNodes,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
fromLinkable: true,
fromLinkableSelfNode: true,
fromLinkableDuplicates: true,
toLinkable: true,
toLinkableSelfNode: true,
toLinkableDuplicates: true,
zOrder: 1
},
$(go.Shape),
$(go.Shape, { toArrow: "OpenTriangle" })
);
myDiagram.model = $(go.GraphLinksModel,
{
linkFromPortIdProperty: "fromport",
linkToPortIdProperty: "toport",
nodeDataArray:
[
{ key: 1, text: "Alpha", loc: "0 0" },
{ key: 2, text: "Beta", loc: "-200 200" },
{ key: 3, text: "Gamma", loc: "200 200" },
{ key: 4, text: "Delta", loc: "0 300" }
]
});
}