Bpmn connector customization change color, thickness

Developers Modeler
1

Hi ,

I am working on BPMN connector customization changing color and thickness.
I was able to change connector color using modelling ‘setColor’ api.

Im able to change the thickness of the connector as follows:

this.eventBus.on(‘element.click’, (e) => {
    if (e.element.type === ‘bpmn:SequenceFlow’) {
         const outgoingGfx = this.elementRegistry.getGraphics(e.element.id);
         const path = outgoingGfx.querySelector(‘path’);
         path.style.stroke = ‘blue’;
         path.style.strokeWidth = ‘5px’;
   }
});

But the arrow size at the end of connector is also getting increased accordingly.
Is this the right direction ?
How to keep the size of the arrow constant ?

Please suggest.

3

You have to define you own marker, as the arrow heads will naturally scale with the stroke width.

Please create your own renderer (cf. BpmnRenderer, custom renderer example) to accomodate your requirements.