Add SVG component, closes #114

src/dom_components/index.js

@@ -81,6 +81,11 @@ module.exports = () => {
       model: require('./model/ComponentScript'),
       view: require('./view/ComponentScriptView'),
     },
+    {
+      id: 'svg',
+      model: require('./model/ComponentSvg'),
+      view: require('./view/ComponentSvgView'),
+    },
     {
       id: 'textnode',
       model: require('./model/ComponentTextNode'),

src/dom_components/model/ComponentSvg.js

@@ -0,0 +1,18 @@
+var Component = require('./Component');
+
+module.exports = Component.extend({
+
+  getName() {
+    let name = this.get('tagName');
+    return name.charAt(0).toUpperCase() + name.slice(1);
+  },
+
+}, {
+
+  isComponent(el) {
+    if (el instanceof SVGElement) {
+      return {type: 'svg'};
+    }
+  },
+
+});

src/dom_components/view/ComponentSvgView.js

@@ -0,0 +1,9 @@
+const ComponentView = require('./ComponentView');
+
+module.exports = ComponentView.extend({
+
+  _createElement: function(tagName) {
+    return document.createElementNS('http://www.w3.org/2000/svg', tagName);
+  }
+
+});

src/utils/Sorter.js

@@ -231,8 +231,9 @@ module.exports = Backbone.View.extend({
       this.getContainerEl().appendChild(this.plh);
     }
 
-    if(this.eV) {
-      this.eV.className += ' ' + this.freezeClass;
+    if(trg) {
+      var className = trg.getAttribute('class');
+      trg.setAttribute('class', `${className} ${this.freezeClass}`);
       this.$document.on('mouseup', this.endMove);
     }
 
@@ -623,10 +624,15 @@ module.exports = Backbone.View.extend({
     this.$document.off('keydown', this.rollback);
     this.plh.style.display = 'none';
     var clsReg = new RegExp('(?:^|\\s)'+this.freezeClass+'(?!\\S)', 'gi');
-    if(this.eV)
-      this.eV.className = this.eV.className.replace(clsReg, '');
+    let trg = this.eV;
+
+    if (trg) {
+      var className = (trg.getAttribute('class')+'').replace(clsReg, '');
+      trg.setAttribute('class', className);
+    }
+
     if(this.moved)
-      created = this.move(this.target, this.eV, this.lastPos);
+      created = this.move(this.target, trg, this.lastPos);
     if(this.plh)
       this.plh.style.display = 'none';