Preload map improvements.

Change geometry and layout to better match each of writer, calc
and impress - to give more insight into what is pre-cached.

Signed-off-by: Michael Meeks <[email protected]>
Change-Id: Iebd6fd3cf1a56e02b18b493248f0d07ed7bf3094

browser/src/canvas/sections/PreloadMapSection.ts

@@ -41,10 +41,6 @@ class PreloadMapSection extends app.definitions.canvasSectionObject {
 		// Get the 'main' view
 		var viewRange = tileRanges.length == 4 ? tileRanges[3] : tileRanges[0];
 
-		var offx = 50;
-		var offy = 400;
-		var sizePix = 3;
-		var voffset = sizePix * 10 * 5;
 		var canvas = this.context;
 
 		var tileRange = new L.Bounds(viewRange.min, viewRange.max);
@@ -59,59 +55,98 @@ class PreloadMapSection extends app.definitions.canvasSectionObject {
 				docLayer._tileSize,
 		);
 
+		// writer defaults
+		var sizePix: number = 3;
+		var numParts = 1;
+		var enlargeX = 0.1;
+		var enlargeY = 2;
+		var mainYMultiply = 10.0;
+		if (docLayer.isCalc()) {
+			enlargeX = 2;
+			enlargeY = 2;
+			sizePix = 6;
+			numParts = 3;
+			mainYMultiply = 2;
+		} else if (docLayer.isImpress()) {
+			enlargeX = 0.5;
+			enlargeY = 0.5;
+			mainYMultiply = 0;
+			sizePix = 6;
+			numParts = 7;
+		}
+
 		// Enlarge in each dimension
-		tileRange.min.y = tileRange.min.y - viewHeight * 2;
-		tileRange.max.y = tileRange.max.y + viewHeight * 2;
-		tileRange.min.x = tileRange.min.x - viewWidth * 2;
-		tileRange.max.x = tileRange.max.x + viewWidth * 2;
-
-		console.log('Render preload map ' + viewHeight);
-		for (var p = -1; p <= 1; ++p) {
-			for (var j = tileRange.min.y; j <= tileRange.max.y; ++j) {
-				for (var i: number = tileRange.min.x; i <= tileRange.max.x; ++i) {
+		tileRange.min.x = tileRange.min.x - Math.floor(viewWidth * enlargeX);
+		tileRange.max.x = tileRange.max.x + Math.floor(viewWidth * enlargeX);
+		tileRange.min.y = tileRange.min.y - Math.floor(viewHeight * enlargeY);
+		tileRange.max.y = tileRange.max.y + Math.floor(viewHeight * enlargeY);
+
+		var preParts = (numParts - 1) / 2;
+		var partBounds = new Array(numParts);
+		for (var i = 0; i < partBounds.length; ++i) {
+			partBounds[i] = new L.Bounds(tileRange.min, tileRange.max);
+			partBounds[i].part = part + i - preParts;
+		}
+
+		// current view should be bigger vertically at least
+		partBounds[preParts].min.y -= viewHeight * mainYMultiply;
+		partBounds[preParts].max.y += viewHeight * mainYMultiply;
+
+		var offx: number = 50;
+		var offy: number = 400;
+		var voffset: number = 0;
+		for (var p = 0; p < partBounds.length; ++p) {
+			var range = partBounds[p];
+			for (var j = range.min.y; j <= range.max.y; ++j) {
+				for (var i: number = range.min.x; i <= range.max.x; ++i) {
 					var tile = undefined;
 
-					if (i >= 0 && j >= 0 && part + p >= 0) {
+					if (i >= 0 && j >= 0 && range.part >= 0) {
 						var coords = new L.TileCoordData(
 							i * ctx.tileSize.x,
 							j * ctx.tileSize.y,
 							zoom,
-							part + p,
+							range.part,
 							docLayer._selectedMode,
 						);
 						var key = coords.key();
 						tile = docLayer._tiles[key];
+
+						if (!tile)
+							canvas.fillStyle = 'rgba(128, 128, 128, 0.5)'; // grey
+						// state of the tile
+						else if (!tile.hasContent())
+							canvas.fillStyle = 'rgba(255, 0, 0, 0.8)'; // red
+						else if (tile.needsFetch())
+							canvas.fillStyle = 'rgba(255, 255, 0, 0.8)'; // yellow
+						// present
+						else canvas.fillStyle = 'rgba(0, 255, 0, 0.5)'; // green
 					} // outside document range
-					else canvas.fillStyle = 'rgba(32, 32, 32, 0.3)'; // dark grey
-
-					if (!tile)
-						canvas.fillStyle = 'rgba(128, 128, 128, 0.3)'; // grey
-					// state of the tile
-					else if (!tile.hasContent())
-						canvas.fillStyle = 'rgba(255, 0, 0, 0.8)'; // red
-					else if (tile.needsFetch())
-						canvas.fillStyle = 'rgba(255, 255, 0, 0.8)'; // yellow
-					// present
-					else canvas.fillStyle = 'rgba(0, 255, 0, 0.5)'; // green
+					else canvas.fillStyle = 'rgba(0, 0, 0, 0.3)'; // dark grey
+
 					canvas.fillRect(
-						offx + (i - tileRange.min.x) * sizePix,
-						offy + (j - tileRange.min.y) * sizePix + voffset * p,
+						offx + (i - range.min.x) * sizePix,
+						offy + (j - range.min.y) * sizePix + voffset,
 						sizePix,
 						sizePix,
 					);
 				}
 			}
-		}
+			// view rectangle
+			if (range.part == part) {
+				// viewport in tiles - not that accurate.
+				canvas.strokeStyle = 'rgba(0, 0, 0, 0.5)';
+				canvas.lineWidth = 1.0;
+				canvas.strokeRect(
+					offx + (viewRange.min.x - range.min.x) * sizePix,
+					offy + (viewRange.min.y - range.min.y) * sizePix + voffset,
+					viewWidth * sizePix,
+					viewHeight * sizePix,
+				);
+			}
 
-		// viewport in tiles - not that accurate.
-		canvas.strokeStyle = 'rgba(0, 0, 0, 0.5)';
-		canvas.lineWidth = 1.0;
-		canvas.strokeRect(
-			offx + (viewRange.min.x - tileRange.min.x) * sizePix,
-			offy + (viewRange.min.y - tileRange.min.y) * sizePix,
-			viewWidth * sizePix,
-			viewHeight * sizePix,
-		);
+			voffset += sizePix * (range.max.y - range.min.y + 4);
+		}
 	}
 }