How to keep the text-node fixed when resizing

Developers
1

Hello,
for a custom-element I have 3 text-Nodes and when I resize the element
the third text node (that one on the bottom) is not more under the correct
position. How could I fix that? The code is defined in CustomRenderer and
is as follows: (problem is: text3)

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;
  }

image

thanks very much!

2

I guess instead of hard-coding the position of each label you need to calculate it based on the elements size.

3

Could you explain what I need in order to calculate the position?
I tried this:

let text3 = svgCreate('text');
      svgAttr(text3, {
        fill: 'black',
        transform: 'translate((element.width+20), (element.height+100))'
      });

but it seems, that it is not possible to set variables inside translate?

4

Try with template literals. Single or double quotes will treat everything inside as a string and won’t evaluate variables.

See below, when using normal quotes vs backquotes and placeholders :
image

5

that works, thanks very much!

1 Like