How to provide a slight curve to links

GoJS
1

I have a simple diagram where I want links to extend about 20 px straight out of the node’s fromPort before curving, and then straightening again 20 px before entering the toPort. I tried a few things to get this effect but wasn’t quite satisfied. I first tried to use curve: go.Link.Bezier with varying fromEndSegmentLength and toEndSegmentLength, but the ends of the link never seemed to be really straight (the first link in my image). Then I just tried to use curve: go.Link.None and the corner poperty, but the corner property doesn’t seem to affect corners with this curve type (bottom link in my image). I’d really like something that looked like the second link, but with at least rounded corners. I’d also be happy with a bezier curve, provided the 20px ends were straight (or nearly so).

I considered subclassing Link and using computePoints to try to add more control points to my bezier, but I didn’t get too far partly because I wasn’t sure how to design a reasonable path.

How can I accomplish this?

thanks!
Chris

Here’s a fiddle with an example of this:

2

Try this Link class:

  function CustomLink() {
    go.Link.call(this);
  }
  go.Diagram.inherit(CustomLink, go.Link);

  CustomLink.prototype.makeGeometry = function() {
    var numpts = this.pointsCount;
    if (numpts != 4 || this.computeCurve() === go.Link.Bezier) {
      return go.Link.prototype.makeGeometry.call(this);
    }
    var p0 = this.getPoint(0);
    var p1 = this.getPoint(1);
    var d1x = p1.x - p0.x;
    var d1y = p1.y - p0.y;
    var p2 = this.getPoint(2);
    var p3 = this.getPoint(3);
    var d2x = p2.x - p3.x;
    var d2y = p2.y - p3.y;
    var geo = new go.Geometry()
      .add(new go.PathFigure(p0.x, p0.y, false)
           .add(new go.PathSegment(go.PathSegment.Line, p1.x, p1.y)))
      .add(new go.PathFigure(p1.x, p1.y, false)
           .add(new go.PathSegment(go.PathSegment.Bezier, p2.x, p2.y, p1.x + d1x, p1.y + d1y, p2.x + d2x, p2.y + d2y)))
      .add(new go.PathFigure(p2.x, p2.y, false)
           .add(new go.PathSegment(go.PathSegment.Line, p3.x, p3.y)));
    geo.normalize();
    return geo;
  };

Don’t set curve: go.Link.Bezier on your link template using this class (unless you really want the normal Bezier curve).

3

Excellent! Thanks for the great example and the pointers to PathFigure and PathSegment.