1513 dynamic resizing labels

[timonlazarviadee]

Proposed Changes

This pull request concerns dynamic resizing of text fields. To this end, labels have been made resizable and code has been added that adjusts the height of the text to match the width.

Closes #1513

Visual demo

Checklist

To ensure you provided everything we need to look at your PR:

• Brief textual description of the changes present
• Visual demo attached
• Steps to try out present, i.e. using the @bpmn-io/sr tool
• Related issue linked via Closes {LINK_TO_ISSUE} or Related to {LINK_TO_ISSUE}

[CLAassistant]

All committers have signed the CLA.

[timonlazarviadee]

I'm not sure how to make this look nicer. If you know another way, please show me with a pointer.

[barmac]

Hi, thanks for your contribution. We will look into this soon.

[barmac]

Some interactions don't work properly or are not intuitive, so there's still some work ahead. I'd expect that the horizontal resize snaps to the text width. The label jump on vertical resize is also unintuitive.

Screen.Recording.2025-09-10.at.11.43.31.mov

[barmac]

Please add a test for horizontal resize as it's clearly not working correctly. The feature is useful, but we need to make sure it works correctly.

[barmac]

@timonlazarviadee Multiple test cases are failing right now. Please check.

[barmac]

CI needs to be fixed yet.

[jarekdanielak]

Hey @timonlazarviadee! This looks cool, sorry that we've kept you waiting for so long. Let's try to get this ready to merge...

It seems your branch is quite old, and we've recently added a feature related to external labels - label links, cf. #2328

Would you mind rebasing this branch on top of the latest develop to see how both features work together?

[jarekdanielak]

@timonlazarviadee why does the PR change the code related to Text Annotations? I can break some of the text annotations behaviors now that works without your changes, cf. overlapping of text and connection line below.

I would be much easier to review and test your changes, if they were better isolated.

[timonlazarviadee]

@timonlazarviadee why does the PR change the code related to Text Annotations? I can break some of the text annotations behaviors now that works without your changes, cf. overlapping of text and connection line below.

I would be much easier to review and test your changes, if they were better isolated.

I expected that TextAnnotations would be treated dynamically as labels. If you prefer the previous behavior, I can exclude TextAnnotations from this logic.

To better centralize the code, I would suggest extracting the resizing logic currently located in BpmnRenderer.js into a separate module, for example TextLayoutService.js. Methods such as renderLabel, renderEmbeddedLabel, and similar functions could then be handled within this service.

Do you think this approach would improve the structure and maintainability of the code?

To proceed with the implementation of this feature, I would also like to define a clear Definition of Done. In your opinion, what should this include, @jarekdanielak?

[jarekdanielak]

Alright, let's start one step at a time, by refactoring your BpmnRenderer changes to better fit into our existing infrastructure.

We already have an utility for labels: lib/util/LabelUtil. All the helper functions for getting and setting the bounds, calculating text height, etc. should go there. Since text annotation uses renderLabel under the hood, it can also reuse those helpers.

WDYT?

[timonlazarviadee]

Sounds good to me.

[timonlazarviadee]

I rearranged the code to the LabelUtil.ts