Best Approach for Dynamic Node Resizing Based on Text Length in GoJS

GoJS
1

Hi everyone,

I’m currently working on a GoJS diagram where I need nodes to dynamically resize based on the length of the text inside them. The goal is to ensure that the text is always fully visible without being clipped or wrapped unnecessarily.

What I Have Tried:

  1. Using TextBlock.wrap and TextBlock.overflow properties – This works to some extent, but the node size doesn’t always adjust correctly.
  2. Setting TextBlock.width to NaN – This allows some flexibility, but it doesn’t fully resize the surrounding node shape.
  3. Binding the width of the TextBlock to its measuredSize.width – However, I noticed inconsistencies when dynamically updating text content.

What I Need Help With:

  • Is there a best practice for dynamically adjusting node size based on text content?
  • Should I be using Panel.Auto or another layout approach to ensure the node resizes properly?
  • How can I ensure that when text updates, the node resizes smoothly without visual glitches?

If anyone has encountered a similar issue and found a reliable solution, I’d love to hear your insights! Code snippets or examples would be greatly appreciated.

I also checked this: https://forum.nwoods.com/t/add-links-dynamically-like-diagram-model-addnodedata-for-nodes/python

Thanks in advance!

2

You might want to read: Sizing of GraphObjects | GoJS

Basically, each TextBlock has a naturalSize determined by its text string and font and other properties. The actual size it gets from its containing Panel based on its properties and way that its measures and arranges its elements.

Yes, it’s common for simple nodes to use an “Auto” Panel type to make sure its main element (a Shape) surrounds its content (typically either a TextBlock for the simplest nodes or a Panel containing arbitrary elements for arbitrarily complicated nodes). But it’s also common for nodes with ports and/or decorations around a “body” to use a “Spot” Panel type to arrange those ports/decorations/buttons around the “body”, which is an “Auto” Panel.

You might want to read: Nodes | GoJS