How to fix the connection skew between two nearby nodes?

GoJS
1

How to fix the connection skew between two nearby nodes?

Untitled
Untitled.png680×616 24.6 KB

I am using go.Link.Bezier and it creates a bad image when the objects are too close

My Link Template:

this.diagram.linkTemplate =
            goMake(go.Link,
                {
                    curve: go.Link.Bezier,
                    toShortLength: 0.5,
                    fromEndSegmentLength: 20, toEndSegmentLength: 50,
                    zOrder: -1, reshapable: true,
                    doubleClick: (e: go.InputEvent, obj: go.GraphObject) => {
                        this.showLinkSelector(e.viewPoint.x, e.viewPoint.y, obj.part.data);
                        e.event.stopPropagation();
                    },
                    mouseEnter: (e: any, link: go.Link) => {
                        (link.findObject("HIGHLIGHT") as any).stroke = "rgba(30,144,255,0.2)";
                        let setVisible = this.findConfigDiagram("linkConfig", "isShowMouseOver");
                        if (!setVisible) {
                            link.findObject("linkTextBlockBackground").visible = true;
                            link.findObject("linkTextBlock").visible = true;
                        }
                    },
                    mouseLeave: (e: any, link: any) => {
                        link.findObject("HIGHLIGHT").stroke = "transparent";
                        let setVisible = this.findConfigDiagram("linkConfig", "isShowMouseOver");
                        if (!setVisible) {
                            link.findObject("linkTextBlockBackground").visible = false;
                            link.findObject("linkTextBlock").visible = false;
                        }
                    },
                },
                {
                    selectionAdornmentTemplate:
                        goMake(go.Adornment,
                            goMake(go.Shape,
                                { isPanelMain: true, stroke: "dodgerblue", strokeWidth: 1 }),
                            goMake(go.Shape,
                                { toArrow: "CustomArrowHead", fill: "dodgerblue", stroke: null })
                        )
                },
                new go.Binding("points").makeTwoWay(),
                goMake(go.Shape,  // the highlight shape, normally transparent
                    {
                        isPanelMain: true,
                        strokeWidth: 2,
                        stroke: "transparent",
                        name: "HIGHLIGHT"
                    }
                ),
                goMake(go.Shape, "RoundedRectangle", // the link path shape
                    {
                        isPanelMain: true,
                        strokeWidth: 1
                    },
                    new go.Binding("stroke", "color")
                ),
                goMake(go.Shape,  // the arrowhead
                    {
                        toArrow: "CustomArrowHead",
                        strokeWidth: 0
                    },
                    new go.Binding("fill", "color")
                ),
                goMake(go.Panel, "Auto",
                    {
                        _isLinkLabel: this.findConfigDiagram("linkConfig", "isDraggableLinkLabel"),
                        segmentIndex: NaN,
                        segmentFraction: .5
                    },
                    goMake(go.Shape, "RoundedRectangle",  // the label background, which becomes transparent around the edges
                        {
                            name: "linkTextBlockBackground",
                            visible: false,
                            strokeWidth: 0
                        },
                        new go.Binding("fill", "color"),
                        new go.Binding("visible", "id", this.bindIsShowMouseOver)
                    ),
                    goMake(go.TextBlock, "transition",  // the label text
                        {
                            name: "linkTextBlock",
                            isMultiline: false,
                            stroke: '#fff',
                            font: "4pt sans-serif",
                            margin: new go.Margin(0.7, 0.7, 0.31, 0.7),
                            editable: true,
                            visible: false
                        },
                        new go.Binding("text", "text"),
                        new go.Binding("visible", "id", this.bindIsShowMouseOver)
                    )
                )
            );
2

Don’t set fromEndSegmentLength or toEndSegmentLength?

3

this softness does not occur if I do not set the values.

Show me the method so that this does not occur.

Untitled

I don’t set fromEndSegmentLength or toEndSegmentLength
Can you look at the image?
looks very bad

Untitled

4

OK, try smaller values for those two properties, rather than leaving them at their default values.

You may want to override Link | GoJS API to return values that are proportional to the distance between the ports.

5

Can you help me figure out how to calculate this result?

I don’t understand how to follow this function ?

Can you show me with sample code?

    class CustomLink extends go.Link {
        constructor() {
            super();
        }

        computeEndSegmentLength(node: go.Node | null, port: GraphObject | null, spot: go.Spot, from: boolean) {
            let result = go.Link.prototype.computeEndSegmentLength.call(this, node, port, spot, from);

            return result;
        }
    }
6

That’s right. And have your link template(s) use your CustomLink class instead of go.Link.

Your method override doesn’t need to call the super method. Just return the values that you think make the link path look good for all of the situations that you expect to occur. I was guessing that when the ports were close to each other you would want to return smaller values then when they are farther apart.

Compute the distance by first calling either GraphObject | GoJS API or Link | GoJS API on each port, and then Point | GoJS API.

7

Always the same values. am I doing something wrong?

How do I find it? Can you show it as code Please

  class CustomLink extends go.Link {
                computeEndSegmentLength(node: go.Node | null, port: GraphObject | null, spot: go.Spot, from: boolean) {
                    let result = go.Link.prototype.computeEndSegmentLength.call(this, node, port, spot, from);

                    var nodeLocation = node.getDocumentPoint(go.Spot.Center);
                    var ptLocation = port.getDocumentPoint(go.Spot.Center);
                    console.log(nodeLocation.distanceSquaredPoint(ptLocation));

                    return result;
                }
            }
8

One port is given as an argument. The other one you can get via Link | GoJS API.

9

Thank you very much for your help walter.

My code:

    class CustomLink extends go.Link {
        computeEndSegmentLength(node: go.Node | null, port: GraphObject | null, spot: go.Spot, from: boolean) {
            let result = go.Link.prototype.computeEndSegmentLength.call(this, node, port, spot, from);

            let nodeLocation = node.getDocumentPoint(go.Spot.Center);
            let ptLocation = this.getOtherPort(port).getDocumentPoint(go.Spot.Center);

            let distance = ptLocation.distanceSquaredPoint(nodeLocation);
            if (distance < 5000) {
                if (from) {
                    return 5;
                } else {
                    return 20;
                }
            }

            return result;
        }
    }
10

Would be better to call getDocumentPoint on the given port, not the given node.