feat(bpmn-js): add #destroy method and allow custom position

Closes #100

lib/Viewer.js

@@ -33,6 +33,12 @@ function checkValidationError(err) {
   return err;
 }
 
+var DEFAULT_OPTIONS = {
+  width: '100%',
+  height: '100%',
+  position: 'relative'
+};
+
 /**
  * A viewer for BPMN 2.0 diagrams
  *
@@ -46,14 +52,18 @@ function checkValidationError(err) {
  * @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
  */
 function Viewer(options) {
-  this.options = options = options || {};
+
+  this.options = options = _.extend({}, DEFAULT_OPTIONS, options || {});
 
   var parent = options.container || $('body');
 
-  var container = $('<div class="bjs-container" style="position: relative"></div>').appendTo(parent);
+  var container = $('<div class="bjs-container"></div>').appendTo(parent);
 
-  container.css('width', options.width || '100%');
-  container.css('height', options.height || '100%');
+  container.css({
+    width: options.width,
+    height: options.height,
+    position: options.position
+  });
 
   // unwrap jquery
   this.container = container.get(0);
@@ -222,7 +232,10 @@ Viewer.prototype.getModules = function() {
 };
 
 /**
- * Remove all drawn elements from the viewer
+ * Remove all drawn elements from the viewer.
+ *
+ * After calling this method the viewer can still
+ * be reused for opening another diagram.
  */
 Viewer.prototype.clear = function() {
   var diagram = this.diagram;
@@ -232,6 +245,18 @@ Viewer.prototype.clear = function() {
   }
 };
 
+/**
+ * Destroy the viewer instance and remove all its remainders
+ * from the document tree.
+ */
+Viewer.prototype.destroy = function() {
+  // clear underlying diagram
+  this.clear();
+
+  // remove container
+  $(this.container).remove();
+};
+
 /**
  * Register an event listener on the viewer
  *

test/spec/ModelerSpec.js

@@ -9,7 +9,7 @@ var fs = require('fs');
 var Modeler = require('../../lib/Modeler');
 
 
-describe('modeler', function() {
+describe('Modeler', function() {
 
   beforeEach(Matchers.addDeepEquals);
 

test/spec/ViewerSpec.js

@@ -11,7 +11,7 @@ var fs = require('fs');
 var Viewer = require('../../lib/Viewer');
 
 
-describe('viewer', function() {
+describe('Viewer', function() {
 
   beforeEach(Matchers.addDeepEquals);
 
@@ -327,7 +327,8 @@ describe('viewer', function() {
 
   });
 
-  describe('configuration', function() {
+
+  describe('creation', function() {
 
     var testModules = [
       { logger: [ 'type', function() { this.called = true; } ] }
@@ -336,11 +337,17 @@ describe('viewer', function() {
     // given
     var xml = fs.readFileSync('test/fixtures/bpmn/empty-definitions.bpmn', 'utf8');
 
+    var viewer;
+
+    afterEach(function() {
+      viewer.destroy();
+    });
+
 
     it('should override default modules', function(done) {
 
       // given
-      var viewer = new Viewer({ container: container, modules: testModules });
+      viewer = new Viewer({ container: container, modules: testModules });
 
       // when
       viewer.importXML(xml, function(err) {
@@ -356,7 +363,7 @@ describe('viewer', function() {
     it('should add module to default modules', function(done) {
 
       // given
-      var viewer = new Viewer({ container: container, additionalModules: testModules });
+      viewer = new Viewer({ container: container, additionalModules: testModules });
 
       // when
       viewer.importXML(xml, function(err) {
@@ -370,6 +377,46 @@ describe('viewer', function() {
 
     });
 
+
+    it('should use custom size and position', function() {
+
+      // when
+      viewer = new Viewer({
+        container: container,
+        width: 200,
+        height: 100,
+        position: 'fixed'
+      });
+
+      var container = viewer.container;
+
+      // then
+      expect(container.style.position).toBe('fixed');
+      expect(container.style.width).toBe('200px');
+      expect(container.style.height).toBe('100px');
+    });
+
+  });
+
+
+  describe('#destroy', function() {
+
+    it('should remove traces in document tree', function() {
+
+      // given
+      var viewer = new Viewer({
+        container: container
+      });
+
+      var container = viewer.container;
+
+      // when
+      viewer.destroy();
+
+      // then
+      expect(container.parentNode).toBeFalsy();
+    });
+
   });
 
 });