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 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');
/**
@ -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);
};
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;

View File

@ -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) {
}
};
Viewer.modules = [
require('./core')
];
module.exports = Viewer;

View File

@ -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;

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';
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;

View File

@ -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;

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) {
@ -101,6 +101,6 @@ function MoveCanvas(events, canvas) {
}
bpmnModule.type('moveCanvas', [ 'eventBus', 'canvas', MoveCanvas ]);
MoveCanvas.$inject = [ 'eventBus', 'canvas' ];
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) {
@ -65,6 +65,6 @@ function ZoomScroll(events, canvas) {
}
bpmnModule.type('zoomScroll', [ 'eventBus', 'canvas', ZoomScroll ]);
ZoomScroll.$inject = [ 'eventBus', 'canvas' ];
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);
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;
}

View File

@ -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;

View File

@ -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 <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);

View File

@ -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
});
}

View File

@ -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);