Hi,
I’m trying to connect links between ports,
I set the toSpot/fromSpot to “Allsides”, but the ports are connected from the wrong direction (red arrow) :
.
Any ideas ?
What did you set the fromSpot/toSpot on? The link template or the node template? (For nodes, one normally sets the spot properties on an element that has GraphObjetct.portId set to a string, or on the whole Node if there is no such element.) What layout do you have?
If you have no layout, what happens?
I’d recommend using go.Spot.TopBottomSides, so that the links do not naturally go sideways, which would cause them to overlap the adjacent port.
Also, if you are using version 2.0+, you could also try using go.Spot.Center.
I set the the value on a Panel in the node. The Panel has portId value.
nodeTemplate.add(
(go.Panel,
{position: new go.Point(x, 22)},
(go.Shape,
{width: 18, height: 10, portId: portId + k, fill: “green”, toSpot: go.Spot.Center, fromSpot: go.Spot.Center })
));
I set the go.Spot.Center with 2.1 and it got better,
Yet the link does not not end in the middle of the shape.
Perhaps the links are behind all of the nodes/ports.
I set the layer in the link template to “Foreground” - no success,
also zOrder: 200 - no success.
By the way, the ports are NOT in itemarray.
They are added to the template with template.add(go.Panel…) because they are fixed in the template.
Does it make any difference ?
The problem is still that the links are behind the nodes. So, does the node template include the image of a device/rack? And you have set Link.layerName to “Foreground”?
So, if i put them in itemarray, the links should go foreground ?
Our posts crossed each other.
No, those are independent – all elements of each Part are drawn at the same time, in the order in which they are defined in the template.
I’m lost:
Once again,
I set the layer in the Link template to “Foreground” - no success,
also zOrder: 200 in the link Template - no success.
What next ?
You haven’t answered my question about how the node template(s) are defined.
var nodeTemplatecisco2950 =
(go.Node, // the Shape automatically fits around the TextBlock
{ scale : 0.26, movable: false },
new go.Binding("position", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
(go.Picture, { source: “icons/cisco2950.jpg” })
);
createCiscoPorts(nodeTemplatecisco2950);
function createCiscoPorts(nodeTemplate) {
var x = 37;
var portId = “C”;
var k = 0;
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 6; j++) {
nodeTemplate.add(
(go.Panel,
{position: new go.Point(x, 22)},
(go.Shape,
{width: 18, height: 10, portId: portId + k, fill: “green”, toSpot: go.Spot.Center, fromSpot: go.Spot.Center })
));
k++;
nodeTemplate.add(
(go.Panel,
{position: new go.Point(x, 40)},
(go.Shape,
{width: 18, height: 10, portId: portId + k, fill: “green”})
));
k++;
x += 21;
}
x += 9;
}
}
Sorry, I got that wrong. Try this:
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true
});
function P(id, x, y) {
return $(go.Shape,
{
fill: 'yellow', strokeWidth: 0,
position: new go.Point(x, y),
desiredSize: new go.Size(50, 30),
portId: id,
fromSpot: new go.Spot(0.5, 0.51),
toSpot: new go.Spot(0.5, 0.51),
fromEndSegmentLength: 0,
toEndSegmentLength: 0
});
}
myDiagram.nodeTemplate =
$(go.Node,
new go.Binding("position", "pos", go.Point.parse),
$(go.Picture, "Juniper.png"),
P("0", 202, 60),
P("1", 282, 60),
);
myDiagram.linkTemplate =
$(go.Link,
{ layerName: "Foreground" },
$(go.Shape, { strokeWidth: 2 })
);
myDiagram.model = $(go.GraphLinksModel,
{
linkFromPortIdProperty: "fp",
linkToPortIdProperty: "tp",
nodeDataArray:
[
{ key: 1, text: "Alpha", pos: "0 0" },
{ key: 2, text: "Beta", pos: "0 200" }
],
linkDataArray:
[
{ from: 1, fp: "0", to: 2, tp: "1" }
]
});
}
As you can see in the node template I defined, I only bothered to declare two ports. I used yellow instead of green to distinguish what I defined from what I took from your screenshot.
https://gojs.net/latest/intro/connectionPoints.html#UndirectedSpots