Refactor the Dragger

nmarseaud · Feb 17, 2019 · e1a2af7 · e1a2af7
1 parent 8dbd31a
commit e1a2af7
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 77 deletions.
diff --git 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
               }
             });

diff --git 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'),

diff --git 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();
   }
 };
diff --git 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,15 +61,15 @@ module.exports = {
       ...this.opts,
       ...opts
     };
-  },
+  }
 
   toggleDrag(enable) {
     const docs = this.getDocumentEl();
     const method = enable ? 'on' : 'off';
     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';
     }
   }
-};
+}
diff --git 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 {
     /**