feat(Viewer): embed and show project logo

The project logo now properly embeds in the Viewer and links to bpmn.io.
This way, we are able to ship it as part of a bpmn-js bundle.

In addition to that change this commit upgrades to the latest diagram-js
release, too which adds support for Diagram#destroy().

Closes #15
This commit is contained in:
Nico Rehwaldt 2014-04-04 18:48:37 +02:00
parent 082ca624bb
commit 008015b227
10 changed files with 88 additions and 43 deletions

View File

@ -43,7 +43,7 @@ module.exports = function(grunt) {
},
karma: {
options: {
configFile: '<%= config.tests %>/config/karma.unit.js'
configFile: '<%= config.tests %>/config/karma.unit.js',
},
single: {
singleRun: true,
@ -58,11 +58,28 @@ module.exports = function(grunt) {
}
},
unit: {
browsers: TEST_BROWSERS
browsers: TEST_BROWSERS,
transform: [ 'brfs' ]
}
},
browserify: {
options: {
transform: [ 'brfs', function() {
// remove require('fs') from source code as it is
// optimized away (i.e. inlined) by brfs transform
var through = require('through');
var data = '';
return through(write, end);
function write (buf) { data += buf; }
function end () {
this.queue(data.replace(/require\('fs'\)/, '{}'));
this.queue(null);
}
}],
browserifyOptions: {
builtins: false,
commondir: false
@ -80,6 +97,7 @@ module.exports = function(grunt) {
},
options: {
alias: [
'node_modules/jquery:jquery',
'node_modules/lodash:lodash',
'node_modules/bpmn-moddle:bpmn/Model',
'<%= config.sources %>/main.js:bpmn',
@ -94,6 +112,7 @@ module.exports = function(grunt) {
},
options: {
alias: [
'node_modules/jquery:jquery',
'node_modules/lodash:lodash',
'node_modules/bpmn-moddle:bpmn/Model',
'<%= config.sources %>/main.js:bpmn',
@ -118,7 +137,7 @@ module.exports = function(grunt) {
watch: {
sources: {
files: [ '<%= config.sources %>/**/*.js' ],
tasks: [ 'build:lib:dev' ]
tasks: [ 'build:lib' ]
},
samples: {
files: [ '<%= config.samples %>/**/*.*' ],
@ -222,7 +241,7 @@ module.exports = function(grunt) {
});
grunt.registerTask('auto-build', [
'build:all:dev',
'build:all',
'connect:livereload',
'watch'
]);

View File

@ -89,19 +89,6 @@ a:link {
font-size: 2em;
}
.logo {
width: 80px;
height: 80px;
position: fixed;
bottom: 20px;
right: 20px;
opacity: 0.8;
background: no-repeat url('bpmn-io-icon.png');
}
@font-face {
font-family: 'FontAwesome';
src: url('fontawesome.woff') format('woff');

View File

@ -4,7 +4,7 @@
var canvas = $('#js-canvas');
var renderer = new BpmnJS(canvas.get(0));
var renderer = new BpmnJS({ container: canvas });
var newDiagramXML =
'<?xml version="1.0" encoding="UTF-8"?>' +
@ -149,4 +149,4 @@
renderer.on('commandStack.changed', exportArtifacts);
});
})(window.BpmnJS, window.jQuery);
})(window.BpmnJS, require('jquery'));

View File

@ -30,8 +30,6 @@
<div class="canvas" id="js-canvas"></div>
</div>
<div class="logo"></div>
<ul class="buttons">
<li>
<a id="js-download-diagram" href title="download BPMN diagram">
@ -45,8 +43,6 @@
</li>
</ul>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
var str = window.location.search;
var min = !/\?debug=/.test(str);

View File

@ -30,8 +30,6 @@
<div class="canvas" id="js-canvas"></div>
</div>
<div class="logo"></div>
<ul class="buttons">
<li>
<a id="js-download-diagram" href title="download">
@ -45,8 +43,6 @@
</li>
</ul>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
var str = window.location.search; var min = !/\?debug=/.test(str);
document.write('<script src="../../bpmn' + (min ? '.min': '') + '.js"></' + 'script>');

View File

@ -11,11 +11,11 @@ require('diagram-js/lib/features/dnd/Visuals');
require('diagram-js/lib/features/selection/Visuals');
function Modeler(container) {
Viewer.call(this, container);
function Modeler(options) {
Viewer.call(this, options);
}
Modeler.prototype = new Viewer();
Modeler.prototype = Object.create(Viewer.prototype);
Modeler.prototype.createDiagram = function() {

View File

@ -2,8 +2,14 @@ var Diagram = require('diagram-js');
var Importer = require('./import/Importer'),
BpmnModel = require('bpmn-moddle'),
failSafeAsync = require('./Util').failSafeAsync;
failSafeAsync = require('./Util').failSafeAsync,
fs = require('fs'),
$ = require('jquery');
function getSvgNode(diagram) {
var paper = diagram.get('canvas').getPaper();
return paper.node;
}
function initListeners(diagram, listeners) {
var events = diagram.get('eventBus');
@ -13,8 +19,28 @@ function initListeners(diagram, listeners) {
});
}
function Viewer(container) {
this.container = container;
function Viewer(options) {
var parent = options.container || $('body');
var container = this.container = $('<div></div>').attr({
width: options.width || '100%',
height: options.height || '100%',
position: 'absolute'
}).appendTo(parent).get(0);
var logoData = fs.readFileSync('resources/bpmnjs.png', 'base64');
var a = $('<a href="http://bpmn.io" target="_blank" draggable="false" />').css({
position: 'absolute',
bottom: 15,
right: 15,
'z-index': 100,
opacity: 0.8
});
var logo = $('<img/>').attr('src', 'data:image/png;base64,' + logoData).appendTo(a);
a.appendTo(container);
}
Viewer.prototype.importXML = function(xml, done) {
@ -68,36 +94,54 @@ Viewer.prototype.saveSVG = function(options, done) {
return done(new Error('no definitions loaded'));
}
var svgElement = this.diagram.get('canvas').getContext();
var svg = svgElement.node.innerHTML;
var svgNode = getSvgNode(this.diagram);
var svg = svgNode.innerHTML;
svg = SVG_HEADER + svg + SVG_FOOTER;
done(null, svg);
};
Viewer.prototype.get = function(name) {
if (!this.diagram) {
return null;
}
return this.diagram.get(name);
};
Viewer.prototype.importDefinitions = failSafeAsync(function(definitions, done) {
if (this.diagram) {
this.clear();
}
this.diagram = this.createDiagram();
var diagram = this.createDiagram();
initListeners(this.diagram, this.__listeners || []);
this.initDiagram(diagram);
this.definitions = definitions;
Importer.importBpmnDiagram(this.diagram, definitions, done);
Importer.importBpmnDiagram(diagram, definitions, done);
});
Viewer.prototype.initDiagram = function(diagram) {
this.diagram = diagram;
initListeners(diagram, this.__listeners || []);
};
Viewer.prototype.createDiagram = function() {
return new Diagram({ canvas: { container: this.container }});
};
Viewer.prototype.clear = function() {
this.container.innerHTML = '';
var diagram = this.diagram;
if (diagram) {
diagram.destroy();
}
};
Viewer.prototype.on = function(event, handler) {

View File

@ -55,7 +55,9 @@
"sax": "~0.6.0",
"brfs": "~1.0.0",
"lodash": "~2.4.0",
"didi": "~0.0.4"
"didi": "~0.0.4",
"jquery": "~2.1.0",
"through": "^2.3.4"
},
"dependencies": {
"bpmn-moddle": "~0.0.2",
@ -64,6 +66,7 @@
},
"peerDependencies": {
"lodash": "~2.4.0",
"didi": "~0.0.4"
"didi": "~0.0.4",
"jquery": "~2.1.0"
}
}

View File

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -15,7 +15,7 @@ module.exports = function(karma) {
'test/spec/browser/**/*Spec.js': [ 'browserify' ]
},
browsers: [ 'Chrome' ],
browsers: [ 'PhantomJS' ],
// fixing slow browserify build
browserNoActivityTimeout: 30000,