Name on custom icon

I was able to implement custom icon based on https://github.com/bpmn-io/bpmn-js-nyan. However the name added through properties panel is not appearing on the custom icon. How can we make the name to appear like it is for standard icons?

Also, to implement mutiple custom icons to appear on the editor, can we use the same nyanDrawModule? Can you provide me some guidance on how to proceed on this?

Hello @Sangeeth_VS,

Can you please clarify what you want to achieve? Perhaps you could share screenshots or a CodeSandbox that shows the issue at hand.

You can use one provider for more than one element (eg. PaletteExtensionProvider), similarly as we do it for the original palette provider, see here.

Hi @beatriz.mendes ,

The first part of the query is regarding the name not appearing on custom icon. Please see the screenshot below for your reference
image

In the first element, the name ‘My Script’, I provided through the property panel is appearing. But in custom icon, the name “My Custom Task” is not appearing. Won’t the name appear on a custom icon?

The second part of the query is regarding drawing the custom icon on the editor. In reference to https://github.com/bpmn-io/bpmn-js-nyan, I understand that nyanDrawModule is used to draw the icon on the editor. How can I use the same module for mutiple custom icons? I know how to add multiple elements in palette.

drawShape handles the rendering of the shape, including the rendering of the label. By overriding it, this will have to be handled on your end. You can see how the label is originally rendered, using the method renderEmbeddedLabel here.

You can define how to draw multiple custom elements in the same module by having an object which defines the draw handlers for each element:

let handlers = {
   'bpmn:Event': function(parentGfx, element, attrs) {
       // draw shape
   },
   'bpmn:Task': function(parentGfx, element, attrs) {
      // draw shape
      // draw embedded label
   },
}

And in drawShape, you can call the specific handler for the element:

this.drawShape = function(parentGfx, element) {
  var type = element.type;
  var h = handlers[type];

  return h(parentGfx, element);
};

Does this answer your questions?