[Libreoffice-commits] online.git: 3 commits - loleaflet/dist loleaflet/src
Mihai Varga
mihai.varga at collabora.com
Thu Sep 17 08:41:58 PDT 2015
loleaflet/dist/leaflet.css | 2
loleaflet/src/layer/marker/Icon.js | 10 --
loleaflet/src/layer/tile/GridLayer.js | 7 -
loleaflet/src/layer/tile/TileLayer.js | 121 ++++++++++++++++++++++-----------
loleaflet/src/map/handler/Map.Mouse.js | 26 +++----
5 files changed, 99 insertions(+), 67 deletions(-)
New commits:
commit c31a1a12763ef2c00a3d7792db1b153918f3c10b
Author: Mihai Varga <mihai.varga at collabora.com>
Date: Thu Sep 17 18:39:11 2015 +0300
loleaflet: add an offset of 2 pixels to selection handles
Without this, grabbing a selection handle causes the selection to jump
a line below
diff --git a/loleaflet/dist/leaflet.css b/loleaflet/dist/leaflet.css
index 66d889d..e7971ec 100644
--- a/loleaflet/dist/leaflet.css
+++ b/loleaflet/dist/leaflet.css
@@ -43,7 +43,6 @@
.leaflet-selection-marker-start {
margin-left: -28px;
- margin-top: -2px;
width: 30px;
height: 44px;
background-image: url(images/handle_start.png);
@@ -51,7 +50,6 @@
.leaflet-selection-marker-end {
margin-left: -2px;
- margin-top: -2px;
width: 30px;
height: 44px;
background-image: url(images/handle_end.png);
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index 8858f4c..fd8771a 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -629,12 +629,18 @@ L.TileLayer = L.GridLayer.extend({
}
if (!startMarker.isDragged) {
- startMarker.setLatLng(this._textSelectionStart.getSouthWest());
+ var pos = this._map.project(this._textSelectionStart.getSouthWest());
+ pos = pos.subtract(new L.Point(0, 2));
+ pos = this._map.unproject(pos);
+ startMarker.setLatLng(pos);
this._map.addLayer(startMarker);
}
if (!endMarker.isDragged) {
- endMarker.setLatLng(this._textSelectionEnd.getSouthEast());
+ var pos = this._map.project(this._textSelectionEnd.getSouthEast());
+ pos = pos.subtract(new L.Point(0, 2));
+ pos = this._map.unproject(pos);
+ endMarker.setLatLng(pos);
this._map.addLayer(endMarker);
}
}
commit 5da3288a4a9b934c033ddce682c54706517cbcce
Author: Mihai Varga <mihai.varga at collabora.com>
Date: Thu Sep 17 18:32:53 2015 +0300
loleaflet: reworked selection handles
Selection handles are now positioned relative to the text selection
starting and ending points. So the start handle will alwasy be the one
near the text selection start, while the end handle will be at the end,
near the cursor
diff --git a/loleaflet/src/layer/tile/GridLayer.js b/loleaflet/src/layer/tile/GridLayer.js
index 9843c24..e010aa3 100644
--- a/loleaflet/src/layer/tile/GridLayer.js
+++ b/loleaflet/src/layer/tile/GridLayer.js
@@ -51,11 +51,8 @@ L.GridLayer = L.Layer.extend({
if (this._graphicMarker) {
this._graphicMarker.remove();
}
- if (this._startMarker) {
- this._startMarker.remove();
- }
- if (this._endMarker) {
- this._endMarker.remove();
+ for (var key in this._selectionHandles) {
+ this._selectionHandles[key].remove();
}
},
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index 9c30cb0..8858f4c 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -64,31 +64,24 @@ L.TileLayer = L.GridLayer.extend({
// Rectangle graphic selection
this._graphicSelection = new L.LatLngBounds(new L.LatLng(0, 0), new L.LatLng(0, 0));
// Position and size of the selection start (as if there would be a cursor caret there).
- this._textSelectionStart = new L.LatLngBounds(new L.LatLng(0, 0), new L.LatLng(0, 0));
- // Position and size of the selection end.
- this._textSelectionEnd = new L.LatLngBounds(new L.LatLng(0, 0), new L.LatLng(0, 0));
this._lastValidPart = -1;
// Cursor marker
this._cursorMarker = null;
// Graphic marker
this._graphicMarker = null;
- // Handle start marker
- this._startMarker = L.marker(new L.LatLng(0, 0), {
- icon: L.divIcon({
- className: 'leaflet-selection-marker-start',
- iconSize: null
- }),
- draggable: true
- });
- // Handle end marker
- this._endMarker = L.marker(new L.LatLng(0, 0), {
- icon: L.divIcon({
- className: 'leaflet-selection-marker-end',
- iconSize: null
- }),
- draggable: true
- });
+ // Selection handle marker
+ this._selectionHandles = {};
+ ['start', 'end'].forEach(L.bind(function (handle) {
+ this._selectionHandles[handle] = L.marker(new L.LatLng(0, 0), {
+ icon: L.divIcon({
+ className: 'leaflet-selection-marker-' + handle,
+ iconSize: null
+ }),
+ draggable: true
+ });
+ }, this));
+
this._emptyTilesCount = 0;
this._msgQueue = [];
this._toolbarCommandValues = {};
@@ -112,8 +105,9 @@ L.TileLayer = L.GridLayer.extend({
map.on('dragstart', this._onDragStart, this);
map.on('requestloksession', this._onRequestLOKSession, this);
map.on('error', this._mapOnError, this);
- this._startMarker.on('drag dragend', this._onSelectionHandleDrag, this);
- this._endMarker.on('drag dragend', this._onSelectionHandleDrag, this);
+ for (var key in this._selectionHandles) {
+ this._selectionHandles[key].on('drag dragend', this._onSelectionHandleDrag, this);
+ }
this._textArea = map._textArea;
this._textArea.focus();
if (this.options.readOnly) {
@@ -385,7 +379,7 @@ L.TileLayer = L.GridLayer.extend({
this._twipsToLatLng(bottomRightTwips, this._map.getZoom()));
}
else {
- this._textSelectionEnd = new L.LatLngBounds(new L.LatLng(0, 0), new L.LatLng(0, 0));
+ this._textSelectionEnd = null;
}
},
@@ -400,7 +394,7 @@ L.TileLayer = L.GridLayer.extend({
this._twipsToLatLng(bottomRightTwips, this._map.getZoom()));
}
else {
- this._textSelectionStart = new L.LatLngBounds(new L.LatLng(0, 0), new L.LatLng(0, 0));
+ this._textSelectionStart = null;
}
},
@@ -497,8 +491,11 @@ L.TileLayer = L.GridLayer.extend({
},
// Is rRectangle empty?
- _isEmptyRectangle: function (aBounds) {
- return aBounds.getSouthWest().equals(new L.LatLng(0, 0)) && aBounds.getNorthEast().equals(new L.LatLng(0, 0));
+ _isEmptyRectangle: function (bounds) {
+ if (!bounds) {
+ return true;
+ }
+ return bounds.getSouthWest().equals(new L.LatLng(0, 0)) && bounds.getNorthEast().equals(new L.LatLng(0, 0));
},
// Update cursor layer (blinking cursor).
@@ -559,10 +556,10 @@ L.TileLayer = L.GridLayer.extend({
this._textArea.focus();
}
- if (this._startMarker === e.target) {
+ if (this._selectionHandles.start === e.target) {
this._postSelectTextEvent('start', aPos.x, aPos.y);
}
- if (this._endMarker === e.target) {
+ else if (this._selectionHandles.end === e.target) {
this._postSelectTextEvent('end', aPos.x, aPos.y);
}
},
@@ -592,24 +589,62 @@ L.TileLayer = L.GridLayer.extend({
// Update text selection handlers.
_onUpdateTextSelection: function () {
- if (this._selections.getLayers().length !== 0) {
- if (!this._isEmptyRectangle(this._textSelectionStart) && !this._startMarker.isDragged) {
- this._startMarker.setLatLng(this._textSelectionStart.getSouthWest());
- this._map.addLayer(this._startMarker);
+ var startMarker, endMarker;
+ for (var key in this._selectionHandles) {
+ if (key === 'start') {
+ startMarker = this._selectionHandles[key];
}
+ else if (key === 'end') {
+ endMarker = this._selectionHandles[key];
+ }
+ }
- if (!this._isEmptyRectangle(this._textSelectionEnd) && !this._endMarker.isDragged) {
- this._endMarker.setLatLng(this._textSelectionEnd.getSouthEast());
- this._map.addLayer(this._endMarker);
+ if (this._selections.getLayers().length !== 0 || startMarker.isDragged || endMarker.isDragged) {
+ if (!startMarker || !endMarker ||
+ this._isEmptyRectangle(this._textSelectionStart) ||
+ this._isEmptyRectangle(this._textSelectionEnd)) {
+ return;
+ }
+
+ var startPos = this._map.project(this._textSelectionStart.getSouthWest());
+ var endPos = this._map.project(this._textSelectionEnd.getSouthWest());
+ var startMarkerPos = this._map.project(startMarker.getLatLng());
+ if (startMarkerPos.distanceTo(endPos) < startMarkerPos.distanceTo(startPos) && startMarker._icon && endMarker._icon) {
+ // if the start marker is actually closer to the end of the selection
+ // reverse icons and markers
+ L.DomUtil.removeClass(startMarker._icon, 'leaflet-selection-marker-start');
+ L.DomUtil.removeClass(endMarker._icon, 'leaflet-selection-marker-end');
+ L.DomUtil.addClass(startMarker._icon, 'leaflet-selection-marker-end');
+ L.DomUtil.addClass(endMarker._icon, 'leaflet-selection-marker-start');
+ var tmp = startMarker;
+ startMarker = endMarker;
+ endMarker = tmp;
+ }
+ else if (startMarker._icon && endMarker._icon) {
+ // normal markers and normal icons
+ L.DomUtil.removeClass(startMarker._icon, 'leaflet-selection-marker-end');
+ L.DomUtil.removeClass(endMarker._icon, 'leaflet-selection-marker-start');
+ L.DomUtil.addClass(startMarker._icon, 'leaflet-selection-marker-start');
+ L.DomUtil.addClass(endMarker._icon, 'leaflet-selection-marker-end');
+ }
+
+ if (!startMarker.isDragged) {
+ startMarker.setLatLng(this._textSelectionStart.getSouthWest());
+ this._map.addLayer(startMarker);
+ }
+
+ if (!endMarker.isDragged) {
+ endMarker.setLatLng(this._textSelectionEnd.getSouthEast());
+ this._map.addLayer(endMarker);
}
}
else {
- this._textSelectionStart = new L.LatLngBounds(new L.LatLng(0, 0), new L.LatLng(0, 0));
- this._textSelectionEnd = new L.LatLngBounds(new L.LatLng(0, 0), new L.LatLng(0, 0));
- this._map.removeLayer(this._startMarker);
- this._map.removeLayer(this._endMarker);
- this._endMarker.isDragged = false;
- this._startMarker.isDragged = false;
+ this._textSelectionStart = null;
+ this._textSelectionEnd = null;
+ for (key in this._selectionHandles) {
+ this._map.removeLayer(this._selectionHandles[key]);
+ this._selectionHandles[key].isDragged = false;
+ }
}
},
diff --git a/loleaflet/src/map/handler/Map.Mouse.js b/loleaflet/src/map/handler/Map.Mouse.js
index a5f58f1..ac731a8 100644
--- a/loleaflet/src/map/handler/Map.Mouse.js
+++ b/loleaflet/src/map/handler/Map.Mouse.js
@@ -33,8 +33,10 @@ L.Map.Mouse = L.Handler.extend({
return;
}
- if (docLayer._startMarker.isDragged === true || docLayer._endMarker.isDragged === true) {
- return;
+ for (var key in docLayer._selectionHandles) {
+ if (docLayer._selectionHandles[key].isDragged) {
+ return;
+ }
}
if (e.type === 'mousedown') {
@@ -85,11 +87,11 @@ L.Map.Mouse = L.Handler.extend({
}, this));
this._holdMouseEvent = setTimeout(L.bind(this._executeMouseEvents, this), timeOut);
- if (docLayer._startMarker._icon) {
- L.DomUtil.removeClass(docLayer._startMarker._icon, 'leaflet-not-clickable');
- }
- if (docLayer._endMarker._icon) {
- L.DomUtil.removeClass(docLayer._endMarker._icon, 'leaflet-not-clickable');
+ for (key in docLayer._selectionHandles) {
+ var handle = docLayer._selectionHandles[key];
+ if (handle._icon) {
+ L.DomUtil.removeClass(handle._icon, 'leaflet-not-clickable');
+ }
}
}
}
@@ -112,11 +114,11 @@ L.Map.Mouse = L.Handler.extend({
if (!this._map.dragging.enabled()) {
mousePos = docLayer._latLngToTwips(e.latlng);
docLayer._postMouseEvent('move', mousePos.x, mousePos.y, 1);
- if (docLayer._startMarker._icon) {
- L.DomUtil.addClass(docLayer._startMarker._icon, 'leaflet-not-clickable');
- }
- if (docLayer._endMarker._icon) {
- L.DomUtil.addClass(docLayer._endMarker._icon, 'leaflet-not-clickable');
+ for (key in docLayer._selectionHandles) {
+ handle = docLayer._selectionHandles[key];
+ if (handle._icon) {
+ L.DomUtil.addClass(handle._icon, 'leaflet-not-clickable');
+ }
}
}
}
commit 4f3028637ea080eff3c1bfdd555cb695c9ecf50a
Author: Mihai Varga <mihai.varga at collabora.com>
Date: Wed Sep 16 20:57:47 2015 +0300
loleaflet: revert changes to Icon.js and use divIcon instead
diff --git a/loleaflet/src/layer/marker/Icon.js b/loleaflet/src/layer/marker/Icon.js
index b50ca13..58d5fd3 100644
--- a/loleaflet/src/layer/marker/Icon.js
+++ b/loleaflet/src/layer/marker/Icon.js
@@ -15,7 +15,6 @@ L.Icon = L.Class.extend({
shadowSize: (Point)
shadowAnchor: (Point)
className: (String)
- asDiv: (Boolean) (optional, creates the icon as a div)
},
*/
@@ -34,19 +33,14 @@ L.Icon = L.Class.extend({
_createIcon: function (name, oldIcon) {
var src = this._getIconUrl(name);
- if (!src && !this.options.asDiv) {
+ if (!src) {
if (name === 'icon') {
throw new Error('iconUrl not set in Icon options (see the docs).');
}
return null;
}
- if (this.options.asDiv) {
- var img = document.createElement('div');
- }
- else {
- img = this._createImg(src, oldIcon && oldIcon.tagName === 'IMG' ? oldIcon : null);
- }
+ var img = this._createImg(src, oldIcon && oldIcon.tagName === 'IMG' ? oldIcon : null);
this._setIconStyles(img, name);
return img;
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index 71d5b77..9c30cb0 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -75,17 +75,17 @@ L.TileLayer = L.GridLayer.extend({
this._graphicMarker = null;
// Handle start marker
this._startMarker = L.marker(new L.LatLng(0, 0), {
- icon: L.icon({
+ icon: L.divIcon({
className: 'leaflet-selection-marker-start',
- asDiv: true
+ iconSize: null
}),
draggable: true
});
// Handle end marker
this._endMarker = L.marker(new L.LatLng(0, 0), {
- icon: L.icon({
+ icon: L.divIcon({
className: 'leaflet-selection-marker-end',
- asDiv: true
+ iconSize: null
}),
draggable: true
});
More information about the Libreoffice-commits
mailing list