[Libreoffice-commits] online.git: 2 commits - .gitignore loleaflet/dist loleaflet/src

Henry Castro hcastro at collabora.com
Sun Feb 12 01:26:39 UTC 2017


 .gitignore                               |    1 
 loleaflet/dist/loleaflet.css             |   10 +
 loleaflet/src/control/Control.Menubar.js |    8 +
 loleaflet/src/layer/AnnotationManager.js |  159 +++++++++++++++++++++++--------
 loleaflet/src/layer/marker/Annotation.js |   79 ++++++++++-----
 5 files changed, 191 insertions(+), 66 deletions(-)

New commits:
commit f9d54cd05867a065075d1f0d9bee2b4706d09802
Author: Henry Castro <hcastro at collabora.com>
Date:   Sat Feb 11 18:04:38 2017 -0400

    loleaflet: insert annotation

diff --git a/loleaflet/dist/loleaflet.css b/loleaflet/dist/loleaflet.css
index 8db2068..eac27ef 100644
--- a/loleaflet/dist/loleaflet.css
+++ b/loleaflet/dist/loleaflet.css
@@ -121,7 +121,13 @@ body {
 	border: 1px solid #999;
 }
 
-.leaflet-annotation-content {
-	margin: 13px 19px;
+.loleaflet-annotation-content {
+	margin: 3px 3px;
 	line-height: 1.4;
 }
+
+.loleaflet-annotation-textarea {
+	border: 1px solid #c8c8c8;
+	resize: none;
+	background-color: #ffffc0;
+}
diff --git a/loleaflet/src/control/Control.Menubar.js b/loleaflet/src/control/Control.Menubar.js
index 4128280..6b7261e 100644
--- a/loleaflet/src/control/Control.Menubar.js
+++ b/loleaflet/src/control/Control.Menubar.js
@@ -37,7 +37,7 @@ L.Control.Menubar = L.Control.extend({
 			},
 			{name: _('Insert'), type: 'menu', menu: [
 				{name: _('Image'), id: 'insertgraphic', type: 'action'},
-				{name: _('Comment'), type: 'unocommand', uno: '.uno:InsertAnnotation'},
+				{name: _('Comment...'), id: 'insertcomment', type: 'action'},
 				{type: 'separator'},
 				{name: _('Footnote'), type: 'unocommand', uno: '.uno:InsertFootnote'},
 				{name: _('Endnote'), type: 'unocommand', uno: '.uno:InsertEndnote'},
@@ -411,6 +411,8 @@ L.Control.Menubar = L.Control.extend({
 			// check if it is empty
 			fileName = fileName === '' ? 'document' : fileName;
 			map.downloadAs(fileName + '.' + format, format);
+		} else if (id === 'insertcomment') {
+			map.insertComment();
 		} else if (id === 'insertgraphic') {
 			L.DomUtil.get('insertgraphic').click();
 		} else if (id === 'specialcharacter') {
@@ -514,7 +516,9 @@ L.Control.Menubar = L.Control.extend({
 			var id = $(item).data('id');
 			self._executeAction(id);
 		}
-		map.focus();
+
+		if (id !== 'insertcomment')
+			map.focus();
 	},
 
 	_createMenu: function(menu) {
diff --git a/loleaflet/src/layer/AnnotationManager.js b/loleaflet/src/layer/AnnotationManager.js
index f00651c..56147e9 100644
--- a/loleaflet/src/layer/AnnotationManager.js
+++ b/loleaflet/src/layer/AnnotationManager.js
@@ -11,93 +11,180 @@ L.AnnotationManager = L.Class.extend({
 
 	initialize: function (map) {
 		this._map = map;
-		this._annotations = {};
+		this._items = {};
+		this._anchors = [];
 		this._selected = {};
-		this._arrow = L.polyline([], {color: 'darkblue', weight:1});
+		this._arrow = L.polyline([], {color: 'darkblue', weight: 1});
+		this._map.on('AnnotationCancel', this._onAnnotationCancel, this);
 		this._map.on('AnnotationClick', this._onAnnotationClick, this);
+		this._map.on('AnnotationSave', this._onAnnotationSave, this);
 	},
 
 	clear: function () {
-		for (var key in this._annotations) {
-			this._map.removeLayer(this._annotations[key]);
+		for (var key in this._items) {
+			this._map.removeLayer(this._items[key]);
 		}
 		this._map.removeLayer(this._arrow);
-		this._annotations = {};
+		this._items = {};
+		this._anchors = [];
 		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;
-
+		var comment;
 		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;
+			comment = comments[index];
+			comment.anchorPos = L.LOUtil.stringToPoint(comment.anchorPos);
+			this._items[comment.id] = L.annotation(this._map.options.maxBounds.getSouthEast(), comment).addTo(this._map);
+			this._anchors.push({anchor: comment.anchorPos, id: comment.id});
 		}
+		this._anchors.sort(function(a, b) {
+			return Math.abs(a.anchor.y) - Math.abs(b.anchor.y);
+		});
+		this.layout();
+	},
 
+	unselect: function () {
+		this._selected.annotation = null;
+		this._map.removeLayer(this._arrow);
 		this.layout();
 	},
 
 	select: function (id) {
 		var topRight = this._map.project(this._map.options.maxBounds.getNorthEast());
-		var annotation = this._annotations[id];
-		var point0, point1, point2;
+		var annotation = this._items[id];
+		var point0, point1, point2, point3;
 		if (annotation) {
-			point0 = this._map._docLayer._twipsToPixels(L.LOUtil.stringToPoint(annotation._data.anchorPos));
+			this._selected.annotation = annotation;
+			this.layout();
+			point0 = this._map._docLayer._twipsToPixels(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)]);
+			point3 = L.point(topRight.x, point2.y + this.options.offset);
+			this._arrow.setLatLngs([this._map.unproject(point0), this._map.unproject(point1), this._map.unproject(point2), this._map.unproject(point3)]);
 			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));
+			annotation.setLatLng(this._map.unproject(point3));
 		}
 	},
 
 	layout: function () {
-		var annotation, bounds, layoutBounds, foundBounds;
-		this._bounds = [];
-		for (var key in this._annotations) {
-			annotation = this._annotations[key];
+		var topRight = this._map.project(this._map.options.maxBounds.getNorthEast()).add(L.point(this.options.marginX, this.options.marginY));
+		var annotation, bounds, layoutBounds, foundBounds,point, latlng;
+		var layouts = [];
+
+		if (this._selected.annotation) {
+			point = L.point(topRight.x, this._map._docLayer._twipsToPixels(this._selected.annotation._data.anchorPos).y);
+			this._selected.annotation.setLatLng(this._map.unproject(point));
+			bounds = this._selected.annotation.getBounds();
+			bounds.extend(bounds.min.subtract([0, this.options.marginY]));
+			bounds.extend(bounds.getBottomLeft().add([0, this.options.marginY]));
+			this._selected.bounds = bounds;
+		}
+
+		for (var itAnchor in this._anchors) {
+			annotation = this._items[this._anchors[itAnchor].id];
+			if (annotation === this._selected.annotation) {
+				continue;
+			}
+			point = L.point(topRight.x, this._map._docLayer._twipsToPixels(annotation._data.anchorPos).y);
+			latlng = this._map.unproject(point);
+			annotation.setLatLng(latlng);
 			bounds = annotation.getBounds();
 			foundBounds = null;
-			for (var itBounds in this._bounds) {
-				layoutBounds = this._bounds[itBounds];
+			for (var itBounds in layouts) {
+				layoutBounds = layouts[itBounds];
 				if (layoutBounds.intersects(bounds)) {
-					foundBounds = layoutBounds;
-					break;
+					if (foundBounds) {
+						foundBounds = layoutBounds.max.y > foundBounds.max.y ? layoutBounds : foundBounds;
+					} else {
+						foundBounds = layoutBounds;
+					}
 				}
 			}
 
 			if (foundBounds) {
-				annotation.setLatLng(this._map.layerPointToLatLng(foundBounds.getBottomLeft()));
+				if (foundBounds.contains(bounds.getTopRight())) {
+					point = foundBounds.getBottomLeft().add([0, bounds.getSize().y + this.options.marginY]);
+					latlng = this._map.layerPointToLatLng(foundBounds.getBottomLeft());
+				} else {
+					point = foundBounds.min.subtract([0, bounds.getSize().y + this.options.marginY]);
+					latlng = this._map.layerPointToLatLng(point);
+				}
+				foundBounds.extend(point);
+			} else {
+				foundBounds = L.bounds(bounds.min, bounds.max);
+				foundBounds.extend(L.point(bounds.min.x, bounds.min.y - this.options.marginY));
+				foundBounds.extend(L.point(bounds.min.x, bounds.max.y + this.options.marginY));
+				layouts.push(foundBounds);
 			}
-			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);
+
+			if (this._selected.annotation && this._selected.bounds && this._selected.bounds.intersects(foundBounds)) {
+				foundBounds.extend(this._selected.bounds.min);
+				latlng = this._map.layerPointToLatLng(this._selected.bounds.getBottomLeft());
+				foundBounds.extend(this._selected.bounds.getBottomLeft().add([0, bounds.getSize().y + this.options.marginY]));
+				this._selected.bounds = null;
 			}
+
+			annotation.setLatLng(latlng);
 			annotation.show();
 		}
 	},
 
-	add: function (annotation) {
+	add: function (comment) {
+		this._items[comment.id] = L.annotation(this._map.options.maxBounds.getSouthEast(), comment).addTo(this._map).edit();
+		this._anchors.push({anchor: comment.anchorPos, id: comment.id});
+		this._anchors.sort(function(a, b) {
+			return Math.abs(a.anchor.y) - Math.abs(b.anchor.y);
+		});
+		this.select(comment.id);
+		this._items[comment.id].focus();
 	},
 
 	remove: function (annotation) {
 	},
 
+	_onAnnotationCancel: function (e) {
+		if (e.id === -1) {
+			for (var index in this._anchors) {
+				if (this._anchors[index].id === e.id) {
+					this._anchors.splice(index, 1);
+					break;
+				}
+			}
+			this._map.removeLayer(this._items[e.id]);
+			this.unselect();
+			delete this._items[e.id];
+			this._map.focus();
+		}
+	},
+
 	_onAnnotationClick: function (e) {
 		this.select(e.id);
+	},
+
+	_onAnnotationSave: function (e) {
+		this._items[e.id].updateEdit();
+		this._items[e.id].show();
+		this.layout();
 	}
 });
 
+
+L.Map.include({
+	insertComment: function() {
+		this._docLayer._annotations.add({
+			text: '',
+			textrange: '',
+			author: _('You'),
+			dateTime: new Date().toDateString(),
+			id: -1,
+			anchorPos:  this._docLayer._latLngToTwips(this._docLayer._visibleCursor.getNorthWest())
+		});
+	}
+});
+
+
 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
index dbb3189..142c73e 100644
--- a/loleaflet/src/layer/marker/Annotation.js
+++ b/loleaflet/src/layer/marker/Annotation.js
@@ -30,7 +30,7 @@ L.Annotation = L.Layer.extend({
 	},
 
 	onRemove: function (map) {
-		map._panes.makerPane.removeChild(this._container);
+		map._panes.markerPane.removeChild(this._container);
 		this._map = null;
 	},
 
@@ -57,6 +57,23 @@ L.Annotation = L.Layer.extend({
 
 	show: function () {
 		this._container.style.visibility = '';
+		this._contentNode.style.display = '';
+		this._editNode.style.display = 'none';
+	},
+
+	edit: function () {
+		this._container.style.visibility = '';
+		this._contentNode.style.display = 'none';
+		this._editNode.style.display = '';
+		return this;
+	},
+
+	updateEdit: function () {
+		this._contentText.innerHTML = this._editText.value;
+	},
+
+	focus: function () {
+		this._editText.focus();
 	},
 
 	_initLayout: function () {
@@ -65,38 +82,48 @@ L.Annotation = L.Layer.extend({
 		var wrapper = this._wrapper =
 			L.DomUtil.create('div', 'loleaflet-annotation-content-wrapper', container);
 
+		L.DomEvent.disableScrollPropagation(this._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._editNode = L.DomUtil.create('div', 'loleaflet-annotation-content', wrapper);
+
+		this._contentText = L.DomUtil.create('div', '', this._contentNode);
+		this._contentAuthor = L.DomUtil.create('div', '', this._contentNode);
+		this._contentDate = L.DomUtil.create('div', '', this._contentNode);
+
+		this._editText = L.DomUtil.create('textarea', 'loleaflet-annotation-textarea', this._editNode);
+		this._editAuthor = L.DomUtil.create('div', '', this._editNode);
+		this._editDate = L.DomUtil.create('div', '', this._editNode);
+
+		var buttons = L.DomUtil.create('div', '', this._editNode);
+		var button = L.DomUtil.create('input', 'loleaflet-controls', buttons);
+		button.type = 'button';
+		button.value = _(' Save ');
+		L.DomEvent.on(button, 'click', this._onSaveClick, this);
+		button = L.DomUtil.create('input', 'loleaflet-controls', buttons);
+		button.type = 'button';
+		button.value = _('Cancel');
+		L.DomEvent.on(button, 'click', this._onCancelClick, this);
+
 		this._container.style.visibility = 'hidden';
+		this._editNode.style.display = 'none';
 
-		var events = ['dblclick', 'mousedown', 'mouseover', 'mouseout', 'contextmenu'];
+		var events = ['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'keydown', 'keypress', 'keyup', '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);
+			L.DomEvent.on(container, events[it], L.DomEvent.stopPropagation, this);
 		}
 	},
 
-	_onMouseClick: function (e) {
-		this._map.fire('AnnotationClick', {id: this._data.id});
+	_onCancelClick: function (e) {
+		this._map.fire('AnnotationCancel', {id: this._data.id});
 	},
 
-	_stopMouseEvent: function (e) {
-		if (e.type !== 'mousedown') {
-			L.DomEvent.stopPropagation(e);
-		} else {
-			L.DomEvent.preventDefault(e);
-		}
+	_onSaveClick: function (e) {
+		this._map.fire('AnnotationSave', {id: this._data.id});
+	},
+
+	_onMouseClick: function (e) {
+		this._map.fire('AnnotationClick', {id: this._data.id});
 	},
 
 	_updateLayout: function () {
@@ -110,9 +137,9 @@ L.Annotation = L.Layer.extend({
 	},
 
 	_updateContent: function () {
-		this._text.innerHTML = this._data.text;
-		this._author.innerHTML = this._data.author;
-		this._dateTime.innerHTML = this._data.dateTime;
+		this._contentText.innerHTML = this._editText.innerHTML = this._data.text;
+		this._contentAuthor.innerHTML = this._editAuthor.innerHTML = this._data.author;
+		this._contentDate.innerHTML = this._editDate.innerHTML = this._data.dateTime;
 	},
 
 	_updatePosition: function () {
commit b2b1dc8dafa9cf2a0c2428ce4ae4f368f3b4cb31
Author: Henry Castro <hcastro at collabora.com>
Date:   Sat Feb 11 21:21:18 2017 -0400

    .gitignore loolwsd_fuzzer

diff --git a/.gitignore b/.gitignore
index 14fcf08..8d1a320 100644
--- a/.gitignore
+++ b/.gitignore
@@ -57,6 +57,7 @@ loolstress
 loolforkit-nocaps
 loadtest
 unittest
+loolwsd_fuzzer
 
 # make tags
 TAGS


More information about the Libreoffice-commits mailing list