Setup guides in ComponentDrag command

src/canvas/index.js

@@ -302,6 +302,19 @@ module.exports = () => {
       return CanvasView.getElementOffsets(el);
     },
 
+    /**
+     * Get canvas rectangular data
+     * @returns {Object}
+     */
+    getRect() {
+      const { top, left } = CanvasView.getPosition();
+      return {
+        ...CanvasView.getCanvasOffset(),
+        topScroll: top,
+        leftScroll: left
+      };
+    },
+
     /**
      * This method comes handy when you need to attach something like toolbars
      * to elements inside the canvas, dealing with all relative position,

src/canvas/view/CanvasView.js

@@ -73,7 +73,7 @@ module.exports = Backbone.View.extend({
     }
   },
 
-  updateFrames() {
+  updateFrames(ev) {
     const { em, model } = this;
     const { x, y } = model.attributes;
     const zoom = this.getZoom();
@@ -84,6 +84,7 @@ module.exports = Backbone.View.extend({
     this.clearOff();
     this.onFrameScroll();
     em.stopDefault(defOpts);
+    em.trigger('canvas:update', ev);
     timerZoom && clearTimeout(timerZoom);
     timerZoom = setTimeout(() => em.runDefault(defOpts));
   },

src/commands/view/ComponentDrag.js

@@ -1,9 +1,19 @@
-import { keys, bindAll } from 'underscore';
+import { keys, bindAll, each } from 'underscore';
 import Dragger from 'utils/Dragger';
 
 module.exports = {
   run(editor, sender, opts = {}) {
-    bindAll(this, 'setPosition', 'onStart', 'onEnd', 'getPosition');
+    bindAll(
+      this,
+      'setPosition',
+      'onStart',
+      'onDrag',
+      'onEnd',
+      'getPosition',
+      'getGuidesStatic',
+      'renderGuide',
+      'getGuidesTarget'
+    );
     const { target, event, mode } = opts;
     const { Canvas } = editor;
     const el = target.getEl();
@@ -13,13 +23,21 @@ module.exports = {
       doc: el.ownerDocument,
       onStart: this.onStart,
       onEnd: this.onEnd,
+      onDrag: this.onDrag,
       getPosition: this.getPosition,
-      setPosition: this.setPosition
+      setPosition: this.setPosition,
+      getGuidesStatic: () => this.guidesStatic,
+      getGuidesTarget: () => this.guidesTarget
     };
+    this.setupGuides();
     this.opts = opts;
     this.editor = editor;
+    this.em = editor.getModel();
     this.target = target;
     this.isTran = mode == 'translate';
+    this.guidesContainer = this.getGuidesContainer();
+    this.guidesTarget = this.getGuidesTarget();
+    this.guidesStatic = []; // this.getGuidesStatic();
     let dragger = this.dragger;
 
     if (!dragger) {
@@ -39,6 +57,114 @@ module.exports = {
     this.toggleDrag();
   },
 
+  setupGuides() {
+    (this.guides || []).forEach(item => {
+      const { guide } = item;
+      guide.parentNode.removeChild(guide);
+    });
+    this.guides = [];
+  },
+
+  getGuidesContainer() {
+    let { guidesEl } = this;
+
+    if (!guidesEl) {
+      const { editor, em } = this;
+      const pfx = editor.getConfig('stylePrefix');
+      guidesEl = document.createElement('div');
+      guidesEl.className = `${pfx}guides`;
+      editor.Canvas.getToolsEl().appendChild(guidesEl);
+      this.guidesEl = guidesEl;
+      em.on('canvas:update', () => {
+        this.updateGuides();
+        this.guides.forEach(item => this.renderGuide(item));
+      });
+    }
+
+    return guidesEl;
+  },
+
+  getGuidesStatic() {
+    let result = [];
+    const el = this.target.getEl();
+    each(
+      el.parentNode.children,
+      item =>
+        (result = result.concat(el !== item ? this.getElementGuides(item) : []))
+    );
+    return result;
+  },
+
+  getGuidesTarget() {
+    return this.getElementGuides(this.target.getEl());
+  },
+
+  updateGuides(guides) {
+    (guides || this.guides).forEach(item => {
+      const { origin } = item;
+      const { top, height, left, width } = editor.Canvas.getElementPos(origin);
+
+      switch (item.type) {
+        case 't':
+          return (item.y = top);
+        case 'b':
+          return (item.y = top + height);
+        case 'l':
+          return (item.x = left);
+        case 'r':
+          return (item.x = left + width);
+        case 'x':
+          return (item.x = left + width / 2);
+        case 'y':
+          return (item.y = top + height / 2);
+      }
+    });
+  },
+
+  renderGuide(item = {}) {
+    const el = item.guide || document.createElement('div');
+    const { Canvas } = this.editor;
+    const { topScroll, top } = Canvas.getRect();
+    const frameTop = Canvas.getCanvasView().getFrameOffset().top;
+    const un = 'px';
+    el.style = 'position: absolute; background-color: red;';
+
+    if (item.y) {
+      el.style.width = '100%';
+      el.style.height = `1${un}`;
+      el.style.top = `${item.y}${un}`;
+      el.style.left = 0;
+    } else {
+      el.style.width = `1${un}`;
+      el.style.height = '100%';
+      el.style.left = `${item.x}${un}`;
+      el.style.top = `${topScroll - frameTop + top}${un}`;
+    }
+
+    !item.guide && this.guidesContainer.appendChild(el);
+    return el;
+  },
+
+  getElementGuides(el) {
+    const { editor } = this;
+    const { top, height, left, width } = editor.Canvas.getElementPos(el);
+    const guides = [
+      { type: 't', y: top }, // Top
+      { type: 'b', y: top + height }, // Bottom
+      { type: 'l', x: left }, // Left
+      { type: 'r', x: left + width }, // Right
+      { type: 'x', x: left + width / 2 }, // Mid x
+      { type: 'y', y: top + height / 2 } // Mid y
+    ].map(item => ({
+      ...item,
+      origin: el,
+      guide: this.renderGuide(item)
+    }));
+    guides.forEach(item => this.guides.push(item));
+
+    return guides;
+  },
+
   getTranslate(transform, axis = 'x') {
     let result = 0;
     (transform || '').split(' ').forEach(item => {
@@ -117,6 +243,12 @@ module.exports = {
     }
   },
 
+  onDrag() {
+    const { guidesTarget } = this;
+    this.updateGuides(guidesTarget);
+    guidesTarget.forEach(item => this.renderGuide(item));
+  },
+
   onEnd() {
     const { editor, opts, id } = this;
     const { onEnd } = opts;

src/styles/scss/_gjs_canvas.scss

@@ -57,6 +57,7 @@ $canvasTop: 40px;
 
   ##{$app-prefix}tools {
     width: 100%;
+    height: 100%;
     position: absolute;
     top: 0;
     left: 0;

src/utils/Dragger.js

@@ -42,6 +42,16 @@ export default class Dragger {
        */
       getPosition: null,
 
+      /**
+       * Get static guides
+       */
+      getGuidesStatic: () => [],
+
+      /**
+       * Get target guides
+       */
+      getGuidesTarget: () => [],
+
       // Document on which listen to pointer events
       doc: 0,
 
@@ -78,11 +88,13 @@ export default class Dragger {
    * @param  {Event} e
    */
   start(ev) {
-    const { onStart } = this.opts;
+    const { onStart, getGuidesStatic, getGuidesTarget } = this.opts;
     this.toggleDrag(1);
     this.startPointer = this.getPointerPos(ev);
     isFunction(onStart) && onStart(ev, this);
     this.startPosition = this.getStartPosition();
+    this.guidesStatic = getGuidesStatic();
+    this.guidesTarget = getGuidesTarget();
     this.drag(ev);
   }