How to show the ellipsis on the label?

Developers
1

Hi,
I want to show the ellipsis on the notation label, when label name length exceeds the limit.

PFB
image

2

I think you’ll have to create a custom label renderer which offers that functionality

3

could you please provide any example how to created custom label renderer ?

4

I think the custom elements example will show how to create custom labels.

5

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 originName = element.businessObject.name;
    if(!originName || originName.length<55){
      return this.bpmnRenderer.drawShape(parentNode, element);
    }
    element.businessObject.name = originName.substring(0,52)+'...';
    let shape = this.bpmnRenderer.drawShape(parentNode, element);
    element.businessObject.name = originName;
    return shape;
  }
  getShapePath(shape) {
    return this.bpmnRenderer.getShapePath(shape);
  }
}

EllipsisRenderer.$inject = [ 'eventBus', 'bpmnRenderer' ];
4 Likes