feat(modeler): add createDiagram API

Related to #4

lib/Modeler.js

@@ -4,6 +4,25 @@ var Diagram = require('diagram-js');
 
 var Viewer = require('./Viewer');
 
+var initialDiagram =
+  '<?xml version="1.0" encoding="UTF-8"?>' +
+  '<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
+                    'xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" ' +
+                    'xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" ' +
+                    'xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" ' +
+                    'targetNamespace="http://bpmn.io/schema/bpmn" ' +
+                    'id="Definitions_1">' +
+    '<bpmn:process id="Process_1" isExecutable="false">' +
+      '<bpmn:startEvent id="StartEvent_1"/>' +
+    '</bpmn:process>' +
+    '<bpmndi:BPMNDiagram id="BPMNDiagram_1">' +
+      '<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">' +
+        '<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">' +
+          '<dc:Bounds height="36.0" width="36.0" x="173.0" y="102.0"/>' +
+        '</bpmndi:BPMNShape>' +
+      '</bpmndi:BPMNPlane>' +
+    '</bpmndi:BPMNDiagram>' +
+  '</bpmn:definitions>';
 
 /**
  * @class
@@ -18,7 +37,12 @@ function Modeler(options) {
 
 Modeler.prototype = Object.create(Viewer.prototype);
 
-// modules that comprise the bpmn modeler
+Modeler.prototype.createDiagram = function(done) {
+  return this.importXML(initialDiagram, done);
+};
+
+
+// modules the modeler is composed of
 Modeler.prototype._modules = Modeler.prototype._modules.concat([
   // TODO (nre): buggy in conjunction with zoomscroll / move canvas
   // require('diagram-js/lib/features/move'),
@@ -27,4 +51,5 @@ Modeler.prototype._modules = Modeler.prototype._modules.concat([
   require('./features/movecanvas')
 ]);
 
+
 module.exports = Modeler;

lib/Viewer.js

@@ -164,22 +164,19 @@ Viewer.prototype.importDefinitions = util.failSafeAsync(function(definitions, do
     this.clear();
   }
 
-  diagram = this.createDiagram(this.options.modules);
-
-  this.initDiagram(diagram);
-
+  this.diagram = diagram = this._createDiagram(this.options.modules);
   this.definitions = definitions;
 
+  this._init(diagram);
+
   Importer.importBpmnDiagram(diagram, definitions, done);
 });
 
-Viewer.prototype.initDiagram = function(diagram) {
-  this.diagram = diagram;
-
+Viewer.prototype._init = function(diagram) {
   initListeners(diagram, this.__listeners || []);
 };
 
-Viewer.prototype.createDiagram = function(modules) {
+Viewer.prototype._createDiagram = function(modules) {
 
   modules = [].concat(modules || this.getModules());
 
@@ -194,10 +191,14 @@ Viewer.prototype.createDiagram = function(modules) {
   });
 };
 
+
 Viewer.prototype.getModules = function() {
   return this._modules;
 };
 
+/**
+ * Remove all drawn elements from the viewer
+ */
 Viewer.prototype.clear = function() {
   var diagram = this.diagram;
 
@@ -206,6 +207,12 @@ Viewer.prototype.clear = function() {
   }
 };
 
+/**
+ * Register an event listener on the viewer
+ *
+ * @param {String} event
+ * @param {Function} handler
+ */
 Viewer.prototype.on = function(event, handler) {
   var diagram = this.diagram,
       listeners = this.__listeners = this.__listeners || [];
@@ -218,7 +225,7 @@ Viewer.prototype.on = function(event, handler) {
   }
 };
 
-// modules that comprise the bpmn viewer
+// modules the viewer is composed of
 Viewer.prototype._modules = [
   require('./core'),
   require('diagram-js/lib/features/selection')

resources/initial.bpmn

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" targetNamespace="http://bpmn.io/schema/bpmn" id="Definitions_1">
+  <bpmn:process id="Process_1" isExecutable="false">
+    <bpmn:startEvent id="StartEvent_1"/>
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
+        <dc:Bounds height="36.0" width="36.0" x="173.0" y="102.0"/>
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/spec/browser/ModelerSpec.js

@@ -48,9 +48,9 @@ describe('modeler', function() {
 
     var xml = 'invalid stuff';
 
-    var renderer = new Modeler({ container: container });
+    var modeler = new Modeler({ container: container });
 
-    renderer.importXML(xml, function(err) {
+    modeler.importXML(xml, function(err) {
 
       expect(err).toBeDefined();
 
@@ -59,6 +59,12 @@ describe('modeler', function() {
   });
 
 
+  it('should create new diagram', function(done) {
+    var modeler = new Modeler({ container: container });
+    modeler.createDiagram(done);
+  });
+
+
   describe('dependency injection', function() {
 
     it('should be available via di as <bpmnjs>', function(done) {