sartography
/
bpmn-js
mirror of https://github.com/sartography/bpmn-js.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(Viewer): export base layer as SVG only 

This commit fixes the SVG export of bpmn-js.

* exports the base layer only (no overlays, no markers)
* assigns correct view box to exported SVG

Related to #97
This commit is contained in:
Nico Rehwaldt 2014-08-17 19:08:52 +02:00
parent c4776f191c
commit 53dc82349e
1 changed files with 18 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
lib/Viewer.js
View File

@ -8,35 +8,6 @@ var Diagram = require('diagram-js'),
var Importer = require('./import/Importer');
function getSvgContents(diagram) {
var outerNode = diagram.get('canvas').getContainer();
var svg = outerNode.innerHTML;
svg = svg.replace(/^.*<svg[^>]*>|<\/svg>.*$/g, '')
.replace('<desc>Created with Snap</desc>', '')
.replace(/<g class="viewport"( transform="[^"]*")?/, '<g');
var svgDoc = svgDomCleanUp(svg);
return svgDoc.innerHTML;
}
/**
* pre-export clean up that need access to the DOM.
* <ul>
* <li>remove outer-bound-marker (a safari mobile work around)</li>
* </ul>
*/
function svgDomCleanUp(svg) {
var svgDoc = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgDoc.innerHTML = svg;
_.forEach(svgDoc.querySelectorAll('.outer-bound-marker'), function (e) {
e.remove();
});
return svgDoc;
}
function initListeners(diagram, listeners) {
var events = diagram.get('eventBus');
@ -160,27 +131,32 @@ Viewer.prototype.createModdle = function() {
return new BpmnModdle();
};
var SVG_HEADER =
'<?xml version="1.0" encoding="utf-8"?>\n' +
'<!-- created with bpmn-js / http://bpmn.io -->\n' +
'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">\n';
var SVG_FOOTER = '</svg>';
Viewer.prototype.saveSVG = function(options, done) {
if (!done) {
done = options;
options = {};
}
if (!this.definitions) {
return done(new Error('no definitions loaded'));
}
var canvas = this.get('canvas');
var svgContents = getSvgContents(this.diagram);
var contentNode = canvas.getLayer('base'),
defsNode = canvas._paper.select('defs');
var svg = SVG_HEADER + svgContents + SVG_FOOTER;
var contents = contentNode.innerSVG(),
defs = (defsNode && defsNode.outerSVG()) || '';
var bbox = contentNode.getBBox();
var svg =
'<?xml version="1.0" encoding="utf-8"?>\n' +
'<!-- created with bpmn-js / http://bpmn.io -->\n' +
'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ' +
'width="' + bbox.width + '" height="' + bbox.height + '" ' +
'viewBox="' + bbox.x + ' ' + bbox.y + ' ' + bbox.width + ' ' + bbox.height + '" version="1.1">' +
defs + contents +
'</svg>';
done(null, svg);
};