Merge pull request #375 from randym/fix/rm_delay_distance

fix(delay_distance): fix drag start concurrency

Author: tsov

.prettierrc

@@ -1,4 +1,7 @@
 {
+  "trailingComma": "all",
   "printWidth": 120,
-  "singleQuote": true
+  "singleQuote": true,
+  "bracketSpacing": false,
+  "arrowParens": "always"
 }

scripts/test/helpers/constants.js

@@ -11,6 +11,8 @@ export const defaultMouseEventOptions = {
   button: 0,
   clientX: 0,
   clientY: 0,
+  pageX: 0,
+  pageY: 0,
 };
 
-export const DRAG_DELAY = 0;
+export const DRAG_DELAY = 100;

scripts/test/helpers/sensor.js

@@ -2,7 +2,12 @@ import {DRAG_DELAY, defaultTouchEventOptions, defaultMouseEventOptions} from './
 import {triggerEvent} from './event';
 
 export function waitForDragDelay(dragDelay = DRAG_DELAY) {
+  const next = Date.now() + dragDelay + 1;
+  const dateMock = jest.spyOn(Date, 'now').mockImplementation(() => {
+    return next;
+  });
   jest.runTimersToTime(dragDelay + 1);
+  dateMock.mockRestore();
 }
 
 export function clickMouse(element, options = {}) {

scripts/test/matchers/sensor.js

@@ -1,22 +1,24 @@
-function toHaveTriggeredSensorEvent(received, expectedEventName) {
+function toHaveTriggeredSensorEvent(received, expectedEventName, count) {
   let triggered = false;
-
+  let callCount = 0;
   function callback() {
+    count !== undefined && (callCount = callCount + 1);
     triggered = true;
   }
 
   document.addEventListener(expectedEventName, callback);
   received();
   document.removeEventListener(expectedEventName, callback);
 
-  const pass = Boolean(triggered);
+  const pass = Boolean(triggered) && Boolean(count === undefined || callCount === count);
 
   return {
     pass,
     message: () => {
       const expectation = pass ? 'not to have been' : 'to have been';
+      const defaultMessage = `Expected sensor event '${expectedEventName}' ${expectation} to be triggered`;
 
-      return `Expected sensor event '${expectedEventName}' ${expectation} triggered`;
+      return count ? `${defaultMessage} ${count} time(s)` : defaultMessage;
     },
   };
 }

src/Draggable/Sensors/DragSensor/DragSensor.js

@@ -161,7 +161,6 @@ export default class DragSensor extends Sensor {
     this.trigger(container, dragStopEvent);
 
     this.dragging = false;
-    this.delayOver = false;
     this.startEvent = null;
 
     this[reset]();
@@ -210,7 +209,6 @@ export default class DragSensor extends Sensor {
     this.startEvent = event;
 
     this.mouseDownTimeout = setTimeout(() => {
-      this.delayOver = true;
       target.draggable = true;
       this.draggableElement = target;
     }, this.options.delay);

src/Draggable/Sensors/MouseSensor/MouseSensor.js

@@ -1,4 +1,4 @@
-import {closest, distance} from 'shared/utils';
+import {closest, distance as euclideanDistance} from 'shared/utils';
 import Sensor from '../Sensor';
 import {DragStartSensorEvent, DragMoveSensorEvent, DragStopSensorEvent} from '../SensorEvent';
 
@@ -63,28 +63,27 @@ export default class MouseSensor extends Sensor {
     if (event.button !== 0 || event.ctrlKey || event.metaKey) {
       return;
     }
-
-    this.startEvent = event;
-
-    document.addEventListener('mouseup', this[onMouseUp]);
-    document.addEventListener('mousemove', this[onDistanceChange]);
-
     const container = closest(event.target, this.containers);
 
     if (!container) {
       return;
     }
 
-    document.addEventListener('dragstart', preventNativeDragStart);
+    const {delay = 0} = this.options;
+    const {pageX, pageY} = event;
+
+    Object.assign(this, {pageX, pageY});
+    this.onMouseDownAt = Date.now();
+    this.startEvent = event;
 
     this.currentContainer = container;
-    this.mouseDownTimeout = setTimeout(() => {
-      this.delayOver = true;
-      if (this.distance < this.options.distance) {
-        return;
-      }
-      this[startDrag]();
-    }, this.options.delay);
+    document.addEventListener('mouseup', this[onMouseUp]);
+    document.addEventListener('dragstart', preventNativeDragStart);
+    document.addEventListener('mousemove', this[onDistanceChange]);
+
+    this.mouseDownTimeout = window.setTimeout(() => {
+      this[onDistanceChange]({pageX: this.pageX, pageY: this.pageY});
+    }, delay);
   }
 
   /**
@@ -114,15 +113,28 @@ export default class MouseSensor extends Sensor {
   }
 
   /**
-   * Detect change in distance
+   * Detect change in distance, starting drag when both
+   * delay and distance requirements are met
    * @private
    * @param {Event} event - Mouse move event
    */
   [onDistanceChange](event) {
-    if (this.dragging) return;
-    this.distance = distance(this.startEvent.pageX, this.startEvent.pageY, event.pageX, event.pageY);
+    const {pageX, pageY} = event;
+    const {delay, distance} = this.options;
+    const {startEvent} = this;
+
+    Object.assign(this, {pageX, pageY});
+
+    if (!this.currentContainer) {
+      return;
+    }
+
+    const timeElapsed = Date.now() - this.onMouseDownAt;
+    const distanceTravelled = euclideanDistance(startEvent.pageX, startEvent.pageY, pageX, pageY) || 0;
 
-    if (this.delayOver && this.distance >= this.options.distance) {
+    if (timeElapsed >= delay && distanceTravelled >= distance) {
+      window.clearTimeout(this.mouseDownTimeout);
+      document.removeEventListener('mousemove', this[onDistanceChange]);
       this[startDrag]();
     }
   }
@@ -187,8 +199,6 @@ export default class MouseSensor extends Sensor {
 
     this.currentContainer = null;
     this.dragging = false;
-    this.distance = 0;
-    this.delayOver = false;
     this.startEvent = null;
   }