Labels for EmojiTasks

[rajgoel]

Hi,

first, big thanks for this wonderful example 🥇 !

Thanks to the example I managed to add my own custom tasks.

One thing missing is the possibility for labelling the EmojiTask? Currently, the example allows to enter a label, but this label is not shown on the EmojiTask.

It looks like a custom LabelEditingProvider is needed (https://forum.bpmn.io/t/add-a-label-on-a-custom-element/2763), but it is unclear (at least for me) how this can be implemented.

[rajgoel]

I just realised that although labels are not shown in this example, they are still accessible. A workaround allowing to display labels is to add something like

  if (businessObject.name) {
    var lines = businessObject.name.trim().split('\n');
    var textArea = svgCreate('text');
    var text = '';
    var fontsize = 12;
    for (var i = 0; i < lines.length; ++i) {
      text += '<tspan x="' + width/2 + '" y="-' + ((lines.length-i)*fontsize-fontsize/2) + '">' + lines[i] + '</tspan>';
    }
    innerSVG(textArea,text);
    svgAttr(textArea, {
      fontFamily: 'Arial, sans-serif',
      fontSize: fontsize,
      textAnchor: 'middle',
      width: width,
      x: width,
      y: 0
    });
    svgAppend(parentNode, textArea);
  }

in EmojiRenderer.prototype.drawShape.

Would be great to have an example of a label display consistent to the normal display, but this is not really an issue for me.

[nikku]

Glad you were able to find a solution to your issue.

Would be great to have an example of a label display consistent to the normal display [...]

Could you share your full use-case so we understand it and may improve this example in the future?

[rajgoel]

Hi, I am developing a custom task for a BPMN extension that looks like this:

The custom task should have a label next to it. In my workaround solution, the label is entered like for a regular task (see custom task on the right) and directly drawn when I draw the shape of the custom task. Ideally the label would be entered just like for the start and end events by clicking on the label itself (and not on the task shape). Also it would be great if the label could be moved around, i.e., has exactly the same behaviour like the labels for events.

Thanks again for your great developments!

[rajgoel]

In case this is useful for anyone: the source code for above example can be found here: https://github.com/rajgoel/bpmn-js-resources

[nikku]

We'll checkout your project and see if we can improve this example via #4.