loleaflet/src/control/Ruler.js | 46 ++++++++++++++++++++++++-----------------
1 file changed, 27 insertions(+), 19 deletions(-)
New commits:
commit 59900d874c58886916ab0e71f522b1eed5cd60b8
Author: Tor Lillqvist <t...@collabora.com>
AuthorDate: Thu Dec 5 17:32:35 2019 +0200
Commit: Tor Lillqvist <t...@collabora.com>
CommitDate: Tue Dec 10 09:38:03 2019 +0100
tdf#128468: Tweak the ruler tick and tab stop positions to be just right
Gosh that was painful. But now they seem to be correct.
Some other clarifications and improvements. Also start trying to
handle touch device dragging in the tab stop area, but that handler
doesn't get invoked yet, and anyway any code to actually move the
nearest tab stop is missing.
Change-Id: I187bca84da70f03f5dcf032b997e43b5e54d7879
Reviewed-on: https://gerrit.libreoffice.org/84574
Reviewed-by: Tor Lillqvist <t...@collabora.com>
Tested-by: Tor Lillqvist <t...@collabora.com>
(cherry picked from commit 4b48ee682cf65fb3a7024e9a6e2cebe046847194)
Reviewed-on: https://gerrit.libreoffice.org/84797
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoff...@gmail.com>
diff --git a/loleaflet/src/control/Ruler.js b/loleaflet/src/control/Ruler.js
index d2ca25ef4..bebce5d7e 100644
--- a/loleaflet/src/control/Ruler.js
+++ b/loleaflet/src/control/Ruler.js
@@ -74,6 +74,7 @@ L.Control.Ruler = L.Control.extend({
// Tab stops
this._rTSWrapper = L.DomUtil.create('div',
'loleaflet-ruler-tabstopwrapper', this._rFace);
this._rTSContainer = L.DomUtil.create('div',
'loleaflet-ruler-tabstopcontainer', this._rTSWrapper);
+ L.DomEvent.on(this._rTSContainer, 'touchstart',
this._initiateTabstopDrag, this);
return this._rWrapper;
},
@@ -113,7 +114,7 @@ L.Control.Ruler = L.Control.extend({
|| !this.options.marginSet)
this.options.extraSize = 0;
- var DraggableConvertRatio, lMargin, rMargin, wPixel, scale;
+ var lMargin, rMargin, wPixel, scale;
lMargin = this.options.nullOffset;
@@ -130,9 +131,9 @@ L.Control.Ruler = L.Control.extend({
this._fixOffset();
- DraggableConvertRatio = this.options.DraggableConvertRatio =
wPixel / this.options.pageWidth;
+ this.options.DraggableConvertRatio = wPixel /
this.options.pageWidth;
this._rFace.style.width = wPixel + 'px';
- this._rBPContainer.style.marginLeft = (-1 *
(DraggableConvertRatio * (500 - (lMargin % 1000))) + 1) + 'px';
+ this._rBPContainer.style.marginLeft = (-1 *
(this.options.DraggableConvertRatio * (500 - (lMargin % 1000))) + 1) + 'px';
var numCounter = -1 * parseInt(lMargin / 1000);
@@ -147,7 +148,7 @@ L.Control.Ruler = L.Control.extend({
for (var num = 0; num <= (this.options.pageWidth / 1000) + 1;
num++) {
var marker = L.DomUtil.create('div',
'loleaflet-ruler-maj', this._rBPContainer);
- marker.style.width = DraggableConvertRatio*1000 - 2 +
'px';
+ marker.style.width =
this.options.DraggableConvertRatio*1000 - 1 + 'px';
if (this.options.displayNumber) {
if (numCounter !== 0)
marker.innerText =
Math.abs(numCounter++);
@@ -161,25 +162,15 @@ L.Control.Ruler = L.Control.extend({
$('.loleaflet-ruler-tabstop').remove();
- // First an empty space
- marker = L.DomUtil.create('div', 'loleaflet-ruler-tabstop',
this._rTSContainer);
- marker.style.marginLeft = (DraggableConvertRatio * lMargin) +
'px';
-
- // Make its triangle invisible and truly zero width
- marker.style.borderLeft = '0px';
- marker.style.borderRight = '0px';
- marker.style.borderBottom = '0px';
-
- // Then the visible tab stops
var pxPerMm100 = this._map._docLayer._docPixelSize.x /
(this._map._docLayer._docWidthTwips * 2540/1440);
var tabStopWidthAccum = 0;
// Reduce their widths by the border
- var tabstopBorder = getComputedStyle(marker,
null).getPropertyValue('--loleaflet-ruler-tabstop-border');
for (num = 0; num < this.options.tabs.length; num++) {
if (this.options.tabs[num].style >= 4)
break;
marker = L.DomUtil.create('div',
'loleaflet-ruler-tabstop', this._rTSContainer);
var thisWidth = this.options.tabs[num].position -
tabStopWidthAccum;
+ var tabstopBorder = getComputedStyle(marker,
null).getPropertyValue('--loleaflet-ruler-tabstop-border');
marker.style.marginLeft = (pxPerMm100 * thisWidth -
tabstopBorder) + 'px';
tabStopWidthAccum += thisWidth;
}
@@ -202,13 +193,18 @@ L.Control.Ruler = L.Control.extend({
this.options.interactive = true;
L.DomEvent.on(this._rMarginDrag, 'touchstart',
this._initiateDrag, this);
L.DomEvent.on(this._lMarginDrag, 'touchstart',
this._initiateDrag, this);
+
}
}
- this._lMarginMarker.style.width =
(DraggableConvertRatio*lMargin) + 'px';
- this._rMarginMarker.style.width =
(DraggableConvertRatio*rMargin) + 'px';
- this._lMarginDrag.style.width = (DraggableConvertRatio*lMargin)
+ 'px';
- this._rMarginDrag.style.width = (DraggableConvertRatio*rMargin)
+ 'px';
+ this._lMarginMarker.style.width =
(this.options.DraggableConvertRatio*lMargin) + 'px';
+ this._rMarginMarker.style.width =
(this.options.DraggableConvertRatio*rMargin) + 'px';
+ this._lMarginDrag.style.width =
(this.options.DraggableConvertRatio*lMargin) + 'px';
+ this._rMarginDrag.style.width =
(this.options.DraggableConvertRatio*rMargin) + 'px';
+
+ // Put the _rTSContainer in the right place
+ this._rTSContainer.style.marginLeft =
(this.options.DraggableConvertRatio * lMargin) + 'px';
+ this._rTSContainer.style.width = 'calc(' +
this._rFace.style.width + ' - ' + this._rMarginMarker.style.width + ')';
if (this.options.interactive) {
this._changeInteractions({perm:'edit'});
@@ -275,6 +271,18 @@ L.Control.Ruler = L.Control.extend({
}
},
+ _initiateTabstopDrag: function(e) {
+ if (e.type === 'touchstart') {
+ if (e.touches.length !== 1)
+ return;
+ }
+
+ var tabstops = $('.loleaflet-ruler-tabstop');
+ for (var tabstop in tabstops) {
+ console.log('tabstop: ' + tabstop);
+ }
+ },
+
_moveMargin: function(e) {
if (e.type === 'touchmove')
e.clientX = e.touches[0].clientX;
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
