How to use the diagram-js/lib/draw/BaseRenderer.call function in diagram-js

export default function ChoreoRenderer(eventBus, styles, textRenderer, pathMap) {

  BaseRenderer.call(this, eventBus, 2000); // Because of the priority this does not work with the injector

  function getLabel(caption, options) {
    var text = textRenderer.createText(caption || '', options);
    svgClasses(text).add('djs-label');
    return text;
  }

  function getBoxedLabel(caption, box, align) {
    let label = getLabel(caption, {
      box: box,
      align: align,
      padding: align === 'center-middle' ? 0 : 5,
      style: {
        fill: 'black'
      }
    });

export default function DomainStoryRenderer(eventBus, styles, canvas, textRenderer, pathMap, commandStack) {

  BaseRenderer.call(this, eventBus, 2000);

  let rendererId = RENDERER_IDS.next();
  let markers = {};
  let computeStyle = styles.computeStyle;

  // generate the automatic Number for an activity origintaing from an actor
  function generateActivityNumber(parentGfx, element, box) {

    // whenever we want to edit an activity, it gets redrawn as a new object
    // and the custom information is lost,
    // so we stash it before the editing occurs and set the value here

    let numberStash = getNumberStash();
    let semantic = element.businessObject;

    if (numberStash.use) {

export default function CustomRenderer(eventBus, styles) {

  BaseRenderer.call(this, eventBus, 2000);

  this._styles = styles;

  var self = this;

  var computeStyle = styles.computeStyle;

  this.handlers = {
    'custom:triangle': function(parentGfx, element) {
      return self.drawTriangle(parentGfx, element.width);
    },
    'custom:circle': function(parentGfx, element, attrs) {
      return self.drawCircle(parentGfx, element.width, element.height, attrs);
    }
  };

export default function BpmnRenderer(
    config, eventBus, styles, pathMap,
    canvas, textRenderer, priority) {

  BaseRenderer.call(this, eventBus, priority);

  var defaultFillColor = config && config.defaultFillColor,
      defaultStrokeColor = config && config.defaultStrokeColor;

  var rendererId = RENDERER_IDS.next();

  var markers = {};

  var computeStyle = styles.computeStyle;

  function addMarker(id, options) {
    var attrs = assign({
      fill: 'black',
      strokeWidth: 1,
      strokeLinecap: 'round',
      strokeDasharray: 'none'

export default function NyanRender(eventBus) {
  BaseRenderer.call(this, eventBus, 1500);

  this.canRender = function(element) {
    return is(element, 'bpmn:ServiceTask');
  };


  this.drawShape = function(parent, shape) {
    var url = Cat.dataURL;

    var catGfx = svgCreate('image', {
      x: 0,
      y: 0,
      width: shape.width,
      height: shape.height,
      href: url
    });

export default function DrdRenderer(eventBus, pathMap, styles) {

  BaseRenderer.call(this, eventBus);

  var LABEL_STYLE = {
    fontFamily: 'Arial, sans-serif',
    fontSize: '12px'
  };

  var textUtil = new TextUtil({
    style: LABEL_STYLE,
    size: { width: 100 }
  });

  var markers = {};

  function addMarker(id, element) {
    markers[id] = element;
  }

export default function CustomRenderer(eventBus, styles) {

  BaseRenderer.call(this, eventBus, 2000);

  var computeStyle = styles.computeStyle;

  this.drawTriangle = function(p, side) {
    var halfSide = side / 2,
        points,
        attrs;

    points = [ halfSide, 0, side, side, 0, side ];

    attrs = computeStyle(attrs, {
      stroke: '#3CAA82',
      strokeWidth: 2,
      fill: '#3CAA82'
    });

export default function EmojiRenderer(eventBus) {
  BaseRenderer.call(this, eventBus, 2000);
}

function CustomRenderer(eventBus, styles) {

  BaseRenderer.call(this, eventBus, 2000);

  var computeStyle = styles.computeStyle;

  this.drawCustomSoftware = function (p, width, height, r, offset, attrs) {
    //TODO for now nothing fancy, just task
    offset = offset || 0;

    attrs = computeStyle(attrs, {
      stroke: 'black',
      strokeWidth: 2,
      fill: 'white'
    });

    return p.rect(offset, offset, width - offset * 2, height - offset * 2, 10).attr(attrs);
  };

export function DecisionTableRender(eventBus, bpmnRenderer) {
  BaseRenderer.call(this, eventBus, 1500);

  this.canRender = function(element) {
    return is(element, 'bpmn:ServiceTask') && element.businessObject.get('implementation') === DECISION_TASK_IMPLEMENTATION;
  };

  this.drawShape = function(parentGfx, element) {
    return bpmnRenderer.handlers['bpmn:BusinessRuleTask'](parentGfx, element);
  };
}