loleaflet: partpagerectangles command integration

An event is fired with the page dimensions.
Also the current page number is updated based on which page contains
the current view's center

loleaflet/README

@@ -193,6 +193,9 @@ Writer pages:
             + e.docType = document type, should be 'text'
         map.on('invalidatepreview', function (e) {})
             + e.id = the preview's id
+        map.on('partpagerectangles', function (e) {}) where:
+            + e.pixelRectangles = An array of bounds representing each page's dimension in pixels on the current zoom level
+            + e.twipsRectangles = An array of bounds representing each page's dimension in twips.
 
 Error:
     - events

loleaflet/reference.html

@@ -6825,6 +6825,26 @@ map.addControl(new MyControl());
 	</tr>
 </table>
 
+<h3 id="partpagerectangles-event">PartPageRectangles</h3>
+
+<table data-id='events'>
+	<tr>
+		<th class="width100">property</th>
+		<th>type</th>
+		<th>description</th>
+	</tr>
+	<tr>
+		<td><code><b>pixelRectangles</b></code></td>
+        <td><code><a href="#bounds">Bounds[]</a></code></td>
+		<td>An array of bounds representing each page's dimension in pixels on the current zoom level.</td>
+	</tr>
+	<tr>
+		<td><code><b>twipsRectangles</b></code></td>
+		<td><code><a href="#bounds">Bounds[]</a></code></td>
+		<td>An array of bounds representing each page's dimension in twips.</td>
+	</tr>
+</table>
+
 <h3 id="permission-event">PermissionEvent</h3>
 
 <table data-id='events'>

loleaflet/src/control/Parts.js

@@ -123,6 +123,11 @@ L.Map.include({
 			docLayer._currentPage = page;
 		}
 		L.Socket.sendMessage('setpage page=' + docLayer._currentPage);
+		this.fire('pagenumberchanged', {
+			currentPage: docLayer._currentPage,
+			pages: docLayer._pages,
+			docType: docLayer._docType
+		});
 	},
 
 	getNumberOfPages: function () {

loleaflet/src/core/Socket.js

@@ -52,6 +52,7 @@ L.Socket = {
 		}
 		this.socket.send(msg);
 		this.socket.send('status');
+		this.socket.send('partpagerectangles');
 		for (var i = 0; i < this._msgQueue.length; i++) {
 			this.socket.send(this._msgQueue[i].msg);
 			L.Log.log(this._msgQueue[i].msg, this._msgQueue[i].coords);

loleaflet/src/layer/tile/GridLayer.js

@@ -444,6 +444,7 @@ L.GridLayer = L.Layer.extend({
 	_move: function () {
 		this._update();
 		this._resetPreFetching(true);
+		this._onCurrentPageUpdate();
 	},
 
 	_update: function (center, zoom) {

loleaflet/src/layer/tile/TileLayer.js

@@ -102,6 +102,7 @@ L.TileLayer = L.GridLayer.extend({
 		map.on('drag resize zoomend', this._updateScrollOffset, this);
 		map.on('copy', this._onCopy, this);
 		map.on('zoomend', this._onUpdateCursor, this);
+		map.on('zoomend', this._onUpdatePartPageRectangles, this);
 		map.on('dragstart', this._onDragStart, this);
 		map.on('requestloksession', this._onRequestLOKSession, this);
 		map.on('error', this._mapOnError, this);
@@ -204,6 +205,9 @@ L.TileLayer = L.GridLayer.extend({
 			msg += 'height=' + this._docHeightTwips;
 			this._onInvalidateTilesMsg(msg);
 		}
+		else if (textMsg.startsWith('partpagerectangles:')) {
+			this._onPartPageRectanglesMsg(textMsg);
+		}
 		else if (textMsg.startsWith('searchnotfound:')) {
 			this._onSearchNotFoundMsg(textMsg);
 		}
@@ -288,6 +292,34 @@ L.TileLayer = L.GridLayer.extend({
 		this._onUpdateCursor();
 	},
 
+	_onPartPageRectanglesMsg: function (textMsg) {
+		textMsg = textMsg.substring(19);
+		var pages = textMsg.split(';');
+		this._partPageRectanglesTwips = [];
+		this._partPageRectanglesPixels = [];
+		for (var i = 0; i < pages.length; i++) {
+			var strTwips = pages[i].match(/\d+/g);
+			if (!strTwips) {
+				// probably not a text file
+				return;
+			}
+			var topLeftTwips = new L.Point(parseInt(strTwips[0]), parseInt(strTwips[1]));
+			var offset = new L.Point(parseInt(strTwips[2]), parseInt(strTwips[3]));
+			var bottomRightTwips = topLeftTwips.add(offset);
+			var pageBoundsTwips = new L.Bounds(topLeftTwips, bottomRightTwips);
+			this._partPageRectanglesTwips.push(pageBoundsTwips);
+			var pageBoundsPixels = new L.Bounds(
+					this._twipsToPixels(topLeftTwips),
+					this._twipsToPixels(bottomRightTwips));
+			this._partPageRectanglesPixels.push(pageBoundsPixels);
+		}
+		this._map.fire('partpagerectangles', {
+			pixelRectangles: this._partPageRectanglesPixels,
+			twipsRectangles: this._partPageRectanglesTwips
+		});
+		this._onCurrentPageUpdate();
+	},
+
 	_onSearchNotFoundMsg: function (textMsg) {
 		var originalPhrase = textMsg.substring(16);
 		this._map.fire('search', {originalPhrase: originalPhrase, count: 0});
@@ -689,6 +721,42 @@ L.TileLayer = L.GridLayer.extend({
 				this._map.setZoom(Math.min(10, this._map.getZoom() + zoomDelta), {animate: false});
 			}
 		}
+	},
+
+	_onCurrentPageUpdate: function () {
+		var mapCenter = this._map.project(this._map.getCenter());
+		if (!this._partPageRectanglesPixels || !(this._currentPage >= 0) ||
+				this._partPageRectanglesPixels[this._currentPage].contains(mapCenter)) {
+			// page number has not changed
+			return;
+		}
+		for (var i = 0; i < this._partPageRectanglesPixels.length; i++) {
+			if (this._partPageRectanglesPixels[i].contains(mapCenter)) {
+				this._currentPage = i;
+				this._map.fire('pagenumberchanged', {
+					currentPage: this._currentPage,
+					pages: this._pages,
+					docType: this._docType
+				});
+				return;
+			}
+		}
+	},
+
+	_onUpdatePartPageRectangles: function () {
+		if (this._partPageRectanglesPixels.length > 0) {
+			this._partPageRectanglesPixels = [];
+			for (var i = 0; i < this._partPageRectanglesTwips.length; i++) {
+				var pageBounds = new L.Bounds(
+						this._twipsToPixels(this._partPageRectanglesTwips[i].min),
+						this._twipsToPixels(this._partPageRectanglesTwips[i].max));
+				this._partPageRectanglesPixels.push(pageBounds);
+			}
+			this._map.fire('partpagerectangles', {
+				pixelRectangles: this._partPageRectanglesPixels,
+				twipsRectangles: this._partPageRectanglesTwips
+			});
+		}
 	}
 });