fix(Viewer): do not assume width / height 100%

This commit removes the behavior that width and height of a viewer are
automatically set to 100% unless specified otherwise.

The width and height are now optional attributes, that are only applied
if given. This way, users may still style their elements via CSS.

example/app.js

@@ -4,7 +4,7 @@
 
   var canvas = $('#js-canvas');
   
-  var renderer = new BpmnJS({ container: canvas });
+  var renderer = new BpmnJS({ container: canvas, width: '100%', height: '100%' });
 
   var newDiagramXML =
 '<?xml version="1.0" encoding="UTF-8"?>' +

lib/Modeler.js

@@ -11,6 +11,13 @@ require('diagram-js/lib/features/dnd/Visuals');
 require('diagram-js/lib/features/selection/Visuals');
 
 
+/**
+ * @class
+ *
+ * A modeler for BPMN 2.0 diagrams.
+ * 
+ * @borrows Viewer as Modeler
+ */
 function Modeler(options) {
   Viewer.call(this, options);
 }

lib/Viewer.js

@@ -4,7 +4,8 @@ var Importer = require('./import/Importer'),
     BpmnModel = require('bpmn-moddle'),
     failSafeAsync = require('./Util').failSafeAsync,
     fs = require('fs'),
-    $ = require('jquery');
+    $ = require('jquery'),
+    _ = require('lodash');
 
 function getSvgNode(diagram) {
   var paper = diagram.get('canvas').getPaper();
@@ -19,14 +20,33 @@ function initListeners(diagram, listeners) {
   });
 }
 
+/**
+ * @class
+ *
+ * A viewer for BPMN 2.0 diagrams
+ * 
+ * @param {Object} [options] configuration options to pass to the viewer
+ * @param {DOMElement} [options.container] the container to render the viewer in, defaults to body.
+ * @param {String|Number} [options.width] the width of the viewer
+ * @param {String|Number} [options.height] the height of the viewer
+ */
 function Viewer(options) {
+  options = options || {};
+
   var parent = options.container || $('body');
 
-  var container = this.container = $('<div></div>').attr({
-    width: options.width || '100%',
-    height: options.height || '100%',
+  var container = $('<div></div>').addClass('bjs-container').css({
     position: 'absolute'
-  }).appendTo(parent).get(0);
+  }).appendTo(parent);
+
+  _.forEach([ 'width', 'height' ], function(a) {
+    if (options[a]) {
+      container.css(a, options[a]);
+    }
+  });
+
+  // unwrap jquery
+  this.container = container.get(0);
 
   var logoData = fs.readFileSync('resources/bpmnjs.png', 'base64');