Error when creating custom task via palette

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.

Remove the space and try again?

I did that and I get the same error.

You need to make sure that the moddle extension that defines dcr:Task is known to the editor.

2 posts were split to a new topic: Be able to filter palette entries

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.