Overlapping of element text and symbol

Developers Modeler
1

The automatic text flow inside tasks works quite well most of the time and can be influenced with manually setting hyphens. However, if you are using user tasks, manual tasks or other tasks that have a symbol in the top left corner, this symbol frequently overlaps with the text. Sometimes, this is only marginally and does not hinder readability too much, but for longer descriptions (I know, not good modeling practice) or if the description is starting with a long word that still fits in the line, this can be really annoying. The problem is getting bigger with the design decision not to allow users to change the size of a task manually.
Please improve on that.

2

You can use a CustomRenderer and create your own behavior for the task that cause problems.

Look at this example to know how to render custom tasks. In the rendering, do your custom logic to render the text based on the element.businessObject.name attribute.

Here’s an example, where label = element.businessObject.name:

var text = document.createElementNS("http://www.w3.org/2000/svg", "text"); 
text.setAttributeNS(null, "class", "djs-label");
text.setAttributeNS(null, "style", "font-family: Arial, sans-serif; font-size: 12px;");
p.appendChild(text);

var lines = getLinesOfSize(label, maxLengthPerLine);
var startY = (boxHeight + 7.5) / 2 - ((lines.length - 1) * 12 / 2);
for (var i = 0; i < lines.length; i++) {
	var tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan"); 
	var tspanContent = document.createTextNode(lines[i]); 
    tspan.appendChild(tspanContent);
    text.appendChild(tspan);
    
    tspan.setAttributeNS(null, "x", (boxWidth - tspan.textLength.baseVal.value) / 2 + 0.5);
    tspan.setAttributeNS(null, "y", i * 12 + startY);
}

function getLinesOfSize(text, maxLengthPerLine) {
    var lines = [];
    if (typeof text == "undefined" || text == null) {
	return lines;
    }
    var words = text.split(" ");

    for (var i = 0, line = ""; i < words.length; i++) {
	var word = words[i].trim();
	if (word == "") {
		continue;
	}
	if (word.length > maxLengthPerLine) {
		if (line != "") {
			lines.push(line);
			line = "";
		}
		while (word.length > maxLengthPerLine) {
			lines.push(word.slice(0, maxLengthPerLine));
			word = word.slice(maxLengthPerLine);
		}
		line = word;
	} else if (line != "") {
		if (line.concat(word).length + 1 > maxLengthPerLine) {
			lines.push(line);
			line = word;
		} else {
			line = line.concat(" ").concat(word);
		}
	} else {
		line = word;
	}
	
	if ((line.length >= maxLengthPerLine - 1) || (i == words.length - 1 && line != "")) {
		lines.push(line);
		line = "";
	}
   }
   return lines;
}

(I had some difficulties to deal with the size, there are some hard values in this code).

Make sure that you append the text element after any logo element to be sure that the text goes above the logo.