Add mirror:moved event

index.d.ts

@@ -54,6 +54,8 @@ declare module '@shopify/draggable' {
         ? MirrorAttachedEvent
         : eventName extends 'mirror:move'
         ? MirrorMoveEvent
+        : eventName extends 'mirror:moved'
+        ? MirrorMovedEvent
         : eventName extends 'mirror:destroy'
         ? MirrorDestroyEvent
         : eventName extends 'droppable:start'
@@ -271,6 +273,13 @@ declare module '@shopify/draggable' {
     }
     export class MirrorMoveEvent extends MirrorEvent {
         readonly mirror: HTMLElement;
+        readonly passedThreshX: boolean;
+        readonly passedThreshY: boolean;
+    }
+    export class MirrorMovedEvent extends MirrorEvent {
+        readonly mirror: HTMLElement;
+        readonly passedThreshX: boolean;
+        readonly passedThreshY: boolean;
     }
     export class MirrorDestroyEvent extends MirrorEvent {
         readonly mirror: HTMLElement;

src/Draggable/Plugins/Mirror/Mirror.js

@@ -5,6 +5,7 @@ import {
   MirrorCreatedEvent,
   MirrorAttachedEvent,
   MirrorMoveEvent,
+  MirrorMovedEvent,
   MirrorDestroyEvent,
 } from './MirrorEvent';
 
@@ -329,6 +330,22 @@ export default class Mirror extends AbstractPlugin {
 
       return {lastMovedX, lastMovedY, ...args};
     };
+    const triggerMoved = (args) => {
+      const mirrorMovedEvent = new MirrorMovedEvent({
+        source: mirrorEvent.source,
+        originalSource: mirrorEvent.originalSource,
+        sourceContainer: mirrorEvent.sourceContainer,
+        sensorEvent: mirrorEvent.sensorEvent,
+        dragEvent: mirrorEvent.dragEvent,
+        mirror: this.mirror,
+        passedThreshX: mirrorEvent.passedThreshX,
+        passedThreshY: mirrorEvent.passedThreshY,
+      });
+
+      this.draggable.trigger(mirrorMovedEvent);
+
+      return args;
+    };
 
     const initialState = {
       mirror: mirrorEvent.mirror,
@@ -346,7 +363,8 @@ export default class Mirror extends AbstractPlugin {
 
     return Promise.resolve(initialState)
       .then(positionMirror({raf: true}))
-      .then(setState);
+      .then(setState)
+      .then(triggerMoved);
   }
 
   /**

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

@@ -161,6 +161,45 @@ export class MirrorMoveEvent extends MirrorEvent {
   }
 }
 
+/**
+ * NOTE: Will be added in the next version (v1.0.0-beta.13)
+ * Mirror moved event
+ * @class MirrorMovedEvent
+ * @module MirrorMovedEvent
+ * @extends MirrorEvent
+ */
+export class MirrorMovedEvent extends MirrorEvent {
+  static type = 'mirror:moved';
+
+  /**
+   * Draggables mirror element
+   * @property mirror
+   * @type {HTMLElement}
+   * @readonly
+   */
+  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;
+  }
+}
+
 /**
  * Mirror destroy event
  * @class MirrorDestroyEvent

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

@@ -88,7 +88,33 @@ The mirror follows your mouse/touch movements.
 | **Interface**     | `MirrorMoveEvent`     |
 | **Cancelable**    | true                  |
 | **Cancel action** | Stops mirror movement |
-| **type**          | `drag:over`           |
+| **type**          | `mirror:move`           |
+
+### API
+
+**`mirrorEvent.mirror: HTMLElement`**  
+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.
+
+## MirrorMovedEvent
+
+**NOTE**: Will be added in the next version (v1.0.0-beta.13)
+
+`MirrorMovedEvent` gets triggered when the **mirror:move** event was done.
+
+|                   |                       |
+| ----------------- | --------------------- |
+| **Specification** | `MirrorEvent`         |
+| **Interface**     | `MirrorMovedEvent`     |
+| **Cancelable**    | false                 |
+| **Cancel action** | -                     |
+| **type**          | `mirror:moved`           |
 
 ### API
 

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

@@ -14,6 +14,7 @@ import {
   MirrorCreatedEvent,
   MirrorAttachedEvent,
   MirrorMoveEvent,
+  MirrorMovedEvent,
   MirrorDestroyEvent,
 } from '../MirrorEvent';
 
@@ -213,6 +214,38 @@ describe('Mirror', () => {
     releaseMouse(draggable.source);
   });
 
+  it('triggers `mirror:moved` event on `drag:move` was done', async () => {
+    draggable = new Draggable(container, draggableOptions);
+
+    const mirrorMovedHandler = jest.fn();
+    let mirrorMoveEvent;
+
+    draggable.on('mirror:moved', mirrorMovedHandler);
+    draggable.on('mirror:move', (evt) => (mirrorMoveEvent = evt));
+
+    clickMouse(draggableElement);
+    waitForDragDelay();
+
+    await waitForPromisesToResolve();
+
+    moveMouse(document.body);
+
+    await waitForPromisesToResolve();
+
+    expect(mirrorMovedHandler).toHaveBeenCalledWithEvent(MirrorMovedEvent);
+    expect(mirrorMovedHandler).toHaveBeenCalledWithEventProperties({
+      dragEvent: mirrorMoveEvent.dragEvent,
+      mirror: mirrorMoveEvent.mirror,
+      source: mirrorMoveEvent.source,
+      originalSource: mirrorMoveEvent.originalSource,
+      sourceContainer: mirrorMoveEvent.sourceContainer,
+      sensorEvent: mirrorMoveEvent.sensorEvent,
+      originalEvent: mirrorMoveEvent.originalEvent,
+    });
+
+    releaseMouse(draggable.source);
+  });
+
   it('prevents `mirror:move` event trigger when `drag:move` gets canceled', async () => {
     draggable = new Draggable(container, draggableOptions);