From f4ced82f05ee557428e58a29d07de7ec9486ddf0 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 22 Jun 2017 01:43:42 +0200
Subject: [PATCH] Add SVG component, closes #114

---
 src/dom_components/index.js                 |  5 +++++
 src/dom_components/model/ComponentSvg.js    | 18 ++++++++++++++++++
 src/dom_components/view/ComponentSvgView.js |  9 +++++++++
 src/utils/Sorter.js                         | 16 +++++++++++-----
 4 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 src/dom_components/model/ComponentSvg.js
 create mode 100644 src/dom_components/view/ComponentSvgView.js

diff --git a/src/dom_components/index.js b/src/dom_components/index.js
index 92e0a074f..1ced56ae5 100644
--- a/src/dom_components/index.js
+++ b/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'),
diff --git a/src/dom_components/model/ComponentSvg.js b/src/dom_components/model/ComponentSvg.js
new file mode 100644
index 000000000..0e5fc05d7
--- /dev/null
+++ b/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'};
+    }
+  },
+
+});
diff --git a/src/dom_components/view/ComponentSvgView.js b/src/dom_components/view/ComponentSvgView.js
new file mode 100644
index 000000000..91a40a8af
--- /dev/null
+++ b/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);
+  }
+
+});
diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js
index d6800e79a..85e628a47 100644
--- a/src/utils/Sorter.js
+++ b/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';