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

This commit is contained in:
Nico Rehwaldt 2014-06-11 14:41:55 +02:00
parent 04fdb3d049
commit 4e00114409
18 changed files with 117 additions and 124 deletions

View File

@ -1,13 +1,8 @@
'use strict';
var Diagram = require('diagram-js'); 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 = 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; module.exports = Modeler;

View File

@ -1,19 +1,12 @@
'use strict';
var Diagram = require('diagram-js'), var Diagram = require('diagram-js'),
BpmnModel = require('bpmn-moddle'), BpmnModel = require('bpmn-moddle'),
$ = require('jquery'), $ = require('jquery'),
_ = require('lodash'); _ = require('lodash');
var Importer = require('./import/Importer'), 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) { function getSvgContents(diagram) {
@ -43,7 +36,7 @@ function initListeners(diagram, listeners) {
* @param {String|Number} [options.height] the height of the viewer * @param {String|Number} [options.height] the height of the viewer
*/ */
function Viewer(options) { function Viewer(options) {
options = options || {}; this.options = options = options || {};
var parent = options.container || $('body'); var parent = options.container || $('body');
@ -154,7 +147,7 @@ Viewer.prototype.get = function(name) {
return this.diagram.get(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; var diagram = this.diagram;
@ -162,7 +155,7 @@ Viewer.prototype.importDefinitions = failSafeAsync(function(definitions, done) {
this.clear(); this.clear();
} }
diagram = this.createDiagram(); diagram = this.createDiagram(this.options.modules);
this.initDiagram(diagram); this.initDiagram(diagram);
@ -177,12 +170,11 @@ Viewer.prototype.initDiagram = function(diagram) {
initListeners(diagram, this.__listeners || []); initListeners(diagram, this.__listeners || []);
}; };
Viewer.prototype.createDiagram = function() { Viewer.prototype.createDiagram = function(modules) {
return new Diagram({ return new Diagram({
canvas: { container: this.container }, 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; module.exports = Viewer;

View File

@ -1,6 +1,7 @@
'use strict';
var _ = require('lodash'); var _ = require('lodash');
var bpmnModule = require('../di').defaultModule;
/** /**
* @class * @class
@ -41,7 +42,12 @@ function BpmnRegistry(events, elementRegistry) {
var collection = elements[type]; var collection = elements[type];
return function(element) { 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'); this.getDiagramElement = get('diagramElement');
} }
bpmnModule.type('bpmnRegistry', [ 'eventBus', 'elementRegistry', BpmnRegistry ]); BpmnRegistry.$inject = [ 'eventBus', 'elementRegistry' ];
module.exports = BpmnRegistry; module.exports = BpmnRegistry;

4
lib/core/index.js Normal file
View File

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

View File

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

View File

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

View File

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

4
lib/draw/index.js Normal file
View File

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

View File

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

View File

@ -1,6 +1,6 @@
var $ = require('jquery'); 'use strict';
var bpmnModule = require('../../di').defaultModule; var $ = require('jquery');
function MoveCanvas(events, canvas) { 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; module.exports = MoveCanvas;

View File

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

View File

@ -1,6 +1,6 @@
var mousewheel = require('./mousewheel'); 'use strict';
var bpmnModule = require('../../di').defaultModule; var mousewheel = require('jquery-mousewheel');
function ZoomScroll(events, canvas) { 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; module.exports = ZoomScroll;

View File

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

View File

@ -93,11 +93,18 @@ function importBpmnDiagram(diagram, definitions, done) {
var labelBounds = getLabelBounds(di, data); var labelBounds = getLabelBounds(di, data);
canvas.addShape(_.extend({ var label = _.extend({
id: element.id + '_label', id: element.id + '_label',
attachedId: element.id, attachedId: element.id,
type: 'label' 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;
} }

View File

@ -1,4 +1,3 @@
var logger = require('moddle').util.Logger;
var jsondiffpatch = require('jsondiffpatch'), var jsondiffpatch = require('jsondiffpatch'),
_ = require('lodash'); _ = require('lodash');
@ -19,7 +18,7 @@ function deepEquals(actual, expected) {
}; };
if (!result.pass) { 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; return result;

View File

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

View File

@ -1,15 +1,11 @@
'use strict'; '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'); var Matchers = require('../../Matchers');
@ -37,8 +33,7 @@ describe('import/Importer', function() {
function createDiagram() { function createDiagram() {
return new Diagram({ return new Diagram({
canvas: { container: container }, canvas: { container: container },
modules: [ bpmnModule ], modules: Viewer.modules
components: [ 'bpmnRegistry' ]
}); });
} }

View File

@ -53,8 +53,8 @@ describe('import - collapsed container', function() {
var elementRegistry = renderer.get('elementRegistry'); 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(collapsedShape.collapsed).toBe(true);
expect(childShape.hidden).toBe(true); expect(childShape.hidden).toBe(true);
@ -65,8 +65,8 @@ describe('import - collapsed container', function() {
var elementRegistry = renderer.get('elementRegistry'); 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(collapsedShape.collapsed).toBe(true);
expect(childShape.hidden).toBe(true); expect(childShape.hidden).toBe(true);
@ -77,8 +77,8 @@ describe('import - collapsed container', function() {
var elementRegistry = renderer.get('elementRegistry'); 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(collapsedShape.collapsed).toBe(true);
expect(childShape.hidden).toBe(true); expect(childShape.hidden).toBe(true);
@ -89,9 +89,9 @@ describe('import - collapsed container', function() {
var elementRegistry = renderer.get('elementRegistry'); 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(collapsedShape.collapsed).toBe(true);
expect(childShape.hidden).toBe(true); expect(childShape.hidden).toBe(true);
@ -103,8 +103,8 @@ describe('import - collapsed container', function() {
var elementRegistry = renderer.get('elementRegistry'); 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(expandedShape.collapsed).toBe(false);
expect(childShape.hidden).toBe(false); expect(childShape.hidden).toBe(false);
@ -125,8 +125,8 @@ describe('import - collapsed container', function() {
var elementRegistry = renderer.get('elementRegistry'); 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(expandedShape.collapsed).toBe(true);
expect(childShape.hidden).toBe(true); expect(childShape.hidden).toBe(true);
@ -137,8 +137,8 @@ describe('import - collapsed container', function() {
var elementRegistry = renderer.get('elementRegistry'); 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(expandedShape.collapsed).toBe(false);
expect(childShape.hidden).toBe(false); expect(childShape.hidden).toBe(false);
@ -149,8 +149,8 @@ describe('import - collapsed container', function() {
var elementRegistry = renderer.get('elementRegistry'); 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(expandedShape.collapsed).toBe(true);
expect(childShape.hidden).toBe(true); expect(childShape.hidden).toBe(true);
@ -161,8 +161,8 @@ describe('import - collapsed container', function() {
var elementRegistry = renderer.get('elementRegistry'); 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(expandedShape.collapsed).toBe(false);
expect(childShape.hidden).toBe(false); expect(childShape.hidden).toBe(false);