loleaflet/build/deps.js | 6
loleaflet/dist/loleaflet.css | 60 +++++++++
loleaflet/src/control/Control.Scroll.Annotation.js | 62 +++++++++
loleaflet/src/layer/marker/Annotation.js | 5
loleaflet/src/layer/tile/ImpressTileLayer.js | 139 +++++++++++++++++++--
loleaflet/src/layer/tile/TileLayer.js | 4
6 files changed, 265 insertions(+), 11 deletions(-)
New commits:
commit bd911ff9d55d3945e9d10c02aacc77b1b7c5e59b
Author: Henry Castro <hcas...@collabora.com>
Date: Thu Mar 9 22:39:48 2017 -0400
loleaflet: rework Impress annotations
LO Impress does not have an anchor position of the annotation object
Change-Id: Ifaa08bb3f62f442f3ee58242e835b6377901a592
diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js
index e1b2786..6cce092 100644
--- a/loleaflet/build/deps.js
+++ b/loleaflet/build/deps.js
@@ -435,6 +435,12 @@ var deps = {
desc: 'Group Annotations to put on the map.'
},
+ AnnotationScroll: {
+ src: ['control/Control.js',
+ 'control/Control.Scroll.Annotation.js'],
+ desc: 'Basic scroll control'
+ },
+
Annotation: {
src: ['layer/marker/Annotation.js'],
desc: 'Annotation to put on the map.'
diff --git a/loleaflet/dist/loleaflet.css b/loleaflet/dist/loleaflet.css
index 8225027..fbecbf7 100644
--- a/loleaflet/dist/loleaflet.css
+++ b/loleaflet/dist/loleaflet.css
@@ -247,3 +247,63 @@ body {
.loleaflet-annotation-caption {
font-weight: bold;
}
+
+.loleaflet-bar {
+ box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+ border-radius: 4px;
+ display: inline-block;
+ margin: 3px;
+ vertical-align: middle;
+}
+
+.loleaflet-bar a,
+.loleaflet-bar a:hover {
+ background-color: #fff;
+ border-bottom: 1px solid #ccc;
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ display: block;
+ text-align: center;
+ text-decoration: none;
+ color: black;
+}
+
+.loleaflet-bar a {
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+ display: block;
+}
+
+.loleaflet-bar a:hover {
+ background-color: #f4f4f4;
+}
+
+.loleaflet-bar a:first-child {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+}
+
+.loleaflet-bar a:last-child {
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ border-bottom: none;
+}
+
+.loleaflet-bar a.leaflet-disabled {
+ cursor: default;
+ background-color: #f4f4f4;
+ color: #bbb;
+}
+
+.loleaflet-bar a {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+}
+
+.loleaflet-control-scroll-up,
+.loleaflet-control-scroll-down {
+ font: bold 18px 'Lucida Console', Monaco, monospace;
+ text-indent: 1px;
+}
diff --git a/loleaflet/src/control/Control.Scroll.Annotation.js
b/loleaflet/src/control/Control.Scroll.Annotation.js
new file mode 100644
index 0000000..0eb3b2c
--- /dev/null
+++ b/loleaflet/src/control/Control.Scroll.Annotation.js
@@ -0,0 +1,62 @@
+/*
+ * L.Control.Scroll.Annotation
+ */
+
+L.Control.Scroll.Annotation = L.Control.extend({
+ options: {
+ position: 'topright',
+ arrowUp: '0x25b2',
+ arrowUpTitle: _('Scroll up annotations'),
+ arrowDown: '0x25bc',
+ arrowDownTitle: _('Scroll down annotations')
+ },
+
+ onAdd: function (map) {
+ var scrollName = 'leaflet-control-scroll',
+ container = L.DomUtil.create('div', 'loleaflet-bar');
+
+ this._map = map;
+
+ this._buttonUp = this._createButton(
+ this.options.arrowUp, this.options.arrowUpTitle,
+ scrollName + '-up', container, this._onScrollUp,
this);
+ this._buttonDown = this._createButton(
+ this.options.arrowDown, this.options.arrowDownTitle,
+ scrollName + '-down', container, this._onScrollDown,
this);
+
+ return container;
+ },
+
+ onRemove: function (map) {
+ },
+
+ _onScrollUp: function (e) {
+ this._map.fire('AnnotationScrollUp');
+ },
+
+ _onScrollDown: function (e) {
+ this._map.fire('AnnotationScrollDown');
+ },
+
+ _createButton: function (html, title, className, container, fn,
context) {
+ var link = L.DomUtil.create('a', className, container);
+ link.innerHTML = String.fromCharCode(html);
+ link.href = '#';
+ link.title = title;
+
+ var stop = L.DomEvent.stopPropagation;
+
+ L.DomEvent
+ .on(link, 'click', stop)
+ .on(link, 'mousedown', stop)
+ .on(link, 'dblclick', stop)
+ .on(link, 'click', L.DomEvent.preventDefault)
+ .on(link, 'click', fn, context);
+
+ return link;
+ }
+});
+
+L.control.scroll.annotation = function (options) {
+ return new L.Control.Scroll.Annotation(options);
+};
diff --git a/loleaflet/src/layer/marker/Annotation.js
b/loleaflet/src/layer/marker/Annotation.js
index 774dd3c..4482837 100644
--- a/loleaflet/src/layer/marker/Annotation.js
+++ b/loleaflet/src/layer/marker/Annotation.js
@@ -61,6 +61,11 @@ L.Annotation = L.Layer.extend({
this._editNode.style.display = 'none';
},
+ hide: function () {
+ this._container.style.visibility = 'hidden';
+ this._editNode.style.display = 'none';
+ },
+
edit: function () {
this._container.style.visibility = '';
this._contentNode.style.display = 'none';
diff --git a/loleaflet/src/layer/tile/ImpressTileLayer.js
b/loleaflet/src/layer/tile/ImpressTileLayer.js
index 0c6f0ed..8afd5c7 100644
--- a/loleaflet/src/layer/tile/ImpressTileLayer.js
+++ b/loleaflet/src/layer/tile/ImpressTileLayer.js
@@ -6,25 +6,124 @@
L.ImpressTileLayer = L.TileLayer.extend({
newAnnotation: function (comment) {
- if (!comment.anchorPos && this._isCursorVisible) {
- comment.anchorPos =
this._latLngToTwips(this._visibleCursor.getNorthWest());
- }
- if (comment.anchorPos) {
- this._annotations.add(comment, true);
+ var annotation = L.annotation(this._map.getCenter(),
comment).addTo(this._map);
+ annotation.edit();
+ annotation.focus();
+ },
+
+ beforeAdd: function (map) {
+ map.on('AnnotationCancel', this.onAnnotationCancel, this);
+ map.on('AnnotationSave', this.onAnnotationSave, this);
+ map.on('AnnotationScrollUp', this.onAnnotationScrollUp, this);
+ map.on('AnnotationScrollDown', this.onAnnotationScrollDown,
this);
+ },
+
+ getAnnotation: function (id) {
+ for (var index in this._annotations) {
+ if (this._annotations[index]._data.id === id) {
+ return this._annotations[index];
+ }
}
+ return null;
},
onAdd: function (map) {
L.TileLayer.prototype.onAdd.call(this, map);
- this._annotations = L.annotationManager(map);
+ this._annotations = [];
+ },
+
+ onAnnotationCancel: function (e) {
+ this._map.removeLayer(e.annotation);
+ this._map.focus();
},
onAnnotationModify: function (annotation) {
- this._annotations.modify(annotation);
+ var draft = L.annotation(this._map.getCenter(),
annotation._data).addTo(this._map);
+ draft.edit();
+ draft.focus();
},
onAnnotationRemove: function (id) {
- this._annotations.remove(id);
+ var comment = {
+ Id: {
+ type: 'string',
+ value: id
+ }
+ };
+ this._map.sendUnoCommand('.uno:DeleteAnnotation', comment);
+ this._map.focus();
+ },
+
+ onAnnotationSave: function (e) {
+ var comment;
+ if (e.annotation._data.id === 'new') {
+ comment = {
+ Text: {
+ type: 'string',
+ value: e.annotation._data.text
+ }
+ };
+ this._map.sendUnoCommand('.uno:InsertAnnotation',
comment);
+ } else {
+ comment = {
+ Id: {
+ type: 'string',
+ value: e.annotation._data.id
+ },
+ Text: {
+ type: 'string',
+ value: e.annotation._data.text
+ }
+ };
+ this._map.sendUnoCommand('.uno:EditAnnotation',
comment);
+ }
+ this._map.removeLayer(e.annotation);
+ this._map.focus();
+ },
+
+ onAnnotationScrollDown: function (e) {
+ this._topAnnotation = Math.min(++this._topAnnotation,
this._annotations.length - 1);
+ this.layoutAnnotations();
+ },
+
+ onAnnotationScrollUp: function (e) {
+ this._topAnnotation = Math.max(--this._topAnnotation, 0);
+ this.layoutAnnotations();
+ },
+
+ removeAnnotation: function (id) {
+ for (var index in this._annotations) {
+ if (this._annotations[index]._data.id == id) {
+ this._map.removeLayer(this._annotations[index]);
+ this._annotations.splice(index, 1);
+ break;
+ }
+ }
+ },
+
+ layoutAnnotations: function () {
+ var topRight =
this._map.latLngToLayerPoint(this._map.options.maxBounds.getNorthEast()).add(L.point(this.options.marginX,
this.options.marginY));
+ var bounds, annotation;
+ for (var index in this._annotations) {
+ annotation = this._annotations[index];
+ if (index >= this._topAnnotation) {
+ annotation.setLatLng(bounds ?
this._map.layerPointToLatLng(bounds.getBottomLeft()) :
this._map.layerPointToLatLng(topRight));
+ bounds = annotation.getBounds();
+ bounds.extend(L.point(bounds.max.x,
bounds.max.y + this.options.marginY));
+ annotation.show();
+ } else {
+ annotation.hide();
+ }
+ }
+ if (bounds) {
+ if (!this._scrollAnnotation) {
+ this._scrollAnnotation =
L.control.scroll.annotation();
+ this._scrollAnnotation.addTo(this._map);
+ }
+ } else if (this._scrollAnnotation) {
+ this._map.removeControl(this._scrollAnnotation);
+ this._scrollAnnotation = null;
+ }
},
_onCommandValuesMsg: function (textMsg) {
@@ -34,7 +133,12 @@ L.ImpressTileLayer = L.TileLayer.extend({
}
if (values.comments) {
- this._annotations.fill(values.comments);
+ for (var index in values.comments) {
+ comment = values.comments[index];
+
this._annotations.push(L.annotation(this._map.options.maxBounds.getSouthEast(),
comment).addTo(this._map));
+ }
+ this._topAnnotation = 0;
+ this.layoutAnnotations();
} else {
L.TileLayer.prototype._onCommandValuesMsg.call(this,
textMsg);
}
@@ -42,7 +146,22 @@ L.ImpressTileLayer = L.TileLayer.extend({
_onMessage: function (textMsg, img) {
if (textMsg.startsWith('comment:')) {
- this._annotations.onACKComment(textMsg);
+ var obj =
JSON.parse(textMsg.substring('comment:'.length + 1));
+ if (obj.comment.action === 'Add') {
+
this._annotations.push(L.annotation(this._map.options.maxBounds.getSouthEast(),
obj.comment).addTo(this._map));
+ this._topAnnotation =
Math.min(this._topAnnotation, this._annotations.length - 1);
+ this.layoutAnnotations();
+ } else if (obj.comment.action === 'Remove') {
+ this.removeAnnotation(obj.comment.id);
+ this._topAnnotation =
Math.min(this._topAnnotation, this._annotations.length - 1);
+ this.layoutAnnotations();
+ } else if (obj.comment.action === 'Modify') {
+ var modified =
this.getAnnotation(obj.comment.id);
+ if (modified) {
+ modified._data = obj.comment;
+ modified.update();
+ }
+ }
} else {
L.TileLayer.prototype._onMessage.call(this, textMsg,
img);
}
diff --git a/loleaflet/src/layer/tile/TileLayer.js
b/loleaflet/src/layer/tile/TileLayer.js
index 8fae7f9..901e753 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -48,7 +48,9 @@ L.TileLayer = L.GridLayer.extend({
zoomReverse: false,
detectRetina: true,
crossOrigin: false,
- previewInvalidationTimeout: 1000
+ previewInvalidationTimeout: 1000,
+ marginX: 50,
+ marginY: 10
},
initialize: function (url, options) {
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
