Connection line doesn't jumps over busbar

GoJS
1

Hi,

Connection line doesn’t jumps over busbar.

image

Thank You

2

If you are talking about the “Q1” node, that is a Node, not a Link.

You seem to have set routing to be AvoidsNodes, so that is why the path of the link goes around the Q1 node.

3

Hi ,

Here Q1 is a HBusBar …
You mean in the HBusbar I need to set routing avoidsNode property…

Thank You

4

Even with links that have AvoidsNodes routing you could set or bind Node.avoidable to false on your “HBusBar” nodes. That way the link routing will ignore that the node is there.

However, although the link will cross over the node if it’s in the path, there won’t be any JumpOver or JumpGap drawn in the path of the link. Links never jump over nodes.

5

Hi Walter,
I am getting error if I am setting avoidable=false in the link properties

image
image719×178 7.6 KB 

public getLinkTemplate(): Link {
        let linkProperties = {
            routing: Link.AvoidsNodes,
            curve: Link.JumpOver,
            corner: 3,
            relinkableFrom: true, relinkableTo: true,
            selectionAdorned: true,
            selectable: true,
            avoidable: false,
            doubleClick: this.createJunction.bind(this),
            mouseDrop: function (e, link) {
                var labelnode = null;
                e.diagram.selection.each(function (p) {
                    if (p instanceof Node && p.category === "LinkLabel") labelnode = p;
                });
                if (labelnode !== null) this.attachJunction(link, labelnode, labelnode.location);
            }
        }
        return this._goMake(this.busbarLink, linkProperties,
            this._goMake(Shape,
                { strokeWidth: 2, stroke: SLDColors.Link, })
        );
    }

–HBusBar–

private getHbarNodeTemplate() {
        return this._goMake(Node, "Spot",
            new Binding("location", "location", Point.parse).makeTwoWay(Point.stringify),
            {
                locationSpot: Spot.Center, locationObjectName: "SHAPE", avoidable: false,
                linkValidation: (fromNode, fromPort, toNode, toPort, link) => {
                    if ((fromNode.category === "HBar" || fromNode.category === "VBar") &&
                        (toNode.category === "HBar" || toNode.category === "VBar")) return false;
                    if (fromNode.category === "HBar" && toNode.location.y < fromNode.location.y) return false;
                    if (toNode.category === "HBar" && fromNode.location.y > fromNode.location.y) return false;
                    return true;
                },

                // special resizing: just at the ends
                resizable: true, resizeObjectName: "SHAPE",
                resizeAdornmentTemplate:
                    this._goMake(Adornment, "Spot",
                        this._goMake(Placeholder),
                        this._goMake(Shape,  // left resize handle
                            {
                                alignment: Spot.Left, cursor: "col-resize",
                                desiredSize: new Size(6, 6), fill: "lightblue", stroke: "dodgerblue"
                            }),
                        this._goMake(Shape,  // right resize handle
                            {
                                alignment: Spot.Right, cursor: "col-resize",
                                desiredSize: new Size(6, 6), fill: "lightblue", stroke: "dodgerblue"
                            }))
            },
            this._goMake(Shape, "Rectangle",
                {
                    name: "SHAPE",
                    fill: "black", strokeWidth: 2,
                    width: 100, height: 2,
                    minSize: new Size(250, 2),
                    maxSize: new Size(Infinity, 2)
                },
                new Binding("width").makeTwoWay(),
                new Binding("fill"),
                { portId: "", fromLinkable: true, toLinkable: true }),
            this._goMake(TextBlock,
                { alignment: Spot.Right, alignmentFocus: Spot.Left, editable: true },
                new Binding("text", "label").makeTwoWay()),
        )
    }
6

You need to set { avoidable: false } or bind the Node.avoidable property on the node template, not on the link template.

Whether or not a link routing avoids nodes is controlled by the Link.routing property.

7

Thanks Walter,

getting strange issue now when the node close to each other link is fine.

image

but when I will start moving the Q5 node getting curve

image

Note: I will move Q5 nearest to HbusBar agin it will come as accepted. if the nodes closest to Busbar getting straight link otherwise getting curve

8

When nodes are too close to each other, so that there isn’t enough room to route an AvoidsNodes link without crossing over an unrelated node, then it just crosses that node.

It looks as if you haven’t set Node.avoidable to false on that “Q1” node.