edit todo, add pageX/Y to SensorEvent

TODO.md

@@ -1,4 +1,6 @@
 - [ ] Fix bugs on mobile browsers.
+  - [ ] Issue: TouchSensor: Why set pageX/Y to clientX/Y
+  - [x] Add pageX/Y to SensorEvent
 - [ ] event offset: Which coordiante given in API? Which coordiante use in code? \
-coordiantes: page, client, container, mirror
+       coordiantes: page, client, container, mirror
 - [ ] `SnapMirror.line` edge case

examples/src/content/Plugins/SnapMirror/index.js

@@ -13,8 +13,12 @@ function initCircle() {
     targets.push({
       x: rect.x - containerRect.x + rect.width / 2,
       y: rect.y - containerRect.y + rect.width / 2,
-      range(coord, target, relativePoint, {eventOffset}) {
-        return (coord.x + eventOffset.x - target.x) ** 2 + (coord.y + eventOffset.y - target.y) ** 2 < range ** 2;
+      range(coord, target, relativePoint, {pointInMirrorCoordinate}) {
+        return (
+          (coord.x + pointInMirrorCoordinate.x - target.x) ** 2 +
+            (coord.y + pointInMirrorCoordinate.y - target.y) ** 2 <
+          range ** 2
+        );
       },
     });
   });

src/Draggable/Sensors/MouseSensor/MouseSensor.js

@@ -109,6 +109,8 @@ export default class MouseSensor extends Sensor {
     const container = this.currentContainer;
 
     const dragStartEvent = new DragStartSensorEvent({
+      pageX: startEvent.pageX,
+      pageY: startEvent.pageY,
       clientX: startEvent.clientX,
       clientY: startEvent.clientY,
       target: startEvent.target,
@@ -166,6 +168,8 @@ export default class MouseSensor extends Sensor {
     const target = document.elementFromPoint(event.clientX, event.clientY);
 
     const dragMoveEvent = new DragMoveSensorEvent({
+      pageX: event.pageX,
+      pageY: event.pageY,
       clientX: event.clientX,
       clientY: event.clientY,
       target,
@@ -199,6 +203,8 @@ export default class MouseSensor extends Sensor {
     const target = document.elementFromPoint(event.clientX, event.clientY);
 
     const dragStopEvent = new DragStopSensorEvent({
+      pageX: event.pageX,
+      pageY: event.pageY,
       clientX: event.clientX,
       clientY: event.clientY,
       target,

src/Draggable/Sensors/SensorEvent/SensorEvent.js

@@ -37,6 +37,26 @@ export class SensorEvent extends AbstractEvent {
     return this.data.clientY;
   }
 
+  /**
+   * Normalized pageX for both touch and mouse events
+   * @property pageX
+   * @type {Number}
+   * @readonly
+   */
+  get pageX() {
+    return this.data.pageX;
+  }
+
+  /**
+   * Normalized pageY for both touch and mouse events
+   * @property pageY
+   * @type {Number}
+   * @readonly
+   */
+  get pageY() {
+    return this.data.pageY;
+  }
+
   /**
    * Normalized target for both touch and mouse events
    * Returns the element that is behind cursor or touch pointer

src/Draggable/Sensors/TouchSensor/TouchSensor.js

@@ -140,11 +140,13 @@ export default class TouchSensor extends Sensor {
   [startDrag]() {
     const startEvent = this.startEvent;
     const container = this.currentContainer;
-    const {clientX, clientY} = touchCoords(startEvent);
+    const {clientX, clientY, pageX, pageY} = touchCoords(startEvent);
 
     const dragStartEvent = new DragStartSensorEvent({
       clientX,
       clientY,
+      pageX,
+      pageY,
       target: startEvent.target,
       container,
       originalEvent: startEvent,
@@ -196,6 +198,8 @@ export default class TouchSensor extends Sensor {
     const dragMoveEvent = new DragMoveSensorEvent({
       clientX,
       clientY,
+      pageX,
+      pageY,
       target,
       container: this.currentContainer,
       originalEvent: event,
@@ -235,6 +239,8 @@ export default class TouchSensor extends Sensor {
     const dragStopEvent = new DragStopSensorEvent({
       clientX,
       clientY,
+      pageX,
+      pageY,
       target,
       container: this.currentContainer,
       originalEvent: event,

src/Plugins/SnapMirror/SnapMirror.js

@@ -50,7 +50,7 @@ export default class SnapMirror extends AbstractPlugin {
       ...this.getOptions(),
     };
 
-    this.eventOffset = null;
+    this.pointInMirrorCoordinate = null;
     this.mirror = null;
     this.overContainer = null;
     this.relativePoints = null;
@@ -106,7 +106,7 @@ export default class SnapMirror extends AbstractPlugin {
     // so use source's dimensions
     const rect = evt.source.getBoundingClientRect();
 
-    this.eventOffset = {
+    this.pointInMirrorCoordinate = {
       x: evt.sensorEvent.clientX - rect.x,
       y: evt.sensorEvent.clientY - rect.y,
     };
@@ -122,7 +122,7 @@ export default class SnapMirror extends AbstractPlugin {
   [onMirrorDestroy]() {
     cancelAnimationFrame(this.lastAnimationFrame);
     this.lastAnimationFrame = null;
-    this.eventOffset = null;
+    this.pointInMirrorCoordinate = null;
     this.mirror = null;
     this.relativePoints = null;
     this.overContainer = null;
@@ -151,7 +151,7 @@ export default class SnapMirror extends AbstractPlugin {
 
     cancelAnimationFrame(this.lastAnimationFrame);
     this.lastAnimationFrame = requestAnimationFrame(() => {
-      positionMirror(evt.originalEvent, this);
+      positionMirror(evt.sensorEvent, this);
       this.lastAnimationFrame = null;
     });
   }
@@ -166,13 +166,16 @@ export default class SnapMirror extends AbstractPlugin {
       return;
     }
     this.overContainer = evt.overContainer;
+    const rect = evt.overContainer.getBoundingClientRect();
+    this.overContainer.pageX = window.scrollX + rect.x;
+    this.overContainer.pageY = window.scrollY + rect.y;
 
     cancelAnimationFrame(this.lastAnimationFrame);
     this.lastAnimationFrame = requestAnimationFrame(() => {
       this.overContainer.append(this.mirror);
       this[calcRelativePoints]();
       this.mirror.style.position = 'absolute';
-      positionMirror(evt.originalEvent, this);
+      positionMirror(evt.sensorEvent, this);
       this.lastAnimationFrame = null;
     });
   }
@@ -192,7 +195,7 @@ export default class SnapMirror extends AbstractPlugin {
     this.lastAnimationFrame = requestAnimationFrame(() => {
       evt.sourceContainer.append(this.mirror);
       this.mirror.style.position = 'fixed';
-      positionMirror(evt.originalEvent, this);
+      positionMirror(evt.sensorEvent, this);
       cancelAnimationFrame(this.lastAnimationFrame);
       this.lastAnimationFrame = null;
     });
@@ -212,27 +215,28 @@ export default class SnapMirror extends AbstractPlugin {
   }
 }
 
-function positionMirror(mouseMoveEvent, snapMirror) {
-  const {mirror, overContainer, eventOffset} = snapMirror;
+function positionMirror(sensorEvent, snapMirror) {
+  const {mirror, overContainer, pointInMirrorCoordinate} = snapMirror;
 
   if (!overContainer) {
     // point relative to client and event offset
     const point = {
-      x: mouseMoveEvent.clientX - eventOffset.x,
-      y: mouseMoveEvent.clientY - eventOffset.y,
+      x: sensorEvent.clientX - pointInMirrorCoordinate.x,
+      y: sensorEvent.clientY - pointInMirrorCoordinate.y,
     };
     mirror.style.transform = `translate3d(${Math.round(point.x)}px, ${Math.round(point.y)}px, 0)`;
     return;
   }
 
   const pointRelativeToPage = {
-    x: mouseMoveEvent.pageX - eventOffset.x,
-    y: mouseMoveEvent.pageY - eventOffset.y,
+    x: sensorEvent.pageX - pointInMirrorCoordinate.x,
+    y: sensorEvent.pageY - pointInMirrorCoordinate.y,
   };
   const pointRelativeToContainer = {
-    x: pointRelativeToPage.x + overContainer.scrollLeft - overContainer.offsetLeft,
-    y: pointRelativeToPage.y + overContainer.scrollTop - overContainer.offsetTop,
+    x: pointRelativeToPage.x + overContainer.scrollLeft - overContainer.pageX,
+    y: pointRelativeToPage.y + overContainer.scrollTop - overContainer.pageY,
   };
+
   const point = getNearestSnapPoint(pointRelativeToContainer, snapMirror);
   mirror.style.transform = `translate3d(${Math.round(point.x)}px, ${Math.round(point.y)}px, 0)`;
 }