How to fix the connection skew between two nearby nodes?

@ahmetgundogdu wrote:

How to fix the connection skew between two nearby nodes?

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)
                    )
                )
            );

Posts: 3

Participants: 2

Read full topic