Check that text is overflowed

GoJS
1

I need to know that text in TextBlock has been overflowed that not all text has been displayed by TextBlock. How I can know that?

Thank you.

2

What’s your scenario, exactly?

This is undocumented, but TextBlock.metrics contains useful information about how the text has been laid out, after the TextBlock is measured. the TextBlock.metrics.arrText contains an array of each line of text in the TextBlock, which you can inspect to see just what is drawn.

This may not give you enough information if your textblock is getting clipped, instead of wrapped.
`

3

Scenario is that I need to show full text in tooltip when text is overflowed. When it is fully visible on node then I don’t need tooltip. Using string length can’t be precise so I need to know does text overflow has been used on node. It could be helpful if we could have TextBlock.isTextOverflow or something similar, but this metrics is fine for me.

Thank you

4

You could do something like this: https://codepen.io/simonsarris/pen/JOovqV?editors=1010

There are two textblocks, “Alpha” and “D”.

The tooltip checks the textblock.metrics.arrText[0] (the first line of drawn text), and sees if it matches the textblock.text. If they do not match, we know that the first line does not contain all the text, so we know that some is missing. So the tooltip is displayed on “Alpha” but not on “D”, since “D” contains all the text.

Doing it this way is contingent on the Textblock actually needing to wrap. You could have designed your template so that the textblock differently.

5

Yes that works excellent. Thank you. Only for my case it is better to check last array item to ends with ‘…’ ! We are using TextBlock.OverflowEllipsis.

6

@simon it seems the metrics property is dropped in the newer version of gojs. how can we achieve the same purpose now without the metrics property?

7

It’s not documented, but it’s still there.

8

i have achieved it using the following code.

export const objectHasElipsis = (obj: TextBlock): boolean => {
  // we need to cast cause there is no typing go.TextBlock.metrics
  const objWithMetrics = obj as unknown as { metrics?: { arrText?: string[] } };

  const arrText = objWithMetrics?.metrics?.arrText;
  const ELLIPSIS = '...';
  return !!arrText?.at(-1)?.includes(ELLIPSIS);
};

is it possible that you expose a property that indicates when OverflowEllipsis is applied?

9

That’s a good suggestion. Thanks. We’ll consider it.

1 Like