Textblock Height

GoJS
1

Hello! I am attempting to position a numbered circle below the text labels of my nodes. Here’s an image example:

Screenshot 2026-05-14 at 11.57.28 AM
Screenshot 2026-05-14 at 11.57.28 AM634×310 9.55 KB

My thought process is that I’d get the height of the textblock underneath our nodes and with a binding, monitor the text itself to then calculate where the numbered circle needs to be located (I’ve attached code of this below). The problem that I am encountering is that our labels can be max 2 lines (as demonstrated on Node C), and I’m struggling to find a gojs utility that’ll give me the height of the textblock itself. For example, Node B’s textblock will have a height of “12”, but Node C also reports back a height of “12” despite being double the height. NaturalBounds, measuredBounds, actualBounds, isMultiLine, lineCount, and lineHeight all report back the same dimensions for both node’s textblocks. Is there perhaps something I’m missing in the docs that’s meant to handle this? Or is there an easier approach to my end goal of just floating the numbered circle below the text?

Thanks!

public static NumberedBubble(): Panel {
    return GO(
      Panel,
      'Spot',
      {
        alignment: new Spot(0.5, 1, 0, -25),
      },
      new Binding('alignment', 'name', (_: string, node: any) => {
        const textBlock = node.part.findObject('LABEL'); // returns the textblock itself
        return new Spot(0.5, 1, 0, 30 + (textBlock.lineCount > 1 ? 25 : 0));
      }),
      GO(Shape, 'CircularRectangleBorder', {
        width: 15,
        height: 15,
        fill: 'transparent',
        stroke: 'black',
      }),
      GO(
        TextBlock,
        {
          width: 14,
          height: 14,
          textAlign: 'center',
          stroke: 'black',
          pickable: false,
          text: '5000',
        },
        new Binding('text', 'order')
      )
    );
  }
}
2

NaturalBounds, measuredBounds, actualBounds, isMultiLine, lineCount, and lineHeight all report back the same dimensions for both node’s textblocks

It’s likely that you are querying too soon, before its measured, if that’s the case.

What’s the relation of this bubble to the node? Is it part of the Node, or an Adornment, or something else?

3

It is not an adornment, just a Panel within the bounds of the node template itself:

 public static SquareTemplate(handlers: Map<string, Function>): GoJSNode {
    return GO(
      GoJSNode,
      'Spot',
      this.standardTemplateProperties(),
      this.bringToForeground(),
      {
        selectionObjectName: 'SHAPE',
        selectionAdornmentTemplate: AdornmentTemplate.NodeSelectionAdornment('RoundedRectangle'),
        toolTip: AdornmentTemplate.Tooltip(),
      },
      new Binding('location', 'location', Point.parse).makeTwoWay(Point.stringify),
      // body
      ...props...
      this.standardTextLabel(),
      this.NumberedCircle(),
      ...props...
    );
4

I see. If I understand you correctly: If they’re both siblings in a Spot panel, and you always want the NumberedCircle below the standardTextLabel, the simplest thing to do would be to wrap those 2 elements in a Vertical panel.

That way, the NumberedCircle will automatically respect the text’s size without needing to be clever about knowing measured bounds.

basic idea: https://codepen.io/simonsarris/pen/gOdQEdO?editors=1011

5

Dang, I was definitely over thinking this one. That worked perfectly, thanks!