refactor(import+examples): reorganize files

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 {

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);
   });
 
-})();
+})(window.BpmnJS);

example/diagram-js.css

@@ -50,7 +50,6 @@
 .djs-hit {
   stroke-opacity: 0.0;
   stroke-width: 10px;
-  stroke: fuchsia;
   fill: none;
 }
 

example/index.html

@@ -28,19 +28,31 @@
       </div>
     </div>
 
-    <div class="canvas modeler" id="js-canvas"></div>
+    <div class="canvas" id="js-canvas"></div>
   </div>
 
   <div class="logo"></div>
 
-  <div class="buttons">
-    <a id="js-download-diagram" href>
-      <i class="fa fa-download fa-3"></i>
-    </a>
-  </div>
+  <ul class="buttons">
+    <li>
+      <a id="js-download-diagram" href title="download">
+        <i class="fa fa-download fa-3"></i>
+      </a>
+    </li>
+    <li>
+      <a id="js-download-svg" href title="download as svg">
+        <i class="fa fa-code fa-3"></i>
+      </a>
+    </li>
+  </ul>
 
   <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
 
   <script src="../bpmn.js"></script>
+
+  <script>
+    var BpmnJS = require('bpmn/Modeler');
+  </script>
+
   <script src="app.js"></script>
 </html>

example/viewer/index.html

@@ -4,8 +4,8 @@
 
   <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 
-  <link rel="stylesheet" href="app.css" />
-  <link rel="stylesheet" href="diagram-js.css" />
+  <link rel="stylesheet" href="../app.css" />
+  <link rel="stylesheet" href="../diagram-js.css" />
   <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" />
 </head>
 <body>
@@ -33,14 +33,25 @@
 
   <div class="logo"></div>
 
-  <div class="buttons">
-    <a id="js-download-diagram" href>
-      <i class="fa fa-download fa-3"></i>
-    </a>
-  </div>
+  <ul class="buttons">
+    <li>
+      <a id="js-download-diagram" href title="download">
+        <i class="fa fa-download fa-3"></i>
+      </a>
+    </li>
+    <li>
+      <a id="js-download-svg" href title="download as svg">
+        <i class="fa fa-code fa-3"></i>
+      </a>
+    </li>
+  </ul>
 
   <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
 
-  <script src="../bpmn.js"></script>
-  <script src="app.js"></script>
+  <script src="../../bpmn.js"></script>
+
+  <script>
+    var BpmnJS = require('bpmn/Viewer');
+  </script>
+  <script src="../app.js"></script>
 </html>

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) {

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;

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');