fix(Viewer): handle and display errors

Closes #8
This commit is contained in:
Nico Rehwaldt 2014-03-21 21:10:01 +01:00
parent bcdac47882
commit 20c4f4e396
11 changed files with 168 additions and 31 deletions

View File

@ -22,7 +22,7 @@ a:link {
height: 100%;
}
.content .intro {
.content > .message {
text-align: center;
display: table;
@ -30,13 +30,29 @@ a:link {
color: #111;
}
.content .intro .note {
.content > .message .note {
vertical-align: middle;
text-align: center;
display: table-cell;
}
.content .canvas,
.content .error .details {
max-width: 500px;
font-size: 12px;
margin: 20px auto;
text-align: left;
}
.content .error pre {
border: solid 1px #CCC;
background: #EEE;
padding: 10px;
}
.content:not(.with-error) .error,
.content .canvas,
.content.with-error .canvas,
.content.with-error .intro,
.content.with-diagram .intro {
display: none;
}

View File

@ -1,8 +1,8 @@
(function() {
var Model = require('bpmn/Model'),
Viewer = require('bpmn/Viewer'),
Modeler = require('bpmn/Modeler');
var Viewer = require('bpmn/Viewer'),
Modeler = require('bpmn/Modeler'),
Model = require('bpmn/Model');
var container = $('#js-drop-zone');
@ -28,21 +28,25 @@
'</bpmn2:definitions>';
function createNewDiagram() {
var bpmn = Model.instance();
openDiagram(newDiagramXML);
}
function openDiagram(xml) {
Model.fromXML(xml, 'bpmn:Definitions', function(err, definitions) {
renderer.importXML(xml, function(err) {
if (err) {
console.error(err);
container
.removeClass('with-diagram')
.addClass('with-error');
container.find('.error pre').text(err.message);
console.warn('[import] ' + err.message);
} else {
renderer.importDefinitions(definitions, function() {
container.addClass('with-diagram');
});
container
.removeClass('with-error')
.addClass('with-diagram');
}
});
}

View File

@ -11,13 +11,24 @@
<body>
<div class="content" id="js-drop-zone">
<div class="intro">
<div class="message intro">
<div class="note">
Drop BPMN diagram from your desktop or <a id="js-create-diagram" href>create a new diagram</a> to get started.
</div>
</div>
<div class="canvas" id="js-canvas"></div>
<div class="message error">
<div class="note">
<p>Ooops, we could not display the BPMN 2.0 diagram.</p>
<div class="details">
<span>cause of the problem</span>
<pre></pre>
</div>
</div>
</div>
<div class="canvas modeler" id="js-canvas"></div>
</div>
<div class="logo"></div>

View File

@ -11,13 +11,24 @@
<body>
<div class="content" id="js-drop-zone">
<div class="intro">
<div class="message intro">
<div class="note">
Drop BPMN diagram from your desktop or <a id="js-create-diagram" href>create a new diagram</a> to get started.
</div>
</div>
<div class="canvas modeler" id="js-canvas"></div>
<div class="message error">
<div class="note">
<p>Ooops, we could not display the BPMN 2.0 diagram.</p>
<div class="details">
<span>cause of the problem</span>
<pre></pre>
</div>
</div>
</div>
<div class="canvas" id="js-canvas"></div>
</div>
<div class="logo"></div>

View File

@ -1,10 +1,25 @@
var Diagram = require('diagram-js');
var Importer = require('./Importer');
var Importer = require('./Importer'),
Model = require('./Model');
function Viewer(container) {
this.container = container;
}
Viewer.prototype.importXML = function(xml, done) {
var self = this;
Model.fromXML(xml, 'bpmn:Definitions', function(err, definitions) {
if (err) {
return done(err);
}
self.importDefinitions(definitions, done);
});
};
Viewer.prototype.importDefinitions = function(definitions, done) {
if (this.diagram) {
@ -17,11 +32,6 @@ Viewer.prototype.importDefinitions = function(definitions, done) {
Importer.importBpmnDiagram(this.diagram, definitions, done);
};
Viewer.prototype.exportDefinitions = function(done) {
};
Viewer.prototype.createDiagram = function() {
return new Diagram({ canvas: { container: this.container }});
};

BIN
test/fixtures/bpmn/error/binary.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 272 B

View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:vendor="http://vendor" id="test" targetNamespace="http://bpmn.io/schema/bpmn">
<bpmn2:extensionElements>
<vendor:info key="bgcolor" value="#ffffff"/>
<vendor:info key="rolle" value="[]"/>
</bpmn2:extensionElements>
</bpmn2:definitions>

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="test" targetNamespace="http://bpmn.io/schema/bpmn">
<someElement a="b" />
</bpmn2:definitions>

1
test/fixtures/bpmn/error/no-xml.txt vendored Normal file
View File

@ -0,0 +1 @@
this is no xml

View File

@ -13,10 +13,12 @@ describe('Importer', function() {
return BpmnModel.fromXML(xml, 'bpmn:Definitions', opts, callback);
}
beforeEach(Matchers.add);
var container;
beforeEach(Matchers.add);
beforeEach(function() {
container = document.createElement('div');
document.getElementsByTagName('body')[0].appendChild(container);
@ -26,25 +28,43 @@ describe('Importer', function() {
container.parentNode.removeChild(container);
});
it('should import simple process', function(done) {
var xml = fs.readFileSync('test/fixtures/bpmn/simple.bpmn', 'utf8');
read(xml, function(err, result) {
var renderer = new Viewer(container);
var renderer = new Viewer(container);
renderer.importDefinitions(result, done);
renderer.importXML(xml, function(err) {
done(err);
});
});
it('should import empty definitions', function(done) {
var xml = fs.readFileSync('test/fixtures/bpmn/empty-definitions.bpmn', 'utf8');
read(xml, function(err, result) {
var renderer = new Viewer(container);
var renderer = new Viewer(container);
renderer.importDefinitions(result, done);
renderer.importXML(xml, function(err) {
done(err);
});
});
it('should handle errors', function(done) {
var xml = 'invalid stuff';
var renderer = new Viewer(container);
renderer.importXML(xml, function(err) {
expect(err).toBeDefined();
done();
});
});
});

View File

@ -401,6 +401,55 @@ describe('Model', function() {
});
});
describe('should handle errors', function() {
it('when importing non-xml text', function(done) {
// when
readFile('error/no-xml.txt', 'bpmn:Definitions', function(err, result) {
expect(err).toBeDefined();
done();
});
});
it('when importing binary', function(done) {
// when
readFile('error/binary.png', 'bpmn:Definitions', function(err, result) {
expect(err).toBeDefined();
done();
});
});
it('when importing extension elements', function(done) {
// when
readFile('error/extension-elements.bpmn', 'bpmn:Definitions', function(err, result) {
expect(err).toBeDefined();
done();
});
});
it('when importing invalid bpmn', function(done) {
// when
readFile('error/invalid-child.bpmn', 'bpmn:Definitions', function(err, result) {
expect(err).toBeDefined();
done();
});
});
});
});
});