Custom style questions

Developers
1

Hi guys,

I have 2 custom styling questions, hope you can help me with

  1. Is there an easy way to set different color for text?
    When I set defaultStrokeColor in bpmnRenderer it affects strokes, connections, text etc.
    textRenderer.color has no effect.
    Is the only option to use custom renderer for this?
  2. Is there an easy way to hide ‘+’ sign on subProcess?
    Is the only option to use custom renderer for this?
2

There is no built-in way to customize what you are asking for.

A possible approach is:

  • Create a custom renderer, register it with higher priority
  • Render the particular element using the custom renderer

We are open to pointers how our styling capabilities can be improved.

Best,
Nico

3

Thanks for the reply Nico.
I am working on implementing custom renderer as you suggest.
One of the issues I am facing is with elements names.
I need to implement custom look of an element and to display the name.
Seems like I need to re implement a lot of logic, which is supported in BpmnRenderer.
To avoid this I am trying an approach to override BpmnRenderer handlers.
Something like:

class CustomRenderer extends BpmnRenderer {
canRender(..) {
this['handlers']['bpmn:Activity'] = (parentGfx, elem, attrs) => {...}
}
}

It doesn’t really work for now…

What would you suggest?

Regards

Diana

4

What exactly does not work using this approach?

5

Made it work. The issue was with this syntax :this[‘handlers’][‘bpmn:Activity’];
Defined member CustomRender::handlers and overrided it this way : this.handlers[‘SubProcessMarker’] = () => {};

Currently I am trying to custom color of ‘plus’ inside ExclusiveGateway.
It is taking defaultStrokeColor :

    'bpmn:ExclusiveGateway': function(parentGfx, element) {
      var diamond = renderer('bpmn:Gateway')(parentGfx, element);

      var pathData = pathMap.getScaledPath('GATEWAY_EXCLUSIVE', {
        xScaleFactor: 0.4,
        yScaleFactor: 0.4,
        containerWidth: element.width,
        containerHeight: element.height,
        position: {
          mx: 0.32,
          my: 0.3
        }
      });

      if ((getDi(element).isMarkerVisible)) {
        drawPath(parentGfx, pathData, {
          strokeWidth: 1,
          **fill: getStrokeColor(element, defaultStrokeColor),**
**          stroke: getStrokeColor(element, defaultStrokeColor)**
        });
      }

      return diamond;
    }

Seems like the only option is to copy paste this code in custom renderer and just use custom color at bold lines.

If this is the only way, maybe it would be nice to have some api to inner elements.

6

We are open to your suggestions on how to improve things.

7

Generally speaking, extensions should be safe to do, as long as you accompany them with a respective test case. Writing tests is a fairly simple task, too.