Script errors after adding bpmn-js-task-priorities module.Not able to load diagram


#1

Hi,

I’m trying to include “bpmn-js-task-priorities” module for adding custom colors to my diagram.

But after including this module, diagram itself not loading due to script errors.Check my code here

var propertiesPanelModule = require(‘bpmn-js-properties-panel’),
propertiesProviderModule = require(‘bpmn-js-properties-panel/lib/provider/camunda’),
camundaModdleDescriptor = require(‘camunda-bpmn-moddle/resources/camunda’),
prioritiesModule = require(‘bpmn-js-task-priorities/lib/priorities’);

var bpmnModeler = new BpmnModeler({
container: canvas,
propertiesPanel: {
parent: ‘#js-properties-panel
},
keyboard: {
bindTo: document
},
additionalModules: [
propertiesPanelModule,
propertiesProviderModule,
prioritiesModule
],
moddleExtensions: {
camunda: camundaModdleDescriptor
}
});

Getting below error in my browser

EventBus.js:368 unhandled error in event listenerEventBus._invokeListener @ EventBus.js:368EventBus._invokeListeners @ EventBus.js:342EventBus.fire @ EventBus.js:302(anonymous function) @ Canvas.js:151wrapper @ createBindWrapper.js:17invokeFunction @ EventBus.js:455EventBus._invokeListener @ EventBus.js:354EventBus._invokeListeners @ EventBus.js:342EventBus.fire @ EventBus.js:302Diagram @ Diagram.js:180Viewer._init @ Viewer.js:417Viewer @ Viewer.js:120Modeler @ Modeler.js:1051.bpmn-js-properties-panel @ index.js:20s @ _prelude.js:1e @ _prelude.js:1(anonymous function) @ _prelude.js:1
EventBus.js:369 TypeError: svg.path is not a function
at initMarkers (BpmnRenderer.js:86)
at BpmnRenderer.js:1483
at invokeFunction (EventBus.js:455)
at EventBus._invokeListener (EventBus.js:354)
at EventBus._invokeListeners (EventBus.js:342)
at EventBus.fire (EventBus.js:302)
at Canvas. (Canvas.js:151)
at wrapper (createBindWrapper.js:17)
at invokeFunction (EventBus.js:455)
at EventBus._invokeListener (EventBus.js:354)EventBus._invokeListener @ EventBus.js:369EventBus._invokeListeners @ EventBus.js:342EventBus.fire @ EventBus.js:302(anonymous function) @ Canvas.js:151wrapper @ createBindWrapper.js:17invokeFunction @ EventBus.js:455EventBus._invokeListener @ EventBus.js:354EventBus._invokeListeners @ EventBus.js:342EventBus.fire @ EventBus.js:302Diagram @ Diagram.js:180Viewer._init @ Viewer.js:417Viewer @ Viewer.js:120Modeler @ Modeler.js:1051.bpmn-js-properties-panel @ index.js:20s @ _prelude.js:1e @ _prelude.js:1(anonymous function) @ _prelude.js:1
EventBus.js:368 unhandled error in event listenerEventBus._invokeListener @ EventBus.js:368EventBus._invokeListeners @ EventBus.js:342EventBus.fire @ EventBus.js:302Diagram @ Diagram.js:180Viewer._init @ Viewer.js:417Viewer @ Viewer.js:120Modeler @ Modeler.js:1051.bpmn-js-properties-panel @ index.js:20s @ _prelude.js:1e @ _prelude.js:1(anonymous function) @ _prelude.js:1
EventBus.js:369 TypeError: svg.path is not a function
at initMarkers (BpmnRenderer.js:86)
at BpmnRenderer.js:1483
at invokeFunction (EventBus.js:455)
at EventBus._invokeListener (EventBus.js:354)
at EventBus._invokeListeners (EventBus.js:342)
at EventBus.fire (EventBus.js:302)
at Canvas. (Canvas.js:151)
at wrapper (createBindWrapper.js:17)
at invokeFunction (EventBus.js:455)
at EventBus._invokeListener (EventBus.js:354)


#2

The bpmn-js-task-priorities example is outdated. It was built with an older version of bpmn-js which still had Snap.svg as a dependency. Snap.svg has been removed. I’ll create an issue in order to either update or remove the example.

If you want to use colors you can do so without using the example. bpmn-js supports colors since version 0.19.0.


#3

Thanks for the information.


#4

Hi,

Now I’m able to add custom colors to my diagram.But I’m getting missing namespace warning on browser.Do I need to add any model attribute for this?

My Code:
if (is(element, ‘bpmn:Task’)) {
this._modeling.setColor(element, {
stroke: ‘green’,
fill: ‘red’
});
}

missing namespace information for di = Object {fill: “red”, stroke: “green”} on
ModdleElement {$type: “bpmn:Task”, id: “Task_0kgpfjt”, di: ModdleElement, extensionElements: ModdleElement, $attrs: Object…}