Merge branch 'dev' into page-manager

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "grapesjs",
-  "version": "0.16.42",
+  "version": "0.16.44",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -13949,9 +13949,9 @@
       "dev": true
     },
     "prismjs": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.22.0.tgz",
-      "integrity": "sha512-lLJ/Wt9yy0AiSYBf212kK3mM5L8ycwlyTlSxHBAneXLR0nzFMlZ5y7riFPF3E33zXOF2IH95xdY5jIyZbM9z/w==",
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.23.0.tgz",
+      "integrity": "sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==",
       "dev": true,
       "requires": {
         "clipboard": "^2.0.0"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.16.42",
+  "version": "0.16.44",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/block_manager/view/BlocksView.js

@@ -139,7 +139,7 @@ export default Backbone.View.extend({
       var catId = catModel.get('id');
       var catView = this.renderedCategories[catId];
       var categories = this.getCategoriesEl();
-      model.set('category', catModel);
+      model.set('category', catModel, { silent: true });
 
       if (!catView && categories) {
         catView = new CategoryView(
@@ -200,6 +200,7 @@ export default Backbone.View.extend({
     this.append(frag);
     const cls = `${this.blockContClass}s ${ppfx}one-bg ${ppfx}two-color`;
     this.$el.addClass(cls);
+    this.rendered = true;
     return this;
   }
 });

src/canvas/view/CanvasView.js

@@ -306,7 +306,7 @@ export default Backbone.View.extend({
     const scriptFn = model.getScriptString();
     const scriptFnStr = model.get('script-props')
       ? scriptFn
-      : `function(){${scriptFn};}`;
+      : `function(){\n${scriptFn}\n;}`;
     const scriptProps = JSON.stringify(model.__getScriptProps());
     script.innerHTML = `
       setTimeout(function() {

src/code_manager/model/CodeMirrorEditor.js

@@ -6,6 +6,8 @@ import 'codemirror/mode/css/css';
 import 'codemirror-formatting';
 
 export default Backbone.Model.extend({
+  CodeMirror,
+
   defaults: {
     input: '',
     label: '',

src/code_manager/model/JsGenerator.js

@@ -69,7 +69,7 @@ export default Backbone.Model.extend({
         code += `
           var items = document.querySelectorAll('${ids}');
           for (var i = 0, len = items.length; i < len; i++) {
-            (function(){${mapType.code}}.bind(items[i]))();
+            (function(){\n${mapType.code}\n}.bind(items[i]))();
           }`;
       }
     }

src/utils/Resizer.js

@@ -18,7 +18,7 @@ var defaultOpts = {
   step: 1,
 
   // Minimum dimension
-  minDim: 32,
+  minDim: 10,
 
   // Maximum dimension
   maxDim: '',
@@ -192,6 +192,14 @@ class Resizer {
     return this.el;
   }
 
+  /**
+   * Returns the parent of the focused element
+   * @return {HTMLElement}
+   */
+  getParentEl() {
+    return this.el.parentElement;
+  }
+
   /**
    * Returns documents
    */
@@ -247,10 +255,12 @@ class Resizer {
     e.preventDefault();
     e.stopPropagation();
     const el = this.el;
+    const parentEl = this.getParentEl();
     const resizer = this;
     const config = this.opts || {};
     var attrName = 'data-' + config.prefix + 'handler';
     var rect = this.getElementPos(el, { target: 'el' });
+    var parentRect = this.getElementPos(parentEl);
     this.handlerAttr = e.target.getAttribute(attrName);
     this.clickedHandler = e.target;
     this.startDim = {
@@ -269,6 +279,12 @@ class Resizer {
       x: e.clientX,
       y: e.clientY
     };
+    this.parentDim = {
+      t: parentRect.top,
+      l: parentRect.left,
+      w: parentRect.width,
+      h: parentRect.height
+    };
 
     // Listen events
     var doc = this.getDocumentEl();
@@ -441,8 +457,14 @@ class Resizer {
     const maxDim = opts.maxDim;
     const deltaX = data.delta.x;
     const deltaY = data.delta.y;
-    const startW = startDim.w;
-    const startH = startDim.h;
+    const parentW = this.parentDim.w;
+    const parentH = this.parentDim.h;
+    const unitWidth = this.opts.unitWidth;
+    const unitHeight = this.opts.unitHeight;
+    const startW =
+      unitWidth === '%' ? (startDim.w / 100) * parentW : startDim.w;
+    const startH =
+      unitHeight === '%' ? (startDim.h / 100) * parentH : startDim.h;
     var box = {
       t: 0,
       l: 0,
@@ -454,25 +476,37 @@ class Resizer {
 
     var attr = data.handlerAttr;
     if (~attr.indexOf('r')) {
-      value = normalizeFloat(startW + deltaX * step, step);
+      value =
+        unitWidth === '%'
+          ? normalizeFloat(((startW + deltaX * step) / parentW) * 100, 0.01)
+          : normalizeFloat(startW + deltaX * step, step);
       value = Math.max(minDim, value);
       maxDim && (value = Math.min(maxDim, value));
       box.w = value;
     }
     if (~attr.indexOf('b')) {
-      value = normalizeFloat(startH + deltaY * step, step);
+      value =
+        unitHeight === '%'
+          ? normalizeFloat(((startH + deltaY * step) / parentH) * 100, 0.01)
+          : normalizeFloat(startH + deltaY * step, step);
       value = Math.max(minDim, value);
       maxDim && (value = Math.min(maxDim, value));
       box.h = value;
     }
     if (~attr.indexOf('l')) {
-      value = normalizeFloat(startW - deltaX * step, step);
+      value =
+        unitWidth === '%'
+          ? normalizeFloat(((startW - deltaX * step) / parentW) * 100, 0.01)
+          : normalizeFloat(startW - deltaX * step, step);
       value = Math.max(minDim, value);
       maxDim && (value = Math.min(maxDim, value));
       box.w = value;
     }
     if (~attr.indexOf('t')) {
-      value = normalizeFloat(startH - deltaY * step, step);
+      value =
+        unitHeight === '%'
+          ? normalizeFloat(((startH - deltaY * step) / parentH) * 100, 0.01)
+          : normalizeFloat(startH - deltaY * step, step);
       value = Math.max(minDim, value);
       maxDim && (value = Math.min(maxDim, value));
       box.h = value;