bpmn-js url viewer

URL을 기반으로 bpmn 을 열기

https://github.com/bpmn-io/bpmn-js-examples/tree/master/url-viewer

노드에 색칠하기

https://github.com/bpmn-io/bpmn-js-examples/tree/master/colors

css 에 highlight 추가

.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
  fill: green !important; /* color elements as green */
}

특정 task 에 highlight를 추가함

viewer.importXML(diagramXML, function() {

  var canvas = viewer.get('canvas');

  canvas.addMarker('UserTask_1', 'highlight');
});

노드에 event 추가 하기

https://github.com/bpmn-io/bpmn-js-examples/tree/master/interaction

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);
  });
});