Add mirror threshold options

Author: owen-m1

src/Draggable/Plugins/Mirror/Mirror.js

@@ -32,6 +32,8 @@ export const defaultOptions = {
   yAxis: true,
   cursorOffsetX: null,
   cursorOffsetY: null,
+  thresholdX: null,
+  thresholdY: null,
 };
 
 /**
@@ -140,6 +142,12 @@ export default class Mirror extends AbstractPlugin {
 
     const {source, originalSource, sourceContainer, sensorEvent} = dragEvent;
 
+    // Last sensor position of mirror move
+    this.lastMirrorMovedClient = {
+      x: sensorEvent.clientX,
+      y: sensorEvent.clientY,
+    };
+
     const mirrorCreateEvent = new MirrorCreateEvent({
       source,
       originalSource,
@@ -187,13 +195,38 @@ export default class Mirror extends AbstractPlugin {
 
     const {source, originalSource, sourceContainer, sensorEvent} = dragEvent;
 
+    let passedThreshX = true;
+    let passedThreshY = true;
+
+    if (this.options.thresholdX || this.options.thresholdY) {
+      const {x: lastX, y: lastY} = this.lastMirrorMovedClient;
+
+      if (Math.abs(lastX - sensorEvent.clientX) < this.options.thresholdX) {
+        passedThreshX = false;
+      } else {
+        this.lastMirrorMovedClient.x = sensorEvent.clientX;
+      }
+
+      if (Math.abs(lastY - sensorEvent.clientY) < this.options.thresholdY) {
+        passedThreshY = false;
+      } else {
+        this.lastMirrorMovedClient.y = sensorEvent.clientY;
+      }
+
+      if (!passedThreshX && !passedThreshY) {
+        return;
+      }
+    }
+
     const mirrorMoveEvent = new MirrorMoveEvent({
       source,
       originalSource,
       sourceContainer,
       sensorEvent,
       dragEvent,
       mirror: this.mirror,
+      passedThreshX,
+      passedThreshY,
     });
 
     this.draggable.trigger(mirrorMoveEvent);
@@ -248,6 +281,8 @@ export default class Mirror extends AbstractPlugin {
       this.mirrorOffset = mirrorOffset;
       this.initialX = initialX;
       this.initialY = initialY;
+      this.lastMovedX = initialX;
+      this.lastMovedY = initialY;
       return {mirrorOffset, initialX, initialY, ...args};
     };
 
@@ -258,6 +293,8 @@ export default class Mirror extends AbstractPlugin {
       mirrorClass,
       scrollOffset: this.scrollOffset,
       options: this.options,
+      passedThreshX: true,
+      passedThreshY: true,
     };
 
     return (
@@ -284,6 +321,13 @@ export default class Mirror extends AbstractPlugin {
       return null;
     }
 
+    const setState = ({lastMovedX, lastMovedY, ...args}) => {
+      this.lastMovedX = lastMovedX;
+      this.lastMovedY = lastMovedY;
+
+      return {lastMovedX, lastMovedY, ...args};
+    };
+
     const initialState = {
       mirror: mirrorEvent.mirror,
       sensorEvent: mirrorEvent.sensorEvent,
@@ -292,9 +336,15 @@ export default class Mirror extends AbstractPlugin {
       initialX: this.initialX,
       initialY: this.initialY,
       scrollOffset: this.scrollOffset,
+      passedThreshX: mirrorEvent.passedThreshX,
+      passedThreshY: mirrorEvent.passedThreshY,
+      lastMovedX: this.lastMovedX,
+      lastMovedY: this.lastMovedY,
     };
 
-    return Promise.resolve(initialState).then(positionMirror({raf: true}));
+    return Promise.resolve(initialState)
+      .then(positionMirror({raf: true}))
+      .then(setState);
   }
 
   /**
@@ -432,7 +482,20 @@ function removeMirrorID({mirror, ...args}) {
  * @private
  */
 function positionMirror({withFrame = false, initial = false} = {}) {
-  return ({mirror, sensorEvent, mirrorOffset, initialY, initialX, scrollOffset, options, ...args}) => {
+  return ({
+    mirror,
+    sensorEvent,
+    mirrorOffset,
+    initialY,
+    initialX,
+    scrollOffset,
+    options,
+    passedThreshX,
+    passedThreshY,
+    lastMovedX,
+    lastMovedY,
+    ...args
+  }) => {
     return withPromise(
       (resolve) => {
         const result = {
@@ -444,8 +507,14 @@ function positionMirror({withFrame = false, initial = false} = {}) {
         };
 
         if (mirrorOffset) {
-          const x = sensorEvent.clientX - mirrorOffset.left - scrollOffset.x;
-          const y = sensorEvent.clientY - mirrorOffset.top - scrollOffset.y;
+          const x = passedThreshX
+            ? Math.round((sensorEvent.clientX - mirrorOffset.left - scrollOffset.x) / (options.thresholdX || 1)) *
+              (options.thresholdX || 1)
+            : lastMovedX;
+          const y = passedThreshY
+            ? Math.round((sensorEvent.clientY - mirrorOffset.top - scrollOffset.y) / (options.thresholdY || 1)) *
+              (options.thresholdY || 1)
+            : lastMovedY;
 
           if ((options.xAxis && options.yAxis) || initial) {
             mirror.style.transform = `translate3d(${x}px, ${y}px, 0)`;
@@ -459,6 +528,9 @@ function positionMirror({withFrame = false, initial = false} = {}) {
             result.initialX = x;
             result.initialY = y;
           }
+
+          result.lastMovedX = x;
+          result.lastMovedY = y;
         }
 
         resolve(result);

src/Draggable/Plugins/Mirror/MirrorEvent/MirrorEvent.js

@@ -141,6 +141,24 @@ export class MirrorMoveEvent extends MirrorEvent {
   get mirror() {
     return this.data.mirror;
   }
+
+  /**
+   * Sensor has exceeded mirror's threshold on x axis
+   * @type {Boolean}
+   * @readonly
+   */
+  get passedThreshX() {
+    return this.data.passedThreshX;
+  }
+
+  /**
+   * Sensor has exceeded mirror's threshold on y axis
+   * @type {Boolean}
+   * @readonly
+   */
+  get passedThreshY() {
+    return this.data.passedThreshY;
+  }
 }
 
 /**

src/Draggable/Plugins/Mirror/MirrorEvent/README.md

@@ -96,6 +96,13 @@ The mirror follows your mouse/touch movements.
 Read-only property for the mirror element, which is also a copy of the `originalSource` element.
 The mirror follows your mouse/touch movements.
 
+**`mirrorEvent.passedThreshX: Booolean`**  
+Read-only property for whether or not the mirror's threshold has been exceeded in the x axis.
+
+**`mirrorEvent.passedThreshY: Booolean`**  
+Read-only property for whether or not the mirror's threshold has been exceeded in the y axis.
+
+
 ## MirrorDestroyEvent
 
 `MirrorDestroyEvent` gets triggered before the mirror gets removed from the DOM.

src/Draggable/Plugins/Mirror/README.md

@@ -32,6 +32,12 @@ this is not where the source will be placed, only the temporary mirror element,
 that follows your cursor as you drag. You can specify a css selector, a HTMLElement or a function
 that returns a HTMLElement. Default is the source parent element.
 
+**`thresholdX {Number|null}`**
+Defining this sets a threshold that must be exceeded by the mouse for the mirror to move on the x axis. Default: `null`
+
+**`thresholdY {Number|null}`**
+Defining this sets a threshold that must be exceeded by the mouse for the mirror to move on the y axis. Default: `null`
+
 ### Events
 
 | Name                                | Description                                           | Cancelable | Cancelable action        |

src/Draggable/Plugins/Mirror/tests/Mirror.test.js

@@ -270,6 +270,56 @@ describe('Mirror', () => {
     releaseMouse(draggable.source);
   });
 
+  it('moves mirror only when past `thresholdX` or `thresholdY`', async () => {
+    draggable = new Draggable(container, {
+      ...draggableOptions,
+      mirror: {
+        thresholdX: 10,
+        thresholdY: 50,
+      },
+    });
+
+    clickMouse(draggableElement);
+    waitForDragDelay();
+    waitForRequestAnimationFrame();
+
+    await waitForPromisesToResolve();
+
+    const mirrorElement = document.querySelector('.draggable-mirror');
+
+    moveMouse(document.body, {
+      clientX: 5,
+      clientY: 10,
+    });
+
+    await waitForPromisesToResolve();
+    waitForRequestAnimationFrame();
+
+    expect(mirrorElement.style.transform).toBe('translate3d(0px, 0px, 0)');
+
+    moveMouse(document.body, {
+      clientX: 10,
+      clientY: 40,
+    });
+
+    await waitForPromisesToResolve();
+    waitForRequestAnimationFrame();
+
+    expect(mirrorElement.style.transform).toBe('translate3d(10px, 0px, 0)');
+
+    moveMouse(document.body, {
+      clientX: 100,
+      clientY: 100,
+    });
+
+    await waitForPromisesToResolve();
+    waitForRequestAnimationFrame();
+
+    expect(mirrorElement.style.transform).toBe('translate3d(100px, 100px, 0)');
+
+    releaseMouse(draggable.source);
+  });
+
   it('prevents mirror movement when `mirror:move` gets canceled', async () => {
     draggable = new Draggable(container, draggableOptions);