Text node adjusting for long text

Developers
1

Hello,
is there a possibility that the text of a text-node behaves as the task element
on the right? Currently it looks as follows, which is not nice for long text:

image

Thanks very much!

2

Can you share the part of your code where you render the label? When rendering a label you can specify the maximum width and height for the laid out text.

3

sure, it is the same code as from my question according the fixed position.
In this case it refers to “text2”:

drawShape(parentNode, element) {
    if(this.getType(element) == "bpmn:SemanticTask") {
        var inner = drawRectangle(parentNode, element.width-20, element.height-35, TASK_BORDER_RADIUS, COLOR_BLACK);
        let text2 = svgCreate('text'); 
		svgAttr(inner, {
				transform: 'translate(10, 20)'
      });
      svgClasses(text2).add('djs-text'); 
		drawRectangle(parentNode, element.width, element.height, TASK_BORDER_RADIUS, COLOR_BLACK);
		let text = svgCreate('text'); 
			svgAttr(text, {
				fill: 'black', 
				transform: 'translate(25, 15)'
      });
      svgAttr(text2, {
				fill: 'black', 
				transform: 'translate(25, 50)'
			});
            svgClasses(text).add('djs-text'); 
      let text3 = svgCreate('text');
      svgAttr(text3, {
        fill: 'black',
        transform: 'translate(21, 78)'
      });
      svgClasses(text3).add('djs-text');            
      const businessObject = getBusinessObject(element);
      var { TaskName } = businessObject;
      if(TaskName == undefined) TaskName = "";
        var { name } = businessObject;
        if(name == undefined) name = "";
			svgAppend(text, document.createTextNode(TaskName)); 
      svgAppend(parentNode, text);
      svgAppend(text2, document.createTextNode(name));
      svgAppend(parentNode, text2);
      svgAppend(text3, document.createTextNode('Semantic'));
      svgAppend(parentNode, text3);
    }
    return inner;
  }
4

So you’re not using the Text utility that is used to render labels of BPMN elements and makes sure they fit a specific width and height?

5

@vdeppe I guess it makes sense if you share a CodeSandbox that show cases your (related) issues in a way that we can inspect it.

This way we can help you in a constructive manner.

6

Here is the link for the sandbox: https://ocy2u.csb.app/

The corresponding code is under: custom/CustomRenderer.js

Thanks in advance!