How to override drawRect method in BpmnRenderer?

Developers Modeler
1

I want to fill the rectangle with a color gradient by overriding the drawRect method in BpmnRenderer.

2

Hi raangs4u,

If you want to generate a color gradient in the BpmnRenderer, you can use the gradient function of SnapSVG:

function drawRect(p, width, height, r, offset, attrs) {

    var gradient = p.gradient("l(0, 0, 1, 1)#000-#f00-#fff");

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

But the preferred solution would be to style the gradient using CSS outside the BpmnRenderer

3

Hi pedesen,

Thanks for your reply.

I don’t want to edit the source code that is why I wanted to override the method.

I was to able to change the color of tasks using css but I am unable to generate gradient using css for the tasks.

Could you provide a sample code for the css changes?

4

Okay, I might misunderstood you. If you want to know how to generally override the BpmnRenderer you could take a look at our custom elements example: https://github.com/bpmn-io/bpmn-js-examples/tree/master/custom-elements. There you can find a CustomRenderer where you can see how to add custom elements. You can also override the rendering of existing BPMN elements if you use the according type (i.e. bpmn:Task instead of custom:triangle).

It’s different than I said, and it is apparently not possible to style a gradient on SVG elements using CSS, my bad, sorry.

5

Have you solved it? I also want to know how to do it.

6

Please do not necrobump old topics. Instead link to this thread from new topic.

7