[Libreoffice-commits] online.git: Branch 'distro/collabora/collabora-online-4' - loleaflet/src

[Tor Lillqvist (via logerrit)]

 loleaflet/src/control/Ruler.js |   46 ++++++++++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 19 deletions(-)

New commits:
commit 4b48ee682cf65fb3a7024e9a6e2cebe046847194
Author:     Tor Lillqvist <tml at collabora.com>
AuthorDate: Thu Dec 5 17:32:35 2019 +0200
Commit:     Tor Lillqvist <tml at collabora.com>
CommitDate: Thu Dec 5 17:22:40 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 <tml at collabora.com>
    Tested-by: Tor Lillqvist <tml at collabora.com>

diff --git a/loleaflet/src/control/Ruler.js b/loleaflet/src/control/Ruler.js
index ec4a2ef89..9c488f8d0 100644
--- a/loleaflet/src/control/Ruler.js
+++ b/loleaflet/src/control/Ruler.js
@@ -73,6 +73,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;
 	},
@@ -109,7 +110,7 @@ L.Control.Ruler = L.Control.extend({
 		if (this._map._docLayer._annotations._items.length === 0 || !this.options.marginSet)
 			this.options.extraSize = 0;
 
-		var DraggableConvertRatio, lMargin, rMargin, wPixel, scale;
+		var lMargin, rMargin, wPixel, scale;
 
 		lMargin = this.options.nullOffset;
 
@@ -126,9 +127,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);
 
@@ -143,7 +144,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++);
@@ -157,25 +158,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;
 		}
@@ -198,13 +189,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'});
@@ -271,6 +267,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;