bpmn-js 0.13.1 → 0.14.1

package/.travis.yml

@@ -5,5 +5,5 @@ script:
   - grunt jshint test
 
 before_install:
-  - npm install -g grunt-cli wiredeps
+  - npm install -g wiredeps
   - wiredeps --branch=$TRAVIS_BRANCH --tag=$TRAVIS_TAG --verbose

package/.wiredeps

@@ -1,6 +1,6 @@
 {
   "name": "bpmn-js",
-  "version": "0.8.0",
+  "version": "0.13.0",
   "dependencies": {
     "diagram-js": {
       "version": "bpmn-io/diagram-js",
@@ -13,6 +13,9 @@
         },
         "snapsvg": {
           "version": "https://github.com/Nikku/Snap.svg/archive/v0.3.0-browserify.tar.gz"
+        },
+        "didi": {
+          "version": "0.1.0"
         }
       }
     },
@@ -47,11 +50,8 @@
     "diagram-js-direct-editing": {
       "version": "bpmn-io/diagram-js-direct-editing"
     },
-    "didi": {
-      "version": "0.1.0"
-    },
     "ids": {
-      "version": "0.1.1",
+      "version": "0.2.0",
       "dependencies": {
         "hat": {
           "version": "0.0.3"

package/lib/Modeler.js

@@ -2,8 +2,7 @@
 
 var inherits = require('inherits');
 
-var IdSupport = require('bpmn-moddle/lib/id-support'),
-    Ids = require('ids');
+var Ids = require('ids');
 
 var Viewer = require('./Viewer');
 
@@ -102,22 +101,69 @@ var initialDiagram =
  */
 function Modeler(options) {
   Viewer.call(this, options);
+
+  // hook ID collection into the modeler
+  this.on('import.parse.complete', function(event) {
+    if (!event.error) {
+      this._collectIds(event.definitions, event.context);
+    }
+  }, this);
+
+  this.on('diagram.destroy', function() {
+    this.moddle.ids.clear();
+  }, this);
 }
 
 inherits(Modeler, Viewer);
 
+module.exports = Modeler;
+
+/**
+ * Create a new diagram to start modeling.
+ *
+ * @param {Function} [done]
+ */
 Modeler.prototype.createDiagram = function(done) {
   return this.importXML(initialDiagram, done);
 };
 
-Modeler.prototype.createModdle = function() {
-  var moddle = Viewer.prototype.createModdle.call(this);
+/**
+ * Create a moddle instance, attaching ids to it.
+ *
+ * @param {Object} options
+ */
+Modeler.prototype._createModdle = function(options) {
+  var moddle = Viewer.prototype._createModdle.call(this, options);
 
-  IdSupport.extend(moddle, new Ids([ 32, 36, 1 ]));
+  // attach ids to moddle to be able to track
+  // and validated ids in the BPMN 2.0 XML document
+  // tree
+  moddle.ids = new Ids([ 32, 36, 1 ]);
 
   return moddle;
 };
 
+/**
+ * Collect ids processed during parsing of the
+ * definitions object.
+ *
+ * @param {ModdleElement} definitions
+ * @param {Context} context
+ */
+Modeler.prototype._collectIds = function(definitions, context) {
+
+  var moddle = definitions.$model,
+      ids = moddle.ids,
+      id;
+
+  // remove references from previous import
+  ids.clear();
+
+  for (id in context.elementsById) {
+    ids.claim(id, context.elementsById[id]);
+  }
+};
+
 
 Modeler.prototype._interactionModules = [
   // non-modeling components
@@ -154,7 +200,4 @@ Modeler.prototype._modelingModules = [
 Modeler.prototype._modules = [].concat(
   Modeler.prototype._modules,
   Modeler.prototype._interactionModules,
-  Modeler.prototype._modelingModules);
-
-
-module.exports = Modeler;
+  Modeler.prototype._modelingModules);

package/lib/Viewer.js

@@ -18,16 +18,11 @@ var domify = require('min-dom/lib/domify'),
 var Diagram = require('diagram-js'),
     BpmnModdle = require('bpmn-moddle');
 
-var Importer = require('./import/Importer');
 
+var inherits = require('inherits');
 
-function initListeners(diagram, listeners) {
-  var events = diagram.get('eventBus');
+var Importer = require('./import/Importer');
 
-  listeners.forEach(function(l) {
-    events.on(l.event, l.priority, l.handler, l.that);
-  });
-}
 
 function checkValidationError(err) {
 
@@ -110,63 +105,98 @@ function ensureUnit(val) {
  */
 function Viewer(options) {
 
-  this.options = options = assign({}, DEFAULT_OPTIONS, options || {});
-
-  var parent = options.container;
-
-  // support jquery element
-  // unwrap it if passed
-  if (parent.get) {
-    parent = parent.get(0);
-  }
+  options = assign({}, DEFAULT_OPTIONS, options);
 
-  // support selector
-  if (isString(parent)) {
-    parent = domQuery(parent);
-  }
+  this.moddle = this._createModdle(options);
 
-  var container = this.container = domify('<div class="bjs-container"></div>');
-  parent.appendChild(container);
-
-  assign(container.style, {
-    width: ensureUnit(options.width),
-    height: ensureUnit(options.height),
-    position: options.position
-  });
+  this.container = this._createContainer(options);
 
   /* <project-logo> */
 
-  addProjectLogo(container);
+  addProjectLogo(this.container);
 
   /* </project-logo> */
+
+  this._init(this.container, this.moddle, options);
 }
 
+inherits(Viewer, Diagram);
+
 module.exports = Viewer;
 
 
+/**
+ * Parse and render a BPMN 2.0 diagram.
+ *
+ * Once finished the viewer reports back the result to the
+ * provided callback function with (err, warnings).
+ *
+ * ## Life-Cycle Events
+ *
+ * During import the viewer will fire life-cycle events:
+ *
+ *   * import.parse.start (about to read model from xml)
+ *   * import.parse.complete (model read; may have worked or not)
+ *   * import.render.start (graphical import start)
+ *   * import.render.complete (graphical import finished)
+ *   * import.done (everything done)
+ *
+ * You can use these events to hook into the life-cycle.
+ *
+ * @param {String} xml the BPMN 2.0 xml
+ * @param {Function} [done] invoked with (err, warnings=[])
+ */
 Viewer.prototype.importXML = function(xml, done) {
 
+  // done is optional
+  done = done || function() {};
+
   var self = this;
 
-  this.moddle = this.createModdle();
+  // hook in pre-parse listeners +
+  // allow xml manipulation
+  xml = this._emit('import.parse.start', { xml: xml }) || xml;
 
   this.moddle.fromXML(xml, 'bpmn:Definitions', function(err, definitions, context) {
 
+    // hook in post parse listeners +
+    // allow definitions manipulation
+    definitions = self._emit('import.parse.complete', {
+      error: err,
+      definitions: definitions,
+      context: context
+    }) || definitions;
+
     if (err) {
       err = checkValidationError(err);
+
+      self._emit('import.done', { error: err });
+
       return done(err);
     }
 
     var parseWarnings = context.warnings;
 
     self.importDefinitions(definitions, function(err, importWarnings) {
-      var allWarnings = parseWarnings.concat(importWarnings || []);
+      var allWarnings = [].concat(parseWarnings, importWarnings || []);
+
+      self._emit('import.done', { error: err, warnings: allWarnings });
 
       done(err, allWarnings);
     });
   });
 };
 
+/**
+ * Export the currently displayed BPMN 2.0 diagram as
+ * a BPMN 2.0 XML document.
+ *
+ * @param {Object} [options] export options
+ * @param {Boolean} [options.format=false] output formated XML
+ * @param {Boolean} [options.preamble=true] output preamble
+ *
+ * @param {Function} done invoked with (err, xml)
+ */
 Viewer.prototype.saveXML = function(options, done) {
 
   if (!done) {
@@ -183,10 +213,13 @@ Viewer.prototype.saveXML = function(options, done) {
   this.moddle.toXML(definitions, options, done);
 };
 
-Viewer.prototype.createModdle = function() {
-  return new BpmnModdle(this.options.moddleExtensions);
-};
-
+/**
+ * Export the currently displayed BPMN 2.0 diagram as
+ * an SVG image.
+ *
+ * @param {Object} [options]
+ * @param {Function} done invoked with (err, svgStr)
+ */
 Viewer.prototype.saveSVG = function(options, done) {
 
   if (!done) {
@@ -217,124 +250,191 @@ Viewer.prototype.saveSVG = function(options, done) {
   done(null, svg);
 };
 
-Viewer.prototype.get = function(name) {
-
-  if (!this.diagram) {
-    throw new Error('no diagram loaded');
-  }
-
-  return this.diagram.get(name);
-};
-
-Viewer.prototype.invoke = function(fn) {
+/**
+ * Get a named diagram service.
+ *
+ * @example
+ *
+ * var elementRegistry = viewer.get('elementRegistry');
+ * var startEventShape = elementRegistry.get('StartEvent_1');
+ *
+ * @param {String} name
+ *
+ * @return {Object} diagram service instance
+ *
+ * @method Viewer#get
+ */
 
-  if (!this.diagram) {
-    throw new Error('no diagram loaded');
-  }
+/**
+ * Invoke a function in the context of this viewer.
+ *
+ * @example
+ *
+ * viewer.invoke(function(elementRegistry) {
+ *   var startEventShape = elementRegistry.get('StartEvent_1');
+ * });
+ *
+ * @param {Function} fn to be invoked
+ *
+ * @return {Object} the functions return value
+ *
+ * @method Viewer#invoke
+ */
 
-  return this.diagram.invoke(fn);
-};
+/**
+ * Remove all drawn elements from the viewer.
+ *
+ * After calling this method the viewer can still
+ * be reused for opening another diagram.
+ *
+ * @method Viewer#clear
+ */
 
 Viewer.prototype.importDefinitions = function(definitions, done) {
 
   // use try/catch to not swallow synchronous exceptions
   // that may be raised during model parsing
   try {
-    if (this.diagram) {
+
+    if (this.definitions) {
+      // clear existing rendered diagram
       this.clear();
     }
 
+    // update definitions
     this.definitions = definitions;
 
-    var diagram = this.diagram = this._createDiagram(this.options);
-
-    this._init(diagram);
-
-    Importer.importBpmnDiagram(diagram, definitions, done);
+    // perform graphical import
+    Importer.importBpmnDiagram(this, definitions, done);
   } catch (e) {
+
+    // handle synchronous errors
     done(e);
   }
 };
 
-Viewer.prototype._init = function(diagram) {
-  initListeners(diagram, this.__listeners || []);
+Viewer.prototype.getModules = function() {
+  return this._modules;
 };
 
-Viewer.prototype._createDiagram = function(options) {
-
-  var modules = [].concat(options.modules || this.getModules(), options.additionalModules || []);
-
-  // add self as an available service
-  modules.unshift({
-    bpmnjs: [ 'value', this ],
-    moddle: [ 'value', this.moddle ]
-  });
-
-  options = omit(options, 'additionalModules');
-
-  options = assign(options, {
-    canvas: assign({}, options.canvas, { container: this.container }),
-    modules: modules
-  });
-
-  return new Diagram(options);
-};
+/**
+ * Destroy the viewer instance and remove all its
+ * remainders from the document tree.
+ */
+Viewer.prototype.destroy = function() {
 
+  // diagram destroy
+  Diagram.prototype.destroy.call(this);
 
-Viewer.prototype.getModules = function() {
-  return this._modules;
+  // dom detach
+  domRemove(this.container);
 };
 
 /**
- * Remove all drawn elements from the viewer.
+ * Register an event listener
  *
- * After calling this method the viewer can still
- * be reused for opening another diagram.
+ * Remove a previously added listener via {@link #off(event, callback)}.
+ *
+ * @param {String} event
+ * @param {Number} [priority]
+ * @param {Function} callback
+ * @param {Object} [that]
  */
-Viewer.prototype.clear = function() {
-  var diagram = this.diagram;
-
-  if (diagram) {
-    diagram.destroy();
-  }
+Viewer.prototype.on = function(event, priority, callback, target) {
+  return this.get('eventBus').on(event, priority, callback, target);
 };
 
 /**
- * Destroy the viewer instance and remove all its remainders
- * from the document tree.
+ * De-register an event listener
+ *
+ * @param {String} event
+ * @param {Function} callback
  */
-Viewer.prototype.destroy = function() {
-  // clear underlying diagram
-  this.clear();
+Viewer.prototype.off = function(event, callback) {
+  this.get('eventBus').off(event, callback);
+};
 
-  // remove container
-  domRemove(this.container);
+
+Viewer.prototype._init = function(container, moddle, options) {
+
+  var baseModules = options.modules || this.getModules(),
+      additionalModules = options.additionalModules || [],
+      staticModules = [
+        {
+          bpmnjs: [ 'value', this ],
+          moddle: [ 'value', moddle ]
+        }
+      ];
+
+  var diagramModules = [].concat(staticModules, baseModules, additionalModules);
+
+  var diagramOptions = assign(omit(options, 'additionalModules'), {
+    canvas: assign({}, options.canvas, { container: container }),
+    modules: diagramModules
+  });
+
+  // invoke diagram constructor
+  Diagram.call(this, diagramOptions);
 };
 
 /**
- * Register an event listener on the viewer
+ * Emit an event on the underlying {@link EventBus}
  *
- * @param {String} event
- * @param {Function} handler
+ * @param  {String} type
+ * @param  {Object} event
+ *
+ * @return {Object} event processing result (if any)
  */
-Viewer.prototype.on = function(event, priority, handler, that) {
-  var diagram = this.diagram,
-      listeners = this.__listeners = this.__listeners || [];
+Viewer.prototype._emit = function(type, event) {
+  return this.get('eventBus').fire(type, event);
+};
+
+Viewer.prototype._createContainer = function(options) {
 
-  listeners.push({ event: event, priority: priority, handler: handler, that: that });
+  var parent = options.container,
+      container;
+
+  // support jquery element
+  // unwrap it if passed
+  if (parent.get) {
+    parent = parent.get(0);
+  }
 
-  if (diagram) {
-    diagram.get('eventBus').on(event, priority, handler, that);
+  // support selector
+  if (isString(parent)) {
+    parent = domQuery(parent);
   }
+
+  container = domify('<div class="bjs-container"></div>');
+
+  assign(container.style, {
+    width: ensureUnit(options.width),
+    height: ensureUnit(options.height),
+    position: options.position
+  });
+
+  parent.appendChild(container);
+
+  return container;
 };
 
+Viewer.prototype._createModdle = function(options) {
+  var moddleOptions = assign({}, this._moddleExtensions, options.moddleExtensions);
+
+  return new BpmnModdle(moddleOptions);
+};
+
+
 // modules the viewer is composed of
 Viewer.prototype._modules = [
   require('./core'),
+  require('diagram-js/lib/i18n/translate'),
   require('diagram-js/lib/features/selection'),
   require('diagram-js/lib/features/overlays')
 ];
 
+// default moddle extensions the viewer is composed of
+Viewer.prototype._moddleExtensions = {};
 
 /* <project-logo> */
 
@@ -372,4 +472,4 @@ function addProjectLogo(container) {
   });
 }
 
-/* </project-logo> */
+/* </project-logo> */

package/lib/draw/BpmnRenderer.js

@@ -835,6 +835,9 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
       return task;
     },
     'bpmn:SubProcess': function(p, element, attrs) {
+
+      attrs = assign({ fillOpacity: 0.95 }, attrs);
+
       var rect = renderer('bpmn:Activity')(p, element, attrs);
 
       var expanded = DiUtil.isExpanded(element);
@@ -877,6 +880,7 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
     'bpmn:Participant': function(p, element) {
 
       var lane = renderer('bpmn:Lane')(p, element, {
+        fillOpacity: 0.95,
         fill: 'White'
       });