[Libreoffice-commits] online.git: loleaflet/src

[Pranam Lashkari (via logerrit)]

 loleaflet/src/dom/Draggable.js                |    2 
 loleaflet/src/map/handler/Map.TouchGesture.js |   57 ++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)

New commits:
commit 7338e3d8185170dbedcc3b40a15c4a6adcc47ef1
Author:     Pranam Lashkari <lpranam at collabora.com>
AuthorDate: Fri Feb 7 07:13:08 2020 +0530
Commit:     Henry Castro <hcastro at collabora.com>
CommitDate: Mon Feb 10 22:27:47 2020 +0100

    Made document scrolling  Ergonomic
    
    added momentum to scrolling making scolling feel smoother and easier
    
    Change-Id: If760761580aeea57116673b67787f9f5451ab5e2
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/88072
    Tested-by: Henry Castro <hcastro at collabora.com>
    Reviewed-by: Henry Castro <hcastro at collabora.com>

diff --git a/loleaflet/src/dom/Draggable.js b/loleaflet/src/dom/Draggable.js
index 5ed23ed73..a442ec798 100644
--- a/loleaflet/src/dom/Draggable.js
+++ b/loleaflet/src/dom/Draggable.js
@@ -132,7 +132,7 @@ L.Draggable = L.Evented.extend({
 			}
 		}
 		if (!offset.x && !offset.y) { return; }
-		if (L.Browser.touch && Math.abs(offset.x) + Math.abs(offset.y) < 3) { return; }
+		if (L.Browser.touch && Math.abs(offset.x) + Math.abs(offset.y) < 3 && !e.autoscroll) { return; }
 
 		L.DomEvent.preventDefault(e);
 
diff --git a/loleaflet/src/map/handler/Map.TouchGesture.js b/loleaflet/src/map/handler/Map.TouchGesture.js
index db7efb084..5fb364ef9 100644
--- a/loleaflet/src/map/handler/Map.TouchGesture.js
+++ b/loleaflet/src/map/handler/Map.TouchGesture.js
@@ -42,6 +42,10 @@ L.Map.TouchGesture = L.Handler.extend({
 				time: 500
 			});
 
+			this._hammer.get('swipe').set({
+				threshold: 5
+			});
+
 			var singleTap = this._hammer.get('tap');
 			var doubleTap = this._hammer.get('doubletap');
 			var tripleTap = new Hammer.Tap({event: 'tripletap', taps: 3 });
@@ -93,6 +97,7 @@ L.Map.TouchGesture = L.Handler.extend({
 		this._hammer.on('pinchmove', L.bind(this._onPinch, this));
 		this._hammer.on('pinchend', L.bind(this._onPinchEnd, this));
 		this._hammer.on('tripletap', L.bind(this._onTripleTap, this));
+		this._hammer.on('swipe', L.bind(this._onSwipe, this));
 		this._map.on('updatepermission', this._onPermission, this);
 		this._onPermission({perm: this._map._permission});
 	},
@@ -109,6 +114,7 @@ L.Map.TouchGesture = L.Handler.extend({
 		this._hammer.off('doubletap', L.bind(this._onDoubleTap, this));
 		this._hammer.off('press', L.bind(this._onPress, this));
 		this._hammer.off('tripletap', L.bind(this._onTripleTap, this));
+		this._hammer.off('swipe', L.bind(this._onSwipe, this));
 		this._map.off('updatepermission', this._onPermission, this);
 	},
 
@@ -359,6 +365,7 @@ L.Map.TouchGesture = L.Handler.extend({
 	},
 
 	_onPanStart: function (e) {
+		L.Util.cancelAnimFrame(this.autoscrollAnimReq);
 		var point = e.pointers[0],
 		    containerPoint = this._map.mouseEventToContainerPoint(point),
 		    layerPoint = this._map.containerPointToLayerPoint(containerPoint),
@@ -546,5 +553,55 @@ L.Map.TouchGesture = L.Handler.extend({
 		};
 
 		return fakeEvt;
+	},
+
+	// Code and maths for the ergonomic scrolling is inspired formul
+	// https://ariya.io/2013/11/javascript-kinetic-scrolling-part-2
+	// Some constants are changed based on the testing/experimenting/trial-error
+
+	_onSwipe: function (e) {
+		this._velocity = new L.Point(e.velocityX, e.velocityY);
+		this._amplitude = this._velocity.multiplyBy(32);
+		this._newPos = L.DomUtil.getPosition(this._map._mapPane);
+		var evt = this._constructFakeEvent({
+			clientX: e.center.x,
+			clientY: e.center.y,
+			target: this._map._mapPane
+		},'mousedown');
+		this._startSwipePoint = new L.Point(evt.clientX, evt.clientY);
+		this._map.dragging._draggable._onDown(evt);
+		this._timeStamp = Date.now();
+		L.Util.requestAnimFrame(this._autoscroll, this, true);
+	},
+
+	_autoscroll: function() {
+		var elapsed, delta;
+		elapsed = Date.now() - this._timeStamp;
+		delta = this._amplitude.multiplyBy(Math.exp(-elapsed / 325));
+		var e = this._constructFakeEvent({
+			clientX: delta.x + this._startSwipePoint.x,
+			clientY: delta.y + this._startSwipePoint.y,
+			target: this._map._mapPane,
+		}, 'mousemove');
+		e.autoscroll = true;
+		if (delta.x > 0.2 || delta.x < -0.2 || delta.y > 0.2 || delta.y < -0.2) {
+			if (this._map.getDocSize().x < this._map.getSize().x) {
+				//don't scroll horizontally if document fits the view
+				delta.x = 0;
+			}
+			if (this._map.getDocSize().y < this._map.getSize().y) {
+				//don't scroll vertically if document fits the view
+				delta.y = 0;
+			}
+
+			this._map.dragging._draggable._startPoint = this._startSwipePoint;
+			this._map.dragging._draggable._startPos = this._newPos;
+			this._newPos._add(delta);
+			this._map.dragging._draggable._onMove(e);
+			this.autoscrollAnimReq = L.Util.requestAnimFrame(this._autoscroll, this, true);
+		}
+		else {
+			this._map.dragging._draggable._onUp(e);
+		}
 	}
 });