diff --git a/Gruntfile.js b/Gruntfile.js index eaee92eb..8a19f9e0 100644 --- a/Gruntfile.js +++ b/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 %>' } ] diff --git a/example/app.css b/example/app.css index cde5562a..b84cbc9f 100644 --- a/example/app.css +++ b/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"; } \ No newline at end of file diff --git a/lib/Viewer.js b/lib/Viewer.js index 84ce3871..ce042da9 100644 --- a/lib/Viewer.js +++ b/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; \ No newline at end of file