improve(viewer): clean up SVG before export

Remove outer-marker-bound <rect> from export.

close bpmn-io/bpmn-js#97

lib/Viewer.js

@@ -10,13 +10,33 @@ var Importer = require('./import/Importer');
 
 function getSvgContents(diagram) {
   var outerNode = diagram.get('canvas').getContainer();
-
   var svg = outerNode.innerHTML;
-  return svg.replace(/^.*<svg[^>]*>|<\/svg>.*$/g, '')
-            .replace('<desc>Created with Snap</desc>', '')
-            .replace(/<g class="viewport"( transform="[^"]*")?/, '<g');
+
+  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');
 

test/spec/ViewerSpec.js

@@ -273,6 +273,54 @@ describe('viewer', function() {
       });
     });
 
+    it('should remove outer-makers on export', function(done) {
+
+      // given
+      var xml = fs.readFileSync('test/fixtures/bpmn/complex.bpmn', 'utf8');
+      function appendTestRect(svgDoc) {
+        var rect = document.createElementNS(svgDoc.namespaceURI, 'rect');
+        rect.setAttribute('class', 'outer-bound-marker');
+        rect.setAttribute('width', 500);
+        rect.setAttribute('height', 500);
+        rect.setAttribute('x', 10000);
+        rect.setAttribute('y', 10000);
+        svgDoc.appendChild(rect);
+      }
+
+      createViewer(xml, function(err, viewer) {
+
+        if (err) {
+          return done(err);
+        }
+
+        var svgDoc = viewer.container.childNodes[1].childNodes[1];
+
+
+
+        appendTestRect(svgDoc);
+        appendTestRect(svgDoc);
+
+        expect(svgDoc.querySelectorAll('.outer-bound-marker')).toBeDefined();
+
+        // when
+        viewer.saveSVG(function(err, svg) {
+
+          if (err) {
+            return done(err);
+          }
+
+          var svgDoc = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+          svgDoc.innerHTML = svg;
+
+          // then
+          expect(isValid(svg)).toBe(true);
+          expect(svgDoc.querySelector('.outer-bound-marker')).toBeNull();
+
+          done();
+        });
+      });
+    });
+
   });
 
   describe('configuration', function() {