Hi there,
I’m styling the BPMN SVG using CSS and I need to add the type of the element in all corresponding svg elements. Something like that:
<g class="djs-element djs-shape" data-element-id="IntermediateThrowEvent_1w7puvt" data-element-type="bpmn:IntermediateCatchEvent">
...
</g>
I could archive it by doing
bpmnModeler.importXML(xml, function(err) {
var canvas = _this.bpmnModeler.get('canvas');
var elements = canvas._elementRegistry._elements;
for (elm in elements) {
// Set the attribute with the element type, to apply css
elements[elm].gfx.setAttribute("data-element-type", elements[elm].element.type);
}
});
The problem is that when creating new elements, changing, etc. the solutions is no longer valid. So I came up with another solution that works for me. I change the method ElementRegistry.prototype.add direct in the .js file to set the new attribute the same way the attribute data-element-id is set.
...
var ELEMENT_TYPE = 'data-element-type';
ElementRegistry.prototype.add = function(element, gfx, secondaryGfx) {
...
attr$1(gfx, ELEMENT_TYPE, element.type);
...
};
This works as expected, but I want to create a bundle for myself overriding the default behavior of ElementRegistry.prototype.add. I’ve already have my bundle generated using rollup using the umd format. I tried adding the following as module and did not work
import inherits from 'inherits';
import ElementRegistry from 'diagram-js/lib/core/ElementRegistry';
var ELEMENT_TYPE = 'data-element-type';
export default function AddElementType(eventBus) {
ElementRegistry.call(this, eventBus);
}
inherits(AddElementType, ElementRegistry);
AddElementType.$inject = ['eventBus'];
AddElementType.prototype.add = function (element, gfx, secondaryGfx) {
console.log(element);
};
How could I override this method? Is there a better approach?
Thank you!