Label ellipsis in Task

[Dmitry_Morozov]

is there an algorithm that determines at what point the label crosses “Task”. Another problem is that task blocks can be resized and the label only needs to be trimmed when the text extends beyond the block. Currently settled on a solution, but here is a static value for label

How to show the ellipsis on the label?

Simple module for render ellipsis label: import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer'; import { isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil'; export default class EllipsisRenderer extends BaseRenderer { constructor(eventBus, bpmnRenderer) { super(eventBus, 1500); this.bpmnRenderer = bpmnRenderer; } canRender(element) { return isAny(element, [ 'bpmn:Task', 'bpmn:UserTask' ]) && !element.labelTarget; } drawShape(parentNode, element) { let…

After resizing

I would like it to be like this. And the trimming did not take place on a fixed number of characters, but on those that did not fit in the block

[nikku]

As I understand you’re request is:

• Tasks can be resized
• But labels should not overflow, but be cut of using ellipsis

Can you confirm?

[Dmitry_Morozov]

Yes, that’s exactly right.

[nikku]

Text layouting is implemented at the core in diagram-js/lib/util/Text. bpmn-js adds the TextRenderer service as an abstraction to render all texts.

I’d presume you’d want to plug into the later to implement your own text rendering.