Drawing links with elliptical arcs?

GoJS
1

Hi, we’re looking to be able to draw links between nodes with elliptical arcs, similarly to canvas’ native ctx.arcTo(). Does go.js support any such thing?

We could theoretically try to approximate with carefully chosen bezier control points, but that may not be close enough with large arcs, and seems a shame if the underlying drawing engine already supports arcs directly…

2

I’ll see if I can come up with a sample for you, if I have time later today.

3

Here is a minimal example that demonstrates the possibility. However I can imagine that you will want to customize the computation of the Geometry to meet your expectations.

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

  SemicircleLink.prototype.makeGeometry = function() {
    var curviness = this.computeCurviness();
    if (curviness === 0) return go.Link.prototype.makeGeometry.call(this);

    var fromport = this.fromPort;
    var toport = this.toPort;
    if (fromport === null || toport === null) return new Geometry(Geometry.Line);

    var fp = this.getPoint(0);
    var tp = this.getPoint(this.pointsCount - 1);

    var fx = fp.x;
    var fy = fp.y;
    var tx = tp.x;
    var ty = tp.y;

    var px = Math.min(fx, tx);
    var py = Math.min(fy, ty);

    fx -= px;
    fy -= py;
    tx -= px;
    ty -= py;

    var dia = Math.sqrt((fx - tx) * (fx - tx) + (fy - ty) * (fy - ty));

    return new go.Geometry()
           .add(new go.PathFigure(fx, fy, false)
                .add(new go.PathSegment(go.PathSegment.SvgArc, tx, ty, dia/2, dia/2, 0, 0, 1)));
  };
// end of SemicircleLink class

  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv");

    myDiagram.linkTemplate =
      $(SemicircleLink, // defined above
        $(go.Shape)
      );

    myDiagram.model = new go.GraphLinksModel([
      { key: "Alpha" },
      { key: "Beta" }
    ],[
      { from: "Alpha", to: "Beta" }
    ]);
  }

The result:

4

Yes, I see. That gets me in the right direction. Thanks much.