Link style on same node (toLinkableSelfNode)

GoJS
1

Hello,

I use LayeredDigraphLayout and i want to know if it’s possible to create a “stylized” link when both ports is in the same node.

My problem is that we want to use the “routing: go.Link.Normal” without curve, but the link pass over the node.

The unwanted result looks like this:

I would like to have this result (like “routing: go.Link.AvoidsNodes”)

Here my linkTemplate:

    this._linkTemplates.add('',
        $(go.Link,
            {
                curve: go.Link.None,
                routing: go.Link.Normal,
                fromSpot: go.Spot.Bottom,
                toSpot: go.Spot.Top,
                cursor: 'pointer',
                corner: 10,
            },
            $(go.Shape,
                {
                    isPanelMain: true,
                    strokeWidth: 4,
                    name: 'BORDER'
                },
                new go.Binding('stroke', '', this.linkColorConverter.bind(this))
            ),
            $(go.Shape,
                {
                    toArrow: 'Standard',
                    strokeWidth: 6
                })
        )
    );

Thank you!

2

You could do something like this “LayoutCompleted” DiagramEvent listener to fix up those links. Here’s a Diagram initialization that you could try:

      "LayoutCompleted": function(e) {
            e.diagram.links.each(function(l) {
              l.routing = ((l.fromNode === l.toNode) ? go.Link.Orthogonal : go.Link.Normal);
            });
          },

It actually would be better to override LayeredDigraphLayout.commitLinks, but the Diagram listener is equivalent.

Now that I’ve tried this code, I see a “misfeature” in the routing that it takes. You’ll see it if you try it. I’ll see if we can improve that for version 1.7.

3

Hi,

It seems to work, but sometimes, when the diagram is “zoomOut” (when the ports are difficult to grab with the mouse), the function .findLinkablePort() returns me a null value…

let linkingTool = this.getDiagramObject().toolManager.linkingTool;

let fromObject: Object;
let toObject: Object;

// Get the parent node of the link
if (linkingTool.findLinkablePort() && linkingTool.findLinkablePort().part) {
    fromObject = linkingTool.findLinkablePort().part.data;
}

…

Does it exist a workaround for this behavior?

Here my ports and the calls

this.makePort(‘T’, go.Spot.Top, false, true, true, true, 12),
this.makePort(‘B’, go.Spot.Bottom, true, false, true, true, 12)

protected makePort(name, spot, output, input, isVisible = true, isLinkableSelfNode = false, desiredSize = 8): any {
    let shape = go.GraphObject.make(go.Shape, 'Circle',
        {
            fill: 'transparent',
            stroke: 'black',
            desiredSize: new go.Size(desiredSize, desiredSize),
            alignment: spot,
            alignmentFocus: spot,
            portId: name,
            fromSpot: spot,
            toSpot: spot,
            toLinkable: input,
            fromLinkable: output,
            fromLinkableSelfNode: (output && isLinkableSelfNode),
            toLinkableSelfNode: (input && isLinkableSelfNode)
        },
        new go.Binding('cursor', '', (a, b) => a.diagram && a.diagram.isReadOnly ? '' : 'copy').ofObject());

    if (typeof isVisible === 'function') {
        shape.bind(new go.Binding('visible', '', isVisible));
    } else {
        shape.visible = isVisible;
    }

    return shape;
}

Thank you and have a nice week-end!

4

Sorry…
In the function makePort, I forgot to add this in the shape decleration :
fromLinkable = output;

Thank you

5

Is this a completely new topic? I don’t see what LinkingTool.findLinkablePort has to do with your original question.

Anyway, LinkingTool.findLinkablePort is really a protected method of LinkingTool. So are you overriding some LinkingTool method in order to call findLinkablePort, and if so, why?

If not, you really shouldn’t be calling that method.

6

Hi,

You are right. This is another topic. I will start a new one in our comments.

Sorry.