Sorry if this is a noobie-type question, but hey, I’m a noobie when it comes to GoJS :)
I am in the process of evaluating GoJS and was playing around with a simple diagram. I’m making great progress, I think, but for some reason, my ports on the top seem to always want to connect to the “left side” of the actual port shape, rather than the top. See the image below:
Is there some way to specify that it should connect to the “top” of the port shape? I may be missing some setting or another. There are a LOT of options in GoJS! Thanks in advance for any guidance!
I assume that you have specified on each port (i.e. each object whose GraphObject.portId is non-null) the GraphObject.fromSpot and GraphObject.toSpot property values to be go.Spot.Top or go.Spot.Right or go.Spot.Left or go.Spot.Bottom, as appropriate.
That would be sufficient. However if you have also set Diagram.layout to an instance of TreeLayout or LayeredDigraphLayout, then those layouts will route the links by setting Link.fromSpot and Link.toSpot to spot values appropriate for the direction of the layout. You can avoid that behavior by setting TreeLayout.setsPortSpot and TreeLayout.setsChildPortSpot, or LayeredDigraphLayout.setsPortSpots, to false.
I think I’ve done it right … here are some snippets of the relevant portions:
function makePort(name, spot, output, input, portSize) {
var port = $(go.Shape, "RoundedRectangle",
{
fill: "lightgray",
stroke: "darkgray",
desiredSize: portSize,
margin: new go.Margin(3, 3),
alignment: spot, // align the port on the main Shape
alignmentFocus: spot, // align the port on the main Shape
portId: name, // declare this object to be a "port"
fromSpot: spot, toSpot: spot, // declare where links may connect at this port
fromLinkable: output, toLinkable: input, // declare whether the user may draw links to/from here
toMaxLinks: 1, // don't allow more than one link into a port
cursor: "pointer" // show a different cursor to indicate potential link point
});
return port;
}
makePort("hr_port_t1", go.Spot.Top, true, true, new go.Size(8, 16));
...etc...