loleaflet/src/dom/DomEvent.js | 15 +++++++++++-- loleaflet/src/dom/Draggable.js | 9 ++++++++ loleaflet/src/map/Map.js | 28 ++++++++++++++++++++++++- loleaflet/src/map/handler/Map.Mouse.js | 36 ++++++++++++++++++++++++++++++++- 4 files changed, 83 insertions(+), 5 deletions(-)
New commits: commit c2d0e6cd7abb5d525696a64b4ed3c001f537d3ca Author: Marco Cecchetti <[email protected]> Date: Sun Jan 24 14:56:51 2016 +0100 loleaflet - fix for multi-line text selection issues Steps for reproducing the problem: 1) try to select some multi-line text 2) still holding the mouse button pressed move the mouse pointer outside the browser window 3) release the mouse button 4) move the cursor back over the map. Expected result: the selection should not change any more after the mouse button has been released. Real result: the selection changes when you move the mouse. The same happens when you move the mouse pointer out of the tiles covering, even if we are still inside the html document element area where the map is embedded. A similar issue occurs in view only mode when you drag the document: in this case the problem occurs only when you move the mouse pointer out of the tiles covering, but still inside the html document element area where the map is embedded. The behaviour described above is due to the fact that the map container receives mouse events only when the mouse pointer is over the map. The implemented fix checks for mouseout events which occur between a tile element and a non-tile element (such as the the resize-detector iframe, the scroll-bar container, the selection cursor marker). When such an event occurs handlers for mousemove and mouseup events are attached to the HTML document element and to the resize-detector iframe. In the same way when a mouseover event occurs between a tile element and a non-tile element such handlers are removed. It was needed to attach handlers to the resize-detector iframe too since the HTML document element seems to not be able to receive mouse events that occur inside the iframe area. A side effect of this fix is that now the text selection goes on changing as far as the mouse button is not released even when the mouse pointer is moved out of the tiles covering. Since for an iframe the coordinates embedded in a mouse event are relative to the iframe area, it was needed to implement a workaround in order to avoid sudden changes in the current selection or in the document position when the mouse pointer moves out of the map. diff --git a/loleaflet/src/dom/DomEvent.js b/loleaflet/src/dom/DomEvent.js index a83a5ac..d1f9141 100644 --- a/loleaflet/src/dom/DomEvent.js +++ b/loleaflet/src/dom/DomEvent.js @@ -180,11 +180,20 @@ L.DomEvent = { return new L.Point(e.clientX, e.clientY); } - var rect = container.getBoundingClientRect(); + var rect = container.getBoundingClientRect(), // constant object + left = rect.left, + top = rect.top; + + // iframe mouse coordinates are relative to the frame area + // `target`: body element of the iframe; `currentTarget`: content window of the iframe + if (e.currentTarget && e.currentTarget.frameElement + && L.DomUtil.hasClass(e.currentTarget.frameElement, 'resize-detector')) { + left = top = 0; + } return new L.Point( - e.clientX - rect.left - container.clientLeft, - e.clientY - rect.top - container.clientTop); + e.clientX - left - container.clientLeft, + e.clientY - top - container.clientTop); }, getWheelDelta: function (e) { diff --git a/loleaflet/src/dom/Draggable.js b/loleaflet/src/dom/Draggable.js index 3eaafa7..4e7280d 100644 --- a/loleaflet/src/dom/Draggable.js +++ b/loleaflet/src/dom/Draggable.js @@ -90,6 +90,15 @@ L.Draggable = L.Evented.extend({ offset = newPoint.subtract(this._startPoint); if (this._map) { + // needed in order to avoid a jump when the document is dragged and the mouse pointer move + // from over the map into the html document element area which is not covered by tiles + // (resize-detector iframe) + if (e.currentTarget && e.currentTarget.frameElement + && L.DomUtil.hasClass(e.currentTarget.frameElement, 'resize-detector')) { + var rect = this._map._container.getBoundingClientRect(), + correction = new L.Point(rect.left, rect.top); + offset = offset.add(correction); + } if (this._map.getDocSize().x < this._map.getSize().x) { // don't pan horizontaly when the document fits in the viewing // area horizontally (docWidth < viewAreaWidth) diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js index a2f9e06..87dd60f 100644 --- a/loleaflet/src/map/Map.js +++ b/loleaflet/src/map/Map.js @@ -595,6 +595,8 @@ L.Map = L.Evented.extend({ this._targets = {}; + this._mouseOut = false; + var onOff = remove ? 'off' : 'on'; L.DomEvent[onOff](this._container, 'click dblclick mousedown mouseup ' + @@ -613,6 +615,17 @@ L.Map = L.Evented.extend({ function () { this.invalidateSize({debounceMoveend: true}); }, this, false, this._container); }, + _isMouseEnteringLeaving: function (e) { + var target = e.target || e.srcElement, + related = e.relatedTarget; + + if (!target) { return false; } + + return (L.DomUtil.hasClass(target, 'leaflet-tile') + && !(related && (L.DomUtil.hasClass(related, 'leaflet-tile') + || L.DomUtil.hasClass(related, 'leaflet-cursor')))); + }, + _handleDOMEvent: function (e) { if (!this._loaded || L.DomEvent._skipped(e)) { return; } @@ -621,8 +634,21 @@ L.Map = L.Evented.extend({ //type = e.type === 'keypress' && e.keyCode === 13 ? 'click' : e.type; type = e.type; + // we need to keep track if we have entered/left the map + this._mouseEnteringLeaving = false; + // mouse leaving the map ? + if (!target && !this._mouseOut && type === 'mouseout') { + this._mouseEnteringLeaving = this._isMouseEnteringLeaving(e); + this._mouseOut = this._mouseEnteringLeaving; // event type == mouseout + } + // mouse entering the map ? + if (!target && this._mouseOut && type === 'mouseover') { + this._mouseEnteringLeaving = this._isMouseEnteringLeaving(e); + this._mouseOut = !this._mouseEnteringLeaving; // event type == mouseover + } + // special case for map mouseover/mouseout events so that they're actually mouseenter/mouseleave - if (!target && (type === 'mouseover' || type === 'mouseout') && + if (!target && !this._mouseEnteringLeaving && (type === 'mouseover' || type === 'mouseout') && !L.DomEvent._checkMouse(this._container, e)) { return; } // prevents outline when clicking on keyboard-focusable element diff --git a/loleaflet/src/map/handler/Map.Mouse.js b/loleaflet/src/map/handler/Map.Mouse.js index 440298d..28919d6 100644 --- a/loleaflet/src/map/handler/Map.Mouse.js +++ b/loleaflet/src/map/handler/Map.Mouse.js @@ -90,7 +90,15 @@ L.Map.Mouse = L.Handler.extend({ buttons |= e.originalEvent.button === this.JSButtons.middle ? this.LOButtons.middle : 0; buttons |= e.originalEvent.button === this.JSButtons.right ? this.LOButtons.right : 0; - if (e.type === 'mousedown') { + var mouseEnteringLeavingMap = this._map._mouseEnteringLeaving; + + if (mouseEnteringLeavingMap && e.type === 'mouseover' && this._mouseDown) { + L.DomEvent.off(document, 'mousemove', this._onMouseMoveOutside, this); + L.DomEvent.off(document, 'mouseup', this._onMouseUpOutside, this); + L.DomEvent.off(this._map._resizeDetector.contentWindow, 'mousemove', this._onMouseMoveOutside, this); + L.DomEvent.off(this._map._resizeDetector.contentWindow, 'mouseup', this._onMouseUpOutside, this); + } + else if (e.type === 'mousedown') { docLayer._resetPreFetching(); this._mouseDown = true; if (this._holdMouseEvent) { @@ -211,6 +219,12 @@ L.Map.Mouse = L.Handler.extend({ docLayer._postMouseEvent('buttondown', mousePos.x, mousePos.y, count, buttons, modifier); docLayer._postMouseEvent('buttonup', mousePos.x, mousePos.y, count, buttons, modifier); } + else if (mouseEnteringLeavingMap && e.type === 'mouseout' && this._mouseDown) { + L.DomEvent.on(this._map._resizeDetector.contentWindow, 'mousemove', this._onMouseMoveOutside, this); + L.DomEvent.on(this._map._resizeDetector.contentWindow, 'mouseup', this._onMouseUpOutside, this); + L.DomEvent.on(document, 'mousemove', this._onMouseMoveOutside, this); + L.DomEvent.on(document, 'mouseup', this._onMouseUpOutside, this); + } }, _executeMouseEvents: function () { @@ -219,6 +233,26 @@ L.Map.Mouse = L.Handler.extend({ this._mouseEventsQueue[i](); } this._mouseEventsQueue = []; + }, + + _onMouseMoveOutside: function (e) { + this._map._handleDOMEvent(e); + if (this._map.dragging.enabled()) { + this._map.dragging._draggable._onMove(e); + } + }, + + _onMouseUpOutside: function (e) { + this._mouseDown = false; + L.DomEvent.off(document, 'mousemove', this._onMouseMoveOutside, this); + L.DomEvent.off(document, 'mouseup', this._onMouseUpOutside, this); + L.DomEvent.off(this._map._resizeDetector.contentWindow, 'mousemove', this._onMouseMoveOutside, this); + L.DomEvent.off(this._map._resizeDetector.contentWindow, 'mouseup', this._onMouseUpOutside, this); + + this._map._handleDOMEvent(e); + if (this._map.dragging.enabled()) { + this._map.dragging._draggable._onUp(e); + } } }); _______________________________________________ Libreoffice-commits mailing list [email protected] http://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
