chore(project): upgrade to new diagram.js module structure

lib/Modeler.js

@@ -1,13 +1,8 @@
+'use strict';
+
 var Diagram = require('diagram-js');
 
-var bpmnModule = require('./di').defaultModule,
+var Viewer = require('./Viewer');
-    Viewer = require('./Viewer');
-
-require('./draw/BpmnRenderer');
-require('./feature/zoomscroll');
-
-require('diagram-js/lib/features/move');
-require('diagram-js/lib/features/selection/Visuals');
 
 
 /**
@@ -23,13 +18,16 @@ function Modeler(options) {
 
 Modeler.prototype = Object.create(Viewer.prototype);
 
-Modeler.prototype.createDiagram = function() {
+Modeler.prototype.createDiagram = function(modules) {
-
+  return Viewer.prototype.createDiagram.call(this, modules || Modeler.modules);
-  return new Diagram({
-    canvas: { container: this.container },
-    modules: [ bpmnModule ],
-    components: [ 'selectionVisuals', 'move', 'moveCanvas', 'zoomScroll' ]
-  });
 };
 
+Modeler.modules = [
+  // TODO (nre): buggy in conjunction with zoomscroll / move canvas
+  // require('diagram-js/lib/features/move'),
+  require('./core'),
+  require('./features/zoomscroll'),
+  require('./features/movecanvas')
+];
+
 module.exports = Modeler;

lib/Viewer.js

@@ -1,19 +1,12 @@
+'use strict';
+
 var Diagram = require('diagram-js'),
     BpmnModel = require('bpmn-moddle'),
     $ = require('jquery'),
     _ = require('lodash');
 
 var Importer = require('./import/Importer'),
-    failSafeAsync = require('./Util').failSafeAsync;
+    util = require('./Util');
-
-var bpmnModule = require('./di').defaultModule;
-
-require('./draw/BpmnRenderer');
-
-require('./feature/zoomscroll');
-require('./feature/movecanvas');
-
-require('diagram-js/lib/features/selection/Visuals');
 
 
 function getSvgContents(diagram) {
@@ -43,7 +36,7 @@ function initListeners(diagram, listeners) {
  * @param {String|Number} [options.height] the height of the viewer
  */
 function Viewer(options) {
-  options = options || {};
+  this.options = options = options || {};
 
   var parent = options.container || $('body');
 
@@ -154,7 +147,7 @@ Viewer.prototype.get = function(name) {
   return this.diagram.get(name);
 };
 
-Viewer.prototype.importDefinitions = failSafeAsync(function(definitions, done) {
+Viewer.prototype.importDefinitions = util.failSafeAsync(function(definitions, done) {
 
   var diagram = this.diagram;
 
@@ -162,7 +155,7 @@ Viewer.prototype.importDefinitions = failSafeAsync(function(definitions, done) {
     this.clear();
   }
 
-  diagram = this.createDiagram();
+  diagram = this.createDiagram(this.options.modules);
 
   this.initDiagram(diagram);
 
@@ -177,12 +170,11 @@ Viewer.prototype.initDiagram = function(diagram) {
   initListeners(diagram, this.__listeners || []);
 };
 
-Viewer.prototype.createDiagram = function() {
+Viewer.prototype.createDiagram = function(modules) {
 
   return new Diagram({
     canvas: { container: this.container },
-    modules: [ bpmnModule ],
+    modules: modules || Viewer.modules
-    components: [ 'selectionVisuals', 'zoomScroll', 'moveCanvas' ]
   });
 };
 
@@ -206,4 +198,8 @@ Viewer.prototype.on = function(event, handler) {
   }
 };
 
+Viewer.modules = [
+  require('./core')
+];
+
 module.exports = Viewer;

lib/core/BpmnRegistry.js

@@ -1,6 +1,7 @@
+'use strict';
+
 var _ = require('lodash');
 
-var bpmnModule = require('../di').defaultModule;
 
 /**
  * @class
@@ -41,7 +42,12 @@ function BpmnRegistry(events, elementRegistry) {
     var collection = elements[type];
 
     return function(element) {
-      return collection[_.isObject(element) ? element.id : element];
+      var id = _.isObject(element) ? element.id : element;
+
+      // strip label suffix
+      id = id.replace(/_label$/, '');
+
+      return collection[id];
     };
   }
 
@@ -51,6 +57,6 @@ function BpmnRegistry(events, elementRegistry) {
   this.getDiagramElement = get('diagramElement');
 }
 
-bpmnModule.type('bpmnRegistry', [ 'eventBus', 'elementRegistry', BpmnRegistry ]);
+BpmnRegistry.$inject = [ 'eventBus', 'elementRegistry' ];
 
 module.exports = BpmnRegistry;

lib/core/index.js

@@ -0,0 +1,4 @@
+module.exports = {
+  __depends__: [ require('../draw') ],
+  bpmnRegistry: [ 'type', require('./BpmnRegistry') ]
+};

lib/di.js

@@ -1,5 +0,0 @@
-var Module = require('didi').Module;
-
-module.exports = {
-  defaultModule: new Module()
-};

lib/draw/BpmnRenderer.js

@@ -1,15 +1,7 @@
 'use strict';
 
-var bpmnModule = require('../di').defaultModule;
 var _ = require('lodash');
 
-require('diagram-js/lib/core/EventBus');
-require('diagram-js/lib/draw/Styles');
-
-require('../core/BpmnRegistry');
-require('./PathMap');
-
-
 var DefaultRenderer = require('diagram-js/lib/draw/Renderer');
 var LabelUtil = require('diagram-js/lib/util/LabelUtil');
 
@@ -19,7 +11,7 @@ var flattenPoints = DefaultRenderer.flattenPoints;
 
 function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
 
-  DefaultRenderer.apply(this, [ events, styles ]);
+  DefaultRenderer.call(this, styles);
 
   var TASK_BORDER_RADIUS = 10;
   var INNER_OUTER_DIST = 3;
@@ -1477,6 +1469,6 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
 BpmnRenderer.prototype = Object.create(DefaultRenderer.prototype);
 
 
-bpmnModule.type('renderer', [ 'eventBus', 'styles', 'bpmnRegistry', 'pathMap', BpmnRenderer ]);
+BpmnRenderer.$inject = [ 'eventBus', 'styles', 'bpmnRegistry', 'pathMap' ];
 
 module.exports = BpmnRenderer;

lib/draw/PathMap.js

@@ -1,8 +1,8 @@
+'use strict';
+
 /**
  * Map containing SVG paths needed by BpmnRenderer.
  */
-var bpmnModule = require('../di').defaultModule;
-require('diagram-js/lib/draw/Snap');
 
 function PathMap(Snap) {
 
@@ -440,6 +440,7 @@ function PathMap(Snap) {
   };
 }
 
-bpmnModule.type('pathMap', [ 'snap', PathMap ]);
+
+PathMap.$inject = [ 'snap' ];
 
 module.exports = PathMap;

lib/draw/index.js

@@ -0,0 +1,4 @@
+module.exports = {
+  renderer: [ 'type', require('./BpmnRenderer') ],
+  pathMap: [ 'type', require('./PathMap') ]
+};

lib/feature/zoomscroll/mousewheel.js

@@ -1,8 +0,0 @@
-var $ = require('jquery');
-
-// init mouse wheel plugin
-require('jquery-mousewheel')($);
-
-module.exports = function(element) {
-  return $(element);
-};

lib/features/movecanvas/MoveCanvas.js

@@ -1,6 +1,6 @@
-var $ = require('jquery');
+'use strict';
 
-var bpmnModule = require('../../di').defaultModule;
+var $ = require('jquery');
 
 
 function MoveCanvas(events, canvas) {
@@ -101,6 +101,6 @@ function MoveCanvas(events, canvas) {
 }
 
 
-bpmnModule.type('moveCanvas', [ 'eventBus', 'canvas', MoveCanvas ]);
+MoveCanvas.$inject = [ 'eventBus', 'canvas' ];
 
 module.exports = MoveCanvas;

lib/features/movecanvas/index.js

@@ -0,0 +1,4 @@
+module.exports = {
+  __init__: [ 'moveCanvas' ],
+  moveCanvas: [ 'type', require('./MoveCanvas') ]
+};

lib/features/zoomscroll/ZoomScroll.js

@@ -1,6 +1,6 @@
-var mousewheel = require('./mousewheel');
+'use strict';
 
-var bpmnModule = require('../../di').defaultModule;
+var mousewheel = require('jquery-mousewheel');
 
 
 function ZoomScroll(events, canvas) {
@@ -65,6 +65,6 @@ function ZoomScroll(events, canvas) {
 }
 
 
-bpmnModule.type('zoomScroll', [ 'eventBus', 'canvas', ZoomScroll ]);
+ZoomScroll.$inject = [ 'eventBus', 'canvas' ];
 
 module.exports = ZoomScroll;

lib/features/zoomscroll/index.js

@@ -0,0 +1,4 @@
+module.exports = {
+  __init__: [ 'zoomScroll' ],
+  zoomScroll: [ 'type', require('./ZoomScroll') ]
+};

lib/import/Importer.js

@@ -93,11 +93,18 @@ function importBpmnDiagram(diagram, definitions, done) {
 
     var labelBounds = getLabelBounds(di, data);
 
-    canvas.addShape(_.extend({
+    var label = _.extend({
       id: element.id + '_label',
       attachedId: element.id,
       type: 'label'
-    }, labelBounds));
+    }, labelBounds);
+
+    canvas.addShape(label);
+
+    // we wire data and label so that
+    // the label of a BPMN element can be quickly accessed via
+    // element.label in various components
+    data.label = label;
   }
 
 

test/spec/Matchers.js

@@ -1,4 +1,3 @@
-var logger = require('moddle').util.Logger;
 var jsondiffpatch = require('jsondiffpatch'),
     _ = require('lodash');
 
@@ -19,7 +18,7 @@ function deepEquals(actual, expected) {
   };
 
   if (!result.pass) {
-    logger.error('[to-deep-equal] elements do not equal. diff: ', compare.diff(actualClone, expectedClone), false, 4);
+    console.error('[to-deep-equal] elements do not equal. diff: ', compare.diff(actualClone, expectedClone), false, 4);
   }
 
   return result;

test/spec/browser/ViewerSpec.js

@@ -1,3 +1,5 @@
+'use strict';
+
 var fs = require('fs');
 
 var Viewer = require('../../../lib/Viewer');
@@ -16,16 +18,20 @@ describe('Viewer', function() {
     document.getElementsByTagName('body')[0].appendChild(container);
   });
 
+  function createViewer(xml, done) {
+    var renderer = new Viewer({ container: container });
+
+    renderer.importXML(xml, function(err) {
+      done(err, renderer);
+    });
+  }
+
 
   it('should import simple process', function(done) {
 
     var xml = fs.readFileSync('test/fixtures/bpmn/simple.bpmn', 'utf8');
 
-    var renderer = new Viewer(container);
+    createViewer(xml, done);
-
-    renderer.importXML(xml, function(err) {
-      done(err);
-    });
   });
 
 
@@ -33,11 +39,7 @@ describe('Viewer', function() {
 
     var xml = fs.readFileSync('test/fixtures/bpmn/empty-definitions.bpmn', 'utf8');
 
-    var renderer = new Viewer(container);
+    createViewer(xml, done);
-
-    renderer.importXML(xml, function(err) {
-      done(err);
-    });
   });
 
 
@@ -47,9 +49,7 @@ describe('Viewer', function() {
 
       var xml = 'invalid stuff';
 
-      var renderer = new Viewer(container);
+      createViewer(xml, function(err) {
-
-      renderer.importXML(xml, function(err) {
 
         expect(err).toBeDefined();
 
@@ -62,10 +62,7 @@ describe('Viewer', function() {
 
       var xml = fs.readFileSync('test/fixtures/bpmn/error/di-plane-no-bpmn-element.bpmn', 'utf8');
 
-      var renderer = new Viewer(container);
+      createViewer(xml, function(err) {
-
-      renderer.importXML(xml, function(err) {
-
         expect(err).toBeDefined();
         expect(err.message).toEqual('no rootElement referenced in BPMNPlane <BPMNPlane_1>');
 
@@ -82,9 +79,8 @@ describe('Viewer', function() {
 
       // given
       var xml = fs.readFileSync('test/fixtures/bpmn/empty-definitions.bpmn', 'utf8');
-      var renderer = new Viewer(container);
 
-      renderer.importXML(xml, function(err) {
+      createViewer(xml, function(err, renderer) {
 
         if (err) {
           return done(err);

test/spec/browser/import/ImporterSpec.js

@@ -1,15 +1,11 @@
 'use strict';
 
-var fs = require('fs'),
+var fs = require('fs');
-    Diagram = require('diagram-js/lib/Diagram');
 
-var BpmnModel = require('bpmn-moddle');
+var Diagram = require('diagram-js/lib/Diagram'),
-var Importer = require('../../../../lib/import/Importer');
+    BpmnModel = require('bpmn-moddle'),
-
+    Importer = require('../../../../lib/import/Importer'),
-var bpmnModule = require('../../../../lib/di').defaultModule;
+    Viewer = require('../../../../lib/Viewer');
-
-require('../../../../lib/core/BpmnRegistry');
-require('../../../../lib/draw/BpmnRenderer');
 
 
 var Matchers = require('../../Matchers');
@@ -37,8 +33,7 @@ describe('import/Importer', function() {
   function createDiagram() {
     return new Diagram({
       canvas: { container: container },
-      modules: [ bpmnModule ],
+      modules: Viewer.modules
-      components: [ 'bpmnRegistry' ]
     });
   }
 

test/spec/browser/import/elements/CollapsedImportSpec.js

@@ -53,8 +53,8 @@ describe('import - collapsed container', function() {
 
       var elementRegistry = renderer.get('elementRegistry');
 
-      var collapsedShape = elementRegistry.getShapeById('SubProcess_1');
+      var collapsedShape = elementRegistry.getById('SubProcess_1');
-      var childShape = elementRegistry.getShapeById('IntermediateCatchEvent_1');
+      var childShape = elementRegistry.getById('IntermediateCatchEvent_1');
 
       expect(collapsedShape.collapsed).toBe(true);
       expect(childShape.hidden).toBe(true);
@@ -65,8 +65,8 @@ describe('import - collapsed container', function() {
 
       var elementRegistry = renderer.get('elementRegistry');
 
-      var collapsedShape = elementRegistry.getShapeById('Transaction_1');
+      var collapsedShape = elementRegistry.getById('Transaction_1');
-      var childShape = elementRegistry.getShapeById('UserTask_1');
+      var childShape = elementRegistry.getById('UserTask_1');
 
       expect(collapsedShape.collapsed).toBe(true);
       expect(childShape.hidden).toBe(true);
@@ -77,8 +77,8 @@ describe('import - collapsed container', function() {
 
       var elementRegistry = renderer.get('elementRegistry');
 
-      var collapsedShape = elementRegistry.getShapeById('AdHocSubProcess_1');
+      var collapsedShape = elementRegistry.getById('AdHocSubProcess_1');
-      var childShape = elementRegistry.getShapeById('StartEvent_1');
+      var childShape = elementRegistry.getById('StartEvent_1');
 
       expect(collapsedShape.collapsed).toBe(true);
       expect(childShape.hidden).toBe(true);
@@ -89,9 +89,9 @@ describe('import - collapsed container', function() {
 
       var elementRegistry = renderer.get('elementRegistry');
 
-      var collapsedShape = elementRegistry.getShapeById('SubProcess_4');
+      var collapsedShape = elementRegistry.getById('SubProcess_4');
-      var childShape = elementRegistry.getShapeById('SubProcess_5');
+      var childShape = elementRegistry.getById('SubProcess_5');
-      var nestedChildShape = elementRegistry.getShapeById('Task_3');
+      var nestedChildShape = elementRegistry.getById('Task_3');
 
       expect(collapsedShape.collapsed).toBe(true);
       expect(childShape.hidden).toBe(true);
@@ -103,8 +103,8 @@ describe('import - collapsed container', function() {
 
       var elementRegistry = renderer.get('elementRegistry');
 
-      var expandedShape = elementRegistry.getShapeById('SubProcess_3');
+      var expandedShape = elementRegistry.getById('SubProcess_3');
-      var childShape = elementRegistry.getShapeById('Task_2');
+      var childShape = elementRegistry.getById('Task_2');
 
       expect(expandedShape.collapsed).toBe(false);
       expect(childShape.hidden).toBe(false);
@@ -125,8 +125,8 @@ describe('import - collapsed container', function() {
 
       var elementRegistry = renderer.get('elementRegistry');
 
-      var expandedShape = elementRegistry.getShapeById('SubProcess_1');
+      var expandedShape = elementRegistry.getById('SubProcess_1');
-      var childShape = elementRegistry.getShapeById('Task_1');
+      var childShape = elementRegistry.getById('Task_1');
 
       expect(expandedShape.collapsed).toBe(true);
       expect(childShape.hidden).toBe(true);
@@ -137,8 +137,8 @@ describe('import - collapsed container', function() {
 
       var elementRegistry = renderer.get('elementRegistry');
 
-      var expandedShape = elementRegistry.getShapeById('SubProcess_2');
+      var expandedShape = elementRegistry.getById('SubProcess_2');
-      var childShape = elementRegistry.getShapeById('StartEvent_1');
+      var childShape = elementRegistry.getById('StartEvent_1');
 
       expect(expandedShape.collapsed).toBe(false);
       expect(childShape.hidden).toBe(false);
@@ -149,8 +149,8 @@ describe('import - collapsed container', function() {
 
       var elementRegistry = renderer.get('elementRegistry');
 
-      var expandedShape = elementRegistry.getShapeById('SubProcess_4');
+      var expandedShape = elementRegistry.getById('SubProcess_4');
-      var childShape = elementRegistry.getShapeById('Task_2');
+      var childShape = elementRegistry.getById('Task_2');
 
       expect(expandedShape.collapsed).toBe(true);
       expect(childShape.hidden).toBe(true);
@@ -161,8 +161,8 @@ describe('import - collapsed container', function() {
 
       var elementRegistry = renderer.get('elementRegistry');
 
-      var expandedShape = elementRegistry.getShapeById('SubProcess_3');
+      var expandedShape = elementRegistry.getById('SubProcess_3');
-      var childShape = elementRegistry.getShapeById('StartEvent_2');
+      var childShape = elementRegistry.getById('StartEvent_2');
 
       expect(expandedShape.collapsed).toBe(false);
       expect(childShape.hidden).toBe(false);