feat(bpmn-js): add #destroy method and allow custom position
Closes #100
This commit is contained in:
parent
82952e7414
commit
574af0814d
|
@ -33,6 +33,12 @@ function checkValidationError(err) {
|
|||
return err;
|
||||
}
|
||||
|
||||
var DEFAULT_OPTIONS = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'relative'
|
||||
};
|
||||
|
||||
/**
|
||||
* A viewer for BPMN 2.0 diagrams
|
||||
*
|
||||
|
@ -46,14 +52,18 @@ function checkValidationError(err) {
|
|||
* @param {Array<didi.Module>} [options.additionalModules] a list of modules to use with the default modules
|
||||
*/
|
||||
function Viewer(options) {
|
||||
this.options = options = options || {};
|
||||
|
||||
this.options = options = _.extend({}, DEFAULT_OPTIONS, options || {});
|
||||
|
||||
var parent = options.container || $('body');
|
||||
|
||||
var container = $('<div class="bjs-container" style="position: relative"></div>').appendTo(parent);
|
||||
var container = $('<div class="bjs-container"></div>').appendTo(parent);
|
||||
|
||||
container.css('width', options.width || '100%');
|
||||
container.css('height', options.height || '100%');
|
||||
container.css({
|
||||
width: options.width,
|
||||
height: options.height,
|
||||
position: options.position
|
||||
});
|
||||
|
||||
// unwrap jquery
|
||||
this.container = container.get(0);
|
||||
|
@ -222,7 +232,10 @@ Viewer.prototype.getModules = function() {
|
|||
};
|
||||
|
||||
/**
|
||||
* Remove all drawn elements from the viewer
|
||||
* Remove all drawn elements from the viewer.
|
||||
*
|
||||
* After calling this method the viewer can still
|
||||
* be reused for opening another diagram.
|
||||
*/
|
||||
Viewer.prototype.clear = function() {
|
||||
var diagram = this.diagram;
|
||||
|
@ -232,6 +245,18 @@ Viewer.prototype.clear = function() {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Destroy the viewer instance and remove all its remainders
|
||||
* from the document tree.
|
||||
*/
|
||||
Viewer.prototype.destroy = function() {
|
||||
// clear underlying diagram
|
||||
this.clear();
|
||||
|
||||
// remove container
|
||||
$(this.container).remove();
|
||||
};
|
||||
|
||||
/**
|
||||
* Register an event listener on the viewer
|
||||
*
|
||||
|
|
|
@ -9,7 +9,7 @@ var fs = require('fs');
|
|||
var Modeler = require('../../lib/Modeler');
|
||||
|
||||
|
||||
describe('modeler', function() {
|
||||
describe('Modeler', function() {
|
||||
|
||||
beforeEach(Matchers.addDeepEquals);
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@ var fs = require('fs');
|
|||
var Viewer = require('../../lib/Viewer');
|
||||
|
||||
|
||||
describe('viewer', function() {
|
||||
describe('Viewer', function() {
|
||||
|
||||
beforeEach(Matchers.addDeepEquals);
|
||||
|
||||
|
@ -327,7 +327,8 @@ describe('viewer', function() {
|
|||
|
||||
});
|
||||
|
||||
describe('configuration', function() {
|
||||
|
||||
describe('creation', function() {
|
||||
|
||||
var testModules = [
|
||||
{ logger: [ 'type', function() { this.called = true; } ] }
|
||||
|
@ -336,11 +337,17 @@ describe('viewer', function() {
|
|||
// given
|
||||
var xml = fs.readFileSync('test/fixtures/bpmn/empty-definitions.bpmn', 'utf8');
|
||||
|
||||
var viewer;
|
||||
|
||||
afterEach(function() {
|
||||
viewer.destroy();
|
||||
});
|
||||
|
||||
|
||||
it('should override default modules', function(done) {
|
||||
|
||||
// given
|
||||
var viewer = new Viewer({ container: container, modules: testModules });
|
||||
viewer = new Viewer({ container: container, modules: testModules });
|
||||
|
||||
// when
|
||||
viewer.importXML(xml, function(err) {
|
||||
|
@ -356,7 +363,7 @@ describe('viewer', function() {
|
|||
it('should add module to default modules', function(done) {
|
||||
|
||||
// given
|
||||
var viewer = new Viewer({ container: container, additionalModules: testModules });
|
||||
viewer = new Viewer({ container: container, additionalModules: testModules });
|
||||
|
||||
// when
|
||||
viewer.importXML(xml, function(err) {
|
||||
|
@ -370,6 +377,46 @@ describe('viewer', function() {
|
|||
|
||||
});
|
||||
|
||||
|
||||
it('should use custom size and position', function() {
|
||||
|
||||
// when
|
||||
viewer = new Viewer({
|
||||
container: container,
|
||||
width: 200,
|
||||
height: 100,
|
||||
position: 'fixed'
|
||||
});
|
||||
|
||||
var container = viewer.container;
|
||||
|
||||
// then
|
||||
expect(container.style.position).toBe('fixed');
|
||||
expect(container.style.width).toBe('200px');
|
||||
expect(container.style.height).toBe('100px');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
describe('#destroy', function() {
|
||||
|
||||
it('should remove traces in document tree', function() {
|
||||
|
||||
// given
|
||||
var viewer = new Viewer({
|
||||
container: container
|
||||
});
|
||||
|
||||
var container = viewer.container;
|
||||
|
||||
// when
|
||||
viewer.destroy();
|
||||
|
||||
// then
|
||||
expect(container.parentNode).toBeFalsy();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
Loading…
Reference in New Issue