[Libreoffice-commits] online.git: loleaflet/build loleaflet/dist loleaflet/src
Henry Castro
hcastro at collabora.com
Mon Feb 6 00:22:45 UTC 2017
loleaflet/build/deps.js | 13 ++-
loleaflet/dist/loleaflet.css | 20 ++++
loleaflet/src/core/LOUtil.js | 5 +
loleaflet/src/layer/AnnotationManager.js | 103 +++++++++++++++++++++++++
loleaflet/src/layer/marker/Annotation.js | 127 +++++++++++++++++++++++++++++++
loleaflet/src/layer/tile/TileLayer.js | 13 ++-
6 files changed, 278 insertions(+), 3 deletions(-)
New commits:
commit 174154093b2aa6e323bb0c04efa7ca4cfdbbbd8a
Author: Henry Castro <hcastro at collabora.com>
Date: Sun Feb 5 17:24:05 2017 -0400
loleaflet: add annotations
diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js
index cb394d8..5d3c3c6 100644
--- a/loleaflet/build/deps.js
+++ b/loleaflet/build/deps.js
@@ -428,7 +428,18 @@ var deps = {
src: ['map/ext/Map.Geolocation.js'],
desc: 'Adds Map#locate method and related events to make geolocation easier.',
heading: 'Misc'
- }
+ },
+
+ AnnotationManager: {
+ src: ['layer/AnnotationManager.js'],
+ desc: 'Group Annotations to put on the map.'
+ },
+
+ Annotation: {
+ src: ['layer/marker/Annotation.js'],
+ desc: 'Annotation to put on the map.'
+ },
+
};
if (typeof exports !== 'undefined') {
diff --git a/loleaflet/dist/loleaflet.css b/loleaflet/dist/loleaflet.css
index 8583902..8db2068 100644
--- a/loleaflet/dist/loleaflet.css
+++ b/loleaflet/dist/loleaflet.css
@@ -105,3 +105,23 @@ body {
.context-menu-icon-lo-checkmark:before {
content: '\2713';
}
+
+.loleaflet-annotation {
+ position: absolute;
+ text-align: center;
+}
+
+.loleaflet-annotation-content-wrapper {
+ padding: 1px;
+ text-align: left;
+ border-radius: 5px;
+ background: #ffffc0;
+ box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+ color: #333;
+ border: 1px solid #999;
+}
+
+.leaflet-annotation-content {
+ margin: 13px 19px;
+ line-height: 1.4;
+}
diff --git a/loleaflet/src/core/LOUtil.js b/loleaflet/src/core/LOUtil.js
index 422e65b..da9e323 100644
--- a/loleaflet/src/core/LOUtil.js
+++ b/loleaflet/src/core/LOUtil.js
@@ -50,5 +50,10 @@ L.LOUtil = {
rgbToHex: function(color) {
return '#' + ('000000' + color.toString(16)).slice(-6);
+ },
+
+ stringToPoint: function(point) {
+ var numbers = point.match(/\d+/g);
+ return L.point(numbers[0], numbers[1]);
}
};
diff --git a/loleaflet/src/layer/AnnotationManager.js b/loleaflet/src/layer/AnnotationManager.js
new file mode 100644
index 0000000..f00651c
--- /dev/null
+++ b/loleaflet/src/layer/AnnotationManager.js
@@ -0,0 +1,103 @@
+/*
+ * L.AnnotationManager
+ */
+
+L.AnnotationManager = L.Class.extend({
+ options: {
+ marginX: 50,
+ marginY: 10,
+ offset: 5
+ },
+
+ initialize: function (map) {
+ this._map = map;
+ this._annotations = {};
+ this._selected = {};
+ this._arrow = L.polyline([], {color: 'darkblue', weight:1});
+ this._map.on('AnnotationClick', this._onAnnotationClick, this);
+ },
+
+ clear: function () {
+ for (var key in this._annotations) {
+ this._map.removeLayer(this._annotations[key]);
+ }
+ this._map.removeLayer(this._arrow);
+ this._annotations = {};
+ this._selected = {};
+ },
+
+ fill: function (comments) {
+ var docTopRight = this._map.project(this._map.options.maxBounds.getNorthEast()).add(L.point(this.options.marginX, this.options.marginY));
+ var annotation, point;
+
+ this.clear();
+ for (var index in comments) {
+ point = this._map._docLayer._twipsToPixels(L.LOUtil.stringToPoint(comments[index].anchorPos));
+ point.x = docTopRight.x;
+ annotation = L.annotation(this._map.unproject(point), comments[index]).addTo(this._map);
+ this._annotations[annotation._data.id] = annotation;
+ }
+
+ this.layout();
+ },
+
+ select: function (id) {
+ var topRight = this._map.project(this._map.options.maxBounds.getNorthEast());
+ var annotation = this._annotations[id];
+ var point0, point1, point2;
+ if (annotation) {
+ point0 = this._map._docLayer._twipsToPixels(L.LOUtil.stringToPoint(annotation._data.anchorPos));
+ point1 = L.point(point0.x, point0.y - this.options.offset);
+ point2 = L.point(topRight.x, point1.y);
+ this._arrow.setLatLngs([this._map.unproject(point0), this._map.unproject(point1), this._map.unproject(point2)]);
+ this._map.addLayer(this._arrow);
+ if (this._selected.annotation) {
+ this._selected.annotation.setLatLng(this._selected.latlng);
+ }
+ this._selected.annotation = annotation;
+ this._selected.latlng = annotation._latlng;
+ annotation.setLatLng(this._map.unproject(point2));
+ }
+ },
+
+ layout: function () {
+ var annotation, bounds, layoutBounds, foundBounds;
+ this._bounds = [];
+ for (var key in this._annotations) {
+ annotation = this._annotations[key];
+ bounds = annotation.getBounds();
+ foundBounds = null;
+ for (var itBounds in this._bounds) {
+ layoutBounds = this._bounds[itBounds];
+ if (layoutBounds.intersects(bounds)) {
+ foundBounds = layoutBounds;
+ break;
+ }
+ }
+
+ if (foundBounds) {
+ annotation.setLatLng(this._map.layerPointToLatLng(foundBounds.getBottomLeft()));
+ }
+ else {
+ bounds.extend(L.point(bounds.min.x, bounds.min.y + this.options.marginY));
+ bounds.extend(L.point(bounds.min.x, bounds.max.y + this.options.marginY));
+ this._bounds.push(bounds);
+ }
+ annotation.show();
+ }
+ },
+
+ add: function (annotation) {
+ },
+
+ remove: function (annotation) {
+ },
+
+ _onAnnotationClick: function (e) {
+ this.select(e.id);
+ }
+});
+
+L.annotationManager = function (map) {
+ return new L.AnnotationManager(map);
+};
diff --git a/loleaflet/src/layer/marker/Annotation.js b/loleaflet/src/layer/marker/Annotation.js
new file mode 100644
index 0000000..dbb3189
--- /dev/null
+++ b/loleaflet/src/layer/marker/Annotation.js
@@ -0,0 +1,127 @@
+/*
+ * L.Annotation
+ */
+
+L.Annotation = L.Layer.extend({
+ options: {
+ minWidth: 200,
+ maxHeight: 50
+ },
+
+ initialize: function (latlng, data, options) {
+ L.setOptions(this, options);
+ this._latlng = L.latLng(latlng);
+ this._data = data;
+ },
+
+ onAdd: function (map) {
+ this._map = map;
+ if (!this._container) {
+ this._initLayout();
+ }
+
+ map._panes.markerPane.appendChild(this._container);
+ this.update();
+ },
+
+ addTo: function (map) {
+ map.addLayer(this);
+ return this;
+ },
+
+ onRemove: function (map) {
+ map._panes.makerPane.removeChild(this._container);
+ this._map = null;
+ },
+
+ update: function () {
+ if (!this._map) { return; }
+
+ this._updateContent();
+ this._updateLayout();
+ this._updatePosition();
+ },
+
+ setLatLng: function (latlng) {
+ this._latlng = L.latLng(latlng);
+ if (this._map) {
+ this._updatePosition();
+ }
+ return this;
+ },
+
+ getBounds: function () {
+ var point = this._map.latLngToLayerPoint(this._latlng);
+ return L.bounds(point, point.add(L.point(this._container.offsetWidth, this._container.offsetHeight)));
+ },
+
+ show: function () {
+ this._container.style.visibility = '';
+ },
+
+ _initLayout: function () {
+ var container = this._container =
+ L.DomUtil.create('div', 'loleaflet-annotation');
+ var wrapper = this._wrapper =
+ L.DomUtil.create('div', 'loleaflet-annotation-content-wrapper', container);
+
+ this._contentNode = L.DomUtil.create('div', 'loleaflet-annotation-content', wrapper);
+ L.DomEvent.disableScrollPropagation(this._contentNode);
+
+ this._text = document.createElement('span');
+ this._author = document.createElement('span');
+ this._dateTime = document.createElement('span');
+ this._contentNode.appendChild(this._text);
+ this._contentNode.appendChild(document.createElement('br'));
+ this._contentNode.appendChild(document.createElement('br'));
+ this._contentNode.appendChild(this._author);
+ this._contentNode.appendChild(document.createElement('br'));
+ this._contentNode.appendChild(this._dateTime);
+ this._container.style.visibility = 'hidden';
+
+ var events = ['dblclick', 'mousedown', 'mouseover', 'mouseout', 'contextmenu'];
+ L.DomEvent.on(container, 'click', this._onMouseClick, this);
+
+ for (var it = 0; it < events.length; it++) {
+ L.DomEvent.on(container, events[it], this._stopMouseEvent, this);
+ }
+ },
+
+ _onMouseClick: function (e) {
+ this._map.fire('AnnotationClick', {id: this._data.id});
+ },
+
+ _stopMouseEvent: function (e) {
+ if (e.type !== 'mousedown') {
+ L.DomEvent.stopPropagation(e);
+ } else {
+ L.DomEvent.preventDefault(e);
+ }
+ },
+
+ _updateLayout: function () {
+ var style = this._contentNode.style;
+ var width = Math.max(this._contentNode.offsetWidth, this.options.minWidth);
+ var height = Math.max(this._contentNode.offsetHeight, this.options.maxHeight);
+
+ style.width = (width + 1) + 'px';
+ style.whiteSpace = '';
+ style.height = height + 'px';
+ },
+
+ _updateContent: function () {
+ this._text.innerHTML = this._data.text;
+ this._author.innerHTML = this._data.author;
+ this._dateTime.innerHTML = this._data.dateTime;
+ },
+
+ _updatePosition: function () {
+ var pos = this._map.latLngToLayerPoint(this._latlng);
+ L.DomUtil.setPosition(this._container, pos);
+ }
+});
+
+L.annotation = function (latlng, data, options) {
+ return new L.Annotation(latlng, data, options);
+};
+
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index b45e0f6..a724ed8 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -171,6 +171,10 @@ L.TileLayer = L.GridLayer.extend({
this._levels = {};
this._tiles = {};
this._tileCache = {};
+ this._annotations = L.annotationManager(map);
+ if (this._docType === 'text') {
+ this._map._socket.sendMessage('commandvalues command=.uno:ViewAnnotations');
+ }
map._fadeAnimated = false;
this._viewReset();
@@ -430,13 +434,18 @@ L.TileLayer = L.GridLayer.extend({
}
else if (obj.commandName === '.uno:CellCursor') {
this._onCellCursorMsg(obj.commandValues);
- } else if (this._map.unoToolbarCommands.indexOf(obj.commandName) !== -1) {
+ }
+ else if (this._map.unoToolbarCommands.indexOf(obj.commandName) !== -1) {
this._toolbarCommandValues[obj.commandName] = obj.commandValues;
this._map.fire('updatetoolbarcommandvalues', {
commandName: obj.commandName,
commandValues: obj.commandValues
});
- } else {
+ }
+ else if (obj.comments) {
+ this._annotations.fill(obj.comments);
+ }
+ else {
this._map.fire('commandvalues', {
commandName: obj.commandName,
commandValues: obj.commandValues
More information about the Libreoffice-commits
mailing list