Make panels resizable

index.html

@@ -831,7 +831,7 @@
       noticeOnUnload: 0,
       container  : '#gjs2',
       height: '200px',
-      width: '500px',
+      width: '900px',
       fromElement: true,
       clearOnRender: 0,
 
@@ -1185,10 +1185,13 @@
       attributes: { title: 'Empty canvas' }
     }]);
 
-    pnm.getPanels().reset();
+    //pnm.getPanels().reset();
+    editor.render();
+
     pnm.addPanel({
       id: 'options',
       appendTo: '.panel-options-c',
+      resizable: true,
       buttons: [{
         id: 'sw-visibility',
         active: true,
@@ -1216,7 +1219,6 @@
       }],
     });
 
-    editor.render();
     </script>
   </body>
 </html>

src/commands/view/Resize.js

@@ -1,14 +1,15 @@
 module.exports = {
 
   run(editor, sender, opts) {
-    var el = (opts && opts.el) || '';
+    var opt = opts || {};
+    var el = opt.el || '';
     var canvas = editor.Canvas;
     var canvasResizer = this.canvasResizer;
-    var options = opts.options || {};
+    var options = opt.options || {};
+    var canvasView = canvas.getCanvasView();
 
     // Create the resizer for the canvas if not yet created
-    if(!canvasResizer) {
+    if(!canvasResizer || opt.forceNew) {
-      var canvasView = canvas.getCanvasView();
       options.ratioDefault = 1;
       options.appendTo = canvas.getResizerEl();
       options.prefix = editor.getConfig().stylePrefix;
@@ -20,6 +21,7 @@ module.exports = {
 
     canvasResizer.setOptions(options);
     canvasResizer.focus(el);
+    return canvasResizer;
   },
 
   stop() {

src/panels/config/config.js

@@ -17,7 +17,7 @@ module.exports = {
     id: 'commands',
     buttons: [{}],
   },{
-    id: 'options',
+    id: 'option',
     buttons: [{
       active: true,
       id: swv,

src/panels/view/PanelView.js

@@ -27,20 +27,68 @@ module.exports = Backbone.View.extend({
     this.$el.html(this.model.get('content'));
   },
 
+  initResize() {
+    const em = this.config.em;
+    const editor = em ? em.get('Editor') : '';
+    const resizable = this.model.get('resizable');
+
+    if (editor && resizable) {
+      var resz = resizable === true ? [1, 1, 1, 1] : resizable;
+      var resLen = resz.length;
+      var tc, cr, bc, cl = 0;
+
+      // Choose which sides of the panel are resizable
+      if (resLen == 2) {
+        tc = resz[0];
+        bc = resz[0];
+        cr = resz[1];
+        cl = resz[1];
+      } else if (resLen == 4) {
+        tc = resz[0];
+        cr = resz[1];
+        bc = resz[2];
+        cl = resz[3];
+      }
+
+      var resizer = editor.Utils.Resizer.init({
+        tc,
+        cr,
+        bc,
+        cl,
+        tl: 0,
+        tr: 0,
+        bl: 0,
+        br: 0,
+        appendTo: this.el,
+        prefix: editor.getConfig().stylePrefix,
+        posFetcher: (el) => {
+          var rect = el.getBoundingClientRect();
+          return {
+            left: 0, top: 0,
+            width: rect.width,
+            height: rect.height
+          };
+        }
+      });
+      resizer.blur = () => {};
+      resizer.focus(this.el);
+    }
+  },
 
   render() {
-    this.$el.attr('class', _.result(this, 'className'));
+    this.$el.attr('class', this.className);
 
     if(this.id)
       this.$el.attr('id', this.id);
 
-    if(this.buttons.length){
+    if (this.buttons.length) {
       var buttons  = new ButtonsView({
         collection: this.buttons,
         config: this.config,
       });
       this.$el.append(buttons.render().el);
     }
+
     this.$el.append(this.model.get('content'));
     return this;
   },

src/panels/view/PanelsView.js

@@ -34,9 +34,7 @@ module.exports = Backbone.View.extend({
    * */
   addToCollection(model, fragmentEl) {
     var fragment = fragmentEl || null;
-    var viewObject = PanelView;
+    var view = new PanelView({
-
-    var view = new viewObject({
       model,
       config: this.config,
     });
@@ -46,14 +44,15 @@ module.exports = Backbone.View.extend({
     if (appendTo) {
       var appendEl = document.querySelector(appendTo);
       appendEl.appendChild(rendered);
-      return rendered;
-    }
-
-    if (fragment) {
-      fragment.appendChild(rendered);
     } else {
-      this.$el.append(rendered);
+      if (fragment) {
+        fragment.appendChild(rendered);
+      } else {
+        this.$el.append(rendered);
+      }
     }
+    
+    view.initResize();
 
     return rendered;
   },

src/styles/scss/_gjs_canvas.scss

@@ -185,6 +185,31 @@ $hndlMargin: -5px;
   cursor: nwse-resize;
 }
 
+.#{$pn-prefix}panel {
+  .#{$app-prefix}resizer-h {
+    background-color: rgba(0, 0, 0, 0.2);
+    border: none;
+    opacity: 0;
+    transition: opacity 0.25s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .#{$app-prefix}resizer-h-tc,
+  .#{$app-prefix}resizer-h-bc {
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .#{$app-prefix}resizer-h-cr,
+  .#{$app-prefix}resizer-h-cl {
+    margin: auto 0;
+    height: 100%;
+  }
+}
+
 .#{$app-prefix}resizing .#{$app-prefix}highlighter,
 .#{$app-prefix}resizing .#{$app-prefix}badge {
   display: none !important;

src/utils/Resizer.js

@@ -38,14 +38,13 @@ var getBoundingRect = (el, win) => {
   };
 };
 
-module.exports = {
+class Resizer {
 
   /**
    * Init the Resizer with options
    * @param  {Object} options
    */
-  init(options) {
+  constructor(opts = {}) {
-    var opts = options || {};
     var pfx = opts.prefix || '';
     var appendTo = opts.appendTo || document.body;
 
@@ -90,7 +89,7 @@ module.exports = {
     this.onEnd = opts.onEnd;
 
     return this;
-  },
+  }
 
   /**
    * Update options
@@ -104,7 +103,7 @@ module.exports = {
         this[opt] = opts[opt];
       }
     }
-  },
+  }
 
   /**
    * Detects if the passed element is a resize handler
@@ -119,7 +118,7 @@ module.exports = {
     }
 
     return false;
-  },
+  }
 
   /**
    * Returns the focused element
@@ -127,7 +126,7 @@ module.exports = {
    */
   getFocusedEl() {
     return this.el;
-  },
+  }
 
   /**
    * Returns documents
@@ -137,7 +136,7 @@ module.exports = {
       this.$doc = $([this.el.ownerDocument, document]);
     }
     return this.$doc;
-  },
+  }
 
   /**
    * Return element position
@@ -147,7 +146,7 @@ module.exports = {
   getElementPos(el) {
     var posFetcher = this.posFetcher || '';
     return posFetcher ? posFetcher(el) : getBoundingRect(el);
-  },
+  }
 
   /**
    * Focus resizer on the element, attaches handlers to it
@@ -171,7 +170,7 @@ module.exports = {
     this.container.style.display = 'block';
 
 		this.getDocumentEl().on('mousedown', this.handleMouseDown);
-  },
+  }
 
   /**
    * Blur from element
@@ -183,7 +182,7 @@ module.exports = {
       this.getDocumentEl().off('mousedown', this.handleMouseDown);
       this.el = null;
     }
-  },
+  }
 
   /**
    * Start resizing
@@ -229,7 +228,7 @@ module.exports = {
     if(typeof this.onStart === 'function') {
       this.onStart(e, {docs: doc});
     }
-  },
+  }
 
   /**
    * While resizing
@@ -266,7 +265,7 @@ module.exports = {
     if (e.which === 0) {
       this.stop(e);
     }
-  },
+  }
 
   /**
    * Stop resizing
@@ -283,7 +282,7 @@ module.exports = {
     if(typeof this.onEnd === 'function') {
       this.onEnd(e, {docs: doc});
     }
-  },
+  }
 
   /**
    * Update rect
@@ -309,7 +308,7 @@ module.exports = {
     conStyle.top = rectEl.top + unit;
     conStyle.width = rectEl.width + unit;
     conStyle.height = rectEl.height + unit;
-  },
+  }
 
   /**
    * Handle ESC key
@@ -321,7 +320,7 @@ module.exports = {
       this.rectDim = this.startDim;
       this.stop(e);
     }
-  },
+  }
 
   /**
    * Handle mousedown to check if it's possible to start resizing
@@ -334,7 +333,7 @@ module.exports = {
     }else if(el !== this.el){
       this.blur();
     }
-  },
+  }
 
   /**
    * All positioning logic
@@ -386,6 +385,11 @@ module.exports = {
     }
 
     return box;
-  },
+  }
+}
 
+module.exports = {
+  init(opts) {
+    return new Resizer(opts);
+  }
 };