Error with custom elements

[Vito_Puleio]

Hi all, I am currently experiencing problems with a custom element that I created and added to my bpmn editor.

Specifically, I was able to create a new element with a custom name (“elmi:customTask”); this element is added to the palette and then I am able to add it to the editor. This element generates an XML code like this:

  <bpmn2:process id="Process_1">
        <elmi:customTask id="Activity_12zya2i"/>
    </bpmn2:process>

However, when I try to save the XML content I get several errors:

unhandled error in event listener TypeError: h is not a function
    at BpmnRenderer.drawShape (BpmnRenderer.js:1891:1)
    at BaseRenderer.js:30:1
    at invokeFunction (EventBus.js:534:1)
    at EventBus._invokeListener (EventBus.js:386:1)
    at EventBus._invokeListeners (EventBus.js:367:1)
    at EventBus.fire (EventBus.js:322:1)
    at GraphicsFactory.drawShape (GraphicsFactory.js:210:1)
    at GraphicsFactory.update (GraphicsFactory.js:269:1)
    at Canvas._addElement (Canvas.js:904:1)
    at Canvas.addShape (Canvas.js:921:1)

BpmnTreeWalker.js:97 failed to import <elmi:CustomTask id="Activity_12zya2i" />

BpmnTreeWalker.js:98 TypeError: h is not a function
    at BpmnRenderer.drawShape (BpmnRenderer.js:1891:1)
    at BaseRenderer.js:30:1
    at invokeFunction (EventBus.js:534:1)
    at EventBus._invokeListener (EventBus.js:386:1)
    at EventBus._invokeListeners (EventBus.js:367:1)
    at EventBus.fire (EventBus.js:322:1)
    at GraphicsFactory.drawShape (GraphicsFactory.js:210:1)
    at GraphicsFactory.update (GraphicsFactory.js:269:1)
    at Canvas._addElement (Canvas.js:904:1)
    at Canvas.addShape (Canvas.js:921:1)

The problem then occurs when I try to manually edit the XML code from my editor and then call the “SaveXML();” function. Same thing happens if I try to upload an XML file to the editor that contains my custom tag " <elmi:customTask id=“Activity_12zya2i”/>"

Below are my main files that I use to add my custom component:

app.js:

// create modeler
const bpmnModeler = new BpmnModeler({
  container: containerEl,
  additionalModules: [
    customModule,
    BpmnPropertiesPanelModule,
    BpmnPropertiesProviderModule,
    CamundaPlatformPropertiesProviderModule,
    ElementTemplatesPropertiesProviderModule,
    magicPropertiesProviderModule
  ],
  moddleExtensions: {
    elmi: elmiExtension,
    camunda: camundaModdlePackage,
    magic: magicModdleDescriptor
  },
  propertiesPanel: {
    parent: '#properties-panel-container'
  }
});

CustomPalette.js:

import { assign } from 'min-dash';

export default class CustomPalette {
  constructor(bpmnFactory, create, elementFactory, palette, translate) {
    this.bpmnFactory = bpmnFactory;
    this.create = create;
    this.elementFactory = elementFactory;
    this.translate = translate;

    palette.registerProvider(this);
  }

  getPaletteEntries(element) {
    const {
      bpmnFactory,
      create,
      elementFactory,
      translate
    } = this;

    function createCustomTask() {
      return function(event) {
        const businessObject = bpmnFactory.create('elmi:CustomTask');
        const shape = elementFactory.createShape({
          type: 'bpmn:Task',
          businessObject: businessObject
        });
        create.start(event, shape);
      };
    }
    

    let actions = {
      'create.separato-mattoncini-custom': {
        group: 'mattoncini-custom',
        separator: true
      },
      'create.customTask': {
        group: 'mattoncini-custom',
        className: 'fas fa-cogs',
        title: translate('mattoncino custom'),
        action: {
          dragstart: createCustomTask(),
          click: createCustomTask()
        }
      }
    };

    return actions;
  }
}

CustomPalette.$inject = [
  'bpmnFactory',
  'create',
  'elementFactory',
  'palette',
  'translate'
];

CustomRender.js:

import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
import { is } from 'bpmn-js/lib/util/ModelUtil';
import { append as svgAppend, create as svgCreate } from 'tiny-svg';
import inherits from 'inherits';
import { assign } from 'min-dash';

const HIGH_PRIORITY = 1500;

function CustomRenderer(eventBus, bpmnRenderer) {
  BaseRenderer.call(this, eventBus, HIGH_PRIORITY);
  this.bpmnRenderer = bpmnRenderer;
}

inherits(CustomRenderer, BaseRenderer);

assign(CustomRenderer.prototype, {
  canRender: function(element) {
    return is(element, 'elmi:CustomTask');
  },

  drawShape: function(parentNode, element) {
    const shape = this.bpmnRenderer.drawShape(parentNode, element);
  
    // Aggiungi qui il tuo codice personalizzato per modificare l'aspetto dell'elemento
  
    return shape;
  },
  

  getShapePath: function(shape) {
    return this.bpmnRenderer.getShapePath(shape);
  }
});

CustomRenderer.$inject = ['eventBus', 'bpmnRenderer'];

export default CustomRenderer;

My JSON files with properties:

{
  "name": "Elmi",
  "prefix": "elmi",
  "uri": "http://example.com/elmi",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
    {
      "name": "CustomTask",
      "superClass": ["bpmn:Task"]
    }
  ]
}

This is what is generated when the custom element is added to the editor:

This is what happens after clicking the “save” button.

The element disappears from the editor and these errors are shown:

How can I prevent the error from occurring when I add my custom element?

Thanks

[barmac]

Please share a CodeSandbox that reproduces your issue in a way that we can inspect it.

[barmac]

By the way, notice that your custom task is not BPMN compliant. BPMN allows custom elements only for artifacts. Check out the custom elements guide for possible solutions: bpmn-js-examples/custom-elements at master · bpmn-io/bpmn-js-examples · GitHub

[Vito_Puleio]

Hi, Thank you for your response. I recreated the current state of my problem in this sandbox:
https://codesandbox.io/s/friendly-albattani-rdjm4w?file=/index.html

As you will see from the example, I created a new custom element in the left palette (last element with the gear icon) and when this element is added to the editor an XML element is created “<elmi:customTask id=“Activity_0wlqdqe” />”

However, when I try to edit the xml and then make a save (via XML edit function) or try to import an XML file that has a custom element like “<elmi:customTask id=“Activity_0wlqdqe” />” inside it, the latter is automatically removed and disappears from the editor!

How can I prevent the element from being automatically removed when importing the XML?

Thanks

[Vito_Puleio]

Hi, I understand that the element does not result BPMN compliant however I need to create my own element of this type “elmi:customTask” or “elmi:XXXX” when I add custom elements to my editor.
Is it possible to achieve this or is it not allowed by BPMN?

Thank you

[Vito_Puleio]

I was able to resolve the error. Trivially it was the name recorded in the file “elmi.json” which was written “customTask” instead of “CustomTask” this caused an error when importing the element. In the sandbox you can find the updated working code. Thank you!