I am using interaction based example to test it out with Spring MVC. I can see the console, but no graphics in canvas. So, I cannot verify interaction. I can load the graphics as shown in simple-bower, however, when I use Async method to load in interaction based example, it does not work.
Appreciate any help in advance
Following is the js file snippet:
'use strict';
var console = document.querySelector('#console');
function log() {
console.value += Array.prototype.slice.call(arguments).map(function(e) {
return String(e);
}).join(' ');
console.value += '\n';
console.scrollTop = console.scrollHeight;
}
var BpmnViewer = window.BpmnJS;
var viewer = new BpmnViewer({ container: '#canvas' });
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
viewer.importXML(xhr.response, function(err) {
if (!err) {
console.log('success!');
viewer.get('canvas').zoom('fit-viewport');
} else {
console.log('something went wrong:', err);
}
});
}
};
xhr.open('GET', '/bpmn/interaction/resources/pizza-collaboration.bpmn', true);
xhr.send(null);
// diagram is loaded, add interaction to it
// Option 1:
// directly hook into internal diagram events
// this allows you to access the clicked element directly
var eventBus = viewer.get('eventBus');
// you may hook into any of the following events
var events = [
'element.hover',
'element.out',
'element.click',
'element.dblclick',
'element.mousedown',
'element.mouseup'
];
events.forEach(function(event) {
eventBus.on(event, function(e) {
// e.element = the model element
// e.gfx = the graphical element
log(event, 'on', e.element.id);
});
});
});