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;
+    const top = eo.top + frmTop - cvsOff.top;
-    var left = eo.left + frmLeft - cvsOff.left;
+    const left = eo.left + frmLeft - cvsOff.left;
-    return {
+    // clientHeight/clientWidth are for SVGs
-      top,
+    const height = el.offsetHeight || el.clientHeight;
-      left,
+    const width = el.offsetWidth || el.clientWidth;
-      // clientHeight/clientWidth are for SVGs
+    return { top, left, height, width };
      height: el.offsetHeight || el.clientHeight,
      width: el.offsetWidth || el.clientWidth,
    };
  },
  /**
--- 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,
        tagName: el.tagName,
        type: 'svg',
        resizable
      };
    }
  },