[Libreoffice-commits] online.git: 2 commits - loleaflet/src
Tomaž Vajngerl (via logerrit)
logerrit at kemper.freedesktop.org
Tue Jul 21 16:35:08 UTC 2020
loleaflet/src/control/Control.Scroll.js | 4 -
loleaflet/src/layer/AnnotationManagerImpress.js | 67 ++++++++++++++++++++----
loleaflet/src/layer/marker/Annotation.js | 4 +
loleaflet/src/layer/tile/CalcTileLayer.js | 6 ++
loleaflet/src/layer/tile/ImpressTileLayer.js | 8 ++
loleaflet/src/layer/tile/TileLayer.js | 8 ++
loleaflet/src/layer/tile/WriterTileLayer.js | 10 +++
loleaflet/src/map/Map.js | 4 -
8 files changed, 97 insertions(+), 14 deletions(-)
New commits:
commit 0e0d3b101246246593e391446ea8584617f822d3
Author: Tomaž Vajngerl <tomaz.vajngerl at collabora.co.uk>
AuthorDate: Mon Jul 20 07:59:27 2020 +0200
Commit: Tomaž Vajngerl <quikee at gmail.com>
CommitDate: Tue Jul 21 18:34:57 2020 +0200
show connector to annotation when hitting the annotation marker
This shows a connector from annotation to the annotation marker in
the document, so it is possible to identify which marker is being
used for which annotation.
Also adds the alternative implementation to show the annotation
next to the annotation marker.
Change-Id: I8af191fcc8a5e8af827dee0b1ac8ae3d7a50a552
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/99021
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
Reviewed-by: Tomaž Vajngerl <quikee at gmail.com>
diff --git a/loleaflet/src/layer/AnnotationManagerImpress.js b/loleaflet/src/layer/AnnotationManagerImpress.js
index bea853409..473adec06 100644
--- a/loleaflet/src/layer/AnnotationManagerImpress.js
+++ b/loleaflet/src/layer/AnnotationManagerImpress.js
@@ -10,10 +10,13 @@ L.AnnotationManagerImpress = L.AnnotationManagerBase.extend({
marginX: 40,
marginY: 10,
offset: 5,
- extraSize: L.point(290, 0)
+ extraSize: L.point(290, 0),
+ popupOffset: 10,
+ showInline: false
},
_initializeSpecific: function () {
this._map.on('zoomend', this._onAnnotationZoom, this);
+ this._map.on('AnnotationSelect', this._onAnnotationSelect, this);
this._map.on('AnnotationCancel', this.onAnnotationCancel, this);
this._map.on('AnnotationClick', this.onAnnotationClick, this);
this._map.on('AnnotationSave', this.onAnnotationSave, this);
@@ -24,6 +27,8 @@ L.AnnotationManagerImpress = L.AnnotationManagerBase.extend({
this._topAnnotation = [];
this._topAnnotation[this.getSelectedPart()] = 0;
this._selectedAnnotation = undefined;
+ this._selectedForPopup = null;
+ this._selectionLine = L.polyline([], {color: 'darkblue', weight: 1.2});
this._draft = null;
},
getPartHashes: function() {
@@ -86,12 +91,17 @@ L.AnnotationManagerImpress = L.AnnotationManagerBase.extend({
}
},
unselectAnnotations: function() {
- this._selection = null;
+ this._selectedForPopup = null;
+ this._map.removeLayer(this._selectionLine);
this.onAnnotationCancel();
},
_onAnnotationZoom: function () {
this.onAnnotationCancel();
},
+ _onAnnotationSelect: function (event) {
+ this._selectedForPopup = event.annotation;
+ this.onAnnotationCancel();
+ },
onAnnotationCancel: function () {
if (this._draft) {
this._map.removeLayer(this._draft);
@@ -239,11 +249,11 @@ L.AnnotationManagerImpress = L.AnnotationManagerBase.extend({
layoutAnnotations: function () {
var topAnnotation;
var annotations = this._annotations[this.getSelectedPartHash()];
- var topRight = this._map.latLngToLayerPoint(this._map.options.docBounds.getNorthEast())
- .add(L.point((this._selectedAnnotation ? 3 : 2) * this.options.marginX, this.options.marginY));
- var bounds, annotation;
+ var diffPoint = L.point((this._selectedAnnotation ? 3 : 2) * this.options.marginX, this.options.marginY);
+ var topRight = this._map.latLngToLayerPoint(this._map.options.docBounds.getNorthEast()).add(diffPoint);
+ var bounds = null;
for (var index in annotations) {
- annotation = annotations[index];
+ var annotation = annotations[index];
if (!this._topAnnotation[this.getSelectedPart()]) {
this._topAnnotation[this.getSelectedPart()] = 0;
}
@@ -262,19 +272,54 @@ L.AnnotationManagerImpress = L.AnnotationManagerBase.extend({
annotation.show();
bounds = annotation.getBounds();
bounds.extend(L.point(bounds.max.x, bounds.max.y + this.options.marginY));
-
- } else if (index >= topAnnotation) { // visible annotations
+ }
+ else if (index >= topAnnotation) { // visible annotations
+ var offsetX;
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);
+ offsetX = L.point(2 * this.options.marginX, 0);
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 {
+ }
+ else if (this._selectedForPopup && annotation._data.id === this._selectedForPopup._data.id) {
+ var marker = this._selectedForPopup._annotationMarker;
+ var latlng = marker.getLatLng();
+ var point = this._map.latLngToLayerPoint(latlng);
+ var rect = marker._icon.getBoundingClientRect();
+
+ if (this.options.showInline) {
+ point = point.add(L.point(0, rect.height + this.options.popupOffset));
+ annotation.setLatLng(this._map.layerPointToLatLng(point));
+ }
+ else {
+ 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));
+
+ var marginY = this.options.marginY;
+
+ var annotationMarkerRightCenter = point.add(L.point(rect.width, rect.height / 2));
+ var annotationLeftCenter = topLeft.add(L.point(0, bounds.getSize().y / 2));
+ var connectionPoint1 = L.point(annotationLeftCenter.x - marginY, annotationMarkerRightCenter.y);
+ var connectionPoint2 = L.point(annotationLeftCenter.x - marginY, annotationLeftCenter.y);
+
+ this._selectionLine.setLatLngs([
+ this._map.layerPointToLatLng(annotationMarkerRightCenter),
+ this._map.layerPointToLatLng(connectionPoint1),
+ this._map.layerPointToLatLng(connectionPoint2),
+ this._map.layerPointToLatLng(annotationLeftCenter)
+ ]);
+ this._map.addLayer(this._selectionLine);
+ }
+ }
+ else {
topLeft = bounds ? bounds.getBottomLeft() : topRight;
annotation.setLatLng(this._map.layerPointToLatLng(topLeft));
annotation.show();
diff --git a/loleaflet/src/layer/marker/Annotation.js b/loleaflet/src/layer/marker/Annotation.js
index 410316f6a..5f66d8f2a 100644
--- a/loleaflet/src/layer/marker/Annotation.js
+++ b/loleaflet/src/layer/marker/Annotation.js
@@ -475,6 +475,7 @@ L.Annotation = L.Layer.extend({
this._map._docLayer._twipsToLatLng(bottomRightTwips, this._map.getZoom()));
this._annotationMarker.setLatLng(bounds.getNorthWest());
this._annotationMarker.on('dragstart drag dragend', this._onMarkerDrag, this);
+ this._annotationMarker.on('click', this._onMarkerClick, this);
}
},
_onMarkerDrag: function(event) {
@@ -485,6 +486,9 @@ L.Annotation = L.Layer.extend({
this._sendAnnotationPositionChange(pointTwip);
}
},
+ _onMarkerClick: function() {
+ this._map.fire('AnnotationSelect', {annotation: this});
+ },
_sendAnnotationPositionChange: function(newPosition) {
var comment = {
Id: {
commit 3ebb0b9058223950cdc89c9b6ffa83776e337639
Author: Tomaž Vajngerl <tomaz.vajngerl at collabora.co.uk>
AuthorDate: Mon Jul 20 06:10:03 2020 +0200
Commit: Tomaž Vajngerl <quikee at gmail.com>
CommitDate: Tue Jul 21 18:34:48 2020 +0200
add functions for triggering layout and unselect annotations
Instead of checking if specific functions exist for layouting and
unselecting of annotation, add functions that always exist on the
TileLayer with the ability to override in the specific subclass.
Change-Id: I3be24bf58fef0e09dfee10f80b1b888ce0e0f1f8
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/99020
Tested-by: Jenkins
Tested-by: Tomaž Vajngerl <quikee at gmail.com>
Reviewed-by: Tomaž Vajngerl <quikee at gmail.com>
diff --git a/loleaflet/src/control/Control.Scroll.js b/loleaflet/src/control/Control.Scroll.js
index 9b0936088..653e7ea6c 100644
--- a/loleaflet/src/control/Control.Scroll.js
+++ b/loleaflet/src/control/Control.Scroll.js
@@ -167,9 +167,7 @@ L.Control.Scroll = L.Control.extend({
// Scrolling quickly via mousewheel messes up the annotations for some reason
// Triggering the layouting algorithm here, though unnecessary, fixes the problem.
// This is just a workaround till we find the root cause of why it messes up the annotations
- if (this._map._docLayer._annotations && this._map._docLayer._annotations.layout) {
- this._map._docLayer._annotations.layout();
- }
+ this._map._docLayer.layoutAnnotations();
},
_onScrollTo: function (e) {
diff --git a/loleaflet/src/layer/AnnotationManagerImpress.js b/loleaflet/src/layer/AnnotationManagerImpress.js
index b3ba6422c..bea853409 100644
--- a/loleaflet/src/layer/AnnotationManagerImpress.js
+++ b/loleaflet/src/layer/AnnotationManagerImpress.js
@@ -85,6 +85,10 @@ L.AnnotationManagerImpress = L.AnnotationManagerBase.extend({
this._map._docLayer._updateMaxBounds(true, extraSize);
}
},
+ unselectAnnotations: function() {
+ this._selection = null;
+ this.onAnnotationCancel();
+ },
_onAnnotationZoom: function () {
this.onAnnotationCancel();
},
diff --git a/loleaflet/src/layer/tile/CalcTileLayer.js b/loleaflet/src/layer/tile/CalcTileLayer.js
index 589c94369..7ecc6d99d 100644
--- a/loleaflet/src/layer/tile/CalcTileLayer.js
+++ b/loleaflet/src/layer/tile/CalcTileLayer.js
@@ -68,6 +68,12 @@ L.CalcTileLayer = (L.Browser.mobile ? L.TileLayer : L.CanvasTileLayer).extend({
this._annotations = {};
},
+ layoutAnnotations: function () {
+ },
+
+ unselectAnnotations: function () {
+ },
+
onAdd: function (map) {
map.addControl(L.control.tabs());
map.addControl(L.control.columnHeader());
diff --git a/loleaflet/src/layer/tile/ImpressTileLayer.js b/loleaflet/src/layer/tile/ImpressTileLayer.js
index 67b11cd40..15b6ef5e1 100644
--- a/loleaflet/src/layer/tile/ImpressTileLayer.js
+++ b/loleaflet/src/layer/tile/ImpressTileLayer.js
@@ -136,6 +136,14 @@ L.ImpressTileLayer = L.TileLayer.extend({
this._annotationManager.clearAnnotations();
},
+ layoutAnnotations: function () {
+ this._annotationManager.layoutAnnotations();
+ },
+
+ unselectAnnotations: function () {
+ this._annotationManager.unselectAnnotations();
+ },
+
removeAnnotation: function (id) {
this._annotationManager.removeAnnotation(id);
},
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index c348a9517..7e223a3af 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -463,6 +463,14 @@ L.TileLayer = L.GridLayer.extend({
console.debug('Implemented in child classes');
},
+ layoutAnnotations: function () {
+ console.debug('Implemented in child classes');
+ },
+
+ unselectAnnotations: function () {
+ console.debug('Implemented in child classes');
+ },
+
getEvents: function () {
var events = {
viewreset: this._viewReset,
diff --git a/loleaflet/src/layer/tile/WriterTileLayer.js b/loleaflet/src/layer/tile/WriterTileLayer.js
index b41b7e58d..9d9e47e61 100644
--- a/loleaflet/src/layer/tile/WriterTileLayer.js
+++ b/loleaflet/src/layer/tile/WriterTileLayer.js
@@ -58,6 +58,16 @@ L.WriterTileLayer = L.TileLayer.extend({
}
},
+ layoutAnnotations: function () {
+ this._annotations.layout();
+ },
+
+ unselectAnnotations: function () {
+ if (this._annotations) {
+ this._annotations.unselect();
+ }
+ },
+
onAnnotationRemove: function (id) {
this._annotations.remove(id);
},
diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index 5072ce692..1ba421e99 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -1560,8 +1560,8 @@ L.Map = L.Evented.extend({
}
// unselect if anything is selected already
- if (this._docLayer && this._docLayer._annotations && this._docLayer._annotations.unselect) {
- this._docLayer._annotations.unselect();
+ if (this._docLayer) {
+ this._docLayer.unselectAnnotations();
}
}
More information about the Libreoffice-commits
mailing list