Make SVG resizable

8 years ago · 4683a04397
3 changed files with 21 additions and 18 deletions
--- 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">
--- 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 };
  },

  /**
--- 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
      };
    }
  },