symas
February 1, 2023, 12:28pm
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:
After Input Text:
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
In order to implement labels for custom elements, you would need to implement your own LabelEditingProvider
.
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:
Found a solution (a bit complicated, but works for me):
import {
assign
} from 'min-dash';
import {
is
} from 'bpmn-js/lib/util/ModelUtil';
/**
* Provide external labels for custom subprocesses.
*/
export default function MyCustomLabelProvider(eventBus, modeling, elementRegistry) {
eventBus.on("commandStack.shape.create.preExecute", function (event) {
var context = event.context,
element = context.shape;
if ( /* is my custom element */
&& element.type == 'la…
and
Thanks a lot for your help!
Indeed, the element.label = part wasn’t working properly and after removing it, the error disappeared.
However, in case the property panel is used to create a name (when there is no external label), it appears that an internal label is created implicitly, resulting in an error. I fixed this by replacing element.di.label = { bounds }; by
if ( element.di && element.di.label ) delete element.di.label;
P.S. I cannot really explain what element.di is, because it is …
However, this approach was a bit more complicated for me and there might be easier solutions for your case.
symas
February 3, 2023, 4:21pm
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:
Hi together
I have created my own LabelEditingProvider like this:
import {
assign
} from 'min-dash';
import { getLabel } from 'bpmn-js/lib/features/label-editing/LabelUtil';
import {
is, Priority
} from '../../utils/ModelUtil';
import { isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
import { isExpanded } from 'bpmn-js/lib/util/DiUtil';
import {
getExternalLabelMid,
isLabelExternal,
hasExternalLabel,
isLabel
} from 'bpmn-js/lib/util/LabelUtil';
var HIGH_PRIORIT…
Perhaps you can help me?