feat(Viewer): embed and show project logo

The project logo now properly embeds in the Viewer and links to bpmn.io.
This way, we are able to ship it as part of a bpmn-js bundle.

In addition to that change this commit upgrades to the latest diagram-js
release, too which adds support for Diagram#destroy().

Closes #15

Gruntfile.js

@@ -43,7 +43,7 @@ module.exports = function(grunt) {
     },
     karma: {
       options: {
-        configFile: '<%= config.tests %>/config/karma.unit.js'
+        configFile: '<%= config.tests %>/config/karma.unit.js',
       },
       single: {
         singleRun: true,
@@ -58,11 +58,28 @@ module.exports = function(grunt) {
         }
       },
       unit: {
-        browsers: TEST_BROWSERS
+        browsers: TEST_BROWSERS,
+        transform: [ 'brfs' ]
       }
     },
     browserify: {
       options: {
+        transform: [ 'brfs', function() {
+
+          // remove require('fs') from source code as it is 
+          // optimized away (i.e. inlined) by brfs transform
+
+          var through = require('through');
+
+          var data = '';
+          return through(write, end);
+
+          function write (buf) { data += buf; }
+          function end () {
+            this.queue(data.replace(/require\('fs'\)/, '{}'));
+            this.queue(null);
+          }
+        }],
         browserifyOptions: {
           builtins: false,
           commondir: false
@@ -80,6 +97,7 @@ module.exports = function(grunt) {
         },
         options: {
           alias: [
+            'node_modules/jquery:jquery',
             'node_modules/lodash:lodash',
             'node_modules/bpmn-moddle:bpmn/Model',
             '<%= config.sources %>/main.js:bpmn',
@@ -94,6 +112,7 @@ module.exports = function(grunt) {
         },
         options: {
           alias: [
+            'node_modules/jquery:jquery',
             'node_modules/lodash:lodash',
             'node_modules/bpmn-moddle:bpmn/Model',
             '<%= config.sources %>/main.js:bpmn',
@@ -118,7 +137,7 @@ module.exports = function(grunt) {
     watch: {
       sources: {
         files: [ '<%= config.sources %>/**/*.js' ],
-        tasks: [ 'build:lib:dev' ]
+        tasks: [ 'build:lib' ]
       },
       samples: {
         files: [ '<%= config.samples %>/**/*.*' ],
@@ -222,7 +241,7 @@ module.exports = function(grunt) {
   });
 
   grunt.registerTask('auto-build', [
-    'build:all:dev',
+    'build:all',
     'connect:livereload',
     'watch'
   ]);

example/app.css

@@ -89,19 +89,6 @@ a:link {
   font-size: 2em;
 }
 
-.logo {
-  width: 80px;
-  height: 80px;
-  
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-
-  opacity: 0.8;
-  
-  background: no-repeat url('bpmn-io-icon.png');
-}
-
 @font-face {
   font-family: 'FontAwesome';
   src: url('fontawesome.woff') format('woff');

example/app.js

@@ -4,7 +4,7 @@
 
   var canvas = $('#js-canvas');
   
-  var renderer = new BpmnJS(canvas.get(0));
+  var renderer = new BpmnJS({ container: canvas });
 
   var newDiagramXML =
 '<?xml version="1.0" encoding="UTF-8"?>' +
@@ -149,4 +149,4 @@
     renderer.on('commandStack.changed', exportArtifacts);
   });
 
-})(window.BpmnJS, window.jQuery);
+})(window.BpmnJS, require('jquery'));

example/index.html

@@ -30,8 +30,6 @@
     <div class="canvas" id="js-canvas"></div>
   </div>
 
-  <div class="logo"></div>
-
   <ul class="buttons">
     <li>
       <a id="js-download-diagram" href title="download BPMN diagram">
@@ -45,8 +43,6 @@
     </li>
   </ul>
 
-  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
-
   <script>
     var str = window.location.search;
     var min = !/\?debug=/.test(str);

example/viewer/index.html

@@ -30,8 +30,6 @@
     <div class="canvas" id="js-canvas"></div>
   </div>
 
-  <div class="logo"></div>
-
   <ul class="buttons">
     <li>
       <a id="js-download-diagram" href title="download">
@@ -45,8 +43,6 @@
     </li>
   </ul>
 
-  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
-
   <script>
     var str = window.location.search; var min = !/\?debug=/.test(str);
     document.write('<script src="../../bpmn' + (min ? '.min': '') + '.js"></' + 'script>');

lib/Modeler.js

@@ -11,11 +11,11 @@ require('diagram-js/lib/features/dnd/Visuals');
 require('diagram-js/lib/features/selection/Visuals');
 
 
-function Modeler(container) {
+function Modeler(options) {
-  Viewer.call(this, container);
+  Viewer.call(this, options);
 }
 
-Modeler.prototype = new Viewer();
+Modeler.prototype = Object.create(Viewer.prototype);
 
 Modeler.prototype.createDiagram = function() {
 

lib/Viewer.js

@@ -2,8 +2,14 @@ var Diagram = require('diagram-js');
 
 var Importer = require('./import/Importer'),
     BpmnModel = require('bpmn-moddle'),
-    failSafeAsync = require('./Util').failSafeAsync;
+    failSafeAsync = require('./Util').failSafeAsync,
+    fs = require('fs'),
+    $ = require('jquery');
 
+function getSvgNode(diagram) {
+  var paper = diagram.get('canvas').getPaper();
+  return paper.node;
+}
 
 function initListeners(diagram, listeners) {
   var events = diagram.get('eventBus');
@@ -13,8 +19,28 @@ function initListeners(diagram, listeners) {
   });
 }
 
-function Viewer(container) {
+function Viewer(options) {
-  this.container = container;
+  var parent = options.container || $('body');
+
+  var container = this.container = $('<div></div>').attr({
+    width: options.width || '100%',
+    height: options.height || '100%',
+    position: 'absolute'
+  }).appendTo(parent).get(0);
+
+  var logoData = fs.readFileSync('resources/bpmnjs.png', 'base64');
+
+  var a = $('<a href="http://bpmn.io" target="_blank" draggable="false" />').css({
+    position: 'absolute',
+    bottom: 15,
+    right: 15,
+    'z-index': 100,
+    opacity: 0.8
+  });
+
+  var logo = $('<img/>').attr('src', 'data:image/png;base64,' + logoData).appendTo(a);
+
+  a.appendTo(container);
 }
 
 Viewer.prototype.importXML = function(xml, done) {
@@ -68,36 +94,54 @@ Viewer.prototype.saveSVG = function(options, done) {
     return done(new Error('no definitions loaded'));
   }
 
-  var svgElement = this.diagram.get('canvas').getContext();
+  var svgNode = getSvgNode(this.diagram);
-
+  var svg = svgNode.innerHTML;
-  var svg = svgElement.node.innerHTML;
 
   svg = SVG_HEADER + svg + SVG_FOOTER;
 
   done(null, svg);
 };
 
+Viewer.prototype.get = function(name) {
+
+  if (!this.diagram) {
+    return null;
+  }
+
+  return this.diagram.get(name);
+};
+
 Viewer.prototype.importDefinitions = failSafeAsync(function(definitions, done) {
 
   if (this.diagram) {
     this.clear();
   }
 
-  this.diagram = this.createDiagram();
+  var diagram = this.createDiagram();
   
-  initListeners(this.diagram, this.__listeners || []);
+  this.initDiagram(diagram);
 
   this.definitions = definitions;
 
-  Importer.importBpmnDiagram(this.diagram, definitions, done);
+  Importer.importBpmnDiagram(diagram, definitions, done);
 });
 
+Viewer.prototype.initDiagram = function(diagram) {
+  this.diagram = diagram;
+
+  initListeners(diagram, this.__listeners || []);
+};
+
 Viewer.prototype.createDiagram = function() {
   return new Diagram({ canvas: { container: this.container }});
 };
 
 Viewer.prototype.clear = function() {
-  this.container.innerHTML = '';
+  var diagram = this.diagram;
+
+  if (diagram) {
+    diagram.destroy();
+  }
 };
 
 Viewer.prototype.on = function(event, handler) {

package.json

@@ -55,7 +55,9 @@
     "sax": "~0.6.0",
     "brfs": "~1.0.0",
     "lodash": "~2.4.0",
-    "didi": "~0.0.4"
+    "didi": "~0.0.4",
+    "jquery": "~2.1.0",
+    "through": "^2.3.4"
   },
   "dependencies": {
     "bpmn-moddle": "~0.0.2",
@@ -64,6 +66,7 @@
   },
   "peerDependencies": {
     "lodash": "~2.4.0",
-    "didi": "~0.0.4"
+    "didi": "~0.0.4",
+    "jquery": "~2.1.0"
   }
 }

test/config/karma.unit.js

@@ -15,7 +15,7 @@ module.exports = function(karma) {
       'test/spec/browser/**/*Spec.js': [ 'browserify' ]
     },
 
-    browsers: [ 'Chrome' ],
+    browsers: [ 'PhantomJS' ],
 
     // fixing slow browserify build
     browserNoActivityTimeout: 30000,