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 <hcas...@collabora.com> AuthorDate: Fri Jun 7 13:00:56 2019 -0400 Commit: Andras Timar <andras.ti...@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.ti...@collabora.com> Tested-by: Andras Timar <andras.ti...@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 <hcas...@collabora.com> AuthorDate: Thu May 30 11:19:25 2019 -0400 Commit: Andras Timar <andras.ti...@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.ti...@collabora.com> Tested-by: Andras Timar <andras.ti...@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(); + } +}); _______________________________________________ Libreoffice-commits mailing list libreoffice-comm...@lists.freedesktop.org https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits