commit de3fcd5bdad3649d89815e509d44af7608be0751
parent adf8478a2f74fd11997ac715509ee35a340179f0
Author: Sergey Orlov <wladimirych@gmail.com>
Date: Mon, 4 May 2020 18:21:11 +0200
elevation profile: move DragEvents to separate module to enable reuse
Related to #16
Diffstat:
2 files changed, 136 insertions(+), 118 deletions(-)
diff --git a/src/lib/leaflet.control.elevation-profile/index.js b/src/lib/leaflet.control.elevation-profile/index.js
@@ -5,6 +5,7 @@ import config from '~/config';
import '~/lib/leaflet.control.commons';
import {notify} from '~/lib/notifications';
import logging from '~/lib/logging';
+import {DragEvents} from '~/lib/leaflet.events.drag';
function calcSamplingInterval(length) {
var targetPointsN = 2000;
@@ -95,124 +96,6 @@ function offestFromEvent(e) {
};
}
-function movementFromEvents(e1, e2) {
- return {
- movementX: e2.clientX - e1.clientX,
- movementY: e2.clientY - e1.clientY
- };
-}
-
-var DragEvents = L.Class.extend({
- options: {
- dragTolerance: 2,
- dragButtons: [0]
- },
-
- includes: L.Mixin.Events,
-
- initialize: function(eventsSource, eventsTarget, options) {
- L.setOptions(this, options);
- if (eventsTarget) {
- this.eventsTarget = eventsTarget;
- } else {
- this.eventsTarget = this;
- }
- this.dragStartPos = [];
- this.prevEvent = [];
- this.isDragging = [];
-
- L.DomEvent.on(eventsSource, 'mousemove', this.onMouseMove, this);
- L.DomEvent.on(eventsSource, 'mouseup', this.onMouseUp, this);
- L.DomEvent.on(eventsSource, 'mousedown', this.onMouseDown, this);
- L.DomEvent.on(eventsSource, 'mouseleave', this.onMouseLeave, this);
- },
-
- onMouseDown: function(e) {
- if (this.options.dragButtons.includes(e.button)) {
- e._offset = offestFromEvent(e);
- this.dragStartPos[e.button] = e;
- this.prevEvent[e.button] = e;
- L.DomUtil.disableImageDrag();
- L.DomUtil.disableTextSelection();
- }
- },
-
- onMouseUp: function(e) {
- L.DomUtil.enableImageDrag();
- L.DomUtil.enableTextSelection();
-
- if (this.options.dragButtons.includes(e.button)) {
- this.dragStartPos[e.button] = null;
- if (this.isDragging[e.button]) {
- this.isDragging[e.button] = false;
- this.fire('dragend', L.extend({dragButton: e.button, origEvent: e},
- offestFromEvent(e), movementFromEvents(this.prevEvent[e.button], e)
- )
- );
- } else {
- this.fire('click', L.extend({dragButton: e.button, origEvent: e},
- offestFromEvent(e)
- )
- );
- }
- }
- },
-
- onMouseMove: function(e) {
- var i, button,
- that = this;
-
- function exceedsTolerance(button) {
- var tolerance = that.options.dragTolerance;
- return Math.abs(e.clientX - that.dragStartPos[button].clientX) > tolerance ||
- Math.abs(e.clientY - that.dragStartPos[button].clientY) > tolerance;
- }
-
- var dragButtons = this.options.dragButtons;
- for (i = 0; i < dragButtons.length; i++) {
- button = dragButtons[i];
- if (this.isDragging[button]) {
- this.eventsTarget.fire('drag', L.extend({dragButton: button, origEvent: e},
- offestFromEvent(e), movementFromEvents(this.prevEvent[button], e)
- )
- );
- } else if (this.dragStartPos[button] && exceedsTolerance(button)) {
- this.isDragging[button] = true;
- this.eventsTarget.fire('dragstart', L.extend(
- {dragButton: button, origEvent: this.dragStartPos[button]},
- this.dragStartPos[button]._offset
- )
- );
- this.eventsTarget.fire('drag', L.extend({
- dragButton: button,
- origEvent: e,
- startEvent: that.dragStartPos[button]
- }, offestFromEvent(e), movementFromEvents(this.prevEvent[button], e)
- )
- );
- }
- this.prevEvent[button] = e;
- }
- },
-
- onMouseLeave: function(e) {
- var i, button;
- var dragButtons = this.options.dragButtons;
- for (i = 0; i < dragButtons.length; i++) {
- button = dragButtons[i];
- if (this.isDragging[button]) {
- this.isDragging[button] = false;
- this.fire('dragend', L.extend({dragButton: button, origEvent: e},
- offestFromEvent(e), movementFromEvents(this.prevEvent[button], e)
- )
- );
- }
- }
- this.dragStartPos = {};
- }
- }
-);
-
const ElevationProfile = L.Class.extend({
options: {
elevationsServer: config.elevationsServer,
diff --git a/src/lib/leaflet.events.drag/index.js b/src/lib/leaflet.events.drag/index.js
@@ -0,0 +1,135 @@
+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
+ };
+}
+
+var DragEvents = L.Class.extend({
+ options: {
+ dragTolerance: 2,
+ dragButtons: [0]
+ },
+
+ includes: L.Mixin.Events,
+
+ initialize: function(eventsSource, eventsTarget, options) {
+ L.setOptions(this, options);
+ if (eventsTarget) {
+ this.eventsTarget = eventsTarget;
+ } else {
+ this.eventsTarget = this;
+ }
+ this.dragStartPos = [];
+ this.prevEvent = [];
+ this.isDragging = [];
+
+ L.DomEvent.on(eventsSource, 'mousemove', this.onMouseMove, this);
+ L.DomEvent.on(eventsSource, 'mouseup', this.onMouseUp, this);
+ L.DomEvent.on(eventsSource, 'mousedown', this.onMouseDown, this);
+ L.DomEvent.on(eventsSource, 'mouseleave', this.onMouseLeave, this);
+ },
+
+ onMouseDown: function(e) {
+ if (this.options.dragButtons.includes(e.button)) {
+ e._offset = offestFromEvent(e);
+ this.dragStartPos[e.button] = e;
+ this.prevEvent[e.button] = e;
+ L.DomUtil.disableImageDrag();
+ L.DomUtil.disableTextSelection();
+ }
+ },
+
+ onMouseUp: function(e) {
+ L.DomUtil.enableImageDrag();
+ L.DomUtil.enableTextSelection();
+
+ if (this.options.dragButtons.includes(e.button)) {
+ this.dragStartPos[e.button] = null;
+ if (this.isDragging[e.button]) {
+ this.isDragging[e.button] = false;
+ this.fire('dragend', L.extend({dragButton: e.button, origEvent: e},
+ offestFromEvent(e), movementFromEvents(this.prevEvent[e.button], e)
+ )
+ );
+ } else {
+ this.fire('click', L.extend({dragButton: e.button, origEvent: e},
+ offestFromEvent(e)
+ )
+ );
+ }
+ }
+ },
+
+ onMouseMove: function(e) {
+ var i, button,
+ that = this;
+
+ function exceedsTolerance(button) {
+ var tolerance = that.options.dragTolerance;
+ return Math.abs(e.clientX - that.dragStartPos[button].clientX) > tolerance ||
+ Math.abs(e.clientY - that.dragStartPos[button].clientY) > tolerance;
+ }
+
+ var dragButtons = this.options.dragButtons;
+ for (i = 0; i < dragButtons.length; i++) {
+ button = dragButtons[i];
+ if (this.isDragging[button]) {
+ this.eventsTarget.fire('drag', L.extend({dragButton: button, origEvent: e},
+ offestFromEvent(e), movementFromEvents(this.prevEvent[button], e)
+ )
+ );
+ } else if (this.dragStartPos[button] && exceedsTolerance(button)) {
+ this.isDragging[button] = true;
+ this.eventsTarget.fire('dragstart', L.extend(
+ {dragButton: button, origEvent: this.dragStartPos[button]},
+ this.dragStartPos[button]._offset
+ )
+ );
+ this.eventsTarget.fire('drag', L.extend({
+ dragButton: button,
+ origEvent: e,
+ startEvent: that.dragStartPos[button]
+ }, offestFromEvent(e), movementFromEvents(this.prevEvent[button], e)
+ )
+ );
+ }
+ this.prevEvent[button] = e;
+ }
+ },
+
+ onMouseLeave: function(e) {
+ var i, button;
+ var dragButtons = this.options.dragButtons;
+ for (i = 0; i < dragButtons.length; i++) {
+ button = dragButtons[i];
+ if (this.isDragging[button]) {
+ this.isDragging[button] = false;
+ this.fire('dragend', L.extend({dragButton: button, origEvent: e},
+ offestFromEvent(e), movementFromEvents(this.prevEvent[button], e)
+ )
+ );
+ }
+ }
+ this.dragStartPos = {};
+ }
+ }
+);
+
+export {DragEvents};
