chore(project): upgrade to new diagram.js module structure
This commit is contained in:
parent
04fdb3d049
commit
4e00114409
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
|
@ -0,0 +1,4 @@
|
|||
module.exports = {
|
||||
__depends__: [ require('../draw') ],
|
||||
bpmnRegistry: [ 'type', require('./BpmnRegistry') ]
|
||||
};
|
|
@ -1,5 +0,0 @@
|
|||
var Module = require('didi').Module;
|
||||
|
||||
module.exports = {
|
||||
defaultModule: new Module()
|
||||
};
|
|
@ -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;
|
|
@ -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;
|
|
@ -0,0 +1,4 @@
|
|||
module.exports = {
|
||||
renderer: [ 'type', require('./BpmnRenderer') ],
|
||||
pathMap: [ 'type', require('./PathMap') ]
|
||||
};
|
|
@ -1,8 +0,0 @@
|
|||
var $ = require('jquery');
|
||||
|
||||
// init mouse wheel plugin
|
||||
require('jquery-mousewheel')($);
|
||||
|
||||
module.exports = function(element) {
|
||||
return $(element);
|
||||
};
|
|
@ -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;
|
|
@ -0,0 +1,4 @@
|
|||
module.exports = {
|
||||
__init__: [ 'moveCanvas' ],
|
||||
moveCanvas: [ 'type', require('./MoveCanvas') ]
|
||||
};
|
|
@ -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;
|
|
@ -0,0 +1,4 @@
|
|||
module.exports = {
|
||||
__init__: [ 'zoomScroll' ],
|
||||
zoomScroll: [ 'type', require('./ZoomScroll') ]
|
||||
};
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue