From eeb951ffc9904c0d0fdc38982b2b6b0cbce6a635 Mon Sep 17 00:00:00 2001 From: JuFeng Zhang Date: Mon, 27 Jul 2020 19:04:24 +0800 Subject: [PATCH] edit todo, add pageX/Y to SensorEvent --- TODO.md | 4 ++- .../src/content/Plugins/SnapMirror/index.js | 8 +++-- .../Sensors/MouseSensor/MouseSensor.js | 6 ++++ .../Sensors/SensorEvent/SensorEvent.js | 20 ++++++++++++ .../Sensors/TouchSensor/TouchSensor.js | 8 ++++- src/Plugins/SnapMirror/SnapMirror.js | 32 +++++++++++-------- 6 files changed, 60 insertions(+), 18 deletions(-) diff --git a/TODO.md b/TODO.md index 5b7044f3..8a302d66 100644 --- a/TODO.md +++ b/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 diff --git a/examples/src/content/Plugins/SnapMirror/index.js b/examples/src/content/Plugins/SnapMirror/index.js index 853a858f..5707c70a 100644 --- a/examples/src/content/Plugins/SnapMirror/index.js +++ b/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 + ); }, }); }); diff --git a/src/Draggable/Sensors/MouseSensor/MouseSensor.js b/src/Draggable/Sensors/MouseSensor/MouseSensor.js index 2c28225c..9a737abe 100644 --- a/src/Draggable/Sensors/MouseSensor/MouseSensor.js +++ b/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, diff --git a/src/Draggable/Sensors/SensorEvent/SensorEvent.js b/src/Draggable/Sensors/SensorEvent/SensorEvent.js index d5aa4559..0c0fa8e7 100644 --- a/src/Draggable/Sensors/SensorEvent/SensorEvent.js +++ b/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 diff --git a/src/Draggable/Sensors/TouchSensor/TouchSensor.js b/src/Draggable/Sensors/TouchSensor/TouchSensor.js index 48345d28..1116c8f9 100644 --- a/src/Draggable/Sensors/TouchSensor/TouchSensor.js +++ b/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, diff --git a/src/Plugins/SnapMirror/SnapMirror.js b/src/Plugins/SnapMirror/SnapMirror.js index 29927b67..b1edb021 100644 --- a/src/Plugins/SnapMirror/SnapMirror.js +++ b/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)`; }