How to make the text not go out of the activity-square?

Hello, people !
I’m trying to include the BpmnJS in my Angular application, but I want to make the text in the square of the activity bpmn element, because now it is outside like this:
Screenshot 2022-11-08 at 15.44.35
Does anyone have any idea how to achieve this ?
Thank you.

Hi @fnadezhda,

maybe this example helps you further: GitHub - philippfromme/camunda-modeler-plugin-resize-tasks: Camunda Modeler Plugin That Makes Tasks Resizable

Hope this helps, Ingo


This works, thank you. But is there any way to resize automatically the activity bpmn element in case we already have the xml ?

Hi @fnadezhda,

sorry, I don’t know anything about graphical algorithms in JavaScript.

Maybe somebody else can step in with a library that can calculate box sizes from text snippets?

Cheers, Ingo

1 Like

While I would advise against it, it’s possible to implement this:


For the sake of showing that it can be done it created an example: Resize tasks to fit text - CodeSandbox

The crucial part is using diagram-js’s text utility to get the dimensions of the text laid out in a box with a fixed width:

const bounds = textUtil.getDimensions(businessObject.get("name") || "", {
  box: {
    width: 100,
    height: Infinity
  padding: {
    top: 10,
    right: 0,
    bottom: 10,
    left: 0
  fitBox: true

These dimensions can then be used to resize the task:

modeler.get("modeling").resizeShape(element, {
  x: element.x,
  y: element.y - (bounds.height - element.height) / 2,
  width: element.width,
  height: bounds.height

The next step would be to decide wether this is something that happens right after the import and whether the user can undo this through Cmd + Z.

1 Like

This works, thank you so much ! But why you are against it ?

Because tasks having different sizes could be mistaken to have semantics e.g. the bigger the task the more important or they could be mistaken for sub-processes. Furthermore, task names should be short and concise so the need for bigger tasks shouldn’t exist in the first place. But of course, you’re free to customize the tool according to your requirements. :wink:

1 Like

I was looking same solution for activity square and here i get solution .

1 Like

Still waiting for some one response me on my comment. can anybody help me.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.