[Libreoffice-commits] online.git: 2 commits - loleaflet/build loleaflet/src
Henry Castro (via logerrit)
logerrit at kemper.freedesktop.org
Tue Jun 25 14:23:20 UTC 2019
loleaflet/build/deps.js | 3
loleaflet/src/core/Socket.js | 21 +++
loleaflet/src/dom/Draggable.js | 7 -
loleaflet/src/layer/marker/Marker.Drag.js | 6
loleaflet/src/layer/marker/Marker.js | 7 +
loleaflet/src/layer/tile/TileLayer.js | 4
loleaflet/src/map/Map.js | 22 +++
loleaflet/src/map/handler/Map.CalcTap.js | 193 ++++++++++++++++++++++++++++++
8 files changed, 261 insertions(+), 2 deletions(-)
New commits:
commit 901ecca3134beb6024ebe8be9df38a80e39e989a
Author: Henry Castro <hcastro at collabora.com>
AuthorDate: Fri Jun 7 13:00:56 2019 -0400
Commit: Andras Timar <andras.timar at collabora.com>
CommitDate: Tue Jun 25 16:19:20 2019 +0200
loleaflet: mobile: fix when the maker layer handler is dragging
Hammers library is used to recognize touch events, but when dragging a
marker it requires some tweaks to adapt it
Change-Id: I11d1be5a93a1e3c82f76c37dd7e0b754dbb0537d
Reviewed-on: https://gerrit.libreoffice.org/74701
Reviewed-by: Andras Timar <andras.timar at collabora.com>
Tested-by: Andras Timar <andras.timar at collabora.com>
diff --git a/loleaflet/src/dom/Draggable.js b/loleaflet/src/dom/Draggable.js
index b98f93961..5c6e125fa 100644
--- a/loleaflet/src/dom/Draggable.js
+++ b/loleaflet/src/dom/Draggable.js
@@ -137,7 +137,12 @@ L.Draggable = L.Evented.extend({
L.Util.cancelAnimFrame(this._animRequest);
this._lastEvent = e;
- this._animRequest = L.Util.requestAnimFrame(this._updatePosition, this, true, this._dragStartTarget);
+
+ if (!this._manualDrag) {
+ this._animRequest = L.Util.requestAnimFrame(this._updatePosition, this, true, this._dragStartTarget);
+ } else {
+ this._updatePosition();
+ }
},
_updatePosition: function () {
diff --git a/loleaflet/src/layer/marker/Marker.Drag.js b/loleaflet/src/layer/marker/Marker.Drag.js
index 942aaa7bf..5b879cd2b 100644
--- a/loleaflet/src/layer/marker/Marker.Drag.js
+++ b/loleaflet/src/layer/marker/Marker.Drag.js
@@ -16,6 +16,7 @@ L.Handler.MarkerDrag = L.Handler.extend({
}
this._draggable.on({
+ down: this._onDown,
dragstart: this._onDragStart,
drag: this._onDrag,
dragend: this._onDragEnd,
@@ -27,6 +28,7 @@ L.Handler.MarkerDrag = L.Handler.extend({
removeHooks: function () {
this._draggable.off({
+ down: this._onDown,
dragstart: this._onDragStart,
drag: this._onDrag,
dragend: this._onDragEnd,
@@ -42,6 +44,10 @@ L.Handler.MarkerDrag = L.Handler.extend({
return this._draggable && this._draggable._moved;
},
+ _onDown: function (e) {
+ this._marker.fire('down', e);
+ },
+
_onDragStart: function () {
this._marker
.closePopup()
diff --git a/loleaflet/src/layer/marker/Marker.js b/loleaflet/src/layer/marker/Marker.js
index 6146675ec..f20b892e5 100644
--- a/loleaflet/src/layer/marker/Marker.js
+++ b/loleaflet/src/layer/marker/Marker.js
@@ -23,6 +23,7 @@ L.Marker = L.Layer.extend({
initialize: function (latlng, options) {
L.setOptions(this, options);
this._latlng = L.latLng(latlng);
+ this.on('down', this.onDown);
},
setDraggable: function(val) {
@@ -54,6 +55,12 @@ L.Marker = L.Layer.extend({
this._removeShadow();
},
+ onDown: function () {
+ if (this._map && this._map.touchCalc) {
+ this._map.touchCalc.disable();
+ }
+ },
+
getEvents: function () {
var events = {viewreset: this.update};
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index b936cad94..183c87e4b 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -2106,6 +2106,10 @@ L.TileLayer = L.GridLayer.extend({
if (e.type === 'drag') {
e.target.isDragged = true;
+ if (!e.originalEvent.pageX && !e.originalEvent.pageY) {
+ return;
+ }
+
// This is rather hacky, but it seems to be the only way to make the
// marker follow the mouse cursor if the document is autoscrolled under
// us. (This can happen when we're changing the selection if the cursor
commit ad711e458f8dd76373e0ea7f8acdc563de1637f5
Author: Henry Castro <hcastro at collabora.com>
AuthorDate: Thu May 30 11:19:25 2019 -0400
Commit: Andras Timar <andras.timar at collabora.com>
CommitDate: Tue Jun 25 16:19:00 2019 +0200
loleaflet: use hammer.js library to handle touch events in Calc
Change-Id: I8cfd887e350f539bfa4617101b4d174f6d4ea8b0
Reviewed-on: https://gerrit.libreoffice.org/74700
Reviewed-by: Andras Timar <andras.timar at collabora.com>
Tested-by: Andras Timar <andras.timar at collabora.com>
diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js
index 6db2915ba..82652bfe8 100644
--- a/loleaflet/build/deps.js
+++ b/loleaflet/build/deps.js
@@ -236,7 +236,8 @@ var deps = {
'dom/DomEvent.Pointer.js',
'core/Handler.js',
'map/handler/Map.TouchZoom.js',
- 'map/handler/Map.Tap.js'],
+ 'map/handler/Map.Tap.js',
+ 'map/handler/Map.CalcTap.js'],
deps: ['AnimationZoom'],
desc: 'Enables smooth touch zoom / tap / longhold / doubletap on iOS, IE10, Android.'
},
diff --git a/loleaflet/src/core/Socket.js b/loleaflet/src/core/Socket.js
index 366918123..811506d4a 100644
--- a/loleaflet/src/core/Socket.js
+++ b/loleaflet/src/core/Socket.js
@@ -757,6 +757,27 @@ L.Socket = L.Class.extend({
});
}
else if (command.type === 'spreadsheet') {
+ // replace touch handler for mobile devices
+ if (L.Browser.touch && !L.Browser.pointer) {
+ this._map.options.inertia = false;
+ this._map.removeHandler('tap');
+ this._map.removeHandler('touchZoom');
+ if (this._map.dragging.enabled()) {
+ this._map.dragging.disable();
+ L.Draggable.START = ['mousedown'];
+ L.Draggable.MOVE = {mousedown: 'mousemove'};
+ L.Draggable.END = {mousedown: 'mouseup'};
+ this._map.dragging.enable();
+ }
+ else {
+ L.Draggable.START = ['mousedown'];
+ L.Draggable.MOVE = {mousedown: 'mousemove'};
+ L.Draggable.END = {mousedown: 'mouseup'};
+ }
+ L.DomEvent.off(this._map._container, 'mousedown mouseup mouseover mouseout mousemove click dblclick trplclick qdrplclick dragover drop scroll', this._map._handleDOMEvent, this._map);
+ this._map.addHandler('touchCalc', L.Map.CalcTap);
+ this._map.touchCalc.enable();
+ }
docLayer = new L.CalcTileLayer('', {
permission: this._map.options.permission,
tileWidthTwips: tileWidthTwips,
diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index 44bbffd25..f84c70df1 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -561,6 +561,28 @@ L.Map = L.Evented.extend({
return this;
},
+ removeHandler: function(name) {
+ var handler = this[name];
+
+ if (!handler) {
+ return;
+ }
+
+ handler.disable();
+ for (var it = 0, len = this._handlers.length; it < len; ++it) {
+ if (this._handlers[it] == handler) {
+ this._handlers.splice(it, 1);
+ break;
+ }
+ }
+
+ if (this.options[name]) {
+ delete this.options[name];
+ }
+
+ delete this[name];
+ },
+
remove: function () {
this._initEvents(true);
diff --git a/loleaflet/src/map/handler/Map.CalcTap.js b/loleaflet/src/map/handler/Map.CalcTap.js
new file mode 100644
index 000000000..bb4ea0699
--- /dev/null
+++ b/loleaflet/src/map/handler/Map.CalcTap.js
@@ -0,0 +1,193 @@
+/* -*- js-indent-level: 8; fill-column: 100 -*- */
+/*
+ * L.Map.CalcTap is used to enable mobile taps.
+ */
+
+/* global Hammer */
+L.Map.CalcTap = L.Handler.extend({
+ addHooks: function () {
+ if (!this._toolbar) {
+ this._toolbar = L.control.contextToolbar();
+ }
+
+ if (!this._hammer) {
+ this._hammer = new Hammer(this._map._container);
+ this._hammer.get('swipe').set({
+ direction: Hammer.DIRECTION_ALL
+ });
+ this._hammer.get('pan').set({
+ direction: Hammer.DIRECTION_ALL
+ });
+
+ /*FIXME the sidebar shows after double tap*/
+ /*this._hammer = new Hammer.Manager(this._map._container, {
+ touchAction: 'none'
+ });
+
+ /*this._hammer.add(new Hammer.Tap({
+ event: 'doubletap',
+ taps: 2
+ }));
+ this._hammer.add(new Hammer.Press());
+ this._hammer.add(new Hammer.Tap());
+ this._hammer.add(new Hammer.Pan({
+ direction: Hammer.DIRECTION_ALL,
+ threshold: 10,
+ pointers: 1
+ }));
+ this._hammer.add(new Hammer.Swipe({
+ direction: Hammer.DIRECTION_ALL,
+ threshold: 5,
+ pointers: 1,
+ velocity: 0.3
+ }));*/
+ }
+
+ this._hammer.on('tap', L.bind(this._onTap, this));
+ this._hammer.on('swipe', L.bind(this._onSwipe, this));
+ this._map.on('updatepermission', this._onPermission, this);
+ },
+
+ removeHooks: function () {
+ //this._hammer.off('doubletap', L.bind(this._onDoubleTap, this));
+ this._hammer.off('press', L.bind(this._onPress, this));
+ this._hammer.off('tap', L.bind(this._onTap, this));
+ this._hammer.off('swipe', L.bind(this._onSwipe, this));
+ this._hammer.off('panstart', L.bind(this._onPanStart, this));
+ this._hammer.off('pan', L.bind(this._onPan, this));
+ this._hammer.off('panend', L.bind(this._onPanEnd, this));
+ },
+
+ _onPermission: function (e) {
+ if (e.perm == 'edit') {
+ //this._hammer.on('doubletap', L.bind(this._onDoubleTap, this));
+ this._hammer.on('press', L.bind(this._onPress, this));
+ this._hammer.on('panstart', L.bind(this._onPanStart, this));
+ this._hammer.on('pan', L.bind(this._onPan, this));
+ this._hammer.on('panend', L.bind(this._onPanEnd, this));
+ } else {
+ //this._hammer.off('doubletap', L.bind(this._onDoubleTap, this));
+ this._hammer.off('press', L.bind(this._onPress, this));
+ this._hammer.off('panstart', L.bind(this._onPanStart, this));
+ this._hammer.off('pan', L.bind(this._onPan, this));
+ this._hammer.off('panend', L.bind(this._onPanEnd, this));
+ }
+ },
+
+ _onPress: function (e) {
+ var point = e.pointers[0],
+ containerPoint = this._map.mouseEventToContainerPoint(point),
+ layerPoint = this._map.containerPointToLayerPoint(containerPoint),
+ latlng = this._map.layerPointToLatLng(layerPoint);
+
+ if (this._map._docLayer.containsSelection(latlng)) {
+ this._toolbar._pos = containerPoint;
+ this._toolbar.addTo(this._map);
+ }
+ e.preventDefault();
+ },
+
+ _onTap: function (e) {
+ var point = e.pointers[0],
+ containerPoint = this._map.mouseEventToContainerPoint(point),
+ layerPoint = this._map.containerPointToLayerPoint(containerPoint),
+ latlng = this._map.layerPointToLatLng(layerPoint),
+ mousePos = this._map._docLayer._latLngToTwips(latlng);
+
+ this._map._docLayer._postMouseEvent('buttondown', mousePos.x, mousePos.y, 1, 1, 0);
+ this._map._docLayer._postMouseEvent('buttonup', mousePos.x, mousePos.y, 1, 1, 0);
+ this._map.focus();
+ e.preventDefault();
+ },
+
+ _onDoubleTap: function (e) {
+ var point = e.pointers[0],
+ containerPoint = this._map.mouseEventToContainerPoint(point),
+ layerPoint = this._map.containerPointToLayerPoint(containerPoint),
+ latlng = this._map.layerPointToLatLng(layerPoint),
+ mousePos = this._map._docLayer._latLngToTwips(latlng);
+
+ this._map._docLayer._postMouseEvent('buttondown', mousePos.x, mousePos.y, 2, 1, 0);
+ this._map._docLayer._postMouseEvent('buttonup', mousePos.x, mousePos.y, 2, 1, 0);
+ this._map.focus();
+ e.preventDefault();
+ },
+
+ _onPanStart: function (e) {
+ var point = e.pointers[0],
+ containerPoint = this._map.mouseEventToContainerPoint(point),
+ layerPoint = this._map.containerPointToLayerPoint(containerPoint),
+ latlng = this._map.layerPointToLatLng(layerPoint),
+ mousePos = this._map._docLayer._latLngToTwips(latlng);
+
+ this._map._docLayer._postMouseEvent('buttondown', mousePos.x, mousePos.y, 1, 1, 0);
+ e.preventDefault();
+ },
+
+ _onPan: function (e) {
+ var point = e.pointers[0],
+ containerPoint = this._map.mouseEventToContainerPoint(point),
+ layerPoint = this._map.containerPointToLayerPoint(containerPoint),
+ latlng = this._map.layerPointToLatLng(layerPoint),
+ mousePos = this._map._docLayer._latLngToTwips(latlng);
+
+ this._map._docLayer._postMouseEvent('move', mousePos.x, mousePos.y, 1, 1, 0);
+ e.preventDefault();
+ },
+
+ _onPanEnd: function (e) {
+ var point = e.pointers[0],
+ containerPoint = this._map.mouseEventToContainerPoint(point),
+ layerPoint = this._map.containerPointToLayerPoint(containerPoint),
+ latlng = this._map.layerPointToLatLng(layerPoint),
+ mousePos = this._map._docLayer._latLngToTwips(latlng);
+
+ this._map._docLayer._postMouseEvent('buttonup', mousePos.x, mousePos.y, 1, 1, 0);
+ this._map.focus();
+ e.preventDefault();
+ },
+
+ _onSwipe: function (e) {
+ var evt = e.pointers[0];
+
+ var iniEvent = {
+ type: 'mousedown',
+ canBubble: false,
+ cancelable: true,
+ screenX: evt.screenX,
+ screenY: evt.screenY,
+ clientX: evt.clientX,
+ clientY: evt.clientY,
+ ctrlKey: false,
+ altKey: false,
+ shiftKey: false,
+ metaKey: false,
+ button: 0,
+ target: evt.target,
+ preventDefault: function () {}
+ };
+
+ var endEvent = {
+ type: 'mousemove',
+ canBubble: false,
+ cancelable: true,
+ screenX: evt.screenX,
+ screenY: evt.screenY,
+ clientX: evt.clientX + e.deltaX,
+ clientY: evt.clientY + e.deltaY,
+ ctrlKey: false,
+ altKey: false,
+ shiftKey: false,
+ metaKey: false,
+ button: 0,
+ target: evt.target,
+ preventDefault: function () {}
+ };
+
+ this._map.dragging._draggable._onDown(iniEvent);
+ this._map.dragging._draggable._moved = true;
+ this._map.dragging._draggable._onMove(endEvent);
+ setTimeout(L.bind(this._map.dragging._draggable._onUp, this._map.dragging._draggable, endEvent), 0);
+ e.preventDefault();
+ }
+});
More information about the Libreoffice-commits
mailing list