Link to & fromSpot not working as intended

GoJS
1

Hello,

I am playing around with the goJs library, but stumbled upon a problem I can’t figure out by myself.
I want two nodes to be able to connect to eachother. These nodes have multiples spots on which they can connect. I want the bottom spots to only connect to eachtother.
The left spots can only connect to a right spot.

This is the code that defines this type of node

var template = $$(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    $$(go.Shape, "RoundedRectangle", { fill: FlowDiagram.Color.BlockColor, stroke: FlowDiagram.Color.BlockBorderColor, width: 120, height: 50 }),

    $$(go.Panel, "Position", { width: 120, height: 50 },
        $$(go.Panel, { position: new go.Point(2, 21) }, $$(go.Shape, "Ellipse", { width: 10, height: 10, portId: "In", toSpot: go.Spot.Left, toLinkable: true, fromSpot: go.Spot.Right, toMaxLinks: 1, fromLinkable: false, fill: FlowDiagram.Color.PortColor, strokeWidth: 0 })),
        $$(go.Panel, { position: new go.Point(108, 21) }, $$(go.Shape, "Ellipse", { width: 10, height: 10, portId: "Out", fromSpot: go.Spot.Right, toSpot: go.Spot.Left, fromLinkable: true, fromMaxLinks: 1, toLinkable: false, fill: FlowDiagram.Color.PortColor, strokeWidth: 0 })),
        $$(go.Panel, { position: new go.Point(55, 38) }, $$(go.Shape, "Ellipse", { width: 10, height: 10, portId: "OutBack", fromSpot: go.Spot.Bottom, toSpot: go.Spot.Bottom, fromLinkable: true, fromMaxLinks: 1, toLinkable: true, fill: FlowDiagram.Color.PortColor, strokeWidth: 0 }))
    ),        
    $$(go.Panel, "Spot", { width: 100, height: 50 },
         $$(go.TextBlock, { alignment: go.Spot.Center, textAlign: "center", margin: new go.Margin(12, 0), font: "normal 9pt sans-serif", stroke: FlowDiagram.Color.TextColor }, new go.Binding("text", "name"))
    ),

    { maxLocation: FlowDiagram.Config.MaxLocation, minLocation: new go.Point(50, 50) }
);

In this print screen, the left hand nodes are connected as they should be able to. But the right hand side shows what is not allowed, but is still possible.

Any help or remarks would be much appreciated.

2

You cannot enforce that behavior with just fromSpot and toSpot, which only declare where a link can connect (which side of that port), and do not say which links can or cannot connect.

You will probably need to create your own linking validation, which takes into account the specifics of the from and to port (perhaps just their portId names, depending on the rules you want).

You’d want something like this, I think:

  function portMatching(fromnode, fromport, tonode, toport) {
    if (fromport.portId === "Out") return toport.portId === "In";
    if (fromport.portId === "In") return toport.portId === "Out";
    return fromport.portId === toport.portId;
  }

  myDiagram.toolManager.linkingTool.linkValidation = portMatching;
  myDiagram.toolManager.relinkingTool.linkValidation = portMatching;
3

Thanks a lot! I figured from the API that toSpot and fromSpot didn’t support what I was looking for. Thanks to your help I got it to work.