Refactor the Dragger

7 years ago · e1a2af788d
5 changed files with 100 additions and 77 deletions
--- a/src/commands/index.js
+++ b/src/commands/index.js
@ -133,35 +133,20 @@ module.exports = () => {
          // Without setTimeout the ghost image disappears
          nativeDrag ? setTimeout(() => hideTlb, 0) : hideTlb();

-          const onStart = (e, opts) => {
-            console.log('start mouse pos ', opts.start);
-            console.log('el rect ', opts.elRect);
-            var el = opts.el;
-            el.style.position = 'absolute';
-            el.style.margin = 0;
-          };
-
          const onEnd = (e, opts) => {
            em.runDefault(defComOptions);
            selAll.forEach(sel => sel.set('status', 'selected'));
            ed.select(selAll);
            sel.emitUpdate();
-            dragger && dragger.blur();
-          };
-
-          const onDrag = (e, opts) => {
-            console.log('Delta ', opts.delta);
-            console.log('Current ', opts.current);
          };

          if (em.get('designerMode')) {
            // TODO move grabbing func in editor/canvas from the Sorter
            dragger = editor.runCommand('drag', {
+              target: sel,
              el: sel.view.el,
              options: {
                event,
-                onStart,
-                onDrag,
                onEnd
              }
            });
--- a/src/commands/view/CanvasMove.js
+++ b/src/commands/view/CanvasMove.js
@ -35,7 +35,7 @@ module.exports = {
    this.getCanvas().classList[methodCls](`${this.ppfx}is__grabbing`);

    if (!dragger) {
-      dragger = Dragger.init({
+      dragger = new Dragger({
        getPosition() {
          return {
            x: canvasModel.get('x'),
--- a/src/commands/view/Drag.js
+++ b/src/commands/view/Drag.js
@ -1,5 +1,9 @@
+import { isUndefined } from 'underscore';
+import Dragger from 'utils/Dragger';
+
 module.exports = {
-  run(editor, sender, opts) {
+  run(editor, sender, opts = {}) {
+    const { target } = opts;
    var el = (opts && opts.el) || '';
    var canvas = editor.Canvas;
    var dragger = this.dragger;
@ -11,21 +15,51 @@ module.exports = {

    // Create the resizer for the canvas if not yet created
    if (!dragger) {
-      dragger = editor.Utils.Dragger.init(options);
+      dragger = new Dragger({
+        ...options,
+        doc: target.getEl().ownerDocument,
+        onStart() {
+          target.addStyle({ position: 'absolute' });
+        },
+        getPosition() {
+          const style = target.getStyle();
+          let { left, top } = style;
+
+          if (isUndefined(left) || isUndefined(top)) {
+            const rect = target.getEl().getBoundingClientRect();
+            left = rect.left;
+            top = rect.top;
+          }
+
+          const result = {
+            x: parseFloat(left),
+            y: parseFloat(top)
+          };
+
+          return result;
+        },
+        setPosition({ x, y, end }) {
+          const unit = 'px';
+
+          target.addStyle(
+            {
+              left: `${x}${unit}`,
+              top: `${y}${unit}`,
+              e: !end ? 1 : '' // this will trigger the final change
+            },
+            { avoidStore: !end }
+          );
+        }
+      });
      this.dragger = dragger;
    }

    dragger.setOptions(options);
-    dragger.focus(el);

    if (options.event) {
      dragger.start(options.event);
    }

    return dragger;
-  },
-
-  stop() {
-    if (this.canvasResizer) this.canvasResizer.blur();
  }
 };
--- a/src/utils/Dragger.js
+++ b/src/utils/Dragger.js
@ -1,55 +1,56 @@
 import { bindAll, isFunction } from 'underscore';
 import { on, off } from 'utils/mixins';

-const options = {
+export default class Dragger {
  /**
-   * Callback on start
-   * onStart(ev, dragger) {
-   *  console.log('pointer start', dragger.startPointer, 'position start', dragger.startPosition);
-   * },
-   */
-  onStart: null,
-  /**
-   * Callback on drag
-   * onDrag(ev, dragger) {
-   *  console.log('pointer', dragger.currentPointer, 'position', dragger.position, 'delta', dragger.delta);
-   * },
-   */
-  onDrag: null,
-  /**
-   * Callback on drag
-   * onEnd(ev, dragger) {
-   *  console.log('pointer', dragger.currentPointer, 'position', dragger.position, 'delta', dragger.delta);
-   * },
-   */
-  onEnd: null,
-  /**
-   * Indicate a callback where to pass an object with new coordinates
-   */
-  setPosition: null,
-  /**
-   * Indicate a callback where to get initial coordinates.
-   * getPosition: () => {
-   *  ...
-   *  return { x: 10, y: 100 }
-   * }
-   */
-  getPosition: null
-};
-
-module.exports = {
-  /**
-   * Init the resizer
+   * Init the dragger
   * @param  {Object} opts
   */
-  init(opts) {
+  constructor(opts = {}) {
+    this.opts = {
+      /**
+       * Callback on start
+       * onStart(ev, dragger) {
+       *  console.log('pointer start', dragger.startPointer, 'position start', dragger.startPosition);
+       * },
+       */
+      onStart: null,
+      /**
+       * Callback on drag
+       * onDrag(ev, dragger) {
+       *  console.log('pointer', dragger.currentPointer, 'position', dragger.position, 'delta', dragger.delta);
+       * },
+       */
+      onDrag: null,
+      /**
+       * Callback on drag
+       * onEnd(ev, dragger) {
+       *  console.log('pointer', dragger.currentPointer, 'position', dragger.position, 'delta', dragger.delta);
+       * },
+       */
+      onEnd: null,
+      /**
+       * Indicate a callback where to pass an object with new coordinates
+       */
+      setPosition: null,
+      /**
+       * Indicate a callback where to get initial coordinates.
+       * getPosition: () => {
+       *  ...
+       *  return { x: 10, y: 100 }
+       * }
+       */
+      getPosition: null,
+
+      // Document on which listen to pointer events
+      doc: 0
+    };
    bindAll(this, 'drag', 'stop');
-    this.opts = options;
    this.setOptions(opts);
    this.delta = { x: 0, y: 0 };
    this.startPosition = this.getStartPosition();
    return this;
-  },
+  }

  /**
   * Update options
@ -60,7 +61,7 @@ module.exports = {
      ...this.opts,
      ...opts
    };
-  },
+  }

  toggleDrag(enable) {
    const docs = this.getDocumentEl();
@ -68,7 +69,7 @@ module.exports = {
    const methods = { on, off };
    methods[method](docs, 'mousemove', this.drag);
    methods[method](docs, 'mouseup', this.stop);
-  },
+  }

  /**
   * Start dragging
@ -81,7 +82,7 @@ module.exports = {
    this.startPosition = this.getStartPosition();
    isFunction(onStart) && onStart(ev, this);
    this.drag(ev);
-  },
+  }

  /**
   * Drag event
@ -118,7 +119,7 @@ module.exports = {

    // In case the mouse button was released outside of the window
    ev.which === 0 && this.stop(ev);
-  },
+  }

  /**
   * Stop dragging
@ -130,14 +131,14 @@ module.exports = {
    this.move(delta.x, delta.y, 1);
    const { onEnd } = this.opts;
    isFunction(onEnd) && onEnd(ev, this);
-  },
+  }

  /**
   * Move the element
   * @param  {integer} x
   * @param  {integer} y
   */
-  move: function(x, y, end) {
+  move(x, y, end) {
    const { el, opts } = this;
    const pos = this.startPosition;
    const { setPosition } = opts;
@ -155,22 +156,24 @@ module.exports = {
      el.style.left = `${xPos}px`;
      el.style.top = `${yPos}px`;
    }
-  },
+  }

  /**
   * Returns documents
   */
  getDocumentEl(el) {
+    const { doc } = this.opts;
    el = el || this.el;

    if (!this.docs) {
      const docs = [document];
      el && docs.push(el.ownerDocument);
+      doc && docs.push(doc);
      this.docs = docs;
    }

    return this.docs;
-  },
+  }

  /**
   * Get mouse coordinates
@ -185,7 +188,7 @@ module.exports = {
          x: ev.clientX,
          y: ev.clientY
        };
-  },
+  }

  getStartPosition() {
    const { el, opts } = this;
@ -202,7 +205,7 @@ module.exports = {
    }

    return result;
-  },
+  }

  detectAxisLock(x, y) {
    const relX = x;
@ -217,4 +220,4 @@ module.exports = {
      return 'y';
    }
  }
-};
+}
--- a/src/utils/index.js
+++ b/src/utils/index.js
@ -1,7 +1,8 @@
+import Dragger from './Dragger';
+
 module.exports = () => {
  const Sorter = require('./Sorter');
  const Resizer = require('./Resizer');
-  const Dragger = require('./Dragger');

  return {
    /**