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

[fnadezhda]

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:

Does anyone have any idea how to achieve this ?
Thank you.

[Ingo_Richtsmeier]

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

[fnadezhda]

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

[Ingo_Richtsmeier]

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

[philippfromme]

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.

[fnadezhda]

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

[philippfromme]

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.

[Lexi_Kans]

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

[Lexi_Kans]

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