Add new component to handle better inner SVG elements

src/dom_components/index.js

@@ -59,6 +59,7 @@ import ComponentImageView from './view/ComponentImageView';
 import ComponentScript from './model/ComponentScript';
 import ComponentScriptView from './view/ComponentScriptView';
 import ComponentSvg from './model/ComponentSvg';
+import ComponentSvgIn from './model/ComponentSvgIn';
 import ComponentSvgView from './view/ComponentSvgView';
 import ComponentComment from './model/ComponentComment';
 import ComponentCommentView from './view/ComponentCommentView';
@@ -135,6 +136,11 @@ export default () => {
       model: ComponentScript,
       view: ComponentScriptView
     },
+    {
+      id: 'svg-in',
+      model: ComponentSvgIn,
+      view: ComponentSvgView
+    },
     {
       id: 'svg',
       model: ComponentSvg,

src/dom_components/model/ComponentSvg.js

@@ -4,6 +4,7 @@ export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults,
+      resizable: { ratioDefault: 1 },
       highlightable: 0
     },
 
@@ -17,15 +18,9 @@ export default Component.extend(
   {
     isComponent(el) {
       if (SVGElement && el instanceof SVGElement) {
-        // Some SVG elements require uppercase letters (eg. <linearGradient>)
-        const tagName = el.tagName;
-        // Make the root resizable
-        const resizable = tagName == 'svg' ? true : false;
-
         return {
-          tagName,
-          type: 'svg',
-          resizable
+          tagName: el.tagName,
+          type: 'svg'
         };
       }
     }

src/dom_components/model/ComponentSvgIn.js

@@ -0,0 +1,26 @@
+import Component from './ComponentSvg';
+
+/**
+ * Component for inner SVG elements
+ */
+export default Component.extend(
+  {
+    defaults: {
+      ...Component.prototype.defaults,
+      selectable: false,
+      hoverable: false,
+      layerable: false
+    }
+  },
+  {
+    isComponent(el) {
+      if (Component.isComponent(el) && el.tagName.toLowerCase() !== 'svg') {
+        console.log('SVG in', el);
+        return {
+          tagName: el.tagName,
+          type: 'svg-in'
+        };
+      }
+    }
+  }
+);