Hi, I’m having trouble with spreading links on defined ports.
I’m using the LayeredDigraphLayout and have set LayeredDigraphLayout.setsPortSpots to false.
Here’s the code:
function makePort(name, align, spot, output, input) {
var horizontal =
align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
return $(go.Shape, {
fill: "transparent",
strokeWidth: 0,
width: horizontal ? NaN : 8,
height: !horizontal ? NaN : 8,
alignment: align,
stretch: horizontal ?
go.GraphObject.Horizontal : go.GraphObject.Vertical,
portId: name,
fromSpot: spot,
fromLinkable: output,
toSpot: spot,
toLinkable: input,
cursor: "pointer",
fromLinkableDuplicates: true,
toLinkableDuplicates: true,
fromLinkableSelfNode: true,
toLinkableSelfNode: true,
mouseEnter: function (e, port) {
if (!e.diagram.isReadOnly) port.fill = configPorts.fill;
},
mouseLeave: function (e, port) {
port.fill = "transparent";
},
});
}
myDiagram.nodeTemplate =
$(
go.Node,
"Table",
nodeStyle(), {
deletable: false,
doubleClick: (e, node) => synchronizeNewCustomer(node),
click: (e, node) => {
var diagram = node.diagram;
diagram.startTransaction("highlight");
diagram.clearHighlighteds();
updateHighlights(node);
diagram.commitTransaction("highlight")
}
},
$(
go.Panel,
"Auto",
$(
go.Shape,
"Rectangle", {
fill: configNodes.fill,
stroke: configNodes.stroke,
strokeWidth: configNodes.strokeWidth,
name: "NODE-SHAPE",
isPanelMain: true
},
new go.Binding("fill", "color"),
new go.Binding("stroke", "isHighlighted", function (highlighted, n) {
return highlighted ? "orange" : "deepskyblue";
}).ofObject()
),
$(
go.Panel,
"Vertical",
$(
go.TextBlock,
configTextStyle, {
margin: configNodes.margin,
wrap: go.TextBlock.WrapFit,
verticalAlignment: go.Spot.Center,
},
new go.Binding("text", "text")
),
$(
go.Panel,
"Table", {
margin: new go.Margin(0, 20, 10, 20)
},
new go.Binding("itemArray", "displayInformations"), {
itemTemplate: $(go.Panel, "TableRow",
$(go.TextBlock, new go.Binding("text", "key"), {
column: 0,
margin: 4,
width: 130,
alignment: go.Spot.Left,
font: "bold 10.5pt Lato, Helvetica, Arial, sans-serif"
},
new go.Binding("stroke", "color")
),
$(go.TextBlock, new go.Binding("text", "value"), {
column: 1,
alignment: go.Spot.Left
},
new go.Binding("stroke", "color")
)
)
}
)
),
), {
toolTip: $("ToolTip",
$(go.TextBlock, {
margin: 4
},
new go.Binding("text", "hint"),
new go.Binding("visible", "hint", function (h) {
return h != null && h.length > 0
})
)
)
},
// four named ports, one on each side:
makePort("T", go.Spot.Top, go.Spot.TopSide, true, true),
makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true),
makePort("R", go.Spot.Right, go.Spot.RightSide, true, true),
makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, true)
);
I was expecting the links to spread on the ports but they connect to the center and overlap instead.
I tested the ports with test data where the fromPort and toPort properties were set and they spread just fine.
Am I missing something?
