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

[Dennis Francis (via logerrit)]

 loleaflet/src/layer/tile/CanvasTileLayer.js |   31 ++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

New commits:
commit 797f8fc775bcaba8c8b1e6909dd4da0ae0b06d64
Author:     Dennis Francis <dennis.francis at collabora.com>
AuthorDate: Tue Aug 11 13:58:42 2020 +0530
Commit:     Dennis Francis <dennis.francis at collabora.com>
CommitDate: Wed Aug 12 11:33:37 2020 +0200

    loleaflet: avoid flicker due to map-size changes...
    
    by resizing the canvas only when the width/height of the map increases.
    A canvas resize causes horrible flickering especially when the dpiScale
    is not 1. This problem is more prevalent in mobile due to the on-screen
    keyboard.
    
    Change-Id: I10135d91f122eb751f16791476e09a45dbe09752
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/100490
    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 93131252e..06911991c 100644
--- a/loleaflet/src/layer/tile/CanvasTileLayer.js
+++ b/loleaflet/src/layer/tile/CanvasTileLayer.js
@@ -107,6 +107,7 @@ L.CanvasTilePainter = L.Class.extend({
 		this.setImageSmoothing(enableImageSmoothing);
 		var mapSize = this._map.getPixelBounds().getSize();
 		this._lastSize = mapSize;
+		this._lastMapSize = mapSize;
 		this._setCanvasSize(mapSize.x, mapSize.y);
 	},
 
@@ -216,7 +217,7 @@ L.CanvasTilePainter = L.Class.extend({
 		var splitPanesContext = this._layer.getSplitPanesContext();
 		var zoom = Math.round(this._map.getZoom());
 		var pixelBounds = this._map.getPixelBounds();
-		var newSize = pixelBounds.getSize();
+		var newMapSize = pixelBounds.getSize();
 		var newTopLeft = pixelBounds.getTopLeft();
 		var part = this._layer._selectedPart;
 		var newSplitPos = splitPanesContext ?
@@ -224,25 +225,39 @@ L.CanvasTilePainter = L.Class.extend({
 
 		var zoomChanged = (zoom !== this._lastZoom);
 		var partChanged = (part !== this._lastPart);
-		var sizeChanged = !newSize.equals(this._lastSize);
+
+		var mapSizeChanged = !newMapSize.equals(this._lastMapSize);
+		// To avoid flicker, only resize the canvas element if width or height of the map increases.
+		var newSize = new L.Point(Math.max(newMapSize.x, this._lastSize.x),
+			Math.max(newMapSize.y, this._lastSize.y));
+		var resizeCanvas = !newSize.equals(this._lastSize);
+
+		var topLeftChanged = this._topLeft === undefined || !newTopLeft.equals(this._topLeft);
+
 		var splitPosChanged = !newSplitPos.equals(this._splitPos);
 
 		var skipUpdate = (
-			this._topLeft !== undefined &&
+			!topLeftChanged &&
 			!zoomChanged &&
 			!partChanged &&
-			!sizeChanged &&
-			!splitPosChanged &&
-			newTopLeft.equals(this._topLeft));
+			!resizeCanvas &&
+			!splitPosChanged);
 
 		if (skipUpdate) {
 			return;
 		}
 
-		if (sizeChanged) {
+		if (resizeCanvas) {
 			this._setCanvasSize(newSize.x, newSize.y);
 			this._lastSize = newSize;
 		}
+		else if (mapSizeChanged && topLeftChanged) {
+			this.clear();
+		}
+
+		if (mapSizeChanged) {
+			this._lastMapSize = newMapSize;
+		}
 
 		if (splitPosChanged) {
 			this._splitPos = newSplitPos;
@@ -250,7 +265,7 @@ L.CanvasTilePainter = L.Class.extend({
 
 		// TODO: fix _shiftAndPaint for high DPI.
 		var shiftPaintDisabled = true;
-		var fullRepaintNeeded = zoomChanged || partChanged || sizeChanged || shiftPaintDisabled;
+		var fullRepaintNeeded = zoomChanged || partChanged || resizeCanvas || shiftPaintDisabled;
 
 		this._lastZoom = zoom;
 		this._lastPart = part;