Labelling custom shape

So I have made a custom shape and it needs to have two labels. I have successfully added one of them and put in a function for the second:
image
With the source code:

        'dcr:DcrTask': function (parentGfx, element) {

            if (element.width < 250) {
                element.width = 140;
            }
            if (element.height < 250) {
                element.height = 190;
            }

            var strokeWidth = 1.5;

            var attrs = {
                fill: '#e1ebf7',
                stroke: 'black',
                strokeWidth
            };

            var lane = renderer('dcr:Lane')(parentGfx, element, attrs);

            drawLine(parentGfx, [
                { x: 0, y: 40 },
                { x: element.width, y: 40 }
            ], {
                stroke: 'black',
                strokeWidth
            });

            var text = getSemantic(element).name;
            var secondtext = getSemantic(element).secondname;
            renderLaneLabel(parentGfx, text, element);
            renderCustomLabel(parentGfx, secondtext, element );


            return lane;

        },

and I’m trying to use the renderCustomLabel() function to render the second label. But I can’t seem to get that to work as only one pointer appears when I try to enter a label and that’s for the label that goes into the lane and not the “body” of the shape. Any assistance with this will be helpful. Thanks!

    function renderCustomLabel(parentGfx, text, element) {

        var textBox = renderLabel(parentGfx, text, {
            box: {
              height: 30,
              width: element.height
            },
            align: 'center-middle',
            style: {
              fill: 'black'
            }
          });
      
          var top = -1*element.height;
      
          transform(textBox, 0, -top, 270);
    }

How would you edit the second label? Using the direct-editing feature?

Yes the idea is that the second label just like the first should be edited using the direct editing feature. Because the first label in the lane should represent a “Role” and the second label in the body should represent a “task” executed by the person in said role. Thanks!

Hi @philippfromme,

Not sure if you have any ideas or suggested solutions to this!

I tried using the renderEmbeddedLabel() function from bpmn-js but then the label in the lane was overwritten. As a result of this, the text entered in the embedded label was rendered in both places, which was not the desired result unfortunately.

Regards…