loleaflet: fix zooms and scroll annotations of the layer Impress

Change-Id: I4785551ebac4e8f0c1f877a00b651e7ac1203e67
Reviewed-on: https://gerrit.libreoffice.org/36967
Reviewed-by: Jan Holesovsky <kendy@collabora.com>
Tested-by: Jan Holesovsky <kendy@collabora.com>

2 files changed, 40 insertions, 2 deletions

diff --git a/loleaflet/src/layer/tile/ImpressTileLayer.js b/loleaflet/src/layer/tile/ImpressTileLayer.js
index 5a1b73aa7..ee7f2ae5a 100644
--- a/loleaflet/src/layer/tile/ImpressTileLayer.js
+++ b/loleaflet/src/layer/tile/ImpressTileLayer.js
@@ -4,6 +4,7 @@
  */
 
 L.ImpressTileLayer = L.TileLayer.extend({
+	extraSize: L.point(290, 0),
 
 	newAnnotation: function (comment) {
 		var annotation = L.annotation(this._map.getCenter(), comment, {noMenu: true}).addTo(this._map);
@@ -12,6 +13,7 @@ L.ImpressTileLayer = L.TileLayer.extend({
 	},
 
 	beforeAdd: function (map) {
+		map.on('zoomend', this._onAnnotationZoom, this);
 		map.on('updateparts', this.onUpdateParts, this);
 		map.on('AnnotationCancel', this.onAnnotationCancel, this);
 		map.on('AnnotationReply', this.onReplyClick, this);
@@ -37,6 +39,18 @@ L.ImpressTileLayer = L.TileLayer.extend({
 		}
 	},
 
+	hasAnnotations: function (part) {
+		var annotations = this._annotations[this._partHashes[part]];
+		return annotations && annotations.length > 0;
+	},
+
+	updateDocBounds: function (count, extraSize) {
+		var annotations = this._annotations[this._partHashes[this._selectedPart]];
+		if (annotations && annotations.length === count) {
+			this._map._docLayer._updateMaxBounds(true, extraSize);
+		}
+	},
+
 	onAdd: function (map) {
 		L.TileLayer.prototype.onAdd.call(this, map);
 		this._annotations = {};
@@ -98,6 +112,10 @@ L.ImpressTileLayer = L.TileLayer.extend({
 		this._map.focus();
 	},
 
+	_onAnnotationZoom: function (e) {
+		this.layoutAnnotations();
+	},
+
 	onReplyClick: function (e) {
 		var comment = {
 			Id: {
@@ -127,6 +145,9 @@ L.ImpressTileLayer = L.TileLayer.extend({
 	onUpdateParts: function (e) {
 		if (typeof this._prevSelectedPart === 'number') {
 			this.hideAnnotations(this._prevSelectedPart);
+			if (this.hasAnnotations(this._selectedPart)) {
+				this._map._docLayer._updateMaxBounds(true);
+			}
 			this.layoutAnnotations();
 		}
 	},
@@ -144,7 +165,10 @@ L.ImpressTileLayer = L.TileLayer.extend({
 
 	layoutAnnotations: function () {
 		var annotations = this._annotations[this._partHashes[this._selectedPart]];
-		var topRight = this._map.latLngToLayerPoint(this._map.options.maxBounds.getNorthEast()).add(L.point(this.options.marginX, this.options.marginY));
+		var scale = this._map.getZoomScale(this._map.getZoom(), 10);
+		var topRight = this._map.latLngToLayerPoint(this._map.options.maxBounds.getNorthEast())
+			.subtract(this.extraSize.multiplyBy(scale))
+			.add(L.point(this.options.marginX, this.options.marginY));
 		var bounds, annotation;
 		for (var index in annotations) {
 			annotation = annotations[index];
@@ -190,6 +214,9 @@ L.ImpressTileLayer = L.TileLayer.extend({
 				this._annotations[comment.parthash].push(L.annotation(this._map.options.maxBounds.getSouthEast(), comment).addTo(this._map));
 			}
 			this._topAnnotation = 0;
+			if (this.hasAnnotations(this._selectedPart)) {
+				this._map._docLayer._updateMaxBounds(true);
+			}
 			this.layoutAnnotations();
 		} else {
 			L.TileLayer.prototype._onCommandValuesMsg.call(this, textMsg);
@@ -205,10 +232,12 @@ L.ImpressTileLayer = L.TileLayer.extend({
 				}
 				this._annotations[obj.comment.parthash].push(L.annotation(this._map.options.maxBounds.getSouthEast(), obj.comment).addTo(this._map));
 				this._topAnnotation = Math.min(this._topAnnotation, this._annotations[this._partHashes[this._selectedPart]].length - 1);
+				this.updateDocBounds(1, this.extraSize);
 				this.layoutAnnotations();
 			} else if (obj.comment.action === 'Remove') {
 				this.removeAnnotation(obj.comment.id);
 				this._topAnnotation = Math.min(this._topAnnotation, this._annotations[this._partHashes[this._selectedPart]].length - 1);
+				this.updateDocBounds(0);
 				this.layoutAnnotations();
 			} else if (obj.comment.action === 'Modify') {
 				var modified = this.getAnnotation(obj.comment.id);
@@ -379,5 +408,14 @@ L.ImpressTileLayer = L.TileLayer.extend({
 				partNames: this._partHashes
 			});
 		}
+	},
+
+	_updateMaxBounds: function (sizeChanged, extraSize) {
+		if (!extraSize) {
+			var annotations = this._annotations && this._partHashes && this._selectedPart !== undefined ?
+				this._annotations[this._partHashes[this._selectedPart]] : [];
+			extraSize = annotations && annotations.length > 0 ? this.extraSize : null;
+		}
+		L.GridLayer.prototype._updateMaxBounds.call(this, sizeChanged, extraSize, {panInside: false});
 	}
 });
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index dd2331d61..6f7159e12 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -49,7 +49,7 @@ L.TileLayer = L.GridLayer.extend({
 		detectRetina: true,
 		crossOrigin: false,
 		previewInvalidationTimeout: 1000,
-		marginX: 50,
+		marginX: 10,
 		marginY: 10
 	},