Coloring elements

Developers
1

Hello,
I downloaded the custom rendering example and would like to add new features.
For example, I would like to color IntermediateEvents red, but my code doesn’t work properly and would ask where exactly my bug is.

import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';

import {
  append as svgAppend,
  attr as svgAttr,
  classes as svgClasses,
  create as svgCreate,
  remove as svgRemove
} from 'tiny-svg';

import {
  isObject,
  assign,
  forEach
} from 'min-dash';

import {
  getLabel
} from 'bpmn-js/lib/features/label-editing/LabelUtil';

import {
  getRoundRectPath,
  getCirclePath
} from 'bpmn-js/lib/draw/BpmnRenderUtil';

import { is } from 'bpmn-js/lib/util/ModelUtil';
import { isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
import bpmnRenderer from 'bpmn-js/lib/draw/BpmnRenderer';

const HIGH_PRIORITY = 1500,
      TASK_BORDER_RADIUS = 2,
	  INNER_OUTER_DIST = 3;
export default class CustomRenderer extends BaseRenderer {
  constructor(eventBus, bpmnRenderer) {
    super(eventBus, HIGH_PRIORITY);

    this.bpmnRenderer = bpmnRenderer; }

  canRender(element) {
    // only render tasks and events (ignore labels)
    return isAny(element, [ 'bpmn:Task', 'bpmn:IntermediateThrowEvent']) && !element.labelTarget;
  }

  drawShape(parentNode, element) {
    const shape = this.bpmnRenderer.drawShape(parentNode, element);

        if (is(element, 'bpmn:Task')) {
      const rect = drawRect(parentNode, 100, 80, TASK_BORDER_RADIUS, '#cc0000');
      prependTo(rect, parentNode);
      svgRemove(shape);
      return shape;
    }

	if(is(element, 'bpmn:IntermediateThrowEvent')) {
      const circle = bpmnIntermediate(parentNode, element);
      prependTo(circle, parentNode);
      svgRemove(shape);
      return shape;
    }
  }

  getShapePath(shape) {
    if (is(shape, 'bpmn:Task')) {
      return getRoundRectPath(shape, TASK_BORDER_RADIUS);
    }
	if(is(shape, 'bpmn:IntermediateThrowEvent')){
		return getCirclePath(shape);
	}

    //return this.bpmnRenderer.getShapePath(shape);
  }
}

CustomRenderer.$inject = [ 'eventBus', 'bpmnRenderer' ];

// helpers //////////

// copied from https://github.com/bpmn-io/bpmn-js/blob/master/lib/draw/BpmnRenderer.js
function drawRect(parentNode, width, height, borderRadius, strokeColor) {
  const rect = svgCreate('rect');
  svgAttr(rect, {
    width: width,
    height: height,
    rx: borderRadius,
    ry: borderRadius,
    stroke: strokeColor || '#000',
    strokeWidth: 2,
    fill: '#fff'
  });
  svgAppend(parentNode, rect);
  return rect;
}

function drawCircle(parentGfx, width, height, offset, attrs) {
    attrs = computeStyle(attrs, {
      stroke: 'green',
      strokeWidth: 2,
      fill: 'green'
    });

   // var cx = width / 2,
     //   cy = height / 2;

    var circle = svgCreate('circle');
    svgAttr(circle, {
      //cx: cx,
      //cy: cy,
      r: Math.round((width + height) / 4)
    });

    svgAttr(circle, attrs);
    svgAppend(parentGfx, circle);
    return circle;} 
 function renderer(type) {
    return handlers[type];}

function renderEventContent(element, parentGfx) {
    return renderer('bpmn:IntermediateThrowEvent')(parentGfx, element, isThrowing);
}
 var handlers = {'bpmn:Event': function(parentGfx, element, attrs) {
      return drawCircle(parentGfx, element.width, element.height, attrs);
    },'bpmn:IntermediateThrowEvent': function(parentGfx, element) {
     var outer = renderer('bpmn:Event')(parentGfx, element, {
        strokeWidth: 1,
        fill: 'red',
        stroke: 'red'
      });

      /* inner */
      drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
        strokeWidth: 1,
        fill: 'red',
        stroke: 'red'
      });

      renderEventContent(element, parentGfx);
      return outer;
 }};
// copied from https://github.com/bpmn-io/diagram-js/blob/master/lib/core/GraphicsFactory.js
function prependTo(newNode, parentNode, siblingNode) {
  parentNode.insertBefore(newNode, siblingNode || parentNode.firstChild);}
2

First of all, please format your code so it’s readable: https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax

3

I hope that’s better:grinning:

4

No, not really. Please use triple backticks.

```
console.log(‘Hello World’);
```

leads to

console.log('Hello World');
5

Nevermind, I formatted the code for you. Please make sure to format it in the future. Otherwise it’s too hard to read.

Mind telling us what exactly doesn’t work?

6

I want to color the bpmn: IntermediateThrowEvents red and keep their functionality. In the example (bpmn-js custom rendering) the bpmn:Task is colored green.
After my code, a red IntermediateThrowEvent is always drawn at the same place (about top left), so I can’t move any further. If I click on another one of the palettes and want to place it in the room, it is glued to the red one. I can only stick the “normal” ones to the task.

7

Can you share a screenshot?

9

Instead of adding your custom shape you have to render your custom shape instead of the default one. It’s in the example.

1 Like