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

[Dennis Francis (via logerrit)]

 loleaflet/src/layer/tile/CanvasTileLayer.js |   14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

New commits:
commit 6da69a2584402eed292067a7205eb01a04df8b6e
Author:     Dennis Francis <dennis.francis at collabora.com>
AuthorDate: Fri Aug 7 17:14:56 2020 +0530
Commit:     Dennis Francis <dennis.francis at collabora.com>
CommitDate: Wed Aug 12 10:21:25 2020 +0200

    loleaflet: mobile/tablet: do not use L.CanvasTilePainter's RAF-loop...
    
    ... because the hammerjs swipe handler already uses a
    requestAnimationFrame loop to fire move/drag events. Using
    L.CanvasTilePainter's own requestAnimationFrame loop to do the updates
    in that case results in poor UX/performance.
    
    Change-Id: I2e31fb190b62f57bcb0bd00bec8b7ff4b7119aa1
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/100482
    Tested-by: Jenkins
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Dennis Francis <dennis.francis at collabora.com>

diff --git a/loleaflet/src/layer/tile/CanvasTileLayer.js b/loleaflet/src/layer/tile/CanvasTileLayer.js
index 51941a73a..3da9ea82e 100644
--- a/loleaflet/src/layer/tile/CanvasTileLayer.js
+++ b/loleaflet/src/layer/tile/CanvasTileLayer.js
@@ -431,8 +431,18 @@ L.CanvasTileLayer = L.TileLayer.extend({
 			this._cypressHelperDiv = L.DomUtil.create('div', '', this._container);
 		}
 
-		this._map.on('movestart', this._painter.startUpdates, this._painter);
-		this._map.on('moveend', this._painter.stopUpdates, this._painter);
+		// For mobile/tablet the hammerjs swipe handler already uses a requestAnimationFrame to fire move/drag events
+		// Using L.CanvasTilePainter's own requestAnimationFrame loop to do the updates in that case does not perform well.
+		if (window.mode.isMobile() || window.mode.isTablet()) {
+			this._map.on('move', this._painter.update, this._painter);
+			this._map.on('moveend', function () {
+				setTimeout(this.update.bind(this), 200);
+			}, this._painter);
+		}
+		else {
+			this._map.on('movestart', this._painter.startUpdates, this._painter);
+			this._map.on('moveend', this._painter.stopUpdates, this._painter);
+		}
 		this._map.on('zoomend', this._painter.update, this._painter);
 		this._map.on('splitposchanged', this._painter.update, this._painter);
 		this._map.on('move', this._syncTilePanePos, this);