Labels on custom elements are not shown

Developers Modeler
1

I draw my custom elements in my CustomRenderer like this:


    drawShape(parent, shape) {
        let url = '';
        if (is(shape, "regularBPMN:Resource")) {
            url = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIyMTdweCIgaGVpZ2h0PSIxMzFweCIgdmlld0JveD0iLTAuNSAtMC41IDIxNyAxMzEiPjxkZWZzLz48Zz48ZWxsaXBzZSBjeD0iMTA4IiBjeT0iNjUiIHJ4PSIxMDgiIHJ5PSI2NSIgZmlsbD0icmdiKDI1NSwgMjU1LCAyNTUpIiBzdHJva2U9InJnYigwLCAwLCAwKSIgcG9pbnRlci1ldmVudHM9ImFsbCIvPjxlbGxpcHNlIGN4PSIxMDgiIGN5PSI2NSIgcng9IjQwIiByeT0iNDAiIGZpbGw9IiNhMDUyMmQiIHN0cm9rZT0iIzZkMWYwMCIgcG9pbnRlci1ldmVudHM9ImFsbCIvPjwvZz48L3N2Zz4=';
        } else if (is(shape, "regularBPMN:Entity")) {
            url = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgd2lkdGg9IjQ3cHgiIGhlaWdodD0iNTFweCIgdmlld0JveD0iLTAuNSAtMC41IDQ3IDUxIj48ZGVmcy8+PGc+PHBhdGggZD0iTSAwIDAgTCA0NiAyNSBMIDAgNTAgWiIgZmlsbD0iIzAwOGEwMCIgc3Ryb2tlPSIjMDA1NzAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50ZXItZXZlbnRzPSJhbGwiLz48L2c+PC9zdmc+';
        }
        var svg = svgCreate('image', {
            x: 0,
            y: 0,
            width: shape.width,
            height: shape.height,
            href: url
        });
        svgAppend(parent, svg);

        return svg;
    };

This is working and added elements are drawn. I can also add a text to the element but it will not be shown.
However, the text is stored in the model:

    <regularBPMN:resource id="Resource_1c381at" name="Test" />

Input Text:
grafik

After Input Text:
grafik

Can someone give me a tip on what I have to do to make the text appear?

Next: The text should appear centered below the element (also for typing). How can I get that done?
Thank you for your support

2

In order to implement labels for custom elements, you would need to implement your own LabelEditingProvider .

3

Hi, I guess the easiest approach is to just draw the label in your drawShape method. This is how I once realized this:

ResourceRenderer.prototype.drawShape = function(parentNode, element) {
  var businessObject = element.businessObject,
      type = businessObject.type;

  var width = element.width,
      height = element.height;

  // draw your shape 
  // ...
  // add label
  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);
  }

Alternatively, you can create an external label, e.g., as described here:

and

However, this approach was a bit more complicated for me and there might be easier solutions for your case.

4

Hi @beatriz.mendes
Thank you for your hint. I have tried to implement my own LabelEditingProvider, but it will not be used. I have posted a new question about this:

Perhaps you can help me?