I’m in the process of extending the bpmn modeler. I have made changes to my palette provider by adding the code below to this prepackaged bpmn modelerhttps://github.com/bpmn-io/bpmn-js-examples/tree/master/modeler.
'dcr-task': createAction(
'dcr: Task', 'activity', 'bpmn-icon-trash', 'Create dcr-event TAsk'
),
Now in my renderer I have made functions for my custom shape and it looks like this:
'dcr:Task': function (parent, element) {
if (element.width < 250) {
element.width = 200;
}
if (element.height < 250) {
element.height = 200;
}
var elementObject = drawRectWithHeader(parent, element.width, element.height, 10, {
header: {
fill: '#006033',
stroke: '#006033'
}, body: {fill: '#fff', stroke: '#006033'}
})
function drawRectWithHeader(parentGfx, width, height, r, attrs) {
var size = getHeaderSize({width: width, height: height});
var headerRect = drawRect(parentGfx, size.width, size.height, 0, 0, attrs.header);
var rect = svgCreate('rect');
svgAttr(rect, {
x: 0,
y: 25,
width: width,
height: height - 25
});
svgAttr(rect, attrs.body);
svgAppend(parentGfx, rect); //877
return headerRect;
}
function drawRect(parentGfx, width, height, r, offset, attrs) {
if (isObject(offset)) {
attrs = offset;
offset = 0;
}
offset = offset || 0;
attrs = computeStyle(attrs, {
stroke: 'black',
strokeWidth: 2,
fill: 'white'
});
var rect = svgCreate('rect');
svgAttr(rect, {
x: offset,
y: offset,
width: width - offset * 2,
height: height - offset * 2,
rx: 5,//r,
ry: 5//r
});
svgAttr(rect, attrs); //928
svgAppend(parentGfx, rect);
return rect;
} //920
Now when I run the code and try to drag start, I get the error:
index.esm.js:543 :: Uncaught Error: unknown type <dcr: Task>
at ./node_modules/moddle/dist/index.esm.js.Registry.mapTypes (index.esm.js:543:1)
at ./node_modules/moddle/dist/index.esm.js.Registry.getEffectiveDescriptor (index.esm.js:568:1)
at ./node_modules/moddle/dist/index.esm.js.Moddle.getType (index.esm.js:859:1)
at ./node_modules/moddle/dist/index.esm.js.Moddle.create (index.esm.js:827:1)
at ./node_modules/bpmn-js/lib/features/modeling/BpmnFactory.js.BpmnFactory.create (BpmnFactory.js:75:1)
at ./node_modules/bpmn-js/lib/features/modeling/ElementFactory.js.ElementFactory.createBpmnElement (ElementFactory.js:83:1)
at ./node_modules/bpmn-js/lib/features/modeling/ElementFactory.js.ElementFactory.create (ElementFactory.js:66:1)
at ./node_modules/diagram-js/lib/core/ElementFactory.js.ElementFactory.createShape (ElementFactory.js:24:1)
at Object.createListener (DCRPaletteProvider.js:39:1)
at ./node_modules/diagram-js/lib/features/palette/Palette.js.Palette.trigger (Palette.js:316:1)
./node_modules/moddle/dist/index.esm.js.Registry.mapTypes @ index.esm.js:543
./node_modules/moddle/dist/index.esm.js.Registry.getEffectiveDescriptor @ index.esm.js:568
./node_modules/moddle/dist/index.esm.js.Moddle.getType @ index.esm.js:859
./node_modules/moddle/dist/index.esm.js.Moddle.create @ index.esm.js:827
./node_modules/bpmn-js/lib/features/modeling/BpmnFactory.js.BpmnFactory.create @ BpmnFactory.js:75
./node_modules/bpmn-js/lib/features/modeling/ElementFactory.js.ElementFactory.createBpmnElement @ ElementFactory.js:83
./node_modules/bpmn-js/lib/features/modeling/ElementFactory.js.ElementFactory.create @ ElementFactory.js:66
./node_modules/diagram-js/lib/core/ElementFactory.js.ElementFactory.createShape @ ElementFactory.js:24
createListener @ DCRPaletteProvider.js:39
./node_modules/diagram-js/lib/features/palette/Palette.js.Palette.trigger @ Palette.js:316
(anonymous) @ Palette.js:156
(anonymous) @ index.esm.js:407
And I don’t know why that is the case as the tags types are the same. Any assistance with this will be helpful.