Making a custom Pill/Stadium shape

Hello,

I would like to create a pill/stadium shape, like this :

image

It basically is a rectangle with text within, surounded by two semi circles on each side.
Until then I have been cheating by using 3 shapes (one rectangle and two circles with -50% margin).

I’m trying to fix this by creating my own shape using figures.js as an example, especially the Terminador shape.

image

It looks good, but the spacing of the shapes is still off. I think it as something to do with the spot1/spot2 parameters, but I’m unable to figure out the correct values for these.

Stadium(shape, w, h) {
        var geo = new go.Geometry();
        var fig = new go.PathFigure(.5 * w, 0, true);
        geo.add(fig);
    
        fig.add(new go.PathSegment(go.PathSegment.Arc, 270, 180, .75 * w, .5 * h, .5 * h, .5 * h));
        fig.add(new go.PathSegment(go.PathSegment.Arc, 90, 180, .25 * w, .5 * h, .5 * h, .5 * h));
        geo.spot1 = new go.Spot(.23, 0);
        geo.spot2 = new go.Spot(.77, 1);
        return geo;
}

Use this figure:

go.Shape.defineFigureGenerator("CapsuleH", function(shape, w, h) {
  var geo = new go.Geometry();
  if (w < h) {
    var fig = new go.PathFigure(w/2, 0, true);
    fig.add(new go.PathSegment(go.PathSegment.Bezier, w/2, h, w, 0, w, h));
    fig.add(new go.PathSegment(go.PathSegment.Bezier, w/2, 0, 0, h, 0, 0));
    geo.add(fig);
    return geo;
  } else {
    var fig = new go.PathFigure(h/2, 0, true);
    geo.add(fig);
    // Outline
    fig.add(new go.PathSegment(go.PathSegment.Line, w-h/2, 0));
    fig.add(new go.PathSegment(go.PathSegment.Arc, 270, 180, w-h/2, h/2, h/2, h/2));
    fig.add(new go.PathSegment(go.PathSegment.Line, w-h/2, h));
    fig.add(new go.PathSegment(go.PathSegment.Arc, 90, 180, h/2, h/2, h/2, h/2));
    return geo;
  }
});

Example:

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, "CapsuleH",
      { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8, editable: true },
      new go.Binding("text").makeTwoWay())
  );

image
or some text with embedded newlines:
image

Oh, I guess you’ll want to set the Shape’s strokeWidth to zero.

I do not know enough about your diagram to say anything more about the rest of your question.

1 Like

Perfect, that’s exactly what I needed.
image

Thank you.

We’ll add the “Capsule” (a.k.a. “CapsuleH”) and “CapsuleV” figures to the RoundedRectangles.js extension file (and .ts in extensionsJSM and extensionsTS) for 2.3.

1 Like