From 4e0011440992a239e5489307ebca20d322de01b4 Mon Sep 17 00:00:00 2001 From: Nico Rehwaldt Date: Wed, 11 Jun 2014 14:41:55 +0200 Subject: [PATCH] chore(project): upgrade to new diagram.js module structure --- lib/Modeler.js | 32 ++++++++-------- lib/Viewer.js | 30 +++++++-------- lib/core/BpmnRegistry.js | 12 ++++-- lib/core/index.js | 4 ++ lib/di.js | 5 --- lib/draw/BpmnRenderer.js | 12 +----- lib/draw/PathMap.js | 7 ++-- lib/draw/index.js | 4 ++ lib/feature/zoomscroll/mousewheel.js | 8 ---- .../movecanvas/MoveCanvas.js} | 8 ++-- lib/features/movecanvas/index.js | 4 ++ .../zoomscroll/ZoomScroll.js} | 6 +-- lib/features/zoomscroll/index.js | 4 ++ lib/import/Importer.js | 11 +++++- test/spec/Matchers.js | 5 +-- test/spec/browser/ViewerSpec.js | 34 ++++++++--------- test/spec/browser/import/ImporterSpec.js | 17 +++------ .../import/elements/CollapsedImportSpec.js | 38 +++++++++---------- 18 files changed, 117 insertions(+), 124 deletions(-) create mode 100644 lib/core/index.js delete mode 100644 lib/di.js create mode 100644 lib/draw/index.js delete mode 100644 lib/feature/zoomscroll/mousewheel.js rename lib/{feature/movecanvas/index.js => features/movecanvas/MoveCanvas.js} (92%) create mode 100644 lib/features/movecanvas/index.js rename lib/{feature/zoomscroll/index.js => features/zoomscroll/ZoomScroll.js} (85%) create mode 100644 lib/features/zoomscroll/index.js diff --git a/lib/Modeler.js b/lib/Modeler.js index e84e3723..0ff6342b 100644 --- a/lib/Modeler.js +++ b/lib/Modeler.js @@ -1,20 +1,15 @@ +'use strict'; + var Diagram = require('diagram-js'); -var bpmnModule = require('./di').defaultModule, - Viewer = require('./Viewer'); - -require('./draw/BpmnRenderer'); -require('./feature/zoomscroll'); - -require('diagram-js/lib/features/move'); -require('diagram-js/lib/features/selection/Visuals'); +var Viewer = require('./Viewer'); /** * @class * * A modeler for BPMN 2.0 diagrams. - * + * * @borrows Viewer as Modeler */ function Modeler(options) { @@ -23,13 +18,16 @@ function Modeler(options) { Modeler.prototype = Object.create(Viewer.prototype); -Modeler.prototype.createDiagram = function() { - - return new Diagram({ - canvas: { container: this.container }, - modules: [ bpmnModule ], - components: [ 'selectionVisuals', 'move', 'moveCanvas', 'zoomScroll' ] - }); +Modeler.prototype.createDiagram = function(modules) { + return Viewer.prototype.createDiagram.call(this, modules || Modeler.modules); }; -module.exports = Modeler; \ No newline at end of file +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; diff --git a/lib/Viewer.js b/lib/Viewer.js index 689c9c9a..a0bd75e7 100644 --- a/lib/Viewer.js +++ b/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; - -var bpmnModule = require('./di').defaultModule; - -require('./draw/BpmnRenderer'); - -require('./feature/zoomscroll'); -require('./feature/movecanvas'); - -require('diagram-js/lib/features/selection/Visuals'); + util = require('./Util'); 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 ], - components: [ 'selectionVisuals', 'zoomScroll', 'moveCanvas' ] + modules: modules || Viewer.modules }); }; @@ -206,4 +198,8 @@ Viewer.prototype.on = function(event, handler) { } }; -module.exports = Viewer; \ No newline at end of file +Viewer.modules = [ + require('./core') +]; + +module.exports = Viewer; diff --git a/lib/core/BpmnRegistry.js b/lib/core/BpmnRegistry.js index 7fdb6fa1..cf05a854 100644 --- a/lib/core/BpmnRegistry.js +++ b/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; \ No newline at end of file diff --git a/lib/core/index.js b/lib/core/index.js new file mode 100644 index 00000000..bf049976 --- /dev/null +++ b/lib/core/index.js @@ -0,0 +1,4 @@ +module.exports = { + __depends__: [ require('../draw') ], + bpmnRegistry: [ 'type', require('./BpmnRegistry') ] +}; \ No newline at end of file diff --git a/lib/di.js b/lib/di.js deleted file mode 100644 index a8001394..00000000 --- a/lib/di.js +++ /dev/null @@ -1,5 +0,0 @@ -var Module = require('didi').Module; - -module.exports = { - defaultModule: new Module() -}; \ No newline at end of file diff --git a/lib/draw/BpmnRenderer.js b/lib/draw/BpmnRenderer.js index fc50de5e..1bedb8d6 100644 --- a/lib/draw/BpmnRenderer.js +++ b/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; \ No newline at end of file diff --git a/lib/draw/PathMap.js b/lib/draw/PathMap.js index 400f3df5..1301e130 100644 --- a/lib/draw/PathMap.js +++ b/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; \ No newline at end of file diff --git a/lib/draw/index.js b/lib/draw/index.js new file mode 100644 index 00000000..e1d2b1f6 --- /dev/null +++ b/lib/draw/index.js @@ -0,0 +1,4 @@ +module.exports = { + renderer: [ 'type', require('./BpmnRenderer') ], + pathMap: [ 'type', require('./PathMap') ] +}; \ No newline at end of file diff --git a/lib/feature/zoomscroll/mousewheel.js b/lib/feature/zoomscroll/mousewheel.js deleted file mode 100644 index 1200e2ec..00000000 --- a/lib/feature/zoomscroll/mousewheel.js +++ /dev/null @@ -1,8 +0,0 @@ -var $ = require('jquery'); - -// init mouse wheel plugin -require('jquery-mousewheel')($); - -module.exports = function(element) { - return $(element); -}; \ No newline at end of file diff --git a/lib/feature/movecanvas/index.js b/lib/features/movecanvas/MoveCanvas.js similarity index 92% rename from lib/feature/movecanvas/index.js rename to lib/features/movecanvas/MoveCanvas.js index 29c49472..05a64b7f 100644 --- a/lib/feature/movecanvas/index.js +++ b/lib/features/movecanvas/MoveCanvas.js @@ -1,10 +1,10 @@ -var $ = require('jquery'); +'use strict'; -var bpmnModule = require('../../di').defaultModule; +var $ = require('jquery'); function MoveCanvas(events, canvas) { - + var THRESHOLD = 20; function init(element) { @@ -101,6 +101,6 @@ function MoveCanvas(events, canvas) { } -bpmnModule.type('moveCanvas', [ 'eventBus', 'canvas', MoveCanvas ]); +MoveCanvas.$inject = [ 'eventBus', 'canvas' ]; module.exports = MoveCanvas; \ No newline at end of file diff --git a/lib/features/movecanvas/index.js b/lib/features/movecanvas/index.js new file mode 100644 index 00000000..3cc49cc7 --- /dev/null +++ b/lib/features/movecanvas/index.js @@ -0,0 +1,4 @@ +module.exports = { + __init__: [ 'moveCanvas' ], + moveCanvas: [ 'type', require('./MoveCanvas') ] +}; \ No newline at end of file diff --git a/lib/feature/zoomscroll/index.js b/lib/features/zoomscroll/ZoomScroll.js similarity index 85% rename from lib/feature/zoomscroll/index.js rename to lib/features/zoomscroll/ZoomScroll.js index 92db1c61..acf0a649 100644 --- a/lib/feature/zoomscroll/index.js +++ b/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; \ No newline at end of file diff --git a/lib/features/zoomscroll/index.js b/lib/features/zoomscroll/index.js new file mode 100644 index 00000000..00967aec --- /dev/null +++ b/lib/features/zoomscroll/index.js @@ -0,0 +1,4 @@ +module.exports = { + __init__: [ 'zoomScroll' ], + zoomScroll: [ 'type', require('./ZoomScroll') ] +}; \ No newline at end of file diff --git a/lib/import/Importer.js b/lib/import/Importer.js index cad0e46d..6c3de08c 100644 --- a/lib/import/Importer.js +++ b/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; } diff --git a/test/spec/Matchers.js b/test/spec/Matchers.js index 61f9b9ae..489d33d5 100644 --- a/test/spec/Matchers.js +++ b/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; @@ -39,7 +38,7 @@ function addMatchers() { // DIRTY HACK DDDSZZZ // Remove when we got jasmin 2.x in browser AND node env - + var old = !jasmine.addMatchers; (old ? this : jasmine).addMatchers({ diff --git a/test/spec/browser/ViewerSpec.js b/test/spec/browser/ViewerSpec.js index d1a1a6bf..c6077bdd 100644 --- a/test/spec/browser/ViewerSpec.js +++ b/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); - - renderer.importXML(xml, function(err) { - done(err); - }); + createViewer(xml, done); }); @@ -33,11 +39,7 @@ describe('Viewer', function() { var xml = fs.readFileSync('test/fixtures/bpmn/empty-definitions.bpmn', 'utf8'); - var renderer = new Viewer(container); - - renderer.importXML(xml, function(err) { - done(err); - }); + createViewer(xml, done); }); @@ -47,9 +49,7 @@ describe('Viewer', function() { var xml = 'invalid stuff'; - var renderer = new Viewer(container); - - renderer.importXML(xml, function(err) { + createViewer(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); - - renderer.importXML(xml, function(err) { - + createViewer(xml, function(err) { expect(err).toBeDefined(); expect(err.message).toEqual('no rootElement referenced in BPMNPlane '); @@ -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); diff --git a/test/spec/browser/import/ImporterSpec.js b/test/spec/browser/import/ImporterSpec.js index 2d450017..5b3a2ab7 100644 --- a/test/spec/browser/import/ImporterSpec.js +++ b/test/spec/browser/import/ImporterSpec.js @@ -1,15 +1,11 @@ 'use strict'; -var fs = require('fs'), - Diagram = require('diagram-js/lib/Diagram'); +var fs = require('fs'); -var BpmnModel = require('bpmn-moddle'); -var Importer = require('../../../../lib/import/Importer'); - -var bpmnModule = require('../../../../lib/di').defaultModule; - -require('../../../../lib/core/BpmnRegistry'); -require('../../../../lib/draw/BpmnRenderer'); +var Diagram = require('diagram-js/lib/Diagram'), + BpmnModel = require('bpmn-moddle'), + Importer = require('../../../../lib/import/Importer'), + Viewer = require('../../../../lib/Viewer'); var Matchers = require('../../Matchers'); @@ -37,8 +33,7 @@ describe('import/Importer', function() { function createDiagram() { return new Diagram({ canvas: { container: container }, - modules: [ bpmnModule ], - components: [ 'bpmnRegistry' ] + modules: Viewer.modules }); } diff --git a/test/spec/browser/import/elements/CollapsedImportSpec.js b/test/spec/browser/import/elements/CollapsedImportSpec.js index bb6e8be8..541c37de 100644 --- a/test/spec/browser/import/elements/CollapsedImportSpec.js +++ b/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 childShape = elementRegistry.getShapeById('IntermediateCatchEvent_1'); + var collapsedShape = elementRegistry.getById('SubProcess_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 childShape = elementRegistry.getShapeById('UserTask_1'); + var collapsedShape = elementRegistry.getById('Transaction_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 childShape = elementRegistry.getShapeById('StartEvent_1'); + var collapsedShape = elementRegistry.getById('AdHocSubProcess_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 childShape = elementRegistry.getShapeById('SubProcess_5'); - var nestedChildShape = elementRegistry.getShapeById('Task_3'); + var collapsedShape = elementRegistry.getById('SubProcess_4'); + var childShape = elementRegistry.getById('SubProcess_5'); + 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 childShape = elementRegistry.getShapeById('Task_2'); + var expandedShape = elementRegistry.getById('SubProcess_3'); + 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 childShape = elementRegistry.getShapeById('Task_1'); + var expandedShape = elementRegistry.getById('SubProcess_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 childShape = elementRegistry.getShapeById('StartEvent_1'); + var expandedShape = elementRegistry.getById('SubProcess_2'); + 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 childShape = elementRegistry.getShapeById('Task_2'); + var expandedShape = elementRegistry.getById('SubProcess_4'); + 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 childShape = elementRegistry.getShapeById('StartEvent_2'); + var expandedShape = elementRegistry.getById('SubProcess_3'); + var childShape = elementRegistry.getById('StartEvent_2'); expect(expandedShape.collapsed).toBe(false); expect(childShape.hidden).toBe(false);