opensource/bpmn-js
1
0
Fork 0
mirror of https://github.com/bpmn-io/bpmn-js.git synced 2025-08-14 10:16:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(Viewer+Modeler): inherit from Diagram

Browse Source 
* simplifies event handling
* relies on Diagram#clear to reset the diagram before
  successive imports
* allows diagram services to be re-used across imports
* allows diagram services to be injected (or retrieved)
  before import

Closes #237
This commit is contained in:
Nico Rehwaldt
2016-03-16 23:11:05 +01:00
parent ebfc2a40ea
commit ff0d88bb90
4 changed files with 291 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
lib/Viewer.js
View File

@ -18,17 +18,12 @@ var domify = require('min-dom/lib/domify'),
var Diagram = require('diagram-js'),
BpmnModdle = require('bpmn-moddle');
var inherits = require('inherits');
var Importer = require('./import/Importer');
function initListeners(diagram, listeners) {
var events = diagram.get('eventBus');
listeners.forEach(function(l) {
events.on(l.event, l.priority, l.callback, l.that);
});
}
function checkValidationError(err) {
// check if we can help the user by indicating wrong BPMN 2.0 xml
@ -110,39 +105,23 @@ function ensureUnit(val) {
*/
function Viewer(options) {
this.options = options = assign({}, DEFAULT_OPTIONS, options || {});
options = assign({}, DEFAULT_OPTIONS, options);
this.moddle = this.createModdle();
this.moddle = this._createModdle(options);
var parent = options.container;
// support jquery element
// unwrap it if passed
if (parent.get) {
parent = parent.get(0);
}
// support selector
if (isString(parent)) {
parent = domQuery(parent);
}
var container = this.container = domify('<div class="bjs-container"></div>');
parent.appendChild(container);
assign(container.style, {
width: ensureUnit(options.width),
height: ensureUnit(options.height),
position: options.position
});
this.container = this._createContainer(options);
/* <project-logo> */
addProjectLogo(container);
addProjectLogo(this.container);
/* </project-logo> */
this._init(this.container, this.moddle, options);
}
inherits(Viewer, Diagram);
module.exports = Viewer;
@ -206,10 +185,6 @@ Viewer.prototype.saveXML = function(options, done) {
this.moddle.toXML(definitions, options, done);
};
Viewer.prototype.createModdle = function() {
return new BpmnModdle(assign({}, this._moddleExtensions, this.options.moddleExtensions));
};
/**
* Export the currently displayed BPMN 2.0 diagram as
* an SVG image.
@ -258,15 +233,9 @@ Viewer.prototype.saveSVG = function(options, done) {
* @param {String} name
*
* @return {Object} diagram service instance
*
* @method Viewer#get
*/
Viewer.prototype.get = function(name) {
if (!this.diagram) {
throw new Error('no diagram loaded');
}
return this.diagram.get(name);
};
/**
* Invoke a function in the context of this viewer.
@ -280,94 +249,61 @@ Viewer.prototype.get = function(name) {
* @param {Function} fn to be invoked
*
* @return {Object} the functions return value
*
* @method Viewer#invoke
*/
Viewer.prototype.invoke = function(fn) {
if (!this.diagram) {
throw new Error('no diagram loaded');
}
return this.diagram.invoke(fn);
};
Viewer.prototype.importDefinitions = function(definitions, done) {
// use try/catch to not swallow synchronous exceptions
// that may be raised during model parsing
try {
if (this.diagram) {
this.clear();
}
this.definitions = definitions;
var diagram = this.diagram = this._createDiagram(this.options);
this._init(diagram);
Importer.importBpmnDiagram(diagram, definitions, done);
} catch (e) {
done(e);
}
};
Viewer.prototype._init = function(diagram) {
initListeners(diagram, this.__listeners || []);
};
Viewer.prototype._createDiagram = function(options) {
var modules = [].concat(options.modules || this.getModules(), options.additionalModules || []);
// add self as an available service
modules.unshift({
bpmnjs: [ 'value', this ],
moddle: [ 'value', this.moddle ]
});
options = omit(options, 'additionalModules');
options = assign(options, {
canvas: assign({}, options.canvas, { container: this.container }),
modules: modules
});
return new Diagram(options);
};
Viewer.prototype.getModules = function() {
return this._modules;
};
/**
* Remove all drawn elements from the viewer.
*
* After calling this method the viewer can still
* be reused for opening another diagram.
*
* @method Viewer#clear
*/
Viewer.prototype.clear = function() {
var diagram = this.diagram;
if (diagram) {
diagram.destroy();
Viewer.prototype.importDefinitions = function(definitions, done) {
// use try/catch to not swallow synchronous exceptions
// that may be raised during model parsing
try {
if (this.definitions) {
// clear existing rendered diagram
this.clear();
}
// update definitions
this.definitions = definitions;
// perform graphical import
Importer.importBpmnDiagram(this, definitions, done);
} catch (e) {
// handle synchronous errors
done(e);
}
};
Viewer.prototype.getModules = function() {
return this._modules;
};
/**
* Destroy the viewer instance and remove all its remainders
* from the document tree.
* Destroy the viewer instance and remove all its
* remainders from the document tree.
*/
Viewer.prototype.destroy = function() {
// clear underlying diagram
this.clear();
// remove container
// diagram destroy
Diagram.prototype.destroy.call(this);
// dom detach
domRemove(this.container);
};
/**
* Register an event listener on the viewer
* Register an event listener
*
* Remove a previously added listener via {@link #off(event, callback)}.
*
@ -376,50 +312,79 @@ Viewer.prototype.destroy = function() {
* @param {Function} callback
* @param {Object} [that]
*/
Viewer.prototype.on = function(event, priority, callback, that) {
var diagram = this.diagram,
listeners = this.__listeners = this.__listeners || [];
if (typeof priority === 'function') {
that = callback;
callback = priority;
priority = 1000;
}
listeners.push({ event: event, priority: priority, callback: callback, that: that });
if (diagram) {
return diagram.get('eventBus').on(event, priority, callback, that);
}
Viewer.prototype.on = function(event, priority, callback, target) {
return this.get('eventBus').on(event, priority, callback, target);
};
/**
* De-register an event callback
* De-register an event listener
*
* @param {String} event
* @param {Function} callback
*/
Viewer.prototype.off = function(event, callback) {
var filter,
diagram = this.diagram;
if (callback) {
filter = function(l) {
return !(l.event === event && l.callback === callback);
};
} else {
filter = function(l) {
return l.event !== event;
};
}
this.__listeners = (this.__listeners || []).filter(filter);
if (diagram) {
diagram.get('eventBus').off(event, callback);
}
this.get('eventBus').off(event, callback);
};
Viewer.prototype._init = function(container, moddle, options) {
var baseModules = options.modules || this.getModules(),
additionalModules = options.additionalModules || [],
staticModules = [
{
bpmnjs: [ 'value', this ],
moddle: [ 'value', moddle ]
}
];
var diagramModules = [].concat(staticModules, baseModules, additionalModules);
var diagramOptions = assign(omit(options, 'additionalModules'), {
canvas: assign({}, options.canvas, { container: container }),
modules: diagramModules
});
// invoke diagram constructor
Diagram.call(this, diagramOptions);
};
Viewer.prototype._createContainer = function(options) {
var parent = options.container,
container;
// support jquery element
// unwrap it if passed
if (parent.get) {
parent = parent.get(0);
}
// support selector
if (isString(parent)) {
parent = domQuery(parent);
}
container = domify('<div class="bjs-container"></div>');
assign(container.style, {
width: ensureUnit(options.width),
height: ensureUnit(options.height),
position: options.position
});
parent.appendChild(container);
return container;
};
Viewer.prototype._createModdle = function(options) {
var moddleOptions = assign({}, this._moddleExtensions, options.moddleExtensions);
return new BpmnModdle(moddleOptions);
};
// modules the viewer is composed of
Viewer.prototype._modules = [
require('./core'),