Space between links in one port

GoJS
1

Space between links in one port

Hi! I want to create mechanism for links where they should have only 1 angle and they have spacing into port.

I did angle as extending go.Link class and override computePoints method. But I came across with ports. Currently all links go to one point in port, e.g. if I use go.Spot.Right. If I use go.Spot.RightSight, I will get inccorect behavior sometimes. My question: Can I manage position into port, to every link has private finish point?

Expected result:

Actual result:

Behavior for go.Spot.Right:

Behavior for go.Spot.RightSight:

Code:

import go, { Point } from 'gojs';

export class OverridedLink extends go.Link {

    public computePoints = () => {

        this.clearPoints();

        const { fromNode, toNode } = this;

        if (!fromNode || !toNode) {

            return false;

        }

        const isFromTop = fromNode.location.y < toNode.location.y;

        const isFromLeft = fromNode.location.x < toNode.location.x;

        const fromCenterPoint = fromNode.getDocumentBounds().width / 2 + fromNode.location.x;

        const isToUnder =

            isFromTop &&

            fromCenterPoint > toNode.location.x &&

            fromCenterPoint < toNode.location.x + toNode.getDocumentBounds().width;

        const isToAbove =

            !isFromTop &&

            fromCenterPoint > toNode.location.x &&

            fromCenterPoint < toNode.location.x + toNode.getDocumentBounds().width;

        const getToSpot = () => {

            if (isToUnder) {

                return go.Spot.Top;

            }

            if (isToAbove) {

                return go.Spot.Bottom;

            }

            return isFromLeft ? go.Spot.LeftSide : go.Spot.RightSide;

        };

        const firstPoint = this.getLinkPoint(

            fromNode,

            this.fromPort,

            isFromTop ? go.Spot.Bottom : go.Spot.Top,

            true,

            true,

            toNode,

            this.toPort,

        );

        const lastPoint = this.getLinkPoint(toNode, this.toPort, getToSpot(), false, true, fromNode, this.fromPort);

        const secondPoint = new Point(firstPoint.x, lastPoint.y);

        this.addPoint(firstPoint);

        if (!isToUnder && !isToAbove) {

            this.addPoint(secondPoint);

        } else {

            lastPoint.x = firstPoint.x;

        }

        this.addPoint(lastPoint);

        return true;

    };

}
2

I assume you meant go.Spot.RightSide, not “RightSight”, which is not a Spot value.

Do you not want the behavior shown in the Entity Relationship sample? Entity Relationship
That sample just uses go.Spot.AllSides as its fromSpot and toSpot values, but you could use go.Spot.LeftRightSides or go.Spot.RightSide if you choose to limit the sides that the links can connect on.

3

Yep, my mistake, I mean go.Spot.RightSide.

Nope, I expect a slightly different result than go.Spot.RightSide.

If I use go.Spot.RightSide, I will get incorrect result for me:
First example: Screen Shot 2021-09-07 at 5.11.14
Second example: Screen Shot 2021-09-07 at 5.10.36
Third example: Screen Shot 2021-09-08 at 4.43.50

I expect that every link will have private finish point wihtout intersections
Expect result: Screen Shot 2021-09-07 at 5.08.37

4

That case that you show in your third screenshot is intentional – it is not supposed to reroute any links that are not connected with the node(s) that were moved.

If you want that behavior, add this “SelectionMoved” DiagramEvent listener:

        $(go.Diagram, . . .,
          {
            "SelectionMoved": function(e) {
              e.diagram.selection.each(function(node) {
                if (node instanceof go.Node) {
                  node.findNodesConnected().each(function(n) {
                    n.invalidateConnectedLinks();
                  });
                }
              });
            },
            . . .