OverflowEllipsis to middle of text

GoJS
1

Hi,

I’m looking to move TextBlock.OverflowEllipsis to the middle of the text rather than the end of the text. From “looooo…” to “loo…ong”

I have a data binding on the text block that I am trying to do this on, and attempted to access TextBlock.metrics.arrText[0] per Check that text is overflowed in the data binding function, but I see that the value is the default value for the text block generator rather than the text that will fill the block. It is only after render that the TextBlock.metrics.arrText[0] value is updated to include the actual overflowed name of the text block.

Is there a recommended way to create my own overflow function or expand the builtin TextBlock.OverflowEllipsis to move the ellipsis to the middle of the shown text area?

2

We’ll have to think about this a bit.

3

I think its harder to guarantee that this will look good, especially when whitespace is involved.

"One two three four five" Might become, instead of:
"One two thr..."
this:
"One t...r five"
or:
"One t...ur five"

It might make sense if it was also instructed to eliminate whole words and just be:
"One ... five"

But then the resulting Text is much shorter than its allotted space. And that might foul things up if you have just one word or two words, like in your example which splits a single word.

Maybe it makes more sense in situations where the ellipsis’d string only contains one or two words.

I’m leaning towards not implementing this, but I will think about it some more.

4

Hi Simon,

To give some context, the reason I am trying to do this is for cases where someone would title nodes in the following manner:

“longname white”
“longname red”

With end truncation this could lead to it being difficult to tell things apart as they might all appear as “longname…”

5

Depending on just how specific your use case is, you could do something like this:

https://codepen.io/simonsarris/pen/vjJMPG?editors=1010

Try resizing the nodes. This just splits by giving the right hand textblock precedence, since the other one “Stretches” to the available space, which is initially as much as it wants, until a size is specified on the panel (in this case Node).