Extending Color Picker for Custom Shapes

Developers
1

I am creating a web-app based on bpmn-js-example-custom-shapes. So I have created a new shape that is drag and droppable to the canvas. I also imported bpmn-js-color-picker to be able to color the elements. I actually extended it “ExtendedColorPickerModule” with some colors I need. My problem is that I don’t know how to be able to color my custom shape (called ocbpmn:hexagon).
color_clip

I made my repository public if you want to have a look at. And yes, the Hexagon has a fillPathData and a strokePathData, so it should easily be possible to change those colors through the Color Picker. Any concrete ideas?

2

Hi,

The colors in bpmn-js rely on DI (diagram interchange) elements: BPMNShapes and BPMNEdges. In case of your custom elements, the DI elements are missing. When the SetColorHandler tries to add the color information, it does not find the DI element, and ends execution: https://github.com/bpmn-io/bpmn-js/blob/develop/lib/features/modeling/cmd/SetColorHandler.js#L84

There are two ways you could solve this:

  1. Add DI elements for your custom shapes. You can check how the di property is added on diagram import at https://github.com/bpmn-io/bpmn-js/blob/develop/lib/import/Importer.js#L51
  2. Override the SetColorHandler to handle colors assignment in a special, your modeler-specific way.
1 Like
3

To add to @barmac’s answer the canonical way to inject your custom color setting would be to override Modeling#setColor. This is the API that is used by the color picker extension. You’d want to detect your custom elements, and set colors differently for them.

2 Likes
4

@barmac @nikku

I would like to implement the coloring for my hexagon the way the color picker does it for normal BPMN elements. It changes the fill color and the stroke color. That’s why I tried to add DI elements to my hexagon & I think that’s the best approach. Unfortunately my attempts did not work. I would be super grateful for any guidance or other help with adding DI elements. What steps do I need to take?

While we’re on the subject of bpmn-js features for custom shapes. Maybe you also have a tip for me for the following problem:
You can’t give custom shapes a label. I have tried different approaches to make ‘label-editing’ for custom shapes possible (ensured my custom shape has a businessObject with a name property and added an SVG text element to my custom shape etc.). When that didn’t work, I created an OcbpmnDirectEditingProvider that uses the directEditing service, also made some css changes but… As you can see in the GIF, it looks different than it should. It should just work like for the rest of the BPMN elements (e.g. events):
labeling
I think the easiest way is to enable the label editing implemented in bpmn-js for custom shapes. But how? Where is the problem? Thank you very much for your help!

If you want to have a look at my code:
Here is my code with my implementation of the buggy label editing (I should probably discard this approach).
Here is my code without the implementation of the buggy label editing where I would like to add the normal label editing for custom shapes.