Ports always connecting to the left

GoJS
1

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!

Cheers.

2

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.

For example, see GoJS Tree View or Beat Paths

3

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...
4

Oh wait, looks like I am using go.LayeredDigraphLayout … let me fiddle a bit more :)

5

Yep, that did the trick! Thanks a million … it was making me crazy, and I was beginning to think I needed more coffee for this all night session :)