tdf#128468: Make dragging the margins in the ruler work better in iOS app
Note that in this branch it seems even harder to touch a margin handle in the ruler exactly in the right spot to be able to drag it. You will have to use your smallest finger and point very exactly. And still it works only sometimes. (But I did get it to work once, honestly, so ship it!) This obviously needs to be fixed, but cherry-picking this commit as is for now. Several changes: On iOS, use touch events instead of mouse ones. One difference between touch and mouse events is that the touchend event naturally does not carry any position information (as the finger has been lifted from the screen). So we need to keep track of where the last touchmove event happened separately in _lastPosition. Letting go of a margin handle after dragging it did not actually move the coresponding margin in the document. The fix for this was to catch the touchend event for the this._rFace element instead of for the this._map element. Once a margin had been moved, it could not be moved another time. The reason for this was that because the document initially is readonly, the this.options.interactive was set to false (see the L.control.ruler() call in loleaflet/src/map/Map.js) and never changed after that. This caused _updateBreakPoints() to pass {perm:'readonly'} in the call to this._changeInteractions(). The fix was to set this.options.interactive to true when turning on the interaction. In theory this same problem probably would happen also in web-based Online on "mobile" (i.e. phones), but we don't show the ruler there at all, so the sitaution where a document would be initially read-only and the ruler would show up doesn't happen. Reviewed-on: https://gerrit.libreoffice.org/83807 Reviewed-by: Tor Lillqvist <tml@collabora.com> Tested-by: Tor Lillqvist <tml@collabora.com> (cherry picked from commit caf37fb293a666b0a82ac8bd31df35b18b45fc01) Change-Id: I0393704d02a2989b4ea3358dc4bee17e48c16ae6 Reviewed-on: https://gerrit.libreoffice.org/84047 Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com> Reviewed-by: Tor Lillqvist <tml@collabora.com> Tested-by: Tor Lillqvist <tml@collabora.com>
This commit is contained in:
parent
50211a1e14
commit
7585789456
1 changed files with 49 additions and 10 deletions
|
@ -45,15 +45,28 @@ L.Control.Ruler = L.Control.extend({
|
|||
this._lMarginDrag.style.cursor = 'e-resize';
|
||||
this._rMarginDrag.style.cursor = 'w-resize';
|
||||
|
||||
L.DomEvent.on(this._rMarginDrag, 'mousedown', this._initiateDrag, this);
|
||||
L.DomEvent.on(this._lMarginDrag, 'mousedown', this._initiateDrag, this);
|
||||
if (window.ThisIsTheiOSApp) {
|
||||
this.options.interactive = true;
|
||||
L.DomEvent.on(this._rMarginDrag, 'touchstart', this._initiateDrag, this);
|
||||
L.DomEvent.on(this._lMarginDrag, 'touchstart', this._initiateDrag, this);
|
||||
}
|
||||
else {
|
||||
L.DomEvent.on(this._rMarginDrag, 'mousedown', this._initiateDrag, this);
|
||||
L.DomEvent.on(this._lMarginDrag, 'mousedown', this._initiateDrag, this);
|
||||
}
|
||||
}
|
||||
else {
|
||||
this._lMarginDrag.style.cursor = 'default';
|
||||
this._rMarginDrag.style.cursor = 'default';
|
||||
|
||||
L.DomEvent.off(this._rMarginDrag, 'mousedown', this._initiateDrag, this);
|
||||
L.DomEvent.off(this._lMarginDrag, 'mousedown', this._initiateDrag, this);
|
||||
if (window.ThisIsTheiOSApp) {
|
||||
L.DomEvent.off(this._rMarginDrag, 'touchstart', this._initiateDrag, this);
|
||||
L.DomEvent.off(this._lMarginDrag, 'touchstart', this._initiateDrag, this);
|
||||
}
|
||||
else {
|
||||
L.DomEvent.off(this._rMarginDrag, 'mousedown', this._initiateDrag, this);
|
||||
L.DomEvent.off(this._lMarginDrag, 'mousedown', this._initiateDrag, this);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -180,12 +193,25 @@ L.Control.Ruler = L.Control.extend({
|
|||
},
|
||||
|
||||
_initiateDrag: function(e) {
|
||||
if (e.type === 'touchstart') {
|
||||
if (e.touches.length !== 1)
|
||||
return;
|
||||
e.clientX = e.touches[0].clientX;
|
||||
}
|
||||
|
||||
this._map.rulerActive = true;
|
||||
|
||||
var dragableElem = e.srcElement || e.target;
|
||||
L.DomEvent.on(this._rFace, 'mousemove', this._moveMargin, this);
|
||||
L.DomEvent.on(this._map, 'mouseup', this._endDrag, this);
|
||||
if (window.ThisIsTheiOSApp) {
|
||||
L.DomEvent.on(this._rFace, 'touchmove', this._moveMargin, this);
|
||||
L.DomEvent.on(this._rFace, 'touchend', this._endDrag, this);
|
||||
}
|
||||
else {
|
||||
L.DomEvent.on(this._rFace, 'mousemove', this._moveMargin, this);
|
||||
L.DomEvent.on(this._map, 'mouseup', this._endDrag, this);
|
||||
}
|
||||
this._initialposition = e.clientX;
|
||||
this._lastposition = this._initialposition;
|
||||
|
||||
if (L.DomUtil.hasClass(dragableElem, 'loleaflet-ruler-right')) {
|
||||
L.DomUtil.addClass(this._rMarginDrag, 'leaflet-drag-moving');
|
||||
|
@ -198,6 +224,10 @@ L.Control.Ruler = L.Control.extend({
|
|||
},
|
||||
|
||||
_moveMargin: function(e) {
|
||||
if (e.type === 'touchmove')
|
||||
e.clientX = e.touches[0].clientX;
|
||||
|
||||
this._lastposition = e.clientX;
|
||||
var posChange = e.clientX - this._initialposition;
|
||||
var unit = this.options.unit ? this.options.unit : ' cm';
|
||||
if (L.DomUtil.hasClass(this._rMarginDrag, 'leaflet-drag-moving')) {
|
||||
|
@ -221,12 +251,21 @@ L.Control.Ruler = L.Control.extend({
|
|||
_endDrag: function(e) {
|
||||
this._map.rulerActive = false;
|
||||
|
||||
var posChange = e.originalEvent.clientX - this._initialposition;
|
||||
var posChange;
|
||||
if (e.type === 'touchend')
|
||||
posChange = this._lastposition - this._initialposition;
|
||||
else
|
||||
posChange = e.originalEvent.clientX - this._initialposition;
|
||||
var unoObj = {}, marginType, fact;
|
||||
|
||||
L.DomEvent.off(this._rFace, 'mousemove', this._moveMargin, this);
|
||||
L.DomEvent.off(this._map, 'mouseup', this._endDrag, this);
|
||||
|
||||
if (window.ThisIsTheiOSApp) {
|
||||
L.DomEvent.off(this._rFace, 'touchmove', this._moveMargin, this);
|
||||
L.DomEvent.off(this._rFace, 'touchend', this._endDrag, this);
|
||||
}
|
||||
else {
|
||||
L.DomEvent.off(this._rFace, 'mousemove', this._moveMargin, this);
|
||||
L.DomEvent.off(this._map, 'mouseup', this._endDrag, this);
|
||||
}
|
||||
if (L.DomUtil.hasClass(this._rMarginDrag, 'leaflet-drag-moving')) {
|
||||
marginType = 'Margin2';
|
||||
fact = -1;
|
||||
|
|
Loading…
Reference in a new issue