LinkShiftingTool, FromSpot, ToSpot

GoJS
1

Hello,

  1. Where can I read about LinkShiftingTool ?
    I have found the example https://gojs.net/latest/extensions/LinkShifting.html
    but can not find information about LinkShiftingTool in the API.

  2. How can I draw links to the defined point or point that I want to drow a link?
    For example: I draw a link
    the link attaches to the center of the Node, but I need to draw a link to any point of the Node
    like this:

    or this:

2

The API documentation ( GoJS API ) does not include any of the extensions.

The complete source code for each extension is there in their respective JavaScript files. (Or the TypeScript files in extensionsTS/.)

The LinkShiftingTool can be used by users to manually adjust the connection point of a link to a port, thereby achieving the results that you are looking for.

3

“The LinkShiftingTool can be used by users to manually adjust the connection point of a link to a port, thereby achieving the results that you are looking for.” - I can manually adjust the connection after setting a link. But I need a link was attached to the place where I placed it at first (when I draw it, not after drawing)

4

That would require changing the behavior of the LinkingTool to specify the Link.toSpot. If I get a chance later today, I can demonstrate it.

5

Try this:

  function SpotLinkingTool() {
    go.LinkingTool.call(this);
  }
  go.Diagram.inherit(SpotLinkingTool, go.LinkingTool);

  SpotLinkingTool.prototype.insertLink = function(fromnode, fromport, tonode, toport) {
    var link = go.LinkingTool.prototype.insertLink.call(this, fromnode, fromport, tonode, toport);
    if (link !== null) {
      var port;
      if (this.isForwards) {
        port = toport;
      } else {
        port = fromport;
      }
      var portb = new go.Rect(port.getDocumentPoint(go.Spot.TopLeft),
                              port.getDocumentPoint(go.Spot.BottomRight));
      var lp = link.getLinkPointFromPoint(port.part, port, port.getDocumentPoint(go.Spot.Center),
                                          this.diagram.lastInput.documentPoint, !this.isForwards);
      var spot = new go.Spot((lp.x - portb.x) / (portb.width || 1), (lp.y - portb.y) / (portb.height || 1));
      if (this.isForwards) {
        link.toSpot = spot;
      } else {
        link.fromSpot = spot;
      }
    }
    return link;
  }

  function SpotRelinkingTool() {
    go.RelinkingTool.call(this);
  }
  go.Diagram.inherit(SpotRelinkingTool, go.RelinkingTool);

  SpotRelinkingTool.prototype.reconnectLink = function(link, newnode, newport, toend) {
    go.RelinkingTool.prototype.reconnectLink.call(this, link, newnode, newport, toend);
    if (link !== null) {
      var port = newport;
      var portb = new go.Rect(port.getDocumentPoint(go.Spot.TopLeft),
                              port.getDocumentPoint(go.Spot.BottomRight));
      var lp = link.getLinkPointFromPoint(port.part, port, port.getDocumentPoint(go.Spot.Center),
                                          this.diagram.lastInput.documentPoint, !toend);
      var spot = new go.Spot((lp.x - portb.x) / (portb.width || 1), (lp.y - portb.y) / (portb.height || 1));
      if (toend) {
        link.toSpot = spot;
      } else {
        link.fromSpot = spot;
      }
    }
    return link;
  }

When initializing the Diagram:

      $(go.Diagram, . . .,
        {
          . . .,
          linkingTool: $(SpotLinkingTool),
          relinkingTool: $(SpotRelinkingTool),
          . . . })