Merge pull request #3220 from kuhelbeher/fix/percentage_resize Closes #3186

Change units on resizing to pixels

src/utils/Resizer.js

@@ -18,7 +18,7 @@ var defaultOpts = {
   step: 1,
 
   // Minimum dimension
-  minDim: 32,
+  minDim: 10,
 
   // Maximum dimension
   maxDim: '',
@@ -80,6 +80,7 @@ var createHandler = (name, opts) => {
 var getBoundingRect = (el, win) => {
   var w = win || window;
   var rect = el.getBoundingClientRect();
+  console.log('here');
   return {
     left: rect.left + w.pageXOffset,
     top: rect.top + w.pageYOffset,
@@ -192,6 +193,14 @@ class Resizer {
     return this.el;
   }
 
+  /**
+   * Returns the parent of the focused element
+   * @return {HTMLElement}
+   */
+  getParentEl() {
+    return this.el.parentElement;
+  }
+
   /**
    * Returns documents
    */
@@ -247,10 +256,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 +280,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 +458,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 =
+      unitWidth === '%' ? (startDim.h / 100) * parentH : startDim.h;
     var box = {
       t: 0,
       l: 0,
@@ -454,25 +477,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;