Performance issue with dynamic wrapped text (Documentation) in SVG, layout dependency on runtime height

[Willia-Yang]

Introduction

Hi JointJS team,

I’m facing a performance and layout challenge when rendering dynamic wrapped text inside SVG elements, and I’d like to ask if there is an official or recommended solution.

Background

1. I have a custom Element whose markup is built dynamically.
2. Inside the element, there is a sectionsGroup which contains multiple items.
3. Some items are of type Documentation:
   • They can contain long text
   • They require automatic line wrapping
   • Their count is dynamic and unknown in advance
4. Below each Documentation item, there can be other non-wrapped SVG text items, whose vertical position depends on the Documentation height.

Current implementation

1. Documentation items are rendered as SVG with textWrap.
2. During buildSectionAttrs, I must:
   • Calculate the rendered height of each Documentation text
   • Accumulate currentY
   • Position all subsequent items correctly

This works functionally, but introduces serious performance issues when:

1. Documentation text is long
2. The element is resized (textWrap recalculation is expensive)
3. There are multiple Documentation blocks

Constraints / Difficulties

1. I cannot predefine HTML / foreignObject markup statically, because:
   Documentation items are added dynamically after user interaction (e.g. clicking “Add Documentation”).
2. The number of Documentation blocks is not fixed.
3. Layout depends on runtime text height, because other SVG items must appear below each Documentation block.
4. Using SVG textWrap causes heavy layout recalculation and resize lag for large content.

Question

Is there an official or recommended approach in JointJS to handle this scenario?

Any guidance or best practices would be greatly appreciated.
Thank you!

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[Geliogabalus]

Hello!

I see, that you have also a large lag when you add a new documentation section. What is the reason, because rerendering element shouldn't take so long?

If I understand correctly, you are rerendering the shape with the new dynamic markup. So in this case you can as well define documentation sections as a textarea elements inside of the foreign object and change the markup when you add new sections. If you are using Custom View you have full control over the rendering process.

Regarding the resizing. It is better to resize the inner view markup only when the resizing is complete. If you are using Free Transform component there is a resize:stop event for this purpose.

[kumilingus]

Additionally, if JointJS text wrapping (breakText()) becomes slow when handling a large amount of text or many elements, you can switch to using an HTML <div> inside a <foreignObject/> and let the browser handle the text wrapping. The markup does not have to be defined statically.

You can apply simple heuristics to estimate the model size (for example, Chinese characters are monospaced, correct?), or you can render the text (all paragraphs) first, measure the text container, and then resize the model accordingly. See this custom view example.

[Willia-Yang]

Thank you for your reply ,i will try it