commit e83750cb93107782a9775fa1357883fa86398578
parent 3e535a33582fb33ab001a7d16e86bceb13ae9b91
Author: Sergey Orlov <wladimirych@gmail.com>
Date: Tue, 5 May 2020 11:42:17 +0200
drag events: refactor
* fire drag events from dedicated method
* remove compatibility function for offsetX
* redesign compatibility property for movementX
Related to #16
Diffstat:
2 files changed, 38 insertions(+), 83 deletions(-)
diff --git a/src/lib/leaflet.control.elevation-profile/index.js b/src/lib/leaflet.control.elevation-profile/index.js
@@ -82,20 +82,6 @@ function pathRegularSamples(latlngs, step) {
return samples;
}
-function offestFromEvent(e) {
- if (e.offsetX === undefined) {
- var rect = e.target.getBoundingClientRect();
- return {
- offsetX: e.clientX - rect.left,
- offestY: e.clientY - rect.top
- };
- }
- return {
- offsetX: e.offsetX,
- offestY: e.offsetY
- };
-}
-
const ElevationProfile = L.Class.extend({
options: {
elevationsServer: config.elevationsServer,
@@ -228,7 +214,7 @@ const ElevationProfile = L.Class.extend({
// FIXME: restore hiding when we make display of selection on map
// this.cursorHide();
this.polyLineSelection.addTo(this._map).bringToBack();
- this.dragStart = e.offsetX;
+ this.selStartMousePos = e.originalEvent.offsetX;
}
},
@@ -250,15 +236,14 @@ const ElevationProfile = L.Class.extend({
icon.getElementsByClassName('elevation-profile-marker-label')[0].innerHTML = label;
},
- updateGraphSelection: function(e) {
- if (this.dragStart === null) {
+ updateGraphSelection: function(mousepos = null) {
+ if (this.selStartMousePos === null) {
return;
}
var selStart, selEnd;
- if (e) {
- var x = e.offsetX;
- selStart = Math.min(x, this.dragStart);
- selEnd = Math.max(x, this.dragStart);
+ if (mousepos !== null) {
+ selStart = Math.min(mousepos, this.selStartMousePos);
+ selEnd = Math.max(mousepos, this.selStartMousePos);
this.selStartInd = Math.round(this.xToIndex(selStart));
this.selEndInd = Math.round(this.xToIndex(selEnd));
@@ -280,28 +265,29 @@ const ElevationProfile = L.Class.extend({
onSvgDragEnd: function(e) {
if (e.dragButton === 0) {
this.cursorShow();
- this.updateGraphSelection(e);
+ this.updateGraphSelection(e.originalEvent.offsetX);
var stats = this.calcProfileStats(this.values.slice(this.selStartInd, this.selEndInd + 1));
this.updatePropsDisplay(stats);
L.DomUtil.addClass(this.propsContainer, 'elevation-profile-properties-selected');
}
if (e.dragButton === 2) {
- this.drawingContainer.scrollLeft -= e.movementX;
+ this.drawingContainer.scrollLeft -= e.dragMovement.x;
}
},
onSvgDrag: function(e) {
if (e.dragButton === 0) {
- this.updateGraphSelection(e);
+ this.updateGraphSelection(e.originalEvent.offsetX);
this.polyLineSelection.setLatLngs(this.samples.slice(this.selStartInd, this.selEndInd + 1));
}
if (e.dragButton === 2) {
- this.drawingContainer.scrollLeft -= e.movementX;
+ this.drawingContainer.scrollLeft -= e.dragMovement.x;
}
},
onSvgClick: function(e) {
- if (e.dragButton === 0) {
+ const button = e.originalEvent.button;
+ if (button === 0) {
this.dragStart = null;
L.DomUtil.addClass(this.graphSelection, 'elevation-profile-cursor-hidden');
L.DomUtil.removeClass(this.propsContainer, 'elevation-profile-properties-selected');
@@ -310,8 +296,8 @@ const ElevationProfile = L.Class.extend({
this.updatePropsDisplay(this.stats);
}
}
- if (e.dragButton === 2) {
- this.setMapPositionAtIndex(Math.round(this.xToIndex(e.offsetX)));
+ if (button === 2) {
+ this.setMapPositionAtIndex(Math.round(this.xToIndex(e.originalEvent.offsetX)));
}
},
@@ -336,11 +322,11 @@ const ElevationProfile = L.Class.extend({
this.horizZoom = 10;
}
- var x = offestFromEvent(e).offsetX;
+ var x = e.offsetX;
var ind = this.xToIndex(x);
var newScrollLeft = this.drawingContainer.scrollLeft +
- offestFromEvent(e).offsetX * (this.horizZoom / oldHorizZoom - 1);
+ e.offsetX * (this.horizZoom / oldHorizZoom - 1);
if (newScrollLeft < 0) {
newScrollLeft = 0;
}
@@ -660,7 +646,7 @@ const ElevationProfile = L.Class.extend({
if (!this.values) {
return;
}
- var ind = this.xToIndex(offestFromEvent(e).offsetX);
+ var ind = this.xToIndex(e.offsetX);
this.setCursorPosition(ind);
},
diff --git a/src/lib/leaflet.events.drag/index.js b/src/lib/leaflet.events.drag/index.js
@@ -1,26 +1,5 @@
import L from "leaflet";
-function offestFromEvent(e) {
- if (e.offsetX === undefined) {
- var rect = e.target.getBoundingClientRect();
- return {
- offsetX: e.clientX - rect.left,
- offestY: e.clientY - rect.top
- };
- }
- return {
- offsetX: e.offsetX,
- offestY: e.offsetY
- };
-}
-
-function movementFromEvents(e1, e2) {
- return {
- movementX: e2.clientX - e1.clientX,
- movementY: e2.clientY - e1.clientY
- };
-}
-
const DragEvents = L.Evented.extend({
options: {
dragTolerance: 2,
@@ -43,8 +22,8 @@ const DragEvents = L.Evented.extend({
onMouseDown: function(e) {
if (this.dragButton === null && this.options.dragButtons.includes(e.button)) {
this.dragButton = e.button;
- e._offset = offestFromEvent(e);
- this.startEvent = this.prevEvent = e;
+ this.startEvent = e;
+ this.prevEvent = e;
L.DomUtil.disableImageDrag();
L.DomUtil.disableTextSelection();
this._moveHandler = this.onMouseMove.bind(this);
@@ -62,15 +41,9 @@ const DragEvents = L.Evented.extend({
L.DomUtil.enableTextSelection();
if (this.isDragging) {
this.isDragging = false;
- this.fire('dragend', L.extend({dragButton: e.button, origEvent: e},
- offestFromEvent(e), movementFromEvents(this.prevEvent, e)
- )
- );
+ this.fireDragEvent('dragend', e);
} else {
- this.fire('click', L.extend({dragButton: e.button, origEvent: e},
- offestFromEvent(e)
- )
- );
+ this.fire('click', {originalEvent: e, target: this.element});
}
this.dragButton = null;
document.removeEventListener('mousemove', this._moveHandler, true);
@@ -88,37 +61,33 @@ const DragEvents = L.Evented.extend({
}
if (this.isDragging) {
- this.fire('drag', L.extend({dragButton: this.dragButton, origEvent: e},
- offestFromEvent(e), movementFromEvents(this.prevEvent, e)
- )
- );
+ this.fireDragEvent('drag', e);
+ this.prevEvent = e;
} else if (this.dragButton !== null && exceedsTolerance()) {
this.isDragging = true;
- this.fire('dragstart', L.extend(
- {dragButton: this.dragButton, origEvent: this.startEvent},
- this.startEvent._offset
- )
- );
- this.fire('drag', L.extend({
- dragButton: this.dragButton,
- origEvent: e,
- startEvent: that.startEvent
- }, offestFromEvent(e), movementFromEvents(this.prevEvent, e)
- )
- );
+ this.fireDragEvent('dragstart', this.startEvent);
+ this.fireDragEvent('drag', e);
+ this.prevEvent = e;
}
- this.prevEvent = e;
},
onMouseLeave: function(e) {
if (this.isDragging) {
this.isDragging = false;
- this.fire('dragend', L.extend({dragButton: this.dragButton, origEvent: e},
- offestFromEvent(e), movementFromEvents(this.prevEvent, e)
- )
- );
+ this.fireDragEvent('dragend', e);
this.dragButton = null;
}
+ },
+
+ fireDragEvent: function(type, originalEvent) {
+ const prevPos = L.point(this.prevEvent.clientX, this.prevEvent.clientY);
+ const pos = L.point(originalEvent.clientX, originalEvent.clientY);
+ const data = {
+ dragButton: this.dragButton,
+ originalEvent,
+ dragMovement: pos.subtract(prevPos) // e.movementX is not available in Safari
+ };
+ this.fire(type, data);
}
}
);
