Make SVG resizable

GrapesJS · Nov 5, 2017 · 4683a04 · 4683a04
1 parent 351e911
commit 4683a04
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -5,14 +5,15 @@
     <title>GrapesJS</title>
     <link rel="stylesheet" href="dist/css/grapes.min.css">
     <script src="dist/grapes.min.js"></script>
+    <style>
+      body,
+      html {
+        height: 100%;
+        margin: 0;
+      }
+    </style>
   </head>
-  <style>
-    body,
-    html {
-      height: 100%;
-      margin: 0;
-    }
-  </style>
+
   <body>
     <div id="gjs" style="height:0px; overflow:hidden;">
       <div class="panel">

diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js
@@ -284,16 +284,13 @@ module.exports = Backbone.View.extend({
     var frmTop = opt.avoidFrameOffset ? 0 : frmOff.top;
     var frmLeft = opt.avoidFrameOffset ? 0 : frmOff.left;
 
-    var top = eo.top + frmTop - cvsOff.top;
-    var left = eo.left + frmLeft - cvsOff.left;
-    return {
-      top,
-      left,
+    const top = eo.top + frmTop - cvsOff.top;
+    const left = eo.left + frmLeft - cvsOff.left;
+    // clientHeight/clientWidth are for SVGs
+    const height = el.offsetHeight || el.clientHeight;
+    const width = el.offsetWidth || el.clientWidth;
 
-      // clientHeight/clientWidth are for SVGs
-      height: el.offsetHeight || el.clientHeight,
-      width: el.offsetWidth || el.clientWidth,
-    };
+    return { top, left, height, width };
   },
 
   /**

diff --git a/src/dom_components/model/ComponentSvg.js b/src/dom_components/model/ComponentSvg.js
@@ -17,10 +17,15 @@ module.exports = 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 {
-        // Some SVG elements require uppercase letters (eg. <linearGradient>)
-        tagName: el.tagName,
+        tagName,
         type: 'svg',
+        resizable
       };
     }
   },