Jump nodes with bezier curves

GoJS
1

Hi, I am using bezier curves for linking the nodes in my diagram. I have not provided routing: jumpNodes since we had to maintain the shape of the bezier curve. This is my link node template:

        $(go.Link,  // the whole link panel
            {
                // routing: go.Link.AvoidsNodes,
                curve: go.Link.Bezier,
                curviness: 200,
                corner: 10,
                adjusting: go.Link.Stretch,
                relinkableFrom: true,
                relinkableTo: true,
                reshapable: true,
                resegmentable: true,
                deletable: false,
                contextMenu:
                    $('ContextMenu',
                    $('ContextMenuButton',
                    { 'ButtonBorder.fill': 'white', '_buttonFillOver': 'lightgray' },
                        $(go.TextBlock, 'Delete',
                        { margin: 12 }
                        ),
                        {
                            click: (e, obj) => {
                                e.diagram.commit(function(d) {
                                d.remove(obj.part.adornedPart);
                                });
                                this.propertiesFlagEvent.emit('');
                                this.save();
                            },
                        },
                    )
                    )
            },
            $(go.Shape)  // the arrowhead
        );

I would like to retain the same shape of the curve. But i do not want the links to pass over a component in its path.

How can i do this?

2

GoJS does not have that functionality in general.

It does in certain cases, such as LayeredDigraphLayout layout routing: Beat Paths. But not in general.

I assume AvoidsNodes routing was not what you wanted? That routing is only orthogonal.

3

Thats right. I did not want orthogonal routing. Wanted to check if something like this is possible?

If the connector lines can be sent behind a node if it is in the path of the link. Please refer the picture below:

image001

4

Just set { layerName: "Background" } on your Link template(s).