Textblock width is always very small

I’m trying to achieve the following design for a node:

Screenshot 2022-03-07 at 13.48.28

I’ve used a Position panel to place the 2 other shapes. The problem is that I can’t get the width of the shapes to be the same as the shape containing the content.

I’ve been debugging and I noticed that the textblock, which has the text “‘Process Start’”, no matter if I get the naturalBounds, actualBounds or whatever kind of bounds, the width is 8px… which, as you can tell is impossible for a font size of 16px.

Also, regardless of the text inside of it, the width is the same.

Is there any reason why this is happening?

EDIT: One heads up, the text property of that textblock is binded. Could that be the reason?

My initial reaction is that it would be more natural to define a custom figure.
Look at how “MultiDocument” and “MultiProcess” are defined in https://gojs.net/latest/extensions/Figures.js

Hi Walter,

I thought about that also, but can I have the border and the fill going like that?

Try this, or adapt this code to suit your needs:

go.Shape.defineFigureGenerator("HCapsule3", function(shape, w, h) {
  var geo = new go.Geometry();
  if (w < 20 || h < 20) {
    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 {
    const ox = 4;
    w -= ox*3;
    const oy = 4;
    h -= oy*3;
    if (w < 2*h) {
      var fig = new go.PathFigure(2*ox + w/2, 2*oy + 0, true);
      fig.add(new go.PathSegment(go.PathSegment.Bezier, 2*ox + w/2, 2*oy + h, 2*ox + w, 2*oy + 0, 2*ox + w, 2*oy + h));
      fig.add(new go.PathSegment(go.PathSegment.Bezier, 2*ox + w/2, 0, 2*ox + 0, 2*oy + h, 2*ox + 0, 2*oy + 0));
      geo.add(fig);

      fig = new go.PathFigure(ox + w/2, oy + 0, true);
      fig.add(new go.PathSegment(go.PathSegment.Bezier, ox + w/2, oy + h, ox + w, oy + 0, ox + w, oy + h));
      fig.add(new go.PathSegment(go.PathSegment.Bezier, ox + w/2, oy + 0, ox + 0, oy + h, ox + 0, oy + 0));
      geo.add(fig);

      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);
    } else {
      var fig = new go.PathFigure(2*ox + h/2, 2*oy + 0, true);
      // Outline
      fig.add(new go.PathSegment(go.PathSegment.Line, 2*ox + w-h/2, 2*oy + 0));
      fig.add(new go.PathSegment(go.PathSegment.Arc, 270, 180, 2*ox + w-h/2, 2*oy + h/2, h/2, h/2));
      fig.add(new go.PathSegment(go.PathSegment.Line, 2*ox + w-h/2, 2*oy + h));
      fig.add(new go.PathSegment(go.PathSegment.Arc, 90, 180, 2*ox + h/2, 2*oy + h/2, h/2, h/2));
      geo.add(fig);

      fig = new go.PathFigure(ox + h/2, 0, true);
      // Outline
      fig.add(new go.PathSegment(go.PathSegment.Line, ox + w-h/2, oy + 0));
      fig.add(new go.PathSegment(go.PathSegment.Arc, 270, 180, ox + w-h/2, oy + h/2, h/2, h/2));
      fig.add(new go.PathSegment(go.PathSegment.Line, ox + w-h/2, oy + h));
      fig.add(new go.PathSegment(go.PathSegment.Arc, 90, 180, ox + h/2, oy + h/2, h/2, h/2));
      geo.add(fig);

      fig = new go.PathFigure(h/2, 0, true);
      // 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));
      geo.add(fig);
    }

    geo.spot2 = new go.Spot(1, 1, -ox*2, -oy*2);
    return geo;
  }
});