How to show the ellipsis on the label?

Developers
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' ];
5 Likes