[Libreoffice-commits] online.git: 4 commits - loleaflet/src

Henry Castro (via logerrit) logerrit at kemper.freedesktop.org
Tue Aug 20 14:10:40 UTC 2019


 loleaflet/src/layer/vector/Path.Transform.js  |   40 +++++++++++----
 loleaflet/src/layer/vector/SVGGroup.js        |   69 ++++++++++----------------
 loleaflet/src/map/handler/Map.TouchGesture.js |   24 +++++++--
 3 files changed, 77 insertions(+), 56 deletions(-)

New commits:
commit fe6a955d7dd1fd369b4d4b887ffeea4b8aaff235
Author:     Henry Castro <hcastro at collabora.com>
AuthorDate: Fri Jun 28 11:50:37 2019 -0400
Commit:     Henry Castro <hcastro at collabora.com>
CommitDate: Tue Aug 20 10:09:21 2019 -0400

    loleaflet: mobile: enable the option to scale and rotate graphics
    
    Change-Id: I66e082ae7bf7551de90002164a87d2a267ea1523

diff --git a/loleaflet/src/map/handler/Map.TouchGesture.js b/loleaflet/src/map/handler/Map.TouchGesture.js
index ff5d61d61..db4f433aa 100644
--- a/loleaflet/src/map/handler/Map.TouchGesture.js
+++ b/loleaflet/src/map/handler/Map.TouchGesture.js
@@ -12,7 +12,8 @@ L.Map.TouchGesture = L.Handler.extend({
 	statics: {
 		MAP: 1,
 		CURSOR: 2,
-		GRAPHIC: 4
+		GRAPHIC: 4,
+		MARKER: 8
 	},
 
 	initialize: function (map) {
@@ -125,7 +126,13 @@ L.Map.TouchGesture = L.Handler.extend({
 			    layerPoint = this._map.containerPointToLayerPoint(containerPoint),
 			    latlng = this._map.layerPointToLatLng(layerPoint);
 
-			if (this._map._docLayer._graphicMarker && this._map._docLayer._graphicMarker.getBounds().contains(latlng)) {
+			if (this._map._docLayer._graphicMarker) {
+				this._marker = this._map._docLayer._graphicMarker.transform.getMarker(layerPoint);
+			}
+
+			if (this._marker) {
+				this._state = L.Map.TouchGesture.MARKER;
+			} else if (this._map._docLayer._graphicMarker && this._map._docLayer._graphicMarker.getBounds().contains(latlng)) {
 				this._state = L.Map.TouchGesture.GRAPHIC;
 			} else if (this._map._docLayer._cellCursor && this._map._docLayer._cellCursor.contains(latlng)) {
 				this._state = L.Map.TouchGesture.CURSOR;
@@ -136,6 +143,7 @@ L.Map.TouchGesture = L.Handler.extend({
 
 		if (e.isLast && this._state !== L.Map.TouchGesture.MAP) {
 			this._state = L.Map.TouchGesture.hitTest.MAP;
+			this._marker = undefined;
 		}
 
 		if ($(e.srcEvent.target).has(this._map._mapPane)) {
@@ -258,7 +266,9 @@ L.Map.TouchGesture = L.Handler.extend({
 			}
 		}
 
-		if (this._state === L.Map.TouchGesture.GRAPHIC) {
+		if (this._state === L.Map.TouchGesture.MARKER) {
+			this._map._fireDOMEvent(this._marker, e.srcEvent, 'mousedown');
+		} else if (this._state === L.Map.TouchGesture.GRAPHIC) {
 			this._map._docLayer._graphicMarker._onDragStart(e.srcEvent);
 		} else if (this._state === L.Map.TouchGesture.CURSOR) {
 			this._map._docLayer._postMouseEvent('buttondown', mousePos.x, mousePos.y, 1, 1, 0);
@@ -274,7 +284,9 @@ L.Map.TouchGesture = L.Handler.extend({
 		    latlng = this._map.layerPointToLatLng(layerPoint),
 		    mousePos = this._map._docLayer._latLngToTwips(latlng);
 
-		if (this._state === L.Map.TouchGesture.GRAPHIC) {
+		if (this._state === L.Map.TouchGesture.MARKER) {
+			this._map._fireDOMEvent(this._map, e.srcEvent, 'mousemove');
+		} else if (this._state === L.Map.TouchGesture.GRAPHIC) {
 			this._map._docLayer._graphicMarker._onDrag(e.srcEvent);
 		} else if (this._state === L.Map.TouchGesture.CURSOR) {
 			this._map._docLayer._postMouseEvent('move', mousePos.x, mousePos.y, 1, 1, 0);
@@ -290,7 +302,9 @@ L.Map.TouchGesture = L.Handler.extend({
 		    latlng = this._map.layerPointToLatLng(layerPoint),
 		    mousePos = this._map._docLayer._latLngToTwips(latlng);
 
-		if (this._state === L.Map.TouchGesture.GRAPHIC) {
+		if (this._state === L.Map.TouchGesture.MARKER) {
+			this._map._fireDOMEvent(this._map, e.srcEvent, 'mouseup');
+		} else if (this._state === L.Map.TouchGesture.GRAPHIC) {
 			this._map._docLayer._graphicMarker._onDragEnd(e.srcEvent);
 		} else if (this._state === L.Map.TouchGesture.CURSOR) {
 			this._map._docLayer._postMouseEvent('buttonup', mousePos.x, mousePos.y, 1, 1, 0);
commit bd9da52e63ba13608341c2dd30ce670835a87843
Author:     Henry Castro <hcastro at collabora.com>
AuthorDate: Fri Jun 28 11:49:50 2019 -0400
Commit:     Henry Castro <hcastro at collabora.com>
CommitDate: Tue Aug 20 10:09:21 2019 -0400

    loleaflet: mobile: prepare manual dragging for scale and rotate of graphics
    
    Change-Id: Ib0eae5a9e96a5305fcddbb6f508fc23a5db846a5

diff --git a/loleaflet/src/layer/vector/Path.Transform.js b/loleaflet/src/layer/vector/Path.Transform.js
index 0d1d8b9e6..7ec3be6b6 100644
--- a/loleaflet/src/layer/vector/Path.Transform.js
+++ b/loleaflet/src/layer/vector/Path.Transform.js
@@ -56,7 +56,7 @@ L.Handler.PathTransform = L.Handler.extend({
 
 		// edge handlers
 		handlerOptions: {
-			radius:      5,
+			radius:      L.Browser.touch && !L.Browser.pointer ? 10 : 5,
 			fillColor:   '#ffffff',
 			color:       '#202020',
 			fillOpacity: 1,
@@ -81,7 +81,7 @@ L.Handler.PathTransform = L.Handler.extend({
 			setCursor: true
 		},
 		// rotation handle length
-		handleLength: 20,
+		handleLength: L.Browser.touch && !L.Browser.pointer ? 40 : 20,
 
 		// maybe I'll add skewing in the future
 		edgesCount:   4,
@@ -238,6 +238,18 @@ L.Handler.PathTransform = L.Handler.extend({
 		return this;
 	},
 
+	/**
+	* @param  {L.Point}   point
+	*/
+	getMarker: function(point) {
+		for (var i = 0, len = this._handlers.length; i < len; i++) {
+			var handler = this._handlers[i];
+			if (handler._containsPoint(point)) {
+				return handler;
+			}
+		}
+		return undefined;
+	},
 
 	/**
 	* Update the polygon and handlers preview, no reprojection
@@ -609,6 +621,9 @@ L.Handler.PathTransform = L.Handler.extend({
 	* @param  {Event} evt
 	*/
 	_onRotate: function(evt) {
+		if (!this._rect || !this._rotationStart) {
+			return;
+		}
 		var pos = evt.layerPoint;
 		var previous = this._rotationStart;
 		var origin   = this._rotationOriginPt;
@@ -633,6 +648,9 @@ L.Handler.PathTransform = L.Handler.extend({
 	* @param  {Event} evt
 	*/
 	_onRotateEnd: function(evt) {
+		if (!this._rect || !this._rotationStart) {
+			return;
+		}
 		var pos = evt.layerPoint;
 		var previous = this._rotationStart;
 		var origin = this._rotationOriginPt;
@@ -650,6 +668,8 @@ L.Handler.PathTransform = L.Handler.extend({
 
 		this._apply();
 		this._path.fire('rotateend', { layer: this._path, rotation: angle });
+
+		this._rotationStart = undefined;
 	},
 
 
@@ -704,6 +724,10 @@ L.Handler.PathTransform = L.Handler.extend({
 	* @param  {Event} evt
 	*/
 	_onScale: function(evt) {
+		if (!this._rect || !this._scaleOrigin) {
+			return;
+		}
+
 		var originPoint = this._originMarker._point;
 		var ratioX, ratioY;
 
@@ -738,6 +762,9 @@ L.Handler.PathTransform = L.Handler.extend({
 	* @param  {Event} evt
 	*/
 	_onScaleEnd: function(/*evt*/) {
+		if (!this._rect || !this._scaleOrigin) {
+			return;
+		}
 		this._activeMarker.removeEventParent(this._map);
 		this._map
 			.off('mousemove', this._onScale,    this)
@@ -766,6 +793,8 @@ L.Handler.PathTransform = L.Handler.extend({
 			scale: this._scale.clone(),
 			pos: this._getPoints()[index]
 		});
+
+		this._scaleOrigin = undefined;
 	},
 
 
@@ -872,13 +901,6 @@ L.Handler.PathTransform = L.Handler.extend({
 	}
 });
 
-
-L.Path.addInitHook(function() {
-	if (this.options.transform) {
-		this.transform = new L.Handler.PathTransform(this, this.options.transform);
-	}
-});
-
 L.SVGGroup.addInitHook(function() {
 	if (this.options.transform) {
 		this.transform = new L.Handler.PathTransform(this, this.options.transform);
commit 724ab601ede544fdc910ad209cfe50ef1d6d043a
Author:     Henry Castro <hcastro at collabora.com>
AuthorDate: Thu Jun 27 16:51:00 2019 -0400
Commit:     Henry Castro <hcastro at collabora.com>
CommitDate: Tue Aug 20 10:09:21 2019 -0400

    loleaflet: fix wrong argument to dragging function
    
    _onDrag: function(evt) {
      ...
      var first = (evt.touches && evt.touches.length >= 1 ? evt.touches[0] : evt);
      var containerPoint = this._path._map.mouseEventToContainerPoint(first);
    
    the result containerPoint.x is NaN and containerPoint.y is NaN
    
    Change-Id: I0916df74b3f9179e7dcb937a1427d30a0ebbe61b

diff --git a/loleaflet/src/layer/vector/SVGGroup.js b/loleaflet/src/layer/vector/SVGGroup.js
index 14ac1b105..c0297e080 100644
--- a/loleaflet/src/layer/vector/SVGGroup.js
+++ b/loleaflet/src/layer/vector/SVGGroup.js
@@ -89,11 +89,7 @@ L.SVGGroup = L.Layer.extend({
 			this._showEmbeddedSVG();
 		}
 
-		var data = {
-			originalEvent: evt,
-			containerPoint: this._map.mouseEventToContainerPoint(evt)
-		};
-		this.dragging._onDrag(data);
+		this.dragging._onDrag(evt);
 	},
 
 	_onDragEnd: function(evt) {
commit 70c70ae040286add398ecbe4bb9bb23db3f0ace9
Author:     Henry Castro <hcastro at collabora.com>
AuthorDate: Thu Jun 27 16:49:59 2019 -0400
Commit:     Henry Castro <hcastro at collabora.com>
CommitDate: Tue Aug 20 10:09:21 2019 -0400

    loleaflet: mobile: enable manual dragging in the SVG group element
    
    it is not necessary to add mouse event listeners
    Change-Id: I7f51569794be2af4c739156c9c516250a04d43db

diff --git a/loleaflet/src/layer/vector/SVGGroup.js b/loleaflet/src/layer/vector/SVGGroup.js
index 7f0f8678a..14ac1b105 100644
--- a/loleaflet/src/layer/vector/SVGGroup.js
+++ b/loleaflet/src/layer/vector/SVGGroup.js
@@ -6,18 +6,17 @@
 L.SVGGroup = L.Layer.extend({
 
 	options: {
-		noClip: true
-	},
-
-	lastTouchEvent: {
-		clientX: 0,
-		clientY: 0
+		noClip: true,
+		manualDrag: false
 	},
 
 	initialize: function (bounds, options) {
 		L.setOptions(this, options);
 		this._bounds = bounds;
 		this._rect = L.rectangle(bounds, this.options);
+		if (L.Browser.touch && !L.Browser.pointer) {
+			this.options.manualDrag = true;
+		}
 
 		this.on('dragstart scalestart rotatestart', this._showEmbeddedSVG, this);
 		this.on('dragend scaleend rotateend', this._hideEmbeddedSVG, this);
@@ -40,8 +39,10 @@ L.SVGGroup = L.Layer.extend({
 			L.DomUtil.remove(this._rect._path);
 			this._svg = this._path.appendChild(doc.lastChild);
 			this._svg.setAttribute('pointer-events', 'visiblePainted');
-			L.DomEvent.on(this._svg, 'mousedown', this._onDragStart, this);
 			this._dragShape = this._svg;
+			if (!this.options.manualDrag) {
+				L.DomEvent.on(this._svg, 'mousedown', this._onDragStart, this);
+			}
 		}
 
 		this._svg.setAttribute('opacity', 0);
@@ -52,12 +53,7 @@ L.SVGGroup = L.Layer.extend({
 	},
 
 	_onDragStart: function(evt) {
-		if (evt.type === 'touchstart') {
-			this.lastTouchEvent.clientX = evt.touches[0].clientX;
-			this.lastTouchEvent.clientY = evt.touches[0].clientY;
-		}
-
-		if (!this._dragShape || !this.dragging)
+		if (!this._map || !this._dragShape || !this.dragging)
 			return;
 
 		if (!this._map)
@@ -65,12 +61,11 @@ L.SVGGroup = L.Layer.extend({
 
 		this._moved = false;
 
-		L.DomEvent.on(this._dragShape, 'mousemove', this._onDrag, this);
-		L.DomEvent.on(this._dragShape, 'mouseup', this._onDragEnd, this);
-		L.DomEvent.on(this._dragShape, 'mouseout', this._onDragEnd, this);
-
-		L.DomEvent.on(this._dragShape, 'touchmove', this._onDrag, this);
-		L.DomEvent.on(this._dragShape, 'touchend', this._onDragEnd, this);
+		if (!this.options.manualDrag) {
+			L.DomEvent.on(this._dragShape, 'mousemove', this._onDrag, this);
+			L.DomEvent.on(this._dragShape, 'mouseup', this._onDragEnd, this);
+			L.DomEvent.on(this._dragShape, 'mouseout', this._onDragEnd, this);
+		}
 
 		var data = {
 			originalEvent: evt,
@@ -83,12 +78,7 @@ L.SVGGroup = L.Layer.extend({
 	},
 
 	_onDrag: function(evt) {
-		if (evt.type === 'touchmove') {
-			this.lastTouchEvent.clientX = evt.touches[0].clientX;
-			this.lastTouchEvent.clientY = evt.touches[0].clientY;
-		}
-
-		if (!this._dragShape || !this.dragging)
+		if (!this._map || !this._dragShape || !this.dragging)
 			return;
 
 		if (!this._map)
@@ -107,17 +97,14 @@ L.SVGGroup = L.Layer.extend({
 	},
 
 	_onDragEnd: function(evt) {
-		if (evt.type === 'touchend' && evt.touches.length == 0)
-			evt.touches[0] = {clientX: this.lastTouchEvent.clientX, clientY: this.lastTouchEvent.clientY};
-
-		if (!this._dragShape || !this.dragging)
+		if (!this._map || !this._dragShape || !this.dragging)
 			return;
-		L.DomEvent.off(this._dragShape, 'mousemove', this._onDrag, this);
-		L.DomEvent.off(this._dragShape, 'mouseup', this._onDragEnd, this);
-		L.DomEvent.off(this._dragShape, 'mouseout', this._onDragEnd, this);
 
-		L.DomEvent.off(this._dragShape, 'touchmove', this._onDrag, this);
-		L.DomEvent.off(this._dragShape, 'touchend', this._onDragEnd, this);
+		if (!this.options.manualDrag) {
+			L.DomEvent.off(this._dragShape, 'mousemove', this._onDrag, this);
+			L.DomEvent.off(this._dragShape, 'mouseup', this._onDragEnd, this);
+			L.DomEvent.off(this._dragShape, 'mouseout', this._onDragEnd, this);
+		}
 
 		this._moved = false;
 		this._hideEmbeddedSVG();
@@ -127,7 +114,7 @@ L.SVGGroup = L.Layer.extend({
 			this.fire('graphicmoveend', {pos: pos});
 		}
 
-		if (evt.type === 'mouseup')
+		if (this.options.manualDrag || evt.type === 'mouseup')
 			this.dragging._onDragEnd(evt);
 	},
 
@@ -164,8 +151,10 @@ L.SVGGroup = L.Layer.extend({
 			L.DomUtil.addClass(this._path, 'leaflet-control-buttons-disabled');
 			this._path.appendChild(this._rect._path);
 			this._dragShape = this._rect._path;
-			L.DomEvent.on(this._rect._path, 'mousedown', this._onDragStart, this);
-			L.DomEvent.on(this._rect._path, 'touchstart', this._onDragStart, this);
+
+			if (!this.options.manualDrag) {
+				L.DomEvent.on(this._rect._path, 'mousedown', this._onDragStart, this);
+			}
 		}
 		this._update();
 	},


More information about the Libreoffice-commits mailing list