Improve selection boxes

src/canvas/model/Frame.js

@@ -113,7 +113,7 @@ export default Backbone.Model.extend({
     this.removeHeadByAttr('src', src, 'script');
   },
 
-  _emitResized(data = {}) {
-    this.em.trigger('frame:resized', { frame: this, ...data });
+  _emitUpdated(data = {}) {
+    this.em.trigger('frame:updated', { frame: this, ...data });
   }
 });

src/canvas/view/CanvasView.js

@@ -331,7 +331,6 @@ export default Backbone.View.extend({
         </div>
       </div>
       <div id="${ppfx}tools" style="pointer-events:none">
-        <div class="${ppfx}highlighter"></div>
         <div class="${ppfx}badge"></div>
         <div class="${ppfx}ghost"></div>
         <div class="${ppfx}toolbar" style="pointer-events:all"></div>

src/canvas/view/FrameView.js

@@ -7,7 +7,8 @@ import {
   empty,
   append,
   createEl,
-  createCustomEvent
+  createCustomEvent,
+  motionsEv
 } from 'utils/dom';
 import { on, off, setViewEl, getPointerEvent } from 'utils/mixins';
 
@@ -25,7 +26,7 @@ export default Backbone.View.extend({
       'updateClientY',
       'stopAutoscroll',
       'autoscroll',
-      '_emitResize'
+      '_emitUpdate'
     );
     const { model, el } = this;
     this.config = {
@@ -399,10 +400,11 @@ export default Backbone.View.extend({
 
   _toggleEffects(enable) {
     const method = enable ? on : off;
-    method(this.getWindow(), 'resize', this._emitResize);
+    const win = this.getWindow();
+    method(win, `${motionsEv} resize`, this._emitUpdate);
   },
 
-  _emitResize() {
-    this.model._emitResized();
+  _emitUpdate() {
+    this.model._emitUpdated();
   }
 });

src/canvas/view/FrameWrapView.js

@@ -1,12 +1,9 @@
 import Backbone from 'backbone';
 import FrameView from './FrameView';
 import { bindAll, isNumber, isNull, debounce } from 'underscore';
-import { createEl } from 'utils/dom';
+import { createEl, motionsEv } from 'utils/dom';
 import Dragger from 'utils/Dragger';
 
-const motionsEv =
-  'transitionend oTransitionEnd transitionend webkitTransitionEnd';
-
 export default Backbone.View.extend({
   events: {
     'click [data-action-remove]': 'remove',
@@ -81,7 +78,7 @@ export default Backbone.View.extend({
     const { em, $el, frame } = this;
     em.runDefault({ preserveSelected: 1 });
     $el.removeClass(this.classAnim);
-    frame.model._emitResized();
+    frame.model._emitUpdated();
   }),
 
   updatePos(md) {
@@ -176,7 +173,7 @@ export default Backbone.View.extend({
       'div',
       {
         class: `${ppfx}tools`,
-        style: 'pointer-events:none'
+        style: 'pointer-events:none; opacity: 0'
       },
       `
       <div class="${ppfx}highlighter" data-hl></div>

src/commands/view/SelectComponent.js

@@ -79,7 +79,7 @@ export default {
     em[method]('component:update', this.onComponentUpdate, this);
     em[method]('component:resize', this.updateGlobalPos, this);
     em[method]('change:canvasOffset', this.updateAttached, this);
-    em[method]('frame:resized', this.onFrameResized, this);
+    em[method]('frame:updated', this.onFrameUpdated, this);
     em.get('Canvas')
       .getFrames()
       .forEach(frame => {
@@ -122,8 +122,8 @@ export default {
     frameView && this.em.set('currentFrame', frameView);
   },
 
-  onFrameResized() {
-    this.updateToolsLocal({}); // clear last cached component
+  onFrameUpdated() {
+    this.updateLocalPos();
     this.updateGlobalPos();
   },
 
@@ -183,6 +183,13 @@ export default {
     this.updateToolsGlobal();
   },
 
+  updateLocalPos() {
+    const sel = this.getElHovered();
+    if (!sel.el) return;
+    sel.pos = this.getElementPos(sel.el);
+    this.updateToolsLocal();
+  },
+
   getElHovered() {
     return this.elHovered || {};
   },
@@ -395,12 +402,8 @@ export default {
    * @param {Object} pos Position object
    * @private
    */
-  updateHighlighter(el, pos, opts = {}) {
-    const { style } = this.canvas.getHighlighter(opts.view);
-    const unit = 'px';
-    style.height = pos.height + unit;
-    style.width = pos.width + unit;
-    style.opacity = '';
+  showHighlighter(view) {
+    this.canvas.getHighlighter(view).style.opacity = '';
   },
 
   /**
@@ -611,8 +614,12 @@ export default {
    * @private
    */
   onFrameScroll() {
+    this.updateTools();
+  },
+
+  updateTools() {
     this.updateToolsLocal();
-    this.updateToolsGlobal();
+    this.updateGlobalPos();
   },
 
   isCompSelected(comp) {
@@ -638,7 +645,7 @@ export default {
 
     if (isNewEl && isHoverEn) {
       this.lastHovered = el;
-      this.updateHighlighter(el, pos, { view });
+      this.showHighlighter(view);
       this.showElementOffset(el, pos, { view });
     }
 

src/commands/view/ShowOffset.js

@@ -145,28 +145,30 @@ export default {
     // Padding style
     var padTop = parseFloat(style.paddingTop) * zoom;
     ptStyle.height = padTop + unit;
-    ptStyle.width = widthEl;
-    ptStyle.top = pos.top + unit;
-    ptStyle.left = posLeft + unit;
+    // ptStyle.width = widthEl;
+    // ptStyle.top = pos.top + unit;
+    // ptStyle.left = posLeft + unit;
 
     var padBot = parseFloat(style.paddingBottom) * zoom;
     pbStyle.height = padBot + unit;
-    pbStyle.width = widthEl;
-    pbStyle.top = pos.top + pos.height - padBot + unit;
-    pbStyle.left = posLeft + unit;
+    // pbStyle.width = widthEl;
+    // pbStyle.top = pos.top + pos.height - padBot + unit;
+    // pbStyle.left = posLeft + unit;
 
     var padSideH = pos.height - padBot - padTop + unit;
     var padSideT = pos.top + padTop + unit;
     plStyle.height = padSideH;
     plStyle.width = parseFloat(style.paddingLeft) * zoom + unit;
     plStyle.top = padSideT;
-    plStyle.left = pos.left + unit;
+    // plStyle.left = pos.left + unit;
+    //  plStyle.right = 0;
 
     var padRight = parseFloat(style.paddingRight) * zoom;
     prStyle.height = padSideH;
     prStyle.width = padRight + unit;
     prStyle.top = padSideT;
-    prStyle.left = pos.left + pos.width - padRight + unit;
+    // prStyle.left = pos.left + pos.width - padRight + unit;
+    //  prStyle.left = 0;
   },
 
   stop(editor, sender, opts = {}) {

src/styles/scss/_gjs_canvas.scss

@@ -169,6 +169,28 @@ $guide_pad: 5px;
   }
 }
 
+.#{$app-prefix} {
+  &padding-v,
+  &fixedpadding-v {
+    &-top {
+      width: 100%;
+      top: 0;
+      left: 0;
+    }
+    &-right {
+      right: 0;
+    }
+    &-bottom {
+      width: 100%;
+      left: 0;
+      bottom: 0;
+    }
+    &-left {
+      left: 0;
+    }
+  }
+}
+
 .#{$cv-prefix}canvas {
   background-color: rgba(0, 0, 0, 0.15);
   box-sizing: border-box;
@@ -213,6 +235,8 @@ $guide_pad: 5px;
     outline: 1px solid $colorBlue;
     outline-offset: -1px;
     pointer-events: none;
+    width: 100%;
+    height: 100%;
   }
 
   .#{$app-prefix}highlighter-warning {

src/utils/dom.js

@@ -5,6 +5,9 @@ const KEY_TAG = 'tag';
 const KEY_ATTR = 'attributes';
 const KEY_CHILD = 'children';
 
+export const motionsEv =
+  'transitionend oTransitionEnd transitionend webkitTransitionEnd';
+
 export const empty = node => {
   while (node.firstChild) node.removeChild(node.firstChild);
 };