overlay painting after async tile paint calls

The overlay needs to be painted only for the tile area.

Signed-off-by: Dennis Francis <dennis.francis@collabora.com>
Change-Id: I725a6b656d8261a90e6debbea0478a0581822b40

4 files changed, 22 insertions, 7 deletions

diff --git a/loleaflet/src/layer/tile/CanvasTileLayer.js b/loleaflet/src/layer/tile/CanvasTileLayer.js
index 21f65304eb..ec8190c974 100644
--- a/loleaflet/src/layer/tile/CanvasTileLayer.js
+++ b/loleaflet/src/layer/tile/CanvasTileLayer.js
@@ -463,6 +463,14 @@ L.TileSectionManager = L.Class.extend({
 		this.onResize();
 	},
 
+	paintOverlayArea: function(coords) {
+		var tileTopLeft = coords.getPos();
+		var tileSize = this._layer._getTileSize();
+		var tileBounds = new L.Bounds(tileTopLeft,
+			tileTopLeft.add(new L.Point(tileSize, tileSize)));
+		this._layer._canvasOverlay.paintRegion(tileBounds);
+	},
+
 	update: function () {
 		this._sectionContainer.requestReDraw();
 	},
@@ -1235,6 +1243,7 @@ L.CanvasTileLayer = L.TileLayer.extend({
 
 		// paint this tile on canvas.
 		this._painter.paint(tile);
+		this._painter.paintOverlayArea(coords);
 
 		if (this._noTilesToLoad()) {
 			this.fire('load');
diff --git a/loleaflet/src/layer/vector/CPath.ts b/loleaflet/src/layer/vector/CPath.ts
index 38f0f66210..7cb059601a 100644
--- a/loleaflet/src/layer/vector/CPath.ts
+++ b/loleaflet/src/layer/vector/CPath.ts
@@ -82,7 +82,7 @@ abstract class CPath {
 		}
 	}
 
-	updatePath() {
+	updatePath(paintArea?: CBounds) {
 		// Overridden in implementations.
 	}
 
diff --git a/loleaflet/src/layer/vector/CPolyline.ts b/loleaflet/src/layer/vector/CPolyline.ts
index 95f7d9103f..79c3e072ac 100644
--- a/loleaflet/src/layer/vector/CPolyline.ts
+++ b/loleaflet/src/layer/vector/CPolyline.ts
@@ -160,15 +160,15 @@ class CPolyline extends CPath {
 		return new CBounds(this.bounds.getTopLeft().subtract(p), this.bounds.getBottomRight().add(p));
 	}
 
-	updatePath() {
-		this.clipPoints();
+	updatePath(paintArea?: CBounds) {
+		this.clipPoints(paintArea);
 		this.simplifyPoints();
 
 		this.renderer.updatePoly(this);
 	}
 
 	// clip polyline by renderer bounds so that we have less to render for performance
-	clipPoints() {
+	clipPoints(paintArea?: CBounds) {
 		if (this.noClip) {
 			return;
 		}
@@ -176,7 +176,7 @@ class CPolyline extends CPath {
 		this.parts = new Array<Array<CPoint>>();
 
 		var parts = this.parts;
-		var bounds = this.renderer.getBounds();
+		var bounds = paintArea ? paintArea : this.renderer.getBounds();
 		var i: number;
 		var j: number;
 		var k: number;
diff --git a/loleaflet/src/layer/vector/CanvasOverlay.ts b/loleaflet/src/layer/vector/CanvasOverlay.ts
index 29c4144867..eb78bceb97 100644
--- a/loleaflet/src/layer/vector/CanvasOverlay.ts
+++ b/loleaflet/src/layer/vector/CanvasOverlay.ts
@@ -55,13 +55,17 @@ class CanvasOverlay {
 		this.redraw(path);
 	}
 
+	paintRegion(paintArea: CBounds) {
+		this.draw(paintArea);
+	}
+
 	private isVisible(path: CPath): boolean {
 		var pathBounds = path.getBounds();
 		this.updateCanvasBounds();
 		return this.bounds.intersects(pathBounds);
 	}
 
-	private draw() {
+	private draw(paintArea?: CBounds) {
 		var orderedPaths = Array<CPath>();
 		this.paths.forEach((path: any) => {
 			orderedPaths.push(path);
@@ -73,8 +77,10 @@ class CanvasOverlay {
 			return a.zIndex - b.zIndex;
 		});
 
+		var renderer = this;
 		orderedPaths.forEach((path: any) => {
-			path.updatePath();
+			if (renderer.isVisible(path))
+				path.updatePath(paintArea);
 		});
 	}