Snap doesn't work when node size is bigger

GoJS
1 
const roundedRectangleTemplate = $(
  go.Node,
  $(
    go.Panel,
    "Spot",
    $(
      go.Panel,
      "Spot",
      $(go.Shape, "RoundedRectangle", {
        width: 200,
        height: 150,
        fill: "white",
        stroke: "#E4E5E8",
        shadowVisible: true,
        parameter1: 12,
      }),
      $(go.Shape, "Circle", {
        cursor: "pointer",
        fill: "transparent",
        stroke: "transparent",
        width: 1,
        height: 1,
        portId: TO_PORT,
        alignment: go.Spot.Left,
        toSpot: go.Spot.Left,
        toLinkable: true,
      }),
      $(go.Shape, "Circle", {
        fill: "transparent",
        stroke: "transparent",
        width: 1,
        height: 1,
        portId: FROM_PORT,
        alignment: go.Spot.Right,
        fromSpot: go.Spot.Right,
        fromLinkable: true,
        name: "FROMPORTGO",
      }),
  ),
  new go.Binding("location", "location", go.Point.parse).makeTwoWay(
    go.Point.stringify
  )
);

above is a sample template of the node, when i draw a temporary link over the right edge or anywhere inisde the node, i want the link to snap to the node’s to port.

currently it only snaps if i am close the toport of the node, but i want it such that hovering anywhere inside the node with a temporary link, it should snap to the to_port of the node.

is this possible ?

2

Yes, the portGravity property, LinkingBaseTool | GoJS API, causes the LinkingBaseTool.findTargetPort method to just look at the distance from the mouse/pointer to the potential port, because it calls Diagram.findObjectsNear to collect all of the ports nearby and then find the closest one.

So I suppose you could override that method to do what you want. Here’s one possibility:

  myDiagram.toolManager.linkingTool.findTargetPort = function(toend) {
    const diagram = this.diagram;
    const p = diagram.lastInput.documentPoint;
    let gravity = this.portGravity;
    if (gravity <= 0) gravity = 0.1;
    const node = diagram.findPartAt(p);
    if (node === null) return null;
    const nearports = node.ports;
    let bestDist = Infinity;
    let bestPort = null;
    const temp = new go.Point();
    const it = nearports.iterator;
    while (it.next()) {
      const port = it.value;
      const node = port.part;
      if (!(node instanceof go.Node)) continue;
      const toPoint = port.getDocumentPoint(go.Spot.Center, temp);  // ?? assumes center point of port
      const dx = p.x - toPoint.x;
      const dy = p.y - toPoint.y;
      const dist = dx * dx + dy * dy;  // don't bother taking sqrt
      if (dist < bestDist) {  // closest so far
        // try isValidLink in the appropriate direction
        if ((toend && this.isValidLink(this.originalFromNode, this.originalFromPort, node, port)) ||
            (!toend && this.isValidLink(node, port, this.originalToNode, this.originalToPort))) {
          bestPort = port;
          bestDist = dist;
        }
      }
    }
    if (bestPort !== null) return node;
    return null;
  }

This code was modified to just look at the ports of the node under the mouse/pointer.

3

Thanks alot, the above code seems to work.