From 2c5f519ff83fffcb3854c939a83411b57b18f096 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 8 Feb 2018 00:55:42 +0100
Subject: [PATCH] Update, in panels, how dimensions are fetched from Resizer

---
 src/panels/view/PanelView.js | 21 +++++++++++++++++----
 src/utils/Resizer.js         | 12 +++++++-----
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/panels/view/PanelView.js b/src/panels/view/PanelView.js
index fd80a2f9f..6c1d5ff92 100644
--- a/src/panels/view/PanelView.js
+++ b/src/panels/view/PanelView.js
@@ -69,13 +69,26 @@ module.exports = Backbone.View.extend({
         br: 0,
         appendTo: this.el,
         prefix: editor.getConfig().stylePrefix,
-        posFetcher: el => {
-          var rect = el.getBoundingClientRect();
+        posFetcher: (el, { target }) => {
+          const style = el.style;
+          const config = resizer.getConfig();
+          const keyWidth = config.keyWidth;
+          const keyHeight = config.keyHeight;
+          const rect = el.getBoundingClientRect();
+          const forContainer = target == 'container';
+          const styleWidth = style[keyWidth];
+          const styleHeight = style[keyHeight];
+          const width =
+            styleWidth && !forContainer ? parseFloat(styleWidth) : rect.width;
+          const height =
+            styleHeight && !forContainer
+              ? parseFloat(styleHeight)
+              : rect.height;
           return {
             left: 0,
             top: 0,
-            width: rect.width,
-            height: rect.height
+            width,
+            height
           };
         },
         ...resizable
diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
index e3ce41ab8..a19af543c 100644
--- a/src/utils/Resizer.js
+++ b/src/utils/Resizer.js
@@ -170,11 +170,12 @@ class Resizer {
   /**
    * Return element position
    * @param  {HTMLElement} el
+   * @param  {Object} opts Custom options
    * @return {Object}
    */
-  getElementPos(el) {
+  getElementPos(el, opts = {}) {
     var posFetcher = this.posFetcher || '';
-    return posFetcher ? posFetcher(el) : getBoundingRect(el);
+    return posFetcher ? posFetcher(el, opts) : getBoundingRect(el);
   }
 
   /**
@@ -190,7 +191,7 @@ class Resizer {
     // Show the handlers
     this.el = el;
     var unit = 'px';
-    var rect = this.getElementPos(el);
+    var rect = this.getElementPos(el, { target: 'container' });
     var container = this.container;
     var contStyle = container.style;
     contStyle.left = rect.left + unit;
@@ -229,9 +230,10 @@ class Resizer {
     const resizer = this;
     const config = this.opts || {};
     var attrName = 'data-' + config.prefix + 'handler';
-    var rect = this.getElementPos(el);
+    var rect = this.getElementPos(el, { target: 'el' });
     this.handlerAttr = e.target.getAttribute(attrName);
     this.clickedHandler = e.target;
+    console.log('rect', rect);
     this.startDim = {
       t: rect.top,
       l: rect.left,
@@ -338,7 +340,7 @@ class Resizer {
     }
 
     const unitRect = 'px';
-    const rectEl = this.getElementPos(el);
+    const rectEl = this.getElementPos(el, { target: 'container' });
     conStyle.left = rectEl.left + unitRect;
     conStyle.top = rectEl.top + unitRect;
     conStyle.width = rectEl.width + unitRect;