Changing color of tasks upon connection

#1

Good afternoon,

I am a new developer of bpmn and want to use it as a diagram builder for a project I am working on. That being said, I would like to ask your help for an issue I am encountering.
I already managed to change the background colors of the service task’s cogwheels to red as default. Moreover, I would like to be able to change them to green dynamically, i.e., by establishing a connection between, e.g., two service tasks. However, it seems to be more difficult than what I initially thought, mostly due to the nonexistent (I was not able to find any) documentation.

Thanks in advance for your help in this matter.

#2

No documentation yet: Correct.

How to solve your request: Implement a custom Renderer. See bpmn-js-task-priorities for an example.

#3

First of all, thank you for your much needed answer!

If I understood the example you specified correctly I would need to re-compile the entire source code again. I have already made several changes to this source code, hence my reluctance in recompiling.
Would it be possible to alter the compiled source code to achieve what I was aiming for? By using elementRegistry and such. Currently, I’m working on “BpmnUpdater.prototype.updateConnection = function(connection) {” of the source code. I’m attempting to reach elementRegistry inside this function so I can access its graphics component “(elementRegistry.getGraphics(element.id))”. I am hoping to use this to then select the graphic content I want to change, e.g., “path” “(select(“path”))” and by then changing the attribute I wish “(attr({fill: ‘green’})”.
I got this idea from this post: Set color connection

#4

Monkey patching libraries to integrate your features is never a good idea.

Our BPMN modeler is built around the idea of extensibility, meaning you can extend / replace basically everything with your custom code without ever monkey patching.

If you perform deep extensions / changes I’d suggest you to look into the commonjs example and start from there. You may checkout the bpmn-js-nyan or bpmn-js-task-priorities for a start, too.