Long words and line breaks can cause maxLines to overflow

GoJS
1

When rendering a TextBlock with maxLines, I sometimes get too many text lines and extra empty lines added to the end of the block.

It occurs rarely, and seems to be related to long word wrapping mixed with line breaks (\n) in the text. I can fix by replacing all line breaks with spaces. But we are rendering dynamic user input, and they like to use line breaks to format their text.

StackBlitz example

CleanShot_2025-01-10_at_15.23.59

import * as go from 'gojs';

const myDiagram = new go.Diagram('myDiagramDiv');

const longWordsSpaces = `longwordlongwordlongwordlongwordlongwordlongword longwordlongwordlongwordlongwordlongwordlongword longwordlongwordlongwordlongwordlongwordlongword longwordlongwordlongwordlongwordlongwordlongword`;

const longWordsLineBreaks = `longwordlongwordlongwordlongwordlongwordlongword
longwordlongwordlongwordlongwordlongwordlongword
longwordlongwordlongwordlongwordlongwordlongword
longwordlongwordlongwordlongwordlongwordlongword`;

const textBlockOptions = {
  background: 'lightgreen',
  margin: 10,
  width: 200,
  maxLines: 3,
};

myDiagram.add(
  new go.Part('Horizontal').add(
    new go.TextBlock({
      text: longWordsSpaces,
      ...textBlockOptions,
    }),
    new go.TextBlock({
      text: longWordsLineBreaks,
      ...textBlockOptions,
    })
  )
);
2

Thank you for the reproducible case. I believe we have fixed this.

Can you try this provisional release: https://gojs.net/3.0.17/release/go.js

And see if it fixes any problems for you?

Here it is with your code sample above: https://codepen.io/simonsarris/pen/OPLvRMw?editors=1010

3

We webpack bundle an SPA in the product, so will need to wait for the npm release of 3.0.17 to use.

But my experimentation in your codepen with a few more examples we’ve seen looks like you’ve squashed the bug. Thanks!

4

Thanks. We’ve just released 3.0.18, so you should be able to get it from npm.

1 Like