feat(Viewer): expose #on to add listeners

Gruntfile.js

@@ -64,6 +64,7 @@ module.exports = function(grunt) {
         },
         options: {
           alias: [
+            'lodash',
             '<%= config.sources %>/main.js:bpmn',
             '<%= config.sources %>/Model.js:bpmn/Model',
             '<%= config.sources %>/Viewer.js:bpmn/Viewer',
@@ -77,6 +78,7 @@ module.exports = function(grunt) {
         },
         options: {
           alias: [
+            'lodash',
             '<%= config.sources %>/main.js:bpmn',
             '<%= config.sources %>/Model.js:bpmn/Model',
             '<%= config.sources %>/Viewer.js:bpmn/Viewer'
@@ -91,7 +93,7 @@ module.exports = function(grunt) {
           {
             expand: true,
             cwd: '<%= config.samples %>/',
-            src: ['**/*.{js,css,html,png}'],
+            src: ['**/*.*'],
             dest: '<%= config.dist %>/<%= config.samples %>'
           }
         ]

example/app.css

@@ -74,7 +74,7 @@ a:link {
 
 .buttons > li {
   display: inline-block;
-  padding: 5px;
+  padding: 5px 10px;
 }
 
 .buttons a {
@@ -85,6 +85,10 @@ a:link {
   opacity: 1.0;
 }
 
+.buttons a .fa {
+  font-size: 2em;
+}
+
 .logo {
   width: 80px;
   height: 80px;
@@ -96,4 +100,29 @@ a:link {
   opacity: 0.8;
   
   background: no-repeat url('bpmn-io-icon.png');
+}
+
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('fontawesome.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.fa {
+  display: inline-block;
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.fa-download:before {
+  content: "\f019";
+}
+
+.fa-picture-o:before {
+  content: "\f03e";
 }

lib/Viewer.js

@@ -3,6 +3,15 @@ var Diagram = require('diagram-js');
 var Importer = require('./import/Importer'),
     Model = require('./Model');
 
+
+function initListeners(diagram, listeners) {
+  var events = diagram.get('events');
+
+  listeners.forEach(function(l) {
+    events.on(l.event, l.handler);
+  });
+}
+
 function Viewer(container) {
   this.container = container;
 }
@@ -69,6 +78,9 @@ Viewer.prototype.importDefinitions = function(definitions, done) {
   }
 
   this.diagram = this.createDiagram();
+  
+  initListeners(this.diagram, this.__listeners || []);
+
   this.definitions = definitions;
 
   Importer.importBpmnDiagram(this.diagram, definitions, done);
@@ -82,4 +94,9 @@ Viewer.prototype.clear = function() {
   this.container.innerHTML = '';
 };
 
+Viewer.prototype.on = function(event, handler) {
+  this.__listeners = this.__listeners || [];
+  this.__listeners.push({ event: event, handler: handler });
+};
+
 module.exports = Viewer;