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.