diff --git a/example/app.css b/example/app.css index c0c0de5b..cde5562a 100644 --- a/example/app.css +++ b/example/app.css @@ -16,6 +16,7 @@ a:link { text-decoration: none; } + .content, .content > div { width: 100%; @@ -65,6 +66,23 @@ a:link { position: fixed; bottom: 20px; left: 20px; + + padding: 0; + margin: 0; + list-style: none; +} + +.buttons > li { + display: inline-block; + padding: 5px; +} + +.buttons a { + opacity: 0.3; +} + +.buttons a.active { + opacity: 1.0; } .logo { diff --git a/example/app.js b/example/app.js index 0d2a4147..2ebff033 100644 --- a/example/app.js +++ b/example/app.js @@ -1,14 +1,8 @@ -(function() { - - var Viewer = require('bpmn/Viewer'), - Modeler = require('bpmn/Modeler'), - Model = require('bpmn/Model'); +(function(BpmnJS) { var container = $('#js-drop-zone'); var canvas = $('#js-canvas'); - - var BpmnJS = canvas.is('.modeler') ? Modeler : Viewer; var renderer = new BpmnJS(canvas.get(0)); @@ -42,7 +36,7 @@ container.find('.error pre').text(err.message); - console.warn('[import] ' + err.message); + console.error(err); } else { container .removeClass('with-error') @@ -51,15 +45,15 @@ }); } + function saveSVG(done) { + renderer.saveSVG(done); + } + function saveDiagram(done) { - var definitions = renderer.definitions; - - if (definitions) { - Model.toXML(definitions, { format: true }, function(err, xml) { - done(err, xml); - }); - } + renderer.saveXML({ format: true }, function(err, xml) { + done(err, xml); + }); } ////// file drag / drop /////////////////////// @@ -115,23 +109,39 @@ }); var downloadLink = $('#js-download-diagram'); + var downloadSvgLink = $('#js-download-svg'); - setInterval(function() { - saveDiagram(function(err, xml) { + $('.buttons a').click(function(e) { + if (!$(this).is('.active')) { + e.preventDefault(); + e.stopPropagation(); + } + }); + + function setEncoded(link, name, data) { + var encodedData = encodeURIComponent(data); - if (!xml || err) { - return; - } - - var encoded = encodeURIComponent(xml); - - downloadLink.attr({ - 'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encoded, - 'download': 'diagram.bpmn' + if (data) { + link.addClass('active').attr({ + 'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData, + 'download': name }); + } else { + link.removeClass('active'); + } + } + + setInterval(function() { + + saveSVG(function(err, svg) { + setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg); + }); + + saveDiagram(function(err, xml) { + setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml); }); }, 5000); }); -})(); \ No newline at end of file +})(window.BpmnJS); \ No newline at end of file diff --git a/example/diagram-js.css b/example/diagram-js.css index cdc85c9d..f82c0248 100644 --- a/example/diagram-js.css +++ b/example/diagram-js.css @@ -50,7 +50,6 @@ .djs-hit { stroke-opacity: 0.0; stroke-width: 10px; - stroke: fuchsia; fill: none; } diff --git a/example/index.html b/example/index.html index 6c0f3d3c..8d30097d 100644 --- a/example/index.html +++ b/example/index.html @@ -28,19 +28,31 @@ -
+
-
- - - -
+ + + + \ No newline at end of file diff --git a/example/viewer.html b/example/viewer/index.html similarity index 62% rename from example/viewer.html rename to example/viewer/index.html index 577e186a..0c84f840 100644 --- a/example/viewer.html +++ b/example/viewer/index.html @@ -4,8 +4,8 @@ - - + + @@ -33,14 +33,25 @@ -
- - - -
+ - - + + + + \ No newline at end of file diff --git a/lib/Viewer.js b/lib/Viewer.js index 144a8076..84ce3871 100644 --- a/lib/Viewer.js +++ b/lib/Viewer.js @@ -1,6 +1,6 @@ var Diagram = require('diagram-js'); -var Importer = require('./Importer'), +var Importer = require('./import/Importer'), Model = require('./Model'); function Viewer(container) { diff --git a/lib/draw/BpmnRenderer.js b/lib/draw/BpmnRenderer.js index 9a2cb208..d4bac5e8 100644 --- a/lib/draw/BpmnRenderer.js +++ b/lib/draw/BpmnRenderer.js @@ -1,13 +1,16 @@ var bpmnModule = require('../di').defaultModule; require('diagram-js/src/core/Events'); +require('diagram-js/src/draw/Styles'); var DefaultRenderer = require('diagram-js/src/draw/Renderer'); var flattenPoints = DefaultRenderer.flattenPoints; -function BpmnRenderer(events) { +function BpmnRenderer(events, styles) { + + DefaultRenderer.apply(this, [ events, styles ]); var TASK_BORDER_RADIUS = 8; var INNER_OUTER_DIST = 3; @@ -68,11 +71,11 @@ function BpmnRenderer(events) { 'stroke-linecap': 'round', 'stroke-dasharray': '1,0' }) - .marker(0, 0, 10, 10, 10, 5) + .marker(0, 0, 10, 10, 11, 5) .attr({ markerUnits: 'strokeWidth', - markerWidth: 4, - markerHeight: 4, + markerWidth: 6, + markerHeight: 6, orient: 'auto', overflow: 'visible' })); @@ -136,10 +139,10 @@ function BpmnRenderer(events) { function drawLine(p, waypoints) { var points = flattenPoints(waypoints); - return p.polyline(points).attr({ + return p.polyline(points).attr(styles.style([ 'no-fill' ], { 'stroke-width': 2, 'stroke': 'Black' - }); + })); } function as(type) { @@ -258,7 +261,7 @@ function BpmnRenderer(events) { var h = handlers[type]; if (!h) { - return BpmnRenderer.prototype.drawShape(parent, data); + return DefaultRenderer.prototype.drawShape.apply(this, [ parent, data ]); } else { return h(parent, data); } @@ -270,7 +273,7 @@ function BpmnRenderer(events) { var h = handlers[type]; if (!h) { - return BpmnRenderer.prototype.drawConnection(parent, data); + return DefaultRenderer.prototype.drawConnection.apply(this, [ parent, data ]); } else { return h(parent, data); } @@ -288,9 +291,9 @@ function BpmnRenderer(events) { this.drawConnection = drawConnection; } -BpmnRenderer.prototype = new DefaultRenderer(); +BpmnRenderer.prototype = Object.create(DefaultRenderer.prototype); -bpmnModule.type('renderer', [ 'events', BpmnRenderer ]); +bpmnModule.type('renderer', [ 'events', 'styles', BpmnRenderer ]); module.exports = BpmnRenderer; \ No newline at end of file diff --git a/lib/BpmnTreeWalker.js b/lib/import/BpmnTreeWalker.js similarity index 100% rename from lib/BpmnTreeWalker.js rename to lib/import/BpmnTreeWalker.js diff --git a/lib/Importer.js b/lib/import/Importer.js similarity index 100% rename from lib/Importer.js rename to lib/import/Importer.js diff --git a/test/spec/node/import/BpmnTreeWalkerSpec.js b/test/spec/node/import/BpmnTreeWalkerSpec.js index 2294329c..3c2cb159 100644 --- a/test/spec/node/import/BpmnTreeWalkerSpec.js +++ b/test/spec/node/import/BpmnTreeWalkerSpec.js @@ -1,7 +1,7 @@ var _ = require('lodash'); var BpmnModel = require('../../../../lib/Model'), - BpmnTreeWalker = require('../../../../lib/BpmnTreeWalker'); + BpmnTreeWalker = require('../../../../lib/import/BpmnTreeWalker'); var Helper = require('../Helper'), Matchers = require('../../Matchers');