Link Connection Points on Nodes

GoJS
1

Hello, I am using the function “makePort()” (from Flowchart). I need the port was placed on similar place of a Node. But the link moves around the Shape (or the Node)
it is what I want to:

but the line moves around

here my the part of my code:

    function makePort(name, spot, output, input) {
        // the port is basically just a small circle that has a white stroke when it is made visible
        return $(go.Shape, "SQUARE",
            {
                  fill: "RED",
                  stroke: null,  // this is changed to "white" in the showPorts function
                  desiredSize: new go.Size(8, 8),
                  alignment: spot, 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
                  cursor: "pointer"  // show a different cursor to indicate potential link point
            });
    };

        $(go.Node, "Auto",
            {
                rotatable: true, rotateObjectName: "SHAPE", locationSpot: go.Spot.Center, locationObjectName: "SHAPE",
                selectionObjectName: "SHAPE"
            },
            $(go.Panel,
                $(go.Shape,
                    {
                        name: "SHAPE", fill: "transparent",
                        //portId: "", cursor: "pointer", toSpot: go.Spot.Top, toLinkable: true, toMaxLinks: 1,
                        //fromSpot: go.Spot.Bottom, fromLinkable: true, fromMaxLinks: 1,
                        strokeWidth: 1.5, stroke: "#333745", strokeCap: "round", strokeJoin: "round"
                    },
                    new go.Binding("figure", "fig"),
                    new go.Binding("geometry", "geom"))
                    ),
            makePort("R", go.Spot.Right, true, false)
        );

when I am using this:

portId: "", cursor: "pointer", toSpot: go.Spot.Top, toLinkable: true, toMaxLinks: 1,
fromSpot: go.Spot.Bottom, fromLinkable: true, fromMaxLinks: 1,

instead of the function “makePort()” it works properly.

3

You are probably not setting the:

  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",

In your model. Then you need to make sure you set it in your Link data too. Flowchart link data looks like this:

  "linkDataArray": [
{"from":1, "to":2, "fromPort":"B", "toPort":"T"},

makePort() sets the portId and it needs to match.

4

You are probably not setting the:

“linkFromPortIdProperty”: “fromPort”,
“linkToPortIdProperty”: “toPort”,
In your model. Then you need to make sure you set it in your Link data too. Flowchart link data looks like this:

“linkDataArray”: [
{“from”:1, “to”:2, “fromPort”:“B”, “toPort”:“T”},
makePort() sets the portId and it needs to match.

I use Palette and the diagram is empty by default. I can not create
"linkDataArray": [ {"from":1, "to":2, "fromPort":"B", "toPort":"T"}, at the beginning.

Introduction GoJS Link Connection Points on Nodes -- Northwoods Software says that I need to
“You can easily require links to end at a particular point within the bounds of the node, rather than at the nearest edge intersection. Set the GraphObject.toSpot to a Spot value other than Spot.None to cause links coming into the node to end at that spot within the node.” - so I did in the function makePort() and the function makePort() returns it to the Node, but the link can not be fastened to the Port, it connects to the whole Node instead of Port and the Link ends where the line toward the center of the node intersects with the edge of the node.

5

Yes that discussion about connection points and spots applies to the port that the link is connected with.

Our guess is that your link is connecting with the default port, the whole node, not with the little red square port that you are setting up in the node. And the reason for that is that you haven’t enabled multiple ports by setting those two GraphLinksModel properties: linkFromPortIdProperty and linkToPortIdProperty.

Read more about it at GoJS Ports in Nodes-- Northwoods Software