[Libreoffice-commits] online.git: Branch 'distro/collabora/milestone-7' - loleaflet/src
Marco Cecchetti
marco.cecchetti at collabora.com
Sun Jan 24 10:09:54 PST 2016
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 <marco.cecchetti at collabora.com>
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);
+ }
}
});
More information about the Libreoffice-commits
mailing list