[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