From 008015b227d1f272a14eb40235e88bb169fe7f3e Mon Sep 17 00:00:00 2001
From: Nico Rehwaldt <nico.rehwaldt@camunda.com>
Date: Fri, 4 Apr 2014 18:48:37 +0200
Subject: [PATCH] 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                                  |  27 ++++++--
 example/app.css                               |  13 ----
 example/app.js                                |   4 +-
 example/index.html                            |   4 --
 example/viewer/index.html                     |   4 --
 lib/Modeler.js                                |   6 +-
 lib/Viewer.js                                 |  64 +++++++++++++++---
 package.json                                  |   7 +-
 .../bpmn-io-icon.png => resources/bpmnjs.png  | Bin
 test/config/karma.unit.js                     |   2 +-
 10 files changed, 88 insertions(+), 43 deletions(-)
 rename example/bpmn-io-icon.png => resources/bpmnjs.png (100%)

diff --git a/Gruntfile.js b/Gruntfile.js
index 9f250e5b..40ef9496 100644
--- a/Gruntfile.js
+++ b/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'
   ]);
diff --git a/example/app.css b/example/app.css
index b84cbc9f..fbb6d08b 100644
--- a/example/app.css
+++ b/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');
diff --git a/example/app.js b/example/app.js
index 4bcf70d5..e74667f3 100644
--- a/example/app.js
+++ b/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);
\ No newline at end of file
+})(window.BpmnJS, require('jquery'));
\ No newline at end of file
diff --git a/example/index.html b/example/index.html
index 59a3c2cf..e6e7bc4c 100644
--- a/example/index.html
+++ b/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);
diff --git a/example/viewer/index.html b/example/viewer/index.html
index 571ca51c..32be9f7f 100644
--- a/example/viewer/index.html
+++ b/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>');
diff --git a/lib/Modeler.js b/lib/Modeler.js
index bbf927c6..25b6183d 100644
--- a/lib/Modeler.js
+++ b/lib/Modeler.js
@@ -11,11 +11,11 @@ require('diagram-js/lib/features/dnd/Visuals');
 require('diagram-js/lib/features/selection/Visuals');
 
 
-function Modeler(container) {
-  Viewer.call(this, container);
+function Modeler(options) {
+  Viewer.call(this, options);
 }
 
-Modeler.prototype = new Viewer();
+Modeler.prototype = Object.create(Viewer.prototype);
 
 Modeler.prototype.createDiagram = function() {
 
diff --git a/lib/Viewer.js b/lib/Viewer.js
index 004e7c06..bf162a32 100644
--- a/lib/Viewer.js
+++ b/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) {
-  this.container = container;
+function Viewer(options) {
+  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 svg = svgElement.node.innerHTML;
+  var svgNode = getSvgNode(this.diagram);
+  var svg = svgNode.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) {
diff --git a/package.json b/package.json
index 99528e1d..54f1e814 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/example/bpmn-io-icon.png b/resources/bpmnjs.png
similarity index 100%
rename from example/bpmn-io-icon.png
rename to resources/bpmnjs.png
diff --git a/test/config/karma.unit.js b/test/config/karma.unit.js
index e682f5e4..8436634e 100644
--- a/test/config/karma.unit.js
+++ b/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,