Refactor Resizer and Resize

Made Resizer more reusable by other components

index.html

@@ -1293,6 +1293,26 @@
       },
     });*/
 
+    var resizerBtm = {tl: 0, tc: 0, tr: 0, cl: 0, cr:0, bl:0, br: 0};
+  bm.add('column1', {
+    label: 'Col1',
+    content: {
+      'custom-name': 'Row grid',
+      classes: ['row'],
+      droppable: '[data-column]',
+      attributes: {'data-columns': 1},
+      resizable: resizerBtm,
+      components: [{
+        classes: ['cell'],
+        resizable: resizerBtm,
+        attributes: {'data-column': 1},
+        draggable: '[data-columns]',
+        'custom-name': 'Cell grid',
+      }]
+      //components: `<div data-column="1" class="cell" data-gjs-draggable=".row" data-gjs-custom-name="Cell"></div>`
+    },
+  });
+
     var domc = editor.DomComponents;
     var defaultType = domc.getType('default');
     var defaultModel = defaultType.model;

src/commands/view/Resize.js

@@ -7,18 +7,18 @@ module.exports = {
     var canvasResizer = this.canvasResizer;
     var options = opt.options || {};
     var canvasView = canvas.getCanvasView();
+    options.ratioDefault = 1;
+    options.appendTo = canvas.getResizerEl();
+    options.prefix = editor.getConfig().stylePrefix;
+    options.posFetcher = canvasView.getElementPos.bind(canvasView);
+    options.mousePosFetcher = canvas.getMouseRelativePos;
 
     // Create the resizer for the canvas if not yet created
     if(!canvasResizer || opt.forceNew) {
-      options.ratioDefault = 1;
-      options.appendTo = canvas.getResizerEl();
-      options.prefix = editor.getConfig().stylePrefix;
-      options.posFetcher = canvasView.getElementPos.bind(canvasView);
-      options.mousePosFetcher = canvas.getMouseRelativePos;
       this.canvasResizer = editor.Utils.Resizer.init(options);
       canvasResizer = this.canvasResizer;
     }
-
+    console.log('Resizer opts', options, el);
     canvasResizer.setOptions(options);
     canvasResizer.focus(el);
     return canvasResizer;

src/commands/view/SelectComponent.js

@@ -329,6 +329,7 @@ module.exports = {
     var resizeClass = pfx + 'resizing';
     var model = em.get('selectedComponent');
     var resizable = model.get('resizable');
+    var options = {};
     var modelToStyle;
 
     var toggleBodyClass = (method, e, opts) => {
@@ -340,11 +341,14 @@ module.exports = {
       }
     };
 
+
     if (editor && resizable) {
-      let options = {
+      console.log('Init resize on ', model, options);
-        onStart(e, opts) {
+      options = {
+        onStart: function(e, opts) {
           toggleBodyClass('addClass', e, opts);
           modelToStyle = em.get('StyleManager').getModelToStyle(model);
+          console.log(modelToStyle, 'model', model);
           showOffsets = 0;
         },
         // Update all positioned elements (eg. component toolbar)

src/utils/Resizer.js

@@ -46,17 +46,46 @@ class Resizer {
    * @param  {Object} options
    */
   constructor(opts = {}) {
-    var pfx = opts.prefix || '';
+    this.setOptions(opts);
-    var appendTo = opts.appendTo || document.body;
+    return this;
+  }
 
+  /**
+   * Setup options
+   * @param {Object} options
+   */
+  setOptions(options = {}) {
+    // Setup default options
     for (var name in defaults) {
-      if (!(name in opts))
+      if (!(name in options))
-        opts[name] = defaults[name];
+        options[name] = defaults[name];
+    }
+
+    this.opts = options;
+    this.setup();
+  }
+
+  /**
+   * Setup resizer
+   */
+  setup() {
+    const opts = this.opts;
+    const pfx = opts.prefix || '';
+    const appendTo = opts.appendTo || document.body;
+    let container;
+
+    // Create container if not yet exist
+    if (!this.container) {
+      container = document.createElement('div');
+      container.className = pfx + 'resizer-c';
+      appendTo.appendChild(container);
+      this.container = container;
     }
 
-    var container = document.createElement('div');
+    container = this.container;
-    container.className = pfx + 'resizer-c';
+    while (container.firstChild) {
-    appendTo.appendChild(container);
+      container.removeChild(container.firstChild);
+    }
 
     // Create handlers
     var handlers = {
@@ -70,14 +99,14 @@ class Resizer {
       br: opts.br ? createHandler('br', opts) : '',
     };
 
-    for (var n in handlers) {
+    for (let n in handlers) {
-      if(handlers[n])
+      const handler = handlers[n];
-        container.appendChild(handlers[n]);
+      if (handler) {
+        container.appendChild(handler);
+      }
     }
 
-    this.container = container;
     this.handlers = handlers;
-    this.opts = opts;
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleMouseDown = this.handleMouseDown.bind(this);
     this.move = this.move.bind(this);
@@ -88,22 +117,6 @@ class Resizer {
     this.onStart = opts.onStart;
     this.onMove = opts.onMove;
     this.onEnd = opts.onEnd;
-
-    return this;
-  }
-
-  /**
-   * Update options
-   * @param {Object} options
-   */
-  setOptions(options) {
-    var opts = options || {};
-
-    for (var opt in opts) {
-      if(opt in defaults) {
-        this[opt] = opts[opt];
-      }
-    }
   }
 
   /**