feat(graphics): remove snapsvg

Related to bpmn-io/diagram-js#50

lib/Viewer.js

@@ -15,6 +15,8 @@ var domify = require('min-dom/lib/domify'),
     domQuery = require('min-dom/lib/query'),
     domRemove = require('min-dom/lib/remove');
 
+var innerSVG = require('tiny-svg/lib/innerSVG');
+
 var Diagram = require('diagram-js'),
     BpmnModdle = require('bpmn-moddle');
 
@@ -230,10 +232,10 @@ Viewer.prototype.saveSVG = function(options, done) {
   var canvas = this.get('canvas');
 
   var contentNode = canvas.getDefaultLayer(),
-      defsNode = canvas._svg.select('defs');
+      defsNode = domQuery('defs', canvas._svg);
 
-  var contents = contentNode.innerSVG(),
+  var contents = innerSVG(contentNode),
-      defs = (defsNode && defsNode.outerSVG()) || '';
+      defs = (defsNode && defsNode.outerHTML) || '';
 
   var bbox = contentNode.getBBox();
 
@@ -472,4 +474,4 @@ function addProjectLogo(container) {
   });
 }
 
-/* </project-logo> */
+/* </project-logo> */

lib/draw/PathMap.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var Snap = require('diagram-js/vendor/snapsvg');
-
 /**
  * Map containing SVG paths needed by BpmnRenderer.
  */
@@ -438,7 +436,7 @@ function PathMap() {
     }
 
     //Apply value to raw path
-    var path = Snap.format(
+    var path = format(
       rawPath.d, {
         mx: mx,
         my: my,
@@ -450,3 +448,31 @@ function PathMap() {
 }
 
 module.exports = PathMap;
+
+////////// helpers //////////
+
+// copied from https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js
+var tokenRegex = /\{([^\}]+)\}/g,
+    objNotationRegex = /(?:(?:^|\.)(.+?)(?=\[|\.|$|\()|\[('|")(.+?)\2\])(\(\))?/g; // matches .xxxxx or ["xxxxx"] to run over object properties
+
+function replacer(all, key, obj) {
+  var res = obj;
+  key.replace(objNotationRegex, function(all, name, quote, quotedName, isFunc) {
+    name = name || quotedName;
+    if (res) {
+      if (name in res) {
+        res = res[name];
+      }
+      typeof res == 'function' && isFunc && (res = res());
+    }
+  });
+  res = (res == null || res == obj ? all : res) + '';
+
+  return res;
+}
+
+function format(str, obj) {
+  return String(str).replace(tokenRegex, function(all, key) {
+    return replacer(all, key, obj);
+  });
+}

lib/features/replace-preview/BpmnReplacePreview.js

@@ -7,6 +7,10 @@ var inherits = require('inherits');
 var assign = require('lodash/object/assign'),
     forEach = require('lodash/collection/forEach');
 
+var domQuery = require('min-dom/lib/query');
+
+var svgAttr = require('tiny-svg/lib/attr');
+
 var LOW_PRIORITY = 250;
 
 function BpmnReplacePreview(eventBus, elementRegistry, elementFactory, canvas, previewSupport) {
@@ -45,10 +49,10 @@ function BpmnReplacePreview(eventBus, elementRegistry, elementFactory, canvas, p
       canvas.addShape(tempShape, element.parent);
 
       // select the original SVG element related to the element and hide it
-      var gfx = context.dragGroup.select('[data-element-id=' + element.id + ']');
+      var gfx = domQuery('[data-element-id=' + element.id + ']', context.dragGroup);
 
       if (gfx) {
-        gfx.attr({ display: 'none' });
+        svgAttr(gfx, { display: 'none' });
       }
 
       // clone the gfx of the temporary shape and add it to the drag group
@@ -71,10 +75,10 @@ function BpmnReplacePreview(eventBus, elementRegistry, elementFactory, canvas, p
 
     forEach(visualReplacements, function(dragger, id) {
 
-      var originalGfx = context.dragGroup.select('[data-element-id=' + id + ']');
+      var originalGfx = domQuery('[data-element-id=' + id + ']', context.dragGroup);
 
       if (originalGfx) {
-        originalGfx.attr({ display: 'inline' });
+        svgAttr(originalGfx, { display: 'inline' });
       }
 
       dragger.remove();

package.json

@@ -61,7 +61,7 @@
     "load-grunt-tasks": "^0.3.0",
     "mocha": "^2.2.5",
     "mocha-test-container-support": "0.2.0",
-    "phantomjs": "^1.9.19",
+    "phantomjs": "^2.1.7",
     "sinon": "~1.14.1",
     "sinon-chai": "~2.7.0",
     "source-map-concat": "^1.0.0",
@@ -79,6 +79,7 @@
     "inherits": "^2.0.1",
     "lodash": "^3.0.1",
     "min-dom": "^0.2.0",
-    "object-refs": "^0.1.1"
+    "object-refs": "^0.1.1",
+    "tiny-svg": "0.0.1"
   }
 }

test/integration/custom-elements/CustomRenderer.js

@@ -6,6 +6,10 @@ var BaseRenderer = require('diagram-js/lib/draw/BaseRenderer');
 
 var componentsToPath = require('diagram-js/lib/util/RenderUtil').componentsToPath;
 
+var svgAppend = require('tiny-svg/lib/append'),
+    svgAttr = require('tiny-svg/lib/attr'),
+    svgCreate = require('tiny-svg/lib/create');
+
 
 function CustomRenderer(eventBus, styles) {
 
@@ -18,19 +22,23 @@ function CustomRenderer(eventBus, styles) {
   var computeStyle = styles.computeStyle;
 
   this.handlers = {
-    'custom:triangle': function(p, element) {
+    'custom:triangle': function(parentGfx, element) {
-      return self.drawTriangle(p, element.width);
+      return self.drawTriangle(parentGfx, element.width);
     },
-    'custom:circle': function(p, element, attrs) {
+    'custom:circle': function(parentGfx, element, attrs) {
-      return self.drawCircle(p, element.width, element.height,  attrs);
+      return self.drawCircle(parentGfx, element.width, element.height,  attrs);
     }
   };
 
-  this.drawTriangle = function(p, side, attrs) {
+  this.drawTriangle = function(parentGfx, side, attrs) {
     var halfSide = side / 2,
         points;
 
-    points = [ halfSide, 0, side, side, 0, side ];
+    points = [{ x: halfSide, y: 0 }, { x: side, y: side }, { x: 0, y: side }];
+
+    var pointsString = points.map(function(point) {
+      return point.x + ',' + point.y;
+    }).join(' ');
 
     attrs = computeStyle(attrs, {
       stroke: '#3CAA82',
@@ -38,7 +46,13 @@ function CustomRenderer(eventBus, styles) {
       fill: '#3CAA82'
     });
 
-    return p.polygon(points).attr(attrs);
+    var polygon = svgCreate('polygon');
+    svgAttr(polygon, { points: pointsString });
+    svgAttr(polygon, attrs);
+
+    svgAppend(parentGfx, polygon);
+
+    return polygon;
   };
 
   this.getTrianglePath = function(element) {
@@ -57,7 +71,7 @@ function CustomRenderer(eventBus, styles) {
     return componentsToPath(trianglePath);
   };
 
-  this.drawCircle = function(p, width, height, attrs) {
+  this.drawCircle = function(parentGfx, width, height, attrs) {
     var cx = width / 2,
         cy = height / 2;
 
@@ -67,7 +81,17 @@ function CustomRenderer(eventBus, styles) {
       fill: 'white'
     });
 
-    return p.circle(cx, cy, Math.round((width + height) / 4)).attr(attrs);
+    var circle = svgCreate('circle');
+    svgAttr(circle, {
+      cx: cx,
+      cy: cy,
+      r: Math.round((width + height) / 4)
+    });
+    svgAttr(circle, attrs);
+
+    svgAppend(parentGfx, circle);
+
+    return circle;
   };
 
   this.getCirclePath = function(shape) {

test/spec/ModelerSpec.js

@@ -40,7 +40,7 @@ describe('Modeler', function() {
   });
 
 
-  it.skip('should import complex', function(done) {
+  it.only('should import complex', function(done) {
     var xml = require('../fixtures/bpmn/complex.bpmn');
     createModeler(xml, done);
   });

test/spec/draw/BpmnRendererSpec.js

@@ -5,6 +5,8 @@ require('../../TestHelper');
 var coreModule = require('../../../lib/core'),
     rendererModule = require('../../../lib/draw');
 
+var domQuery = require('min-dom/lib/query');
+
 /* global bootstrapViewer, bootstrapModeler, inject */
 
 
@@ -174,7 +176,7 @@ describe('draw - bpmn renderer', function() {
         var callActivityGfx = elementRegistry.getGraphics('CallActivity');
 
         // make sure the + marker is shown
-        expect(callActivityGfx.select('[data-marker=sub-process]')).to.exist;
+        expect(domQuery('[data-marker=sub-process]', callActivityGfx)).to.exist;
 
         done();
       })();
@@ -197,7 +199,7 @@ describe('draw - bpmn renderer', function() {
         var callActivityGfx = elementRegistry.getGraphics('AdHocSubProcess');
 
         // make sure the + marker is shown
-        expect(callActivityGfx.select('[data-marker=adhoc]')).to.exist;
+        expect(domQuery('[data-marker=adhoc]', callActivityGfx)).to.exist;
 
         done();
       })();

test/spec/features/modeling/LabelBoundsSpec.js

@@ -6,6 +6,9 @@ var Modeler = require('../../../../lib/Modeler');
 
 var TestContainer = require('mocha-test-container-support');
 
+var domQuery = require('min-dom/lib/query');
+
+
 describe('label bounds', function() {
 
   function createModeler(xml, done) {
@@ -198,7 +201,7 @@ describe('label bounds', function() {
           // given
           var shape = elementRegistry.get('StartEvent_1'),
               gfx = elementRegistry.getGraphics('StartEvent_1_label'),
-              hit = gfx.select('.djs-hit');
+              hit = domQuery('.djs-hit', gfx);
 
           var interactionEventSpy = sinon.spy(hit, 'attr'),
               rendererSpy = sinon.spy(bpmnRenderer, 'drawShape');

test/spec/features/modeling/behavior/ReplaceElementBehaviourSpec.js

@@ -12,6 +12,8 @@ var replacePreviewModule = require('../../../../../lib/features/replace-preview'
 var is = require('../../../../../lib/util/ModelUtil').is,
     canvasEvent = require('../../../../util/MockEvents').createCanvasEvent;
 
+var domQuery = require('min-dom/lib/query');
+
 
 describe('features/modeling - move start event behavior', function() {
 
@@ -437,7 +439,7 @@ describe('features/modeling - move start event behavior', function() {
 
       // then
       var gfx = elementRegistry.getGraphics(subProcess);
-      var outline = gfx.select('.djs-outline');
+      var outline = domQuery('.djs-outline', gfx);
 
       expect(outline.getBBox().width).to.equal(gfx.getBBox().width);
       expect(outline.getBBox().height).to.equal(gfx.getBBox().height);

test/spec/features/replace-preview/BpmnReplacePreviewSpec.js

@@ -12,6 +12,10 @@ var canvasEvent = require('../../../util/MockEvents').createCanvasEvent;
 
 var assign = require('lodash/object/assign');
 
+var svgAttr = require('tiny-svg/lib/attr'),
+    svgClone = require('tiny-svg/lib/clone'),
+    innerSVG = require('tiny-svg/lib/innerSVG');
+
 
 describe('features/replace-preview', function() {
 
@@ -46,7 +50,7 @@ describe('features/replace-preview', function() {
 
       canvas.addShape(tempShape, rootElement);
 
-      var gfx = elementRegistry.getGraphics(tempShape).clone();
+      var gfx = svgClone(elementRegistry.getGraphics(tempShape));
 
       canvas.removeShape(tempShape);
 
@@ -77,9 +81,9 @@ describe('features/replace-preview', function() {
     // then
     var dragGroup = dragging.context().data.context.dragGroup;
 
-    dragGroup[0].attr('display', 'inline');
+    svgAttr(dragGroup.childNodes[0], 'display', 'inline');
 
-    expect(dragGroup[0].getBBox()).to.eql(dragGroup[1].getBBox());
+    expect(dragGroup.childNodes[0].getBBox()).to.eql(dragGroup.childNodes[1].getBBox());
   }));
 
 
@@ -124,7 +128,7 @@ describe('features/replace-preview', function() {
     // then
     var dragGroup = dragging.context().data.context.dragGroup;
 
-    expect(dragGroup[0].attr('display')).to.equal('none');
+    expect(svgAttr(dragGroup.childNodes[0], 'display')).to.equal('none');
   }));
 
 
@@ -147,7 +151,7 @@ describe('features/replace-preview', function() {
         eventDefinitionType: 'bpmn:MessageEventDefinition'
       });
 
-      expect(context.dragGroup[0].innerSVG()).to.equal(startEventGfx.innerSVG());
+      expect(innerSVG(context.dragGroup.childNodes[0])).to.equal(innerSVG(startEventGfx));
     })
   );
 
@@ -164,7 +168,7 @@ describe('features/replace-preview', function() {
       // check if the visual replacement is a blank interrupting start event
       var startEventGfx = getGfx({ type: 'bpmn:StartEvent' });
 
-      expect(context.dragGroup[1].innerSVG()).to.equal(startEventGfx.innerSVG());
+      expect(innerSVG(context.dragGroup.childNodes[1])).to.equal(innerSVG(startEventGfx));
     })
   );
 
@@ -188,7 +192,7 @@ describe('features/replace-preview', function() {
         eventDefinitionType: 'bpmn:MessageEventDefinition'
       });
 
-      expect(context.dragGroup[0].innerSVG()).to.equal(startEventGfx.innerSVG());
+      expect(innerSVG(context.dragGroup.childNodes[0])).to.equal(innerSVG(startEventGfx));
     })
   );
 
@@ -208,7 +212,7 @@ describe('features/replace-preview', function() {
       // check if the visual representation remains a non interrupting message start event
       var startEventGfx = getGfx({ type: 'bpmn:StartEvent' });
 
-      expect(context.dragGroup[1].innerSVG()).to.equal(startEventGfx.innerSVG());
+      expect(innerSVG(context.dragGroup.childNodes[1])).to.equal(innerSVG(startEventGfx));
     })
   );
 
@@ -231,9 +235,9 @@ describe('features/replace-preview', function() {
       // check if the visual replacements are blank interrupting start events
       var startEventGfx = getGfx({ type: 'bpmn:StartEvent' });
 
-      expect(context.dragGroup[1].innerSVG()).to.equal(startEventGfx.innerSVG());
+      expect(innerSVG(context.dragGroup.childNodes[1])).to.equal(innerSVG(startEventGfx));
-      expect(context.dragGroup[3].innerSVG()).to.equal(startEventGfx.innerSVG());
+      expect(innerSVG(context.dragGroup.childNodes[3])).to.equal(innerSVG(startEventGfx));
-      expect(context.dragGroup[4].innerSVG()).to.equal(startEventGfx.innerSVG());
+      expect(innerSVG(context.dragGroup.childNodes[4])).to.equal(innerSVG(startEventGfx));
     })
   );
 
@@ -268,9 +272,9 @@ describe('features/replace-preview', function() {
       var context = dragging.context().data.context;
 
       // then
-      expect(context.dragGroup[0].innerSVG()).to.equal(messageStartEventGfx.innerSVG());
+      expect(innerSVG(context.dragGroup.childNodes[0])).to.equal(innerSVG(messageStartEventGfx));
-      expect(context.dragGroup[1].innerSVG()).to.equal(startEventGfx.innerSVG());
+      expect(innerSVG(context.dragGroup.childNodes[1])).to.equal(innerSVG(startEventGfx));
-      expect(context.dragGroup[2].innerSVG()).to.equal(timerStartEventGfx.innerSVG());
+      expect(innerSVG(context.dragGroup.childNodes[2])).to.equal(innerSVG(timerStartEventGfx));
     })
   );
 

test/spec/import/elements/LabelSpec.js

@@ -50,13 +50,13 @@ describe('import - labels', function() {
           // then
           expect(endEvent.label.x).to.be.within(236, 237);
           expect(endEvent.label.y).to.be.within(256, 256);
-          expect(endEvent.label.width).to.be.within(68, 69);
+          expect(endEvent.label.width).to.be.within(67, 69);
           expect(endEvent.label.height).to.be.within(23, 30);
 
           expect(sequenceFlow.label.x).to.be.within(441, 442);
           expect(sequenceFlow.label.y).to.be.within(316, 317);
           expect(sequenceFlow.label.width).to.be.within(79, 82);
-          expect(sequenceFlow.label.height).to.be.within(11, 15);
+          expect(sequenceFlow.label.height).to.be.within(12, 15);
 
           done();
         })();
@@ -72,4 +72,4 @@ describe('import - labels', function() {
 
   });
 
-});
+});