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 <t...@collabora.com>
AuthorDate: Thu Dec 5 02:18:32 2019 +0200
Commit: Tor Lillqvist <t...@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 <t...@collabora.com>
Tested-by: Tor Lillqvist <t...@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;
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
