Coloring models - Is there a user interface available for using color API?

Developers Modeler
1

Hello,
I am trying to implement coloring into my bpmn-js. I saw that there is an integrated API which allows applying coloring to my model and XML. But this will only allow me to change colors via programming.
Now I am wondering if there is any library/extension available which provides a color selection for the user interface or if I have to program it on my own.
I saw that for Camunda Modeler there is already a color picker implemented. (https://bpmn.io/blog/posts/2016-colors-bpmn-js.html)

Answer

Use the bpmn-js-color-picker extension:

image

2

You already mentioned that bpmn-js provides the basic functionality to set colors, the UI is not part of the core. Maybe this extension is what you’re looking for: https://github.com/bpmn-io/bpmn-js-in-color

3

Yeah I found this extension too. But I was not sure if it is using the color API. So will coloring be saved in my xml?

4

Actually, it seems that this extension only provides educational contents and might be not built on top of the API you mentioned.

So then there seems to be no ready-to-use extension. But there is a Camunda Modeler bpmn-js plugin which uses the command stack for it: https://github.com/camunda-consulting/code/blob/master/snippets/camunda-modeler-plugins/bpmn-js-plugin-color-picker/client/ColorPlugin.js#L73. This could be a good example.