Update offset tools

src/canvas/view/FrameWrapView.js

@@ -68,7 +68,20 @@ export default Backbone.View.extend({
       <div class="${ppfx}ghost"></div>
       <div class="${ppfx}toolbar" style="pointer-events:all"></div>
       <div class="${ppfx}resizer"></div>
-      <div class="${ppfx}offset-v" data-offset></div>
+      <div class="${ppfx}offset-v" data-offset>
+        <div class="gjs-marginName" data-offset-m>
+          <div class="gjs-margin-v-el gjs-margin-v-top" data-offset-m-t></div>
+          <div class="gjs-margin-v-el gjs-margin-v-bottom" data-offset-m-b></div>
+          <div class="gjs-margin-v-el gjs-margin-v-left" data-offset-m-l></div>
+          <div class="gjs-margin-v-el gjs-margin-v-right" data-offset-m-r></div>
+        </div>
+        <div class="gjs-paddingName" data-offset-m>
+          <div class="gjs-padding-v-el gjs-padding-v-top" data-offset-p-t></div>
+          <div class="gjs-padding-v-el gjs-padding-v-bottom" data-offset-p-b></div>
+          <div class="gjs-padding-v-el gjs-padding-v-left" data-offset-p-l></div>
+          <div class="gjs-padding-v-el gjs-padding-v-right" data-offset-p-r></div>
+        </div>
+      </div>
       <div class="${ppfx}offset-fixed-v"></div>
     `
     );

src/commands/view/SelectComponent.js

@@ -183,7 +183,6 @@ export default {
    */
   showElementOffset(el, pos, opts = {}) {
     if (!showOffsets) return;
-
     this.editor.runCommand('show-offset', {
       el,
       elPos: pos,
@@ -647,7 +646,7 @@ export default {
    * @private
    */
   onFrameScroll() {
-    this.updateToolsLocal();
+    // this.updateToolsLocal();
     this.updateToolsGlobal();
   },
 

src/commands/view/ShowOffset.js

@@ -42,14 +42,26 @@ export default {
     var offsetViewer = canvas[method](opts.view);
     offsetViewer.style.opacity = '';
 
-    var marginT = this['marginT' + state];
+    let marginT = this['marginT' + state];
-    var marginB = this['marginB' + state];
+    let marginB = this['marginB' + state];
-    var marginL = this['marginL' + state];
+    let marginL = this['marginL' + state];
-    var marginR = this['marginR' + state];
+    let marginR = this['marginR' + state];
-    var padT = this['padT' + state];
+    let padT = this['padT' + state];
-    var padB = this['padB' + state];
+    let padB = this['padB' + state];
-    var padL = this['padL' + state];
+    let padL = this['padL' + state];
-    var padR = this['padR' + state];
+    let padR = this['padR' + state];
+
+    if (offsetViewer.childNodes.length) {
+      this[stateVar] = '1';
+      marginT = offsetViewer.querySelector('[data-offset-m-t]');
+      marginB = offsetViewer.querySelector('[data-offset-m-b]');
+      marginL = offsetViewer.querySelector('[data-offset-m-l]');
+      marginR = offsetViewer.querySelector('[data-offset-m-r]');
+      padT = offsetViewer.querySelector('[data-offset-p-t]');
+      padB = offsetViewer.querySelector('[data-offset-p-b]');
+      padL = offsetViewer.querySelector('[data-offset-p-l]');
+      padR = offsetViewer.querySelector('[data-offset-p-r]');
+    }
 
     if (!this[stateVar]) {
       var stateLow = state.toLowerCase();