Label for a custom rendered element

Developers Modeler
1

I have successfully rendered the “Task” element with custom svg using this snippet in CustomRenderer:

  this.canRender = function(element) {
    return is(element, 'bpmn:Task');
  };
  this.drawShape = function(parent, shape) {
    var url = Workorder.dataURL;

    var workorder = svgCreate('image', {
      x: 0,
      y: 0,
      width: shape.width,
      height: shape.height,
      href: url
    });

    svgAppend(parent, workorder);

    return workorder;
  };

But this has caused a problem. It’s not possible to add label to Tasks anymore. Can you please help me fix this?

2

any thoughts please?

3

@nikku Can you please help me on this problem?

4

Could you please share a CodeSandbox that reproduces your issue in a way that we can inspect it?

5

it’s basically a clone of the Nyan example. Except that I use my custom svg instead of Nyan.gif.
Now, the problem is that the label of this element is not shown. I want it to be viewable just like the labels on a Task Element. It’s possible to add or edit the label (it’s even accessible via businessObject), but the DOM responsible for showing the label will not be generated.

6

Still no idea? I’m really stuck here. Any help is much appreciated

7

@nikku @Niklas_Kiefer I would appreciate it if you can help me on this problem

8

Thanks for following up with the sandbox.

What you need to do is render the embedded label as part of the render process, cf. BpmnRenderer.

The BpmnRenderer wraps that into a little bit of utility, but what it does in a nutshell is resorting to TextRenderer for creating the actual label text and adding it to the graphical element.