loleaflet/src/layer/tile/ImpressTileLayer.js |  133 +++++++++++++++++++++------
 1 file changed, 105 insertions(+), 28 deletions(-)

New commits:
commit 2b8fc61dde36a9b7e4b9ff92a64ce4dbacfbd715
Author: Marco Cecchetti <[email protected]>
Date:   Sun May 14 15:16:24 2017 +0200

    loleaflet: impress: comments that are being modified are shown twice
    
    Reworked handling of annotation layout. Now it behaves more like
    writer annotations.
    
    Now scrolling up annotations leads to scrolling the current slide too
    when it is required in order to show not visible annotations.
    
    Moreover the top visible annotation is now remembered for each slide,
    and when the top annotation is not the first one, a bit of the bottom
    of the previous annotation is showed so that the user gets aware that
    there are more annotations above.
    
    Change-Id: I3d087a8db35143a5e3abcd3e95e5e612d7638891
    Reviewed-on: https://gerrit.libreoffice.org/37628
    Reviewed-by: Marco Cecchetti <[email protected]>
    Tested-by: Marco Cecchetti <[email protected]>

diff --git a/loleaflet/src/layer/tile/ImpressTileLayer.js 
b/loleaflet/src/layer/tile/ImpressTileLayer.js
index ee7f2ae5..209232d8 100644
--- a/loleaflet/src/layer/tile/ImpressTileLayer.js
+++ b/loleaflet/src/layer/tile/ImpressTileLayer.js
@@ -7,9 +7,18 @@ 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);
-               annotation.edit();
-               annotation.focus();
+               if (this._draft) {
+                       return;
+               }
+               this.onAnnotationCancel();
+               this._draft = L.annotation(L.latLng(0, 0), comment, {noMenu: 
true}).addTo(this._map);
+               this._draft.edit();
+               var mapCenter = 
this._map.latLngToLayerPoint(this._map.getCenter());
+               var bounds = this._draft.getBounds();
+               var topLeft = mapCenter.subtract(L.point(bounds.max.x - 
bounds.min.x, (bounds.max.y - bounds.min.y)/2));
+               this._draft.setLatLng(this._map.layerPointToLatLng(topLeft));
+               this.layoutAnnotations();
+               this._draft.focus();
        },
 
        beforeAdd: function (map) {
@@ -33,6 +42,7 @@ L.ImpressTileLayer = L.TileLayer.extend({
        },
 
        hideAnnotations: function (part) {
+               this._selectedAnnotation = undefined;
                var annotations = this._annotations[this._partHashes[part]];
                for (var index in annotations) {
                        annotations[index].hide();
@@ -54,27 +64,40 @@ L.ImpressTileLayer = L.TileLayer.extend({
        onAdd: function (map) {
                L.TileLayer.prototype.onAdd.call(this, map);
                this._annotations = {};
-               this._topAnnotation = 0;
+               this._topAnnotation = [];
+               this._topAnnotation[this._selectedPart] = 0;
+               this._selectedAnnotation = undefined;
+               this._draft = null;
        },
 
        onAnnotationCancel: function (e) {
-               this._map.removeLayer(e.annotation);
+               if (this._draft) {
+                       this._map.removeLayer(this._draft);
+                       this._draft = null;
+               }
                this._map.focus();
+               this._selectedAnnotation = undefined;
+               this.layoutAnnotations();
        },
 
        onAnnotationModify: function (annotation) {
-               var draft = L.annotation(this._map.getCenter(), 
annotation._data).addTo(this._map);
-               draft.edit();
-               draft.focus();
+               this.onAnnotationCancel();
+               this._selectedAnnotation = annotation._data.id;
+               annotation.edit();
+               this.scrollUntilAnnotationIsVisible(annotation);
+               annotation.focus();
        },
 
        onAnnotationReply: function (annotation) {
-               var draft = L.annotation(this._map.getCenter(), 
annotation._data).addTo(this._map);
-               draft.reply();
-               draft.focus();
+               this.onAnnotationCancel();
+               this._selectedAnnotation = annotation._data.id;
+               annotation.reply();
+               this.scrollUntilAnnotationIsVisible(annotation);
+               annotation.focus();
        },
 
        onAnnotationRemove: function (id) {
+               this.onAnnotationCancel();
                var comment = {
                        Id: {
                                type: 'string',
@@ -87,14 +110,16 @@ L.ImpressTileLayer = L.TileLayer.extend({
 
        onAnnotationSave: function (e) {
                var comment;
-               if (e.annotation._data.id === 'new') {
+               if (this._draft) {
                        comment = {
                                Text: {
                                        type: 'string',
-                                       value: e.annotation._data.text
+                                       value: this._draft._data.text
                                }
                        };
                        this._map.sendUnoCommand('.uno:InsertAnnotation', 
comment);
+                       this._map.removeLayer(this._draft);
+                       this._draft = null;
                } else {
                        comment = {
                                Id: {
@@ -107,13 +132,13 @@ L.ImpressTileLayer = L.TileLayer.extend({
                                }
                        };
                        this._map.sendUnoCommand('.uno:EditAnnotation', 
comment);
+                       this._selectedAnnotation = undefined;
                }
-               this._map.removeLayer(e.annotation);
                this._map.focus();
        },
 
        _onAnnotationZoom: function (e) {
-               this.layoutAnnotations();
+               this.onAnnotationCancel();
        },
 
        onReplyClick: function (e) {
@@ -128,18 +153,21 @@ L.ImpressTileLayer = L.TileLayer.extend({
                        }
                };
                this._map.sendUnoCommand('.uno:ReplyToAnnotation', comment);
-               this._map.removeLayer(e.annotation);
+               this._selectedAnnotation = undefined;
                this._map.focus();
        },
 
        onAnnotationScrollDown: function (e) {
-               this._topAnnotation = Math.min(++this._topAnnotation, 
this._annotations[this._partHashes[this._selectedPart]].length - 1);
-               this.layoutAnnotations();
+               this._topAnnotation[this._selectedPart] = 
Math.min(++this._topAnnotation[this._selectedPart], 
this._annotations[this._partHashes[this._selectedPart]].length - 1);
+               this.onAnnotationCancel();
        },
 
        onAnnotationScrollUp: function (e) {
-               this._topAnnotation = Math.max(--this._topAnnotation, 0);
-               this.layoutAnnotations();
+               if (this._topAnnotation[this._selectedPart] === 0) {
+                       this._map.fire('scrollby', {x: 0, y: -100});
+               }
+               this._topAnnotation[this._selectedPart] = 
Math.max(--this._topAnnotation[this._selectedPart], 0);
+               this.onAnnotationCancel();
        },
 
        onUpdateParts: function (e) {
@@ -147,8 +175,11 @@ L.ImpressTileLayer = L.TileLayer.extend({
                        this.hideAnnotations(this._prevSelectedPart);
                        if (this.hasAnnotations(this._selectedPart)) {
                                this._map._docLayer._updateMaxBounds(true);
+                               if (this._topAnnotation[this._selectedPart] === 
undefined) {
+                                       this._topAnnotation[this._selectedPart] 
= 0;
+                               }
+                               this.onAnnotationCancel();
                        }
-                       this.layoutAnnotations();
                }
        },
 
@@ -163,20 +194,61 @@ L.ImpressTileLayer = L.TileLayer.extend({
                }
        },
 
+       scrollUntilAnnotationIsVisible: function(annotation) {
+               var bounds = annotation.getBounds();
+               var mapBounds = this._map.getBounds();
+               if (this._map.layerPointToLatLng(bounds.getTopRight()).lat > 
mapBounds.getNorth()) {
+                       this._topAnnotation[this._selectedPart] = 
Math.max(this._topAnnotation[this._selectedPart] - 2, 0);
+               }
+               else if 
(this._map.layerPointToLatLng(bounds.getBottomLeft()).lat < 
mapBounds.getSouth()) {
+                       this._topAnnotation[this._selectedPart] = 
Math.min(this._topAnnotation[this._selectedPart] + 2, 
this._annotations[this._partHashes[this._selectedPart]].length - 1);
+               }
+               this.layoutAnnotations();
+       },
+
        layoutAnnotations: function () {
                var annotations = 
this._annotations[this._partHashes[this._selectedPart]];
                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));
+                       .add(L.point((this._selectedAnnotation ? 3 : 2) * 
this.options.marginX, this.options.marginY));
+               var topAnnotation = this._topAnnotation[this._selectedPart];
                var bounds, annotation;
                for (var index in annotations) {
                        annotation = annotations[index];
-                       if (index >= this._topAnnotation) {
-                               annotation.setLatLng(bounds ? 
this._map.layerPointToLatLng(bounds.getBottomLeft()) : 
this._map.layerPointToLatLng(topRight));
+                       if (topAnnotation > 0 && parseInt(index) === 
topAnnotation - 1) {
+                               // if the top annotation is not the first one, 
show a bit of the bottom of the previous annotation
+                               // so that the user gets aware that there are 
more annotations above.
+
+                               // get annotation bounds
+                               
annotation.setLatLng(this._map.layerPointToLatLng(L.point(0, -100000))); // 
placed where it's not visible
+                               annotation.show(); // if it's hidden the bounds 
are wrong
                                bounds = annotation.getBounds();
-                               bounds.extend(L.point(bounds.max.x, 
bounds.max.y + this.options.marginY));
+                               annotation.hide();
+                               var topLeft = topRight.subtract(L.point(0, 
bounds.max.y-bounds.min.y));
+                               
annotation.setLatLng(this._map.layerPointToLatLng(topLeft));
                                annotation.show();
+                               bounds = annotation.getBounds();
+                               bounds.extend(L.point(bounds.max.x, 
bounds.max.y + this.options.marginY));
+
+                       } else if (index >= topAnnotation) { // visible 
annotations
+                               if (annotation._data.id === 
this._selectedAnnotation) {
+                                       if (bounds) {
+                                               
bounds.extend(L.point(bounds.max.x, bounds.max.y + 2 * this.options.marginY));
+                                       }
+                                       var offsetX = L.point(2 * 
this.options.marginX, 0);
+                                       var topLeft = (bounds ? 
bounds.getBottomLeft() : topRight).subtract(offsetX);
+                                       
annotation.setLatLng(this._map.layerPointToLatLng(topLeft));
+                                       bounds = annotation.getBounds();
+                                       bounds = 
L.bounds(bounds.getBottomLeft().add(offsetX), 
bounds.getTopRight().add(offsetX));
+                                       bounds.extend(L.point(bounds.max.x, 
bounds.max.y + 3 * this.options.marginY));
+                               } else {
+                                       var topLeft = bounds ? 
bounds.getBottomLeft() : topRight;
+                                       
annotation.setLatLng(this._map.layerPointToLatLng(topLeft));
+                                       annotation.show();
+                                       bounds = annotation.getBounds();
+                                       bounds.extend(L.point(bounds.max.x, 
bounds.max.y + this.options.marginY));
+                               }
                        } else {
                                annotation.hide();
                        }
@@ -213,7 +285,10 @@ 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._topAnnotation) {
+                               this._topAnnotation = [];
+                       }
+                       this._topAnnotation[this._selectedPart] = 0;
                        if (this.hasAnnotations(this._selectedPart)) {
                                this._map._docLayer._updateMaxBounds(true);
                        }
@@ -231,12 +306,12 @@ L.ImpressTileLayer = L.TileLayer.extend({
                                        this._annotations[obj.comment.parthash] 
= [];
                                }
                                
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._topAnnotation[this._selectedPart] = 
Math.min(this._topAnnotation[this._selectedPart], 
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._topAnnotation[this._selectedPart] = 
Math.min(this._topAnnotation[this._selectedPart], 
this._annotations[this._partHashes[this._selectedPart]].length - 1);
                                this.updateDocBounds(0);
                                this.layoutAnnotations();
                        } else if (obj.comment.action === 'Modify') {
@@ -244,6 +319,8 @@ L.ImpressTileLayer = L.TileLayer.extend({
                                if (modified) {
                                        modified._data = obj.comment;
                                        modified.update();
+                                       this._selectedAnnotation = undefined;
+                                       this.layoutAnnotations();
                                }
                        }
                } else {
_______________________________________________
Libreoffice-commits mailing list
[email protected]
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits

Reply via email to