Create renderGuideInfo method and add `guidesInfo` option to componentDrag

src/commands/index.js

@@ -144,6 +144,7 @@ module.exports = () => {
           if (includes(modes, mode)) {
             // TODO move grabbing func in editor/canvas from the Sorter
             dragger = editor.runCommand('core:component-drag', {
+              guidesInfo: 1,
               mode,
               target: sel,
               onEnd,

src/commands/view/ComponentDrag.js

@@ -303,13 +303,34 @@ module.exports = {
   },
 
   onDrag() {
-    const { guidesTarget, guidesStatic, opts, editor } = this;
+    const { guidesTarget, opts } = this;
     this.updateGuides(guidesTarget);
     opts.debug && guidesTarget.forEach(item => this.renderGuide(item));
-    const active = guidesTarget.filter(item => item.active);
-    this.elGuideInfoY.style.display = 'none';
-    this.elGuideInfoX.style.display = 'none';
-    active.forEach(item => {
+    opts.guidesInfo &&
+      this.renderGuideInfo(guidesTarget.filter(item => item.active));
+  },
+
+  onEnd() {
+    const { editor, opts, id } = this;
+    const { onEnd } = opts;
+    onEnd && onEnd();
+    editor.stopCommand(id);
+  },
+
+  hideGuidesInfo() {
+    ['X', 'Y'].forEach(item => {
+      this[`elGuideInfo${item}`].style.display = 'none';
+    });
+  },
+
+  /**
+   * Render guides with spacing information
+   */
+  renderGuideInfo(guides = []) {
+    const { guidesStatic, editor } = this;
+    this.hideGuidesInfo();
+
+    guides.forEach(item => {
       const { origin, x } = item;
       const rectOrigin = editor.Canvas.offset(origin);
       const axis = isUndefined(x) ? 'y' : 'x';
@@ -361,13 +382,6 @@ module.exports = {
     });
   },
 
-  onEnd() {
-    const { editor, opts, id } = this;
-    const { onEnd } = opts;
-    onEnd && onEnd();
-    editor.stopCommand(id);
-  },
-
   toggleDrag(on) {
     const { ppfx, editor } = this;
     const methodCls = on ? 'add' : 'remove';