Add avoidContainerUpdate option in Resizer

ryandeba · Feb 8, 2018 · 27917a6 · 27917a6
1 parent 4ca9db4
commit 27917a6
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 14 deletions.
diff --git a/dist/css/grapes.min.css b/dist/css/grapes.min.css
diff --git a/src/panels/view/PanelView.js b/src/panels/view/PanelView.js
@@ -69,6 +69,7 @@ module.exports = Backbone.View.extend({
         br: 0,
         appendTo: this.el,
         silentFrames: 1,
+        avoidContainerUpdate: 1,
         prefix: editor.getConfig().stylePrefix,
         posFetcher: (el, { target }) => {
           const style = el.style;

diff --git a/src/styles/scss/_gjs_canvas.scss b/src/styles/scss/_gjs_canvas.scss
@@ -94,6 +94,10 @@ $canvasTop: 40px;
   @extend .#{$app-prefix}no-pointer-events;
 
   position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
   z-index: 9;
 }
 

diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
@@ -42,6 +42,9 @@ var defaultOpts = {
   // the pointer comes over iframes
   silentFrames: 0,
 
+  // If true the container of handlers won't be updated
+  avoidContainerUpdate: 0,
+
   // Handlers
   tl: 1, // Top left
   tc: 1, // Top center
@@ -205,15 +208,19 @@ class Resizer {
 
     // Show the handlers
     this.el = el;
-    var unit = 'px';
-    var rect = this.getElementPos(el, { target: 'container' });
-    var container = this.container;
-    var contStyle = container.style;
-    contStyle.left = rect.left + unit;
-    contStyle.top = rect.top + unit;
-    contStyle.width = rect.width + unit;
-    contStyle.height = rect.height + unit;
-    container.style.display = 'block';
+    const config = this.opts;
+    const unit = 'px';
+    const rect = this.getElementPos(el, { target: 'container' });
+    const container = this.container;
+    const contStyle = container.style;
+
+    if (!config.avoidContainerUpdate) {
+      contStyle.left = rect.left + unit;
+      contStyle.top = rect.top + unit;
+      contStyle.width = rect.width + unit;
+      contStyle.height = rect.height + unit;
+      contStyle.display = 'block';
+    }
 
     on(this.getDocumentEl(), 'mousedown', this.handleMouseDown);
   }
@@ -355,10 +362,12 @@ class Resizer {
 
     const unitRect = 'px';
     const rectEl = this.getElementPos(el, { target: 'container' });
-    conStyle.left = rectEl.left + unitRect;
-    conStyle.top = rectEl.top + unitRect;
-    conStyle.width = rectEl.width + unitRect;
-    conStyle.height = rectEl.height + unitRect;
+    if (!config.avoidContainerUpdate) {
+      conStyle.left = rectEl.left + unitRect;
+      conStyle.top = rectEl.top + unitRect;
+      conStyle.width = rectEl.width + unitRect;
+      conStyle.height = rectEl.height + unitRect;
+    }
   }
 
   /**