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).
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?
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.
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):
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.
Isn’t there an easier option that the behavior of adding a label for event happens exactly the same for my hexagon? I like the behavior and don’t want to implement a new label.
Thank you! I solved it by creating a new file ‘ChangeColor.js’ that costumizes the color setting functionality in bpmn-js for my specific element type. It overrides the standard ‘setColor’ function to apply custom color logic (directly updating the SVG attribute for fill and stroke colors) to ‘ocbpmn:hexagon’ elements while retaining default behaviour for all other elements:
export default function ChangeColor(modeler) {
const modeling = modeler.get('modeling');
const elementRegistry = modeler.get('elementRegistry');
// Backup the original setColor function
const originalSetColor = modeling.setColor;
// Override the setColor function
modeling.setColor = function(elements, colors) {
// Ensure elements is an array
elements = Array.isArray(elements) ? elements : [elements];
elements.forEach(element => {
if (element.type === 'ocbpmn:hexagon') {
// Store the colors in the element's business object
element.businessObject.customColors = colors;
// Get the graphical representation of the element
const gfx = elementRegistry.getGraphics(element);
// Update the fill and stroke colors of the hexagon
const svgPath = gfx.querySelector('.fill-path');
const svgStrokePath = gfx.querySelector('.stroke-path');
if (svgPath) {
svgPath.setAttribute('fill', colors.fill);
}
if (svgStrokePath) {
svgStrokePath.setAttribute('stroke', colors.stroke);
}
} else {
// For all other elements, use the original behavior
originalSetColor.call(this, [element], colors);
}
});
};
}
Even if you can now color the elements, the coloring disappears again as soon as you move the element. This also applies to the Sequence Flow (see GIF). I guess that bpmn-js redraws the element when it is moved with its original properties, not accounting for any runtime changes like the custom color attributes added dynamically to the SVG. Do you have any idea what I need to change such that color and Sequence Flow stays?
See good behavior at the top (classical bpmn elements)
See bad behavior at the bottom (custom elements)
@Jean-Christophe-S What is important to understand is that the renderer shall only account for what is in the model, and that there exists a simple update loop that you want to implement:
In your custom modeling#setColor, ensure that:
You persist the color in the custom element model, i.e. element.businessObject
.