Add custom queue element

Developers
1

Tasks can be connected to DataStorage elements to model an interaction with a database. But to do the same with a message queue there is no such element in BPMN. Therefore I want to add a queue element to my BPMN editor.

I have seen in the nyan cat example, where bpmn:ServiceTasks are rendered as nyan cat. I would like to keep the already existing bpmn types to be rendered normally and add the nyan cat for an additional type (for example custom:NyanCat) instead.

Is this possible? How do I need to change the nyan cat example to make that work? This new type of elements also needs to be able to have properties edited by the properties panel and be saved in the bpmn xml file.

2

Did you already check out this example: https://github.com/bpmn-io/bpmn-js-example-custom-elements?

It shows cases on how to create custom elements in your editor, step by step, especially how to create the meta model extension.

3

Yes I already looked into that, but I don’t really understand how I can combine it with the nyan cat example, because I want the element to render a svg.
I am not sure if I understand it correctly, but I dont wanna extends one of the already existing bpmn types. What I want is to add one queue element type without sacrificing one of the existing ones.

4

What I’ve done so far:

1.) Copy/paste custom folder from https://github.com/bpmn-io/bpmn-js-example-custom-elements into my project

2.) Substitute ‘bpmn:Task’ appearances with ‘custom:Queue’ in CustomPalette.js and CustomRenderer.js

3.) Add CustomPalette.js and CustomRenderer.js to BPMNModeler

var bpmnModeler = new BpmnModeler({
    container: '#js-canvas',
    propertiesPanel: {
        parent: '#js-properties-panel'
    },
    additionalModules: [
        propertiesPanelModule,
        propertiesProviderModule,
        customModule
    ],
    moddleExtensions: {
        custom: customModdleDescriptor
    }
});

4.) Add Queue type to moddle

{
  "name": "Custom",
  "prefix": "custom",
  "uri": "http://custom",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
    {
      "name": "Queue",
      "properties": [
        { "name": "id", "type": "String", "isAttr": true },
        { "name": "endpoint", "type": "String", "isAttr": true},
        { "name": "type", "type": "String", "isAttr": true }
      ]
    }
  ]
}

Whenever I want to add this element to the diagram, I’m getting the error:

unhandled error in event listener TypeError: h is not a function
    at BpmnRenderer.drawShape (BpmnRenderer.js:1899:10)
    at CustomRenderer.drawShape (CustomRenderer.js:42:37)
    at BaseRenderer.js:22:21
    at invokeFunction (EventBus.js:519:13)
    at EventBus._invokeListener (EventBus.js:371:19)
    at EventBus._invokeListeners (EventBus.js:352:24)
    at EventBus.fire (EventBus.js:313:24)
    at GraphicsFactory.drawShape (GraphicsFactory.js:177:19)
    at CreatePreview.js:47:25
    at Array.forEach (<anonymous>)