[Libreoffice-commits] online.git: Branch 'feature/calc-canvas' - loleaflet/src

[Jan Holesovsky (via logerrit)]

 loleaflet/src/layer/tile/CanvasTileLayer.js   |   20 ++++++++++++++++----
 loleaflet/src/layer/tile/GridLayer.js         |    2 +-
 loleaflet/src/map/anim/Map.ZoomAnimation.js   |    4 ++--
 loleaflet/src/map/handler/Map.TouchGesture.js |    4 ++--
 4 files changed, 21 insertions(+), 9 deletions(-)

New commits:
commit b7295e51e2a3a6a82e359eaf107a7819935ea0ce
Author:     Jan Holesovsky <kendy at collabora.com>
AuthorDate: Thu Sep 10 00:03:10 2020 +0200
Commit:     Jan Holesovsky <kendy at collabora.com>
CommitDate: Thu Sep 10 00:09:35 2020 +0200

    calc canvas: Zoom during the pinch-to-zoom too.
    
    Set the canvas' scale and translate back so that the zoom happens in the
    middle of the pinch.  Also change some getZoom() calls to accessing the
    map's _zoom directly, because the getZoom()'s value depend on whether we
    are in the middle of the animation or not.
    
    Change-Id: Iced7d67e49044c901a2c21496d9d12dbe718207b

diff --git a/loleaflet/src/layer/tile/CanvasTileLayer.js b/loleaflet/src/layer/tile/CanvasTileLayer.js
index e60042334..d035f6ee9 100644
--- a/loleaflet/src/layer/tile/CanvasTileLayer.js
+++ b/loleaflet/src/layer/tile/CanvasTileLayer.js
@@ -182,7 +182,13 @@ L.CanvasTilePainter = L.Class.extend({
 
 			// when using the pinch to zoom, set additional translation based */
 			// on the pinch movement
+			var scale = 1;
 			if (this._map._animatingZoom) {
+				// set the canvas' scale according to the pinch-to-zoom
+				this._canvasCtx.save();
+				scale = this._map.getZoomScale(this._map._animateToZoom, this._lastZoom);
+				this._canvasCtx.scale(scale, scale);
+
 				var centerOffset = this._map._getCenterOffset(this._map._animateToCenter);
 				paneOffset.x += Math.round(centerOffset.x);
 				paneOffset.y += Math.round(centerOffset.y);
@@ -202,14 +208,19 @@ L.CanvasTilePainter = L.Class.extend({
 						  crop.min.x - tileBounds.min.x,
 						  crop.min.y - tileBounds.min.y,
 						  cropWidth, cropHeight,
-						  crop.min.x - paneOffset.x,
-						  crop.min.y - paneOffset.y,
+						  (crop.min.x - paneOffset.x) / scale,
+						  (crop.min.y - paneOffset.y) / scale,
 						  cropWidth, cropHeight);
 			if (this._layer._debug)
 			{
 				this._canvasCtx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
 				this._canvasCtx.strokeRect(tile.coords.x, tile.coords.y, 256, 256);
 			}
+
+			if (this._map._animatingZoom) {
+				// we have set a scale, restore the state
+				this._canvasCtx.restore();
+			}
 		}
 	},
 
@@ -432,12 +443,13 @@ L.CanvasTileLayer = L.TileLayer.extend({
 			movestart: this._moveStart,
 			moveend: this._move,
 			// update tiles on move, but not more often than once per given interval
-			move: L.Util.throttle(this._move, this.options.updateInterval, this), // TODO we might want to make the updates more often (?)
+			move: L.Util.throttle(this._move, this.options.updateInterval, this),
 			splitposchanged: this._move,
 		};
 
 		if (this._zoomAnimated) {
-			events.zoomanim = L.Util.throttle(this._animateZoom, this.options.updateInterval, this); // TODO we might want to make the updates more often (?)
+			// update tiles on zoom, but not more often than once per given interval
+			events.zoomanim = L.Util.throttle(this._animateZoom, this.options.updateInterval, this);
 		}
 
 		return events;
diff --git a/loleaflet/src/layer/tile/GridLayer.js b/loleaflet/src/layer/tile/GridLayer.js
index 4ad07d8fa..4eaeb2f45 100644
--- a/loleaflet/src/layer/tile/GridLayer.js
+++ b/loleaflet/src/layer/tile/GridLayer.js
@@ -12,7 +12,7 @@ L.GridLayer = L.Layer.extend({
 		opacity: 1,
 
 		updateWhenIdle: (window.mode.isMobile() || window.mode.isTablet()),
-		updateInterval: 200,
+		updateInterval: 50, // 20x per second should be hopefully enough
 
 		attribution: null,
 		zIndex: null,
diff --git a/loleaflet/src/map/anim/Map.ZoomAnimation.js b/loleaflet/src/map/anim/Map.ZoomAnimation.js
index 0a8a23133..e365f4b39 100644
--- a/loleaflet/src/map/anim/Map.ZoomAnimation.js
+++ b/loleaflet/src/map/anim/Map.ZoomAnimation.js
@@ -100,8 +100,8 @@ L.Map.include(!zoomAnimated ? {} : {
 
 			L.DomUtil.addClass(this._mapPane, 'leaflet-zoom-anim');
 		} else if (endAnim) {
-			// explicitly end the zoom
-			this._animatingZoom = false;
+			// explicitly end the zoom & redraw
+			this._onZoomTransitionEnd();
 		}
 
 		this.fire('zoomanim', {
diff --git a/loleaflet/src/map/handler/Map.TouchGesture.js b/loleaflet/src/map/handler/Map.TouchGesture.js
index 6e74651be..b7bfad7b9 100644
--- a/loleaflet/src/map/handler/Map.TouchGesture.js
+++ b/loleaflet/src/map/handler/Map.TouchGesture.js
@@ -543,7 +543,7 @@ L.Map.TouchGesture = L.Handler.extend({
 		// we need to invert the offset or the map is moved in the opposite direction
 		var offset = {x: e.center.x - this._pinchStartCenter.x, y: e.center.y - this._pinchStartCenter.y};
 		var center = {x: this._pinchStartCenter.x - offset.x, y: this._pinchStartCenter.y - offset.y};
-		this._zoom = this._map._limitZoom(this._map.getScaleZoom(e.scale));
+		this._zoom = this._map._limitZoom(this._map.getScaleZoom(e.scale, this._map._zoom));
 		this._center = this._map._limitCenter(this._map.mouseEventToLatLng({clientX: center.x, clientY: center.y}),
 						      this._zoom, this._map.options.maxBounds);
 
@@ -555,7 +555,7 @@ L.Map.TouchGesture = L.Handler.extend({
 	},
 
 	_onPinchEnd: function () {
-		var oldZoom = this._map.getZoom(),
+		var oldZoom = this._map._zoom,
 		    zoomDelta = this._zoom - oldZoom,
 		    finalZoom = this._map._limitZoom(zoomDelta > 0 ? Math.ceil(this._zoom) : Math.floor(this._zoom));