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

Mihai Varga mihai.varga at collabora.com
Thu Jul 9 23:26:58 PDT 2015


 loleaflet/src/layer/tile/GridLayer.js |  104 ++++++++++++++++++++++++++++++++++
 loleaflet/src/layer/tile/TileLayer.js |   15 ++++
 2 files changed, 118 insertions(+), 1 deletion(-)

New commits:
commit e1c3426b6e2e621694e2a7ea61c446a55a7b720e
Author: Mihai Varga <mihai.varga at collabora.com>
Date:   Fri Jul 10 09:25:32 2015 +0300

    loleaflet: keep prefetch borders if the view didn't change
    
    Also, only prefetch tiles from a 5 tiles widte border. Not more because
    it would freeze the UI

diff --git a/loleaflet/src/layer/tile/GridLayer.js b/loleaflet/src/layer/tile/GridLayer.js
index f77b575..fc67031 100644
--- a/loleaflet/src/layer/tile/GridLayer.js
+++ b/loleaflet/src/layer/tile/GridLayer.js
@@ -104,6 +104,7 @@ L.GridLayer = L.Layer.extend({
 	getEvents: function () {
 		var events = {
 			viewreset: this._viewReset,
+			movestart: this._moveStart,
 			moveend: this._move
 		};
 
@@ -449,8 +450,17 @@ L.GridLayer = L.Layer.extend({
 		return this.options.tileSize;
 	},
 
+	_moveStart: function () {
+		clearInterval(this._tilesPrefetcher);
+		this._tilesPrefetcher = null;
+		this._preFetchBorder = null;
+	},
+
 	_move: function () {
 		this._update();
+		if (!this._tilesPreFetcher) {
+			this._tilesPreFetcher = setInterval(L.bind(this._preFetchTiles, this), 2000);
+		}
 	},
 
 	_update: function (center, zoom) {
@@ -786,36 +796,44 @@ L.GridLayer = L.Layer.extend({
 		var center = map.getCenter();
 		var zoom = map.getZoom();
 
-		var pixelBounds = map.getPixelBounds(center, zoom),
-			tileRange = this._pxBoundsToTileRange(pixelBounds),
-			queue = [],
-			finalQueue = [];
-			tilesToFetch = 10;
-
-		while ((tileRange.min.x >= 0 || tileRange.min.y >= 0 ||
-				tileRange.max.x * this._tileWidthTwips < this._docWidthTwips ||
-				 tileRange.max.y * this._tileHeightTwips < this._docHeightTwips) &&
-				tilesToFetch > 0) {
+		if (!this._preFetchBorder) {
+			var pixelBounds = map.getPixelBounds(center, zoom),
+				tileBorder = this._pxBoundsToTileRange(pixelBounds);
+			this._preFetchBorder = tileBorder;
+		}
+		else {
+			tileBorder = this._preFetchBorder;
+		}
+		var queue = [],
+			finalQueue = [],
+			tilesToFetch = 10,
+			borderWidth = 0;
+			// don't search on a border wider than 5 tiles because it will freeze the UI
+
+		while ((tileBorder.min.x >= 0 || tileBorder.min.y >= 0 ||
+				tileBorder.max.x * this._tileWidthTwips < this._docWidthTwips ||
+				 tileBorder.max.y * this._tileHeightTwips < this._docHeightTwips) &&
+				tilesToFetch > 0 && borderWidth < 5) {
 			// while the bounds do not fully contain the document
 
-			for (var i = tileRange.min.x; i <= tileRange.max.x; i++) {
+			for (var i = tileBorder.min.x; i <= tileBorder.max.x; i++) {
 				// tiles below the visible area
-				var coords = new L.Point(i, tileRange.max.y);
+				var coords = new L.Point(i, tileBorder.max.y);
 				queue.push(coords);
 			}
-			for (i = tileRange.min.x; i <= tileRange.max.x; i++) {
+			for (i = tileBorder.min.x; i <= tileBorder.max.x; i++) {
 				// tiles above the visible area
-				coords = new L.Point(i, tileRange.min.y);
+				coords = new L.Point(i, tileBorder.min.y);
 				queue.push(coords);
 			}
-			for (i = tileRange.min.y; i <= tileRange.max.y; i++) {
+			for (i = tileBorder.min.y; i <= tileBorder.max.y; i++) {
 				// tiles to the right of the visible area
-				coords = new L.Point(tileRange.max.x, i);
+				coords = new L.Point(tileBorder.max.x, i);
 				queue.push(coords);
 			}
-			for (i = tileRange.min.y; i <= tileRange.max.y; i++) {
+			for (i = tileBorder.min.y; i <= tileBorder.max.y; i++) {
 				// tiles to the left of the visible area
-				coords = new L.Point(tileRange.min.x, i);
+				coords = new L.Point(tileBorder.min.x, i);
 				queue.push(coords);
 			}
 
@@ -834,18 +852,24 @@ L.GridLayer = L.Layer.extend({
 				finalQueue.push(coords);
 				tilesToFetch -= 1;
 			}
-			if (tileRange.min.x >= 0) {
-				tileRange.min.x -= 1;
+			if (tilesToFetch === 0) {
+				// don't update the border as there are still
+				// some tiles to be fetched
+				continue;
+			}
+			if (tileBorder.min.x >= 0) {
+				tileBorder.min.x -= 1;
 			}
-			if (tileRange.min.y >= 0) {
-				tileRange.min.y -= 1;
+			if (tileBorder.min.y >= 0) {
+				tileBorder.min.y -= 1;
 			}
-			if (tileRange.max.x * this._tileWidthTwips <= this._docWidthTwips) {
-				tileRange.max.x += 1;
+			if (tileBorder.max.x * this._tileWidthTwips <= this._docWidthTwips) {
+				tileBorder.max.x += 1;
 			}
-			if (tileRange.max.y * this._tileHeightTwips <= this._docHeightTwips) {
-				tileRange.max.y += 1;
+			if (tileBorder.max.y * this._tileHeightTwips <= this._docHeightTwips) {
+				tileBorder.max.y += 1;
 			}
+			borderWidth += 1;
 		}
 
 		if (finalQueue.length > 0) {
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index 378c272..7599cf5 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -213,6 +213,7 @@ L.TileLayer = L.GridLayer.extend({
 	getEvents: function () {
 		var events = {
 			viewreset: this._viewReset,
+			movestart: this._moveStart,
 			moveend: this._move,
 			keydown: this._signalKey,
 			keypress: this._signalKey,
@@ -1046,9 +1047,15 @@ L.TileLayer = L.GridLayer.extend({
 
 	_onZoom: function (e) {
 		if (e.type === 'zoomstart') {
+			clearInterval(this._tilesPrefetcher);
+			this._tilesPrefetcher = null;
+			this._preFetchBorder = null;
 		}
 		else if (e.type === 'zoomend') {
 			this._onUpdateCursor();
+			if (!this._tilesPreFetcher) {
+				this._tilesPreFetcher = setInterval(L.bind(this._preFetchTiles, this), 2000);
+			}
 		}
 	}
 });
commit 1cb3cfcc81903fd0ecf4f558d00d6471fdd059b7
Author: Mihai Varga <mihai.varga at collabora.com>
Date:   Fri Jul 10 09:04:03 2015 +0300

    loleaflet: prefetch tiles around the current visible area
    
    Tiles are prefetched from the border of the current visible area
    and the border expands as the tiles are fetched. In the end covering
    the whole document if left alone.

diff --git a/loleaflet/src/layer/tile/GridLayer.js b/loleaflet/src/layer/tile/GridLayer.js
index 6521d5f..f77b575 100644
--- a/loleaflet/src/layer/tile/GridLayer.js
+++ b/loleaflet/src/layer/tile/GridLayer.js
@@ -507,6 +507,7 @@ L.GridLayer = L.Layer.extend({
 				// we know that a new set of tiles that cover the whole view has been requested
 				// so we're able to cancel the previous requests that are being processed
 				this._map.socket.send('canceltiles');
+				this._pendingTilesCount = 0;
 				for (key in this._tiles) {
 					if (!this._tiles[key].loaded) {
 						L.DomUtil.remove(this._tiles[key].el);
@@ -651,6 +652,7 @@ L.GridLayer = L.Layer.extend({
 		if (!this._tileCache[key]) {
 			if (this.options.useSocket && this._map.socket) {
 				var twips = this._coordsToTwips(coords);
+				this._pendingTilesCount += 1;
 				this._map.socket.send('tile ' +
 										'part=' + this._currentPart + ' ' +
 										'width=' + this._tileSize + ' ' +
@@ -775,6 +777,84 @@ L.GridLayer = L.Layer.extend({
 	_onScrollEnd: function (evt) {
 		this._prevScrollY = -evt.mcs.top;
 		this._prevScrollX = -evt.mcs.left;
+	},
+
+	_preFetchTiles: function () {
+		if (this._pendingTilesCount > 0) {
+			return;
+		}
+		var center = map.getCenter();
+		var zoom = map.getZoom();
+
+		var pixelBounds = map.getPixelBounds(center, zoom),
+			tileRange = this._pxBoundsToTileRange(pixelBounds),
+			queue = [],
+			finalQueue = [];
+			tilesToFetch = 10;
+
+		while ((tileRange.min.x >= 0 || tileRange.min.y >= 0 ||
+				tileRange.max.x * this._tileWidthTwips < this._docWidthTwips ||
+				 tileRange.max.y * this._tileHeightTwips < this._docHeightTwips) &&
+				tilesToFetch > 0) {
+			// while the bounds do not fully contain the document
+
+			for (var i = tileRange.min.x; i <= tileRange.max.x; i++) {
+				// tiles below the visible area
+				var coords = new L.Point(i, tileRange.max.y);
+				queue.push(coords);
+			}
+			for (i = tileRange.min.x; i <= tileRange.max.x; i++) {
+				// tiles above the visible area
+				coords = new L.Point(i, tileRange.min.y);
+				queue.push(coords);
+			}
+			for (i = tileRange.min.y; i <= tileRange.max.y; i++) {
+				// tiles to the right of the visible area
+				coords = new L.Point(tileRange.max.x, i);
+				queue.push(coords);
+			}
+			for (i = tileRange.min.y; i <= tileRange.max.y; i++) {
+				// tiles to the left of the visible area
+				coords = new L.Point(tileRange.min.x, i);
+				queue.push(coords);
+			}
+
+			for (i = 0; i < queue.length && tilesToFetch > 0; i++) {
+				coords = queue[i];
+				coords.z = zoom;
+				coords.part = this._currentPart,
+				key = this._tileCoordsToKey(coords);
+
+				if (!this._isValidTile(coords) ||
+						this._tiles[key] ||
+						this._tileCache[key]) {
+					continue;
+				}
+
+				finalQueue.push(coords);
+				tilesToFetch -= 1;
+			}
+			if (tileRange.min.x >= 0) {
+				tileRange.min.x -= 1;
+			}
+			if (tileRange.min.y >= 0) {
+				tileRange.min.y -= 1;
+			}
+			if (tileRange.max.x * this._tileWidthTwips <= this._docWidthTwips) {
+				tileRange.max.x += 1;
+			}
+			if (tileRange.max.y * this._tileHeightTwips <= this._docHeightTwips) {
+				tileRange.max.y += 1;
+			}
+		}
+
+		if (finalQueue.length > 0) {
+			var fragment = document.createDocumentFragment();
+			for (i = 0; i < finalQueue.length; i++) {
+				this._addTile(finalQueue[i], fragment);
+			}
+			this._level.el.appendChild(fragment);
+		}
 	}
 });
 
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index fa5100e..378c272 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -175,6 +175,7 @@ L.TileLayer = L.GridLayer.extend({
 			draggable: true
 		});
 		this._mouseEventsQueue = [];
+		this._pendingTilesCount = 0;
 		this._textArea = L.DomUtil.get('clipboard');
 		this._textArea.focus();
 	},
@@ -399,6 +400,9 @@ L.TileLayer = L.GridLayer.extend({
 				this._parts = command.parts;
 				this._currentPart = command.currentPart;
 				this._update();
+				if (!this._tilesPreFetcher) {
+					this._tilesPreFetcher = setInterval(L.bind(this._preFetchTiles, this), 2000);
+				}
 			}
 		}
 		else if (textMsg.startsWith('statusindicatorstart:')) {
@@ -435,7 +439,9 @@ L.TileLayer = L.GridLayer.extend({
 			else {
 				this._tileCache[key] = 'data:image/png;base64,' + window.btoa(strBytes);
 			}
-
+			if (this._pendingTilesCount > 0) {
+				this._pendingTilesCount -= 1;
+			}
 		}
 		else if (textMsg.startsWith('textselection:')) {
 			strTwips = textMsg.match(/\d+/g);


More information about the Libreoffice-commits mailing list