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

Tor Lillqvist (via logerrit) logerrit at kemper.freedesktop.org
Thu Dec 5 06:53:52 UTC 2019


 loleaflet/css/leaflet.css      |   32 ++++++++++++++++++++
 loleaflet/src/control/Ruler.js |   65 +++++++++++++++++++++++++++++++++++++++--
 2 files changed, 95 insertions(+), 2 deletions(-)

New commits:
commit 5e6976f6eb23d742db7e8f9b334b521a299f2418
Author:     Tor Lillqvist <tml at collabora.com>
AuthorDate: Thu Dec 5 02:18:32 2019 +0200
Commit:     Tor Lillqvist <tml at collabora.com>
CommitDate: Thu Dec 5 07:53:33 2019 +0100

    tdf#128468: Draw the tab stops
    
    Draw only the user-edited/able ones. Draw all four kinds (left, right,
    center, and decimal) the same for now, as a small triangle pointing
    up. (Drawn using a CSS trick to get a triangle.) The tab stop
    positions aren't actually editable yet, nor is there a way to add a
    new tab stop or delete one. Later.
    
    The code uses a CSS custom property, yay, to avoid duplication of a
    magic value for the half-width of the triangle.
    
    Change-Id: I862b09091bad03ad63425cc6e6759f3f13174579
    Reviewed-on: https://gerrit.libreoffice.org/84474
    Reviewed-by: Tor Lillqvist <tml at collabora.com>
    Tested-by: Tor Lillqvist <tml at collabora.com>

diff --git a/loleaflet/css/leaflet.css b/loleaflet/css/leaflet.css
index 8c11b9af8..776f83afd 100644
--- a/loleaflet/css/leaflet.css
+++ b/loleaflet/css/leaflet.css
@@ -804,6 +804,11 @@ input.clipboard {
 	position: absolute;
 	}
 
+.loleaflet-ruler-tabstopcontainer {
+	height: 100%;
+	position: absolute;
+	}
+
 .loleaflet-ruler-marginwrapper {
 	height: 100%;
 	position: absolute;
@@ -819,6 +824,14 @@ input.clipboard {
 	z-index: 10;
 	}
 
+.loleaflet-ruler-tabstopwrapper {
+	position: absolute;
+	height: 100%;
+	overflow: hidden;
+	width: inherit;
+	z-index: 10;
+	}
+
 .loleaflet-ruler-face {
 	height: 100%;
 	background-color: white;
@@ -836,6 +849,25 @@ input.clipboard {
 	line-height: 7px;
 	}
 
+/* A triangle pointing up */
+.loleaflet-ruler-tabstop {
+	width: 0;
+	height: 0;
+	vertical-align: bottom;
+	display: inline-block;
+	/* So that we hardcode this in just one place */
+	--loleaflet-ruler-tabstop-border: 8;
+	border-top: calc(var(--loleaflet-ruler-tabstop-border) * 1px) solid transparent;
+	border-left: calc(var(--loleaflet-ruler-tabstop-border) * 1px) solid transparent;
+	/* Offset the left border with left margin to make this really take zero horizontal space until the JS code bumps the marginLeft */
+	margin-left: calc(-1 * var(--loleaflet-ruler-tabstop-border) * 1px);
+	border-right: calc(var(--loleaflet-ruler-tabstop-border) * 1px) solid transparent;
+	/* Ditto for the right border, this is left as is */
+	margin-right: calc(-1 * var(--loleaflet-ruler-tabstop-border) * 1px);
+	border-bottom: calc(var(--loleaflet-ruler-tabstop-border) * 1px) solid black;
+	margin-bottom: calc(-1 * var(--loleaflet-ruler-tabstop-border) * 1px / 2);
+}
+
 .loleaflet-ruler-margin {
 	height: 100%;
 	background-color: #efefef;
diff --git a/loleaflet/src/control/Ruler.js b/loleaflet/src/control/Ruler.js
index 4c243e2d4..ec4a2ef89 100644
--- a/loleaflet/src/control/Ruler.js
+++ b/loleaflet/src/control/Ruler.js
@@ -1,4 +1,4 @@
-/* -*- js-indent-level: 8 -*- */
+/* -*- js-indent-level: 8; fill-column: 100 -*- */
 /*
  * Ruler Handler
  */
@@ -9,13 +9,14 @@ L.Control.Ruler = L.Control.extend({
 		interactive: true,
 		marginSet: false,
 		displayNumber: true,
-		tileMargin: 18,
+		tileMargin: 18, // No idea what this means and where it comes from
 		extraSize: 0,
 		margin1: null,
 		margin2: null,
 		nullOffset: null,
 		pageOffset: null,
 		pageWidth: null,
+		tabs: [],
 		unit: null,
 		DraggableConvertRatio: null,
 		timer: null
@@ -69,14 +70,31 @@ L.Control.Ruler = L.Control.extend({
 		this._rBPWrapper = L.DomUtil.create('div', 'loleaflet-ruler-breakwrapper', this._rFace);
 		this._rBPContainer = L.DomUtil.create('div', 'loleaflet-ruler-breakcontainer', this._rBPWrapper);
 
+		// Tab stops
+		this._rTSWrapper = L.DomUtil.create('div', 'loleaflet-ruler-tabstopwrapper', this._rFace);
+		this._rTSContainer = L.DomUtil.create('div', 'loleaflet-ruler-tabstopcontainer', this._rTSWrapper);
+
 		return this._rWrapper;
 	},
 
 	_updateOptions: function(obj) {
+		// Note that the values for margin1, margin2, and leftOffset are not in any sane
+		// units. See the comment in SwCommentRuler::CreateJsonNotification(). The values
+		// are pixels for some virtual device in core, not related to the actual device this
+		// is running on at all, passed through convertTwipToMm100(), i.e. multiplied by
+		// approximately 1.76. Let's call these units "arbitrary pixelish units" in
+		// comments here.
 		this.options.margin1 = parseInt(obj['margin1']);
 		this.options.margin2 = parseInt(obj['margin2']);
 		this.options.nullOffset = parseInt(obj['leftOffset']);
+
+		// pageWidth on the other hand *is* really in mm100.
 		this.options.pageWidth = parseInt(obj['pageWidth']);
+		this.options.tabs = [];
+		// As are the position values of the elements in the tabs array.
+		for (var i in obj['tabs']) {
+			this.options.tabs[i] = { position: parseInt(obj['tabs'][i].position), style: parseInt(obj['tabs'][i].style) };
+		}
 		// to be enabled only after adding support for other length units as well
 		// this.options.unit = obj['unit'].trim();
 
@@ -94,7 +112,15 @@ L.Control.Ruler = L.Control.extend({
 		var DraggableConvertRatio, lMargin, rMargin, wPixel, scale;
 
 		lMargin = this.options.nullOffset;
+
+		// This is surely bogus. We take pageWidth, which is in mm100, and subtract a value
+		// that is in "arbitrary pixelish units". But the only thing rMargin is used for is
+		// to calculate the width of the part of the ruler that goes out over the right side
+		// of the window anyway (see the assignments to this._rMarginMarker.style.width and
+		// this._rMarginDrag.style.width near the end of this function), so presumably it
+		// doesn't matter that much what rMargin is.
 		rMargin = this.options.pageWidth - (this.options.nullOffset + this.options.margin2);
+
 		scale = this._map.getZoomScale(this._map.getZoom(), 10);
 		wPixel = this._map._docLayer._docPixelSize.x - (this.options.extraSize + this.options.tileMargin * 2) * scale;
 
@@ -107,6 +133,13 @@ L.Control.Ruler = L.Control.extend({
 		var numCounter = -1 * parseInt(lMargin / 1000);
 
 		$('.loleaflet-ruler-maj').remove();
+
+		// this.options.pageWidth is in mm100, so the code here makes one ruler division per
+		// centimetre.
+		//
+		// FIXME: Surely this should be locale-specific, we would want to use inches at
+		// least in the US. (The ruler unit to use doesn't seem to be stored in the document
+		// at least for .odt?)
 		for (var num = 0; num <= (this.options.pageWidth / 1000) + 1; num++) {
 
 			var marker = L.DomUtil.create('div', 'loleaflet-ruler-maj', this._rBPContainer);
@@ -119,6 +152,34 @@ L.Control.Ruler = L.Control.extend({
 			}
 		}
 
+		// The tabstops. Only draw user-created ones, with style RULER_TAB_LEFT,
+		// RULER_TAB_RIGHT, RULER_TAB_CENTER, and RULER_TAB_DECIMAL. See <svtools/ruler.hxx>.
+
+		$('.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;
+			marker.style.marginLeft = (pxPerMm100 * thisWidth - tabstopBorder) + 'px';
+			tabStopWidthAccum += thisWidth;
+		}
+
 		if (!this.options.marginSet) {
 
 			this.options.marginSet = true;


More information about the Libreoffice-commits mailing list