[Libreoffice-commits] online.git: 4 commits - kit/ForKit.cpp loleaflet/build loleaflet/css loleaflet/src
Michael Meeks (via logerrit)
logerrit at kemper.freedesktop.org
Wed Nov 13 16:58:40 UTC 2019
kit/ForKit.cpp | 1
loleaflet/build/deps.js | 9 +-
loleaflet/css/loleaflet.css | 4
loleaflet/src/control/Control.ColumnHeader.js | 9 --
loleaflet/src/control/Control.Header.js | 32 +++++--
loleaflet/src/control/Control.RowHeader.js | 9 --
loleaflet/src/core/Socket.js | 1
loleaflet/src/core/Util.js | 4
loleaflet/src/layer/CalcGridLines.js | 113 ++++++++++++++++++++++++++
loleaflet/src/layer/tile/CalcTileLayer.js | 1
loleaflet/src/layer/tile/TileLayer.js | 10 +-
loleaflet/src/main.js | 3
loleaflet/src/map/handler/Map.Drag.js | 11 ++
13 files changed, 179 insertions(+), 28 deletions(-)
New commits:
commit db20596a0ab7bd5f0117aaa35473035fbed86bbc
Author: Michael Meeks <michael.meeks at collabora.com>
AuthorDate: Wed Nov 13 16:48:56 2019 +0000
Commit: Michael Meeks <michael.meeks at collabora.com>
CommitDate: Wed Nov 13 16:58:15 2019 +0000
Avoid exceptions on mouse-events while initializing.
Change-Id: I7f25e08edcc7a34b08016211c599774973fd506d
diff --git a/loleaflet/src/control/Control.Header.js b/loleaflet/src/control/Control.Header.js
index 1bfe945e7..7f77a1990 100644
--- a/loleaflet/src/control/Control.Header.js
+++ b/loleaflet/src/control/Control.Header.js
@@ -262,6 +262,9 @@ L.Control.Header = L.Control.extend({
},
_entryAtPoint: function(point) {
+ if (!this._tickMap)
+ return false;
+
var position = this._getParallelPos(point);
position = position - this._position;
commit 9859a5f56ba471839b8879ba5fb31dc4692099b0
Author: Michael Meeks <michael.meeks at collabora.com>
AuthorDate: Wed Nov 13 13:28:28 2019 +0000
Commit: Michael Meeks <michael.meeks at collabora.com>
CommitDate: Wed Nov 13 16:58:15 2019 +0000
adapt grid and headers to retina scaling
Counter-intuitively, our retina scaling pixel multiplier is a
different integer multiplier than L.Util.dpiScaleFactor() in many
cases, being either 1 or 2.
Change-Id: I18078eca80b86216751738368d9885151a41dde2
diff --git a/loleaflet/src/control/Control.ColumnHeader.js b/loleaflet/src/control/Control.ColumnHeader.js
index ff76788a7..19282b97e 100644
--- a/loleaflet/src/control/Control.ColumnHeader.js
+++ b/loleaflet/src/control/Control.ColumnHeader.js
@@ -398,10 +398,8 @@ L.Control.ColumnHeader = L.Control.Header.extend({
this._lastMouseOverIndex = undefined;
// create data structure for column widths
- this._tickMap = new L.Control.Header.GapTickMap(
- columns,
- L.Util.bind(this._twipsToPixels, this)
- );
+ this._tickMap = new L.Control.Header.GapTickMap(this._map, columns);
+ this._startOffset = this._tickMap.getStartOffset();
// setup conversion routine
this.converter = L.Util.bind(converter, context);
@@ -410,9 +408,6 @@ L.Control.ColumnHeader = L.Control.Header.extend({
this._groupLevels = parseInt(columns[0].groupLevels);
this._groups = this._groupLevels ? new Array(this._groupLevels) : null;
- var startOffsetPx = parseInt(columns[0].size);
- this._startOffset = startOffsetPx;
-
// collect group controls data
if (colGroups !== undefined && this._groups) {
this._collectGroupsData(colGroups);
diff --git a/loleaflet/src/control/Control.Header.js b/loleaflet/src/control/Control.Header.js
index 0f121cd60..1bfe945e7 100644
--- a/loleaflet/src/control/Control.Header.js
+++ b/loleaflet/src/control/Control.Header.js
@@ -562,12 +562,13 @@ L.Control.Header = L.Control.extend({
canvas.width = value * scale;
if (!isCorner)
this._canvasWidth = value;
-// console.log('Header._setCanvasSizeImpl: _canvasWidth' + this._canvasWidth);
+// console.log('Header._setCanvasSizeImpl: _canvasWidth' + this._canvasWidth);
}
else if (property === 'height') {
canvas.height = value * scale;
if (!isCorner)
this._canvasHeight = value;
+// console.log('Header._setCanvasSizeImpl: _canvasHeight' + this._canvasHeight);
}
},
@@ -631,8 +632,8 @@ L.Control.Header = L.Control.extend({
if (!this._groups[level]) {
this._groups[level] = {};
}
- var startPos = parseInt(groupData.startPos);
- var endPos = parseInt(groupData.endPos);
+ var startPos = parseInt(groupData.startPos) / this._map._docLayer._tilePixelScale;
+ var endPos = parseInt(groupData.endPos) / this._map._docLayer._tilePixelScale;
var isHidden = !!parseInt(groupData.hidden);
if (isHidden || startPos === endPos) {
startPos -= this._groupHeadSize / 2;
@@ -735,7 +736,6 @@ L.Control.Header = L.Control.extend({
L.Control.Header.rowHeaderWidth = undefined;
L.Control.Header.colHeaderHeight = undefined;
-
/*
* GapTickMap is a data structure for handling the dimensions of each
* column/row in the column/row header.
@@ -757,8 +757,11 @@ L.Control.Header.colHeaderHeight = undefined;
* the size of the last known gap.
* - When a new tick position is defined, it resets the size of the last known gap
*
- * All inputs received are given in pixels, outputs are meant to be returned
- * in CSS pixels, which is also the internal storage format.
+ * All inputs received are given in tile pixels, and stored as such.
+ * outputs are returned in CSS pixels.
+ *
+ * **NB.** CSS pixels are scaled (down) from the tile pixels by the a factor
+ * from TileLayer - 2x for retina, 1x for non-retina.
*
* **NB.** twip to pixel mapping is made non-obvious by the need to ensure that
* there are no cumulative rounding errors from TWIP heights to pixels. We have to
@@ -766,7 +769,7 @@ L.Control.Header.colHeaderHeight = undefined;
*/
L.Control.Header.GapTickMap = L.Class.extend({
- initialize: function (ticks) {
+ initialize: function (map, ticks) {
var gapSize;
this._ticks = [];
@@ -783,6 +786,8 @@ L.Control.Header.GapTickMap = L.Class.extend({
// This *assumes* the input is ordered - i.e. tick indexes only grow
this._minTickIdx = parseInt(ticks[0].text);
this._maxTickIdx = knownTicks.length - 1;
+ this._startOffset = parseInt(ticks[0].size);
+ this._tilePixelScale = map._docLayer._tilePixelScale;
for (var idx=this._minTickIdx; idx <= this._maxTickIdx; idx++) {
@@ -803,7 +808,14 @@ L.Control.Header.GapTickMap = L.Class.extend({
// Gets the position of the i-th tick (or `undefined` if the index falls outside).
getTick: function getTick(i) {
- return this._ticks[i];
+ // to get CSS pixels we need to adjust for DPI scale
+ // since we render at full native pixel resolution &
+ // account in those units.
+ return this._ticks[i] / this._tilePixelScale;
+ },
+
+ getStartOffset: function() {
+ return this._startOffset / this._tilePixelScale;
},
getMinTickIdx: function() {
@@ -859,4 +871,3 @@ L.Control.Header.GapTickMap = L.Class.extend({
},
});
-
diff --git a/loleaflet/src/control/Control.RowHeader.js b/loleaflet/src/control/Control.RowHeader.js
index d40622064..c29d64000 100644
--- a/loleaflet/src/control/Control.RowHeader.js
+++ b/loleaflet/src/control/Control.RowHeader.js
@@ -387,10 +387,8 @@ L.Control.RowHeader = L.Control.Header.extend({
this._lastMouseOverIndex = undefined;
// create data structure for row heights
- this._tickMap = new L.Control.Header.GapTickMap(
- rows,
- L.Util.bind(this._twipsToPixels, this)
- );
+ this._tickMap = new L.Control.Header.GapTickMap(this._map, rows);
+ this._startOffset = this._tickMap.getStartOffset();
// setup conversion routine
this.converter = L.Util.bind(converter, context);
@@ -399,9 +397,6 @@ L.Control.RowHeader = L.Control.Header.extend({
this._groupLevels = parseInt(rows[0].groupLevels);
this._groups = this._groupLevels ? new Array(this._groupLevels) : null;
- var startOffsetPx = parseInt(rows[0].size);
- this._startOffset = startOffsetPx;
-
// collect group controls data
if (rowGroups !== undefined && this._groups) {
this._collectGroupsData(rowGroups);
diff --git a/loleaflet/src/layer/CalcGridLines.js b/loleaflet/src/layer/CalcGridLines.js
index f857afbee..2dd9402e8 100644
--- a/loleaflet/src/layer/CalcGridLines.js
+++ b/loleaflet/src/layer/CalcGridLines.js
@@ -76,21 +76,14 @@ L.CalcGridLines = L.LayerGroup.extend({
// Aux stuff to scale twips from the websocket message
// into map coordinate units
- var pixelToMapUnitRatio = this._map.options.crs.scale(this._map.getZoom()) * L.Util.getDpiScaleFactor();
- var twipToMapUnitRatio = ev.context._tileWidthPx / ev.context._tileWidthTwips / pixelToMapUnitRatio;
-
- function twipToLatLng(twip) {
- return twip * twipToMapUnitRatio;
- }
+ var pixelToMapUnitRatio = this._map.options.crs.scale(this._map.getZoom());
if (ev.data.columns && ev.data.columns.length) {
- ticks = new L.Control.Header.GapTickMap(
- ev.data.columns,
- twipToLatLng
- );
+ ticks = new L.Control.Header.GapTickMap(this._map, ev.data.columns);
this._colLines.clearLayers();
ticks.forEachTick(function(idx, pos) {
+ pos /= pixelToMapUnitRatio;
this._colLines.addLayer(
L.polyline([[[ Number.MIN_SAFE_INTEGER, pos ],[ Number.MAX_SAFE_INTEGER, pos ]]],
this.options
@@ -100,13 +93,11 @@ L.CalcGridLines = L.LayerGroup.extend({
}
if (ev.data.rows && ev.data.rows.length) {
- ticks = new L.Control.Header.GapTickMap(
- ev.data.rows,
- twipToLatLng
- );
+ ticks = new L.Control.Header.GapTickMap(this._map, ev.data.rows);
this._rowLines.clearLayers();
ticks.forEachTick(function(idx, pos) {
+ pos /= pixelToMapUnitRatio;
this._rowLines.addLayer(
// Note that y-coordinates are inverted: Leaflet's CRS.Simple assumes
// down = negative latlngs, whereas loolkit assumes down = positive twips
diff --git a/loleaflet/src/layer/tile/CalcTileLayer.js b/loleaflet/src/layer/tile/CalcTileLayer.js
index 0ccbbd3a0..37c6f9b0a 100644
--- a/loleaflet/src/layer/tile/CalcTileLayer.js
+++ b/loleaflet/src/layer/tile/CalcTileLayer.js
@@ -684,6 +684,7 @@ L.CalcTileLayer = L.TileLayer.extend({
var comment;
if (values.commandName === '.uno:ViewRowColumnHeaders') {
+// console.log('view row column headers: ' + JSON.stringify(values));
this._map.fire('viewrowcolumnheaders', {
data: values,
converter: this._twipsToPixels,
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index 9a371ea25..1179fa383 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -72,10 +72,16 @@ L.TileLayer = L.GridLayer.extend({
this._tileWidthPx = options.tileSize;
this._tileHeightPx = options.tileSize;
+ // Conversion factor between the pixel view of tiled rendering
+ // and CSS pixels. NB. similar but not the same as
+ // L.Util.dpiScaleFactor()
+ this._tilePixelScale = 1;
+
// detecting retina displays, adjusting tileWidthPx, tileHeightPx and zoom levels
if (options.detectRetina && L.Browser.retina && options.maxZoom > 0) {
- this._tileWidthPx *= 2;
- this._tileHeightPx *= 2;
+ this._tilePixelScale = 2;
+ this._tileWidthPx *= this._tilePixelScale;
+ this._tileHeightPx *= this._tilePixelScale;
options.zoomOffset++;
options.minZoom = Math.max(0, options.minZoom);
commit a16da08b2ce496681e1cfd425a011359bef1638c
Author: Marco Cecchetti <mrcekets at gmail.com>
AuthorDate: Wed Aug 7 18:13:41 2019 +0200
Commit: Michael Meeks <michael.meeks at collabora.com>
CommitDate: Wed Nov 13 16:58:15 2019 +0000
loleaflet: calc: on IE11 headers and gridlines are not displayed
The problem was that in CalcGridLine.onUpdate the integer costants
Number.MAX_SAFE_INTEGER and Number.MIN_SAFE_INTEGER were used.
Unfortunately such constants are not supported by IE11.
Change-Id: I0a0fba0c1eaa922b925168c16d3afd395c0d38f0
diff --git a/loleaflet/src/core/Util.js b/loleaflet/src/core/Util.js
index 04b3638f9..da81e6783 100644
--- a/loleaflet/src/core/Util.js
+++ b/loleaflet/src/core/Util.js
@@ -234,6 +234,10 @@ L.Util = {
cancelFn.call(window, id);
}
};
+
+ // on IE11 Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER are not supported
+ L.Util.MAX_SAFE_INTEGER = Math.pow(2, 53)-1;
+ L.Util.MIN_SAFE_INTEGER = -L.Util.MAX_SAFE_INTEGER;
})();
// shortcuts for most used utility functions
commit 55ac3da53f6d6f0d08de3fed43d43b85e1b05165
Author: Iván Sánchez Ortega <ivan.sanchez at collabora.com>
AuthorDate: Thu May 16 16:17:29 2019 +0200
Commit: Michael Meeks <michael.meeks at collabora.com>
CommitDate: Wed Nov 13 16:58:15 2019 +0000
loleaflet: Draw column/row grid lines on the background
Based on information from UNO ViewRowColumnHeaders messages, this draws
the grid lines with Leaflet's SVG polylines, in a background pane.
To prevent visual glitches on touchscreens, this also reverts parts of
26aad36771ebd5a304b763912184acd2ea26dfdf - that introduced a regression
that prevented 'dragend' events from being fired when inertia-dragging.
Instead, inertia drag is disabled in the L.Map constructor.
[ Miklos: cherry-pick these early as they prevent automatic merging. ]
Change-Id: I86c68214822a0a2c2f8ced82ccf5a6c201e2cf04
diff --git a/kit/ForKit.cpp b/kit/ForKit.cpp
index 7150ee6ab..62491374c 100644
--- a/kit/ForKit.cpp
+++ b/kit/ForKit.cpp
@@ -532,6 +532,7 @@ int main(int argc, char** argv)
std::string options = "unipoll";
if (Log::logger().trace())
options += ":profile_events";
+// options += ":sc_no_grid_bg"; // leave ths disabled for now, merged-cells needs more work.
::setenv("SAL_LOK_OPTIONS", options.c_str(), 0);
// Initialize LoKit
diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js
index a0c6d64fa..4927268f6 100644
--- a/loleaflet/build/deps.js
+++ b/loleaflet/build/deps.js
@@ -62,9 +62,9 @@ var deps = {
'layer/BackgroundColor.js',
],
desc: 'Calc tile layer.',
- deps: ['TileLayer']
+ deps: ['TileLayer', 'CalcGridLines']
},
-
+
ImageOverlay: {
src: ['layer/ImageOverlay.js'],
desc: 'Used to display an image over a particular rectangular area of the map.'
@@ -115,6 +115,11 @@ var deps = {
desc: 'Extends LayerGroup with mouse events and bindPopup method shared between layers.'
},
+ CalcGridLines: {
+ src: ['layer/CalcGridLines.js'],
+ desc: 'Calc background grid lines',
+ deps: ['ControlHeader', 'LayerGroup']
+ },
Path: {
src: [
diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index 3eafe0f68..2391c888a 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -487,6 +487,10 @@ body {
display: inline-block;
}
+.leaflet-container .leaflet-pane.leaflet-calc-background-pane {
+ z-index: 0;
+}
+
.avatar-img {
border: solid 2px;
border-radius: 50%;
diff --git a/loleaflet/src/control/Control.Header.js b/loleaflet/src/control/Control.Header.js
index fe17df4cc..0f121cd60 100644
--- a/loleaflet/src/control/Control.Header.js
+++ b/loleaflet/src/control/Control.Header.js
@@ -562,7 +562,7 @@ L.Control.Header = L.Control.extend({
canvas.width = value * scale;
if (!isCorner)
this._canvasWidth = value;
- console.log('Header._setCanvasSizeImpl: _canvasWidth' + this._canvasWidth);
+// console.log('Header._setCanvasSizeImpl: _canvasWidth' + this._canvasWidth);
}
else if (property === 'height') {
canvas.height = value * scale;
diff --git a/loleaflet/src/core/Socket.js b/loleaflet/src/core/Socket.js
index 4ee7a8fb4..6512dd92d 100644
--- a/loleaflet/src/core/Socket.js
+++ b/loleaflet/src/core/Socket.js
@@ -863,6 +863,7 @@ L.Socket = L.Class.extend({
});
if (!this._map.options.backgroundLayer) {
this._map.options.backgroundLayer = new L.CalcBackground().addTo(this._map);
+ (new L.CalcGridLines()).addTo(this._map);
}
}
else {
diff --git a/loleaflet/src/layer/CalcGridLines.js b/loleaflet/src/layer/CalcGridLines.js
new file mode 100644
index 000000000..f857afbee
--- /dev/null
+++ b/loleaflet/src/layer/CalcGridLines.js
@@ -0,0 +1,122 @@
+/*
+ * A Leaflet layer that draws grid lines for spreadsheet row/column separators.
+ */
+
+L.CalcGridLines = L.LayerGroup.extend({
+ // Options given to L.CalcGridLines will be propagated into the spawned
+ // L.PolyLines. Default is thin grey lines.
+ options: {
+ color: '#c0c0c0',
+ weight: 1,
+ interactive: false
+ },
+
+
+ initialize: function(options) {
+ L.LayerGroup.prototype.initialize.call(this, options);
+ this._rowLines = L.layerGroup();
+ this._colLines = L.layerGroup();
+ },
+
+ onAdd: function(map) {
+
+ // The SVG renderer needs some specific customizations
+ if (!this.options.renderer) {
+ map.createPane('calc-background');
+
+ this.options.renderer = new L.SVG({
+ pane: 'calc-background'
+ });
+
+ // Hack the _updatePoly private method so it offsets all SVG path coordinates
+ // to 0.5. This makes the rendered lines align to the screen pixel grid
+ // nicely (at least in non-HPI screens)
+ this.options.renderer._updatePoly = function(layer, closed) {
+ var str = '', i, j, len, len2, points, p, rings = layer._parts;
+
+ for (i = 0, len = rings.length; i < len; i++) {
+ points = rings[i];
+
+ for (j = 0, len2 = points.length; j < len2; j++) {
+ p = points[j];
+ str += (j ? 'L' : 'M') + (Math.ceil(p.x) - 0.5) + ' ' + (Math.ceil(p.y) - 0.5);
+ }
+
+ // closes the ring for polygons; "x" is VML syntax
+ str += closed ? (L.Browser.svg ? 'z' : 'x') : '';
+ }
+
+ // SVG complains about empty path strings
+ if (str === '') {
+ str = 'M0 0';
+ }
+
+ this._setPath(layer, str, closed)
+ }.bind(this.options.renderer);
+ }
+
+ this._map.on('viewrowcolumnheaders', this.onUpdate, this);
+
+ this.addLayer(this._rowLines);
+ this.addLayer(this._colLines);
+
+ },
+
+ remove: function() {
+ this._map.off('viewrowcolumnheaders', this.onUpdate, this);
+
+ this.removeLayer(this._rowLines);
+ this.removeLayer(this._colLines);
+ },
+
+ // Redraw col/row lines whenever new information about them is available.
+ // One websocket message might have info about cols, rows, or both
+ onUpdate: function onUpdate(ev) {
+ var ticks;
+
+ // Aux stuff to scale twips from the websocket message
+ // into map coordinate units
+ var pixelToMapUnitRatio = this._map.options.crs.scale(this._map.getZoom()) * L.Util.getDpiScaleFactor();
+ var twipToMapUnitRatio = ev.context._tileWidthPx / ev.context._tileWidthTwips / pixelToMapUnitRatio;
+
+ function twipToLatLng(twip) {
+ return twip * twipToMapUnitRatio;
+ }
+
+ if (ev.data.columns && ev.data.columns.length) {
+ ticks = new L.Control.Header.GapTickMap(
+ ev.data.columns,
+ twipToLatLng
+ );
+ this._colLines.clearLayers();
+
+ ticks.forEachTick(function(idx, pos) {
+ this._colLines.addLayer(
+ L.polyline([[[ Number.MIN_SAFE_INTEGER, pos ],[ Number.MAX_SAFE_INTEGER, pos ]]],
+ this.options
+ )
+ );
+ }.bind(this));
+ }
+
+ if (ev.data.rows && ev.data.rows.length) {
+ ticks = new L.Control.Header.GapTickMap(
+ ev.data.rows,
+ twipToLatLng
+ );
+ this._rowLines.clearLayers();
+
+ ticks.forEachTick(function(idx, pos) {
+ this._rowLines.addLayer(
+ // Note that y-coordinates are inverted: Leaflet's CRS.Simple assumes
+ // down = negative latlngs, whereas loolkit assumes down = positive twips
+ L.polyline([[[ -pos, Number.MIN_SAFE_INTEGER ],[ -pos, Number.MAX_SAFE_INTEGER ]]],
+ this.options
+ )
+ );
+ }.bind(this));
+ }
+ }
+
+});
+
diff --git a/loleaflet/src/main.js b/loleaflet/src/main.js
index 0a66fe684..f8340a844 100644
--- a/loleaflet/src/main.js
+++ b/loleaflet/src/main.js
@@ -76,7 +76,8 @@ var map = L.map('map', {
notWopiButIframe: notWopiButIframe,
alwaysActive: alwaysActive,
idleTimeoutSecs: idleTimeoutSecs, // Dim when user is idle.
- outOfFocusTimeoutSecs: outOfFocusTimeoutSecs // Dim after switching tabs.
+ outOfFocusTimeoutSecs: outOfFocusTimeoutSecs, // Dim after switching tabs.
+ inertia: false
});
////// Controls /////
diff --git a/loleaflet/src/map/handler/Map.Drag.js b/loleaflet/src/map/handler/Map.Drag.js
index 74a2fe64a..e90082286 100644
--- a/loleaflet/src/map/handler/Map.Drag.js
+++ b/loleaflet/src/map/handler/Map.Drag.js
@@ -122,6 +122,17 @@ L.Map.Drag = L.Handler.extend({
if (!offset.x || !offset.y) {
map.fire('moveend');
+ } else {
+ offset = map._limitOffset(offset, map.options.maxBounds);
+
+ L.Util.requestAnimFrame(function () {
+ map.panBy(offset, {
+ duration: decelerationDuration,
+ easeLinearity: ease,
+ noMoveStart: true,
+ animate: true
+ });
+ });
}
}
}
More information about the Libreoffice-commits
mailing list