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.va...@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.va...@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.va...@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 }); _______________________________________________ Libreoffice-commits mailing list libreoffice-comm...@lists.freedesktop.org http://lists.freedesktop.org/mailman/listinfo/libreoffice-commits