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:
parent
082ca624bb
commit
008015b227
27
Gruntfile.js
27
Gruntfile.js
|
@ -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'
|
||||
]);
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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'));
|
|
@ -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);
|
||||
|
|
|
@ -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>');
|
||||
|
|
|
@ -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() {
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
@ -15,7 +15,7 @@ module.exports = function(karma) {
|
|||
'test/spec/browser/**/*Spec.js': [ 'browserify' ]
|
||||
},
|
||||
|
||||
browsers: [ 'Chrome' ],
|
||||
browsers: [ 'PhantomJS' ],
|
||||
|
||||
// fixing slow browserify build
|
||||
browserNoActivityTimeout: 30000,
|
||||
|
|
Loading…
Reference in New Issue