[Libreoffice-commits] online.git: loleaflet/dist loleaflet/src
László Németh
laszlo.nemeth at collabora.com
Fri Sep 23 10:32:04 UTC 2016
loleaflet/dist/leaflet.css | 16 ++++++
loleaflet/src/layer/tile/CalcTileLayer.js | 7 ++
loleaflet/src/layer/tile/GridLayer.js | 11 ++++
loleaflet/src/layer/tile/ImpressTileLayer.js | 7 ++
loleaflet/src/layer/tile/TileLayer.js | 71 +++++++++++++++++++++------
loleaflet/src/layer/tile/WriterTileLayer.js | 9 ++-
6 files changed, 104 insertions(+), 17 deletions(-)
New commits:
commit 68d3693d977e7a0137599eeba7a9de6cae06a2be
Author: László Németh <laszlo.nemeth at collabora.com>
Date: Fri Sep 23 12:19:58 2016 +0200
loleaflet: extend tile debugging
- show invalidated rectangles with fading effect
- show last tilecombine message and cancelled tile count
- show received/requested tile updates
- fix popup handling
- custom popup style (transparent, big numbers)
- clean up
diff --git a/loleaflet/dist/leaflet.css b/loleaflet/dist/leaflet.css
index 047fa0b..2febea3 100644
--- a/loleaflet/dist/leaflet.css
+++ b/loleaflet/dist/leaflet.css
@@ -566,6 +566,22 @@ a.leaflet-control-buttons:hover:first-child {
pointer-events: none;
}
+.debug .leaflet-popup-content {
+ margin: 1px 1px;
+ font: 28px/24px Tahoma, Verdana, sans-serif;
+ line-height: 1;
+ background: rgba(0, 0, 0, 0);
+ pointer-events: none;
+ }
+
+.debug .leaflet-popup-content-wrapper,
+.debug .leaflet-popup-tip {
+ background: rgba(255, 255, 255, 0);
+ color: #f70;
+ box-shadow: none;
+ pointer-events: none;
+ }
+
/* div icon */
.leaflet-div-icon {
diff --git a/loleaflet/src/layer/tile/CalcTileLayer.js b/loleaflet/src/layer/tile/CalcTileLayer.js
index 1d51cf8..a493c7c 100644
--- a/loleaflet/src/layer/tile/CalcTileLayer.js
+++ b/loleaflet/src/layer/tile/CalcTileLayer.js
@@ -33,6 +33,9 @@ L.CalcTileLayer = L.TileLayer.extend({
var topLeftTwips = new L.Point(command.x, command.y);
var offset = new L.Point(command.width, command.height);
var bottomRightTwips = topLeftTwips.add(offset);
+ if (this._debug) {
+ this._debugAddInvalidationRectangle(topLeftTwips, bottomRightTwips);
+ }
var invalidBounds = new L.Bounds(topLeftTwips, bottomRightTwips);
var visibleTopLeft = this._latLngToTwips(this._map.getBounds().getNorthWest());
var visibleBottomRight = this._latLngToTwips(this._map.getBounds().getSouthEast());
@@ -66,6 +69,7 @@ L.CalcTileLayer = L.TileLayer.extend({
needsNewTiles = true;
if (this._debug && this._tiles[key]._debugTile) {
this._tiles[key]._debugTile.setStyle({fillOpacity: 0.5});
+ this._tiles[key]._debugInvalidateCount++;
}
}
else {
@@ -88,6 +92,9 @@ L.CalcTileLayer = L.TileLayer.extend({
'tileheight=' + this._tileHeightTwips;
this._map._socket.sendMessage(message, '');
+ if (this._debug) {
+ this._debugDataTileCombine.setPrefix(message);
+ }
}
for (key in this._tileCache) {
diff --git a/loleaflet/src/layer/tile/GridLayer.js b/loleaflet/src/layer/tile/GridLayer.js
index 89b71bd..d48aed9 100644
--- a/loleaflet/src/layer/tile/GridLayer.js
+++ b/loleaflet/src/layer/tile/GridLayer.js
@@ -538,6 +538,10 @@ L.GridLayer = L.Layer.extend({
if (!this._tiles[key].loaded) {
L.DomUtil.remove(this._tiles[key].el);
delete this._tiles[key];
+ if (this._debug && this._debugDataCancelledTiles) {
+ this._debugCancelledTiles++;
+ this._debugDataCancelledTiles.setPrefix('Cancelled tiles: ' + this._debugCancelledTiles);
+ }
}
}
this._emptyTilesCount = 0;
@@ -607,6 +611,10 @@ L.GridLayer = L.Layer.extend({
if (!tile.loaded) {
L.DomUtil.remove(tile.el);
delete this._tiles[key];
+ if (this._debug && this._debugDataCancelledTiles) {
+ this._debugCancelledTiles++;
+ this._debugDataCancelledTiles.setPrefix('Cancelled tiles: ' + this._debugCancelledTiles);
+ }
}
}
this._emptyTilesCount = 0;
@@ -749,6 +757,9 @@ L.GridLayer = L.Layer.extend({
this._emptyTilesCount -= 1;
}
L.DomUtil.remove(tile.el);
+ if (this._debug && this._debugInfo && this._tiles[key]._debugPopup) {
+ this._debugInfo.removeLayer(this._tiles[key]._debugPopup);
+ }
delete this._tiles[key];
this.fire('tileunload', {
diff --git a/loleaflet/src/layer/tile/ImpressTileLayer.js b/loleaflet/src/layer/tile/ImpressTileLayer.js
index 96934d6..e931ef6 100644
--- a/loleaflet/src/layer/tile/ImpressTileLayer.js
+++ b/loleaflet/src/layer/tile/ImpressTileLayer.js
@@ -17,6 +17,9 @@ L.ImpressTileLayer = L.TileLayer.extend({
var topLeftTwips = new L.Point(command.x, command.y);
var offset = new L.Point(command.width, command.height);
var bottomRightTwips = topLeftTwips.add(offset);
+ if (this._debug) {
+ this._debugAddInvalidationRectangle(topLeftTwips, bottomRightTwips);
+ }
var invalidBounds = new L.Bounds(topLeftTwips, bottomRightTwips);
var visibleTopLeft = this._latLngToTwips(this._map.getBounds().getNorthWest());
var visibleBottomRight = this._latLngToTwips(this._map.getBounds().getSouthEast());
@@ -50,6 +53,7 @@ L.ImpressTileLayer = L.TileLayer.extend({
needsNewTiles = true;
if (this._debug && this._tiles[key]._debugTile) {
this._tiles[key]._debugTile.setStyle({fillOpacity: 0.5});
+ this._tiles[key]._debugInvalidateCount++;
}
}
else {
@@ -72,6 +76,9 @@ L.ImpressTileLayer = L.TileLayer.extend({
'tileheight=' + this._tileHeightTwips;
this._map._socket.sendMessage(message, '');
+ if (this._debug) {
+ this._debugDataTileCombine.setPrefix(message);
+ }
}
for (key in this._tileCache) {
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index 122028c..e0197ff 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -151,10 +151,7 @@ L.TileLayer = L.GridLayer.extend({
map.addLayer(this._viewLayerGroup);
this._debug = map.options.debug;
- if (this._debug) {
- this._debugInfo = new L.LayerGroup();
- map.addLayer(this._debugInfo);
- }
+ this._debugInit();
this._searchResultsLayer = new L.LayerGroup();
map.addLayer(this._searchResultsLayer);
@@ -382,13 +379,15 @@ L.TileLayer = L.GridLayer.extend({
toggleTileDebugMode: function() {
this._invalidateClientVisibleArea();
this._debug = !this._debug;
- if (this._debug) {
- if (!this._debugInfo) {
- this._debugInfo = new L.LayerGroup();
- this._map.addLayer(this._debugInfo);
- }
- this._onMessage('invalidatetiles: EMPTY', null);
+ if (this._debugInfo) {
+ this._map.removeLayer(this._debugInfo);
}
+ if (!this._debug) {
+ this._debugDataCancelledTiles.setPrefix('');
+ this._debugDataTileCombine.setPrefix('');
+ }
+ this._debugInit();
+ this._onMessage('invalidatetiles: EMPTY', null);
},
_onCommandValuesMsg: function (textMsg) {
@@ -1004,20 +1003,21 @@ L.TileLayer = L.GridLayer.extend({
var key = this._tileCoordsToKey(coords);
var tile = this._tiles[key];
if (this._debug && tile) {
- var tileBound = this._keyToBounds(key);
if (tile._debugLoadCount) {
- tile._debugLoadCount += 1;
+ tile._debugLoadCount++;
} else {
tile._debugLoadCount = 1;
+ tile._debugInvalidateCount = 1;
}
if (!tile._debugPopup) {
- tile._debugPopup = L.popup({offset: new L.Point(0, 0), autoPan: false, closeButton: false, closeOnClick: false})
- .setLatLng(new L.LatLng(tileBound.getSouth(), tileBound.getCenter().lng)).setContent('-');
+ var tileBound = this._keyToBounds(key);
+ tile._debugPopup = L.popup({className: 'debug', offset: new L.Point(0, 0), autoPan: false, closeButton: false, closeOnClick: false})
+ .setLatLng(new L.LatLng(tileBound.getSouth(), tileBound.getWest() + (tileBound.getEast() - tileBound.getWest())/4)).setContent('-');
this._debugInfo.addLayer(tile._debugPopup);
tile._debugTile = L.rectangle(tileBound, {color: 'blue', weight: 1, fillOpacity: 0, pointerEvents: 'none'});
this._debugInfo.addLayer(tile._debugTile);
}
- tile._debugPopup.setContent('' + this._tiles[key]._debugLoadCount);
+ tile._debugPopup.setContent('' + this._tiles[key]._debugLoadCount + '/' + this._tiles[key]._debugInvalidateCount);
if (tile._debugTile) {
tile._debugTile.setStyle({fillOpacity: 0});
}
@@ -1753,7 +1753,48 @@ L.TileLayer = L.GridLayer.extend({
}
}
this._clientVisibleArea = true;
+ },
+
+ _debugInit: function() {
+ if (this._debug) {
+ this._debugInfo = new L.LayerGroup();
+ map.addLayer(this._debugInfo);
+ this._debugInvalidBounds = {};
+ this._debugTimeout();
+ this._debugId = 0;
+ this._debugCancelledTiles = 0;
+ if (!this._debugDataCancelledTiles) {
+ this._debugDataTileCombine = L.control.attribution({prefix: '[tilecombine message]'}).addTo(map);
+ this._debugDataCancelledTiles = L.control.attribution({prefix: 'Cancelled tiles: 0'}).addTo(map);
+ }
+ }
+ },
+
+ _debugAddInvalidationRectangle: function(topLeftTwips, bottomRightTwips) {
+ var invalidBoundCoords = new L.LatLngBounds(this._twipsToLatLng(topLeftTwips, this._tileZoom),
+ this._twipsToLatLng(bottomRightTwips, this._tileZoom));
+ var rect = L.rectangle(invalidBoundCoords, {color: 'red', weight: 1, fillOpacity: 0.5, pointerEvents: 'none'});
+ this._debugInvalidBounds[this._debugId] = rect;
+ this._debugId++;
+ this._debugInfo.addLayer(rect);
+ },
+
+ _debugTimeout: function() {
+ if (this._debug) {
+ for (var key in this._debugInvalidBounds) {
+ var rect = this._debugInvalidBounds[key];
+ var opac = rect.options.fillOpacity;
+ if (opac < 0.1) {
+ this._debugInfo.removeLayer(rect);
+ delete this._debugInvalidBounds[key];
+ } else {
+ rect.setStyle({opacity: opac - 0.05, fillOpacity: opac - 0.05});
+ }
+ }
+ this._debugTimeoutId = setTimeout(function () { map._docLayer._debugTimeout() }, 50);
+ }
}
+
});
L.tileLayer = function (url, options) {
diff --git a/loleaflet/src/layer/tile/WriterTileLayer.js b/loleaflet/src/layer/tile/WriterTileLayer.js
index d29c3d5..910e9fa 100644
--- a/loleaflet/src/layer/tile/WriterTileLayer.js
+++ b/loleaflet/src/layer/tile/WriterTileLayer.js
@@ -18,15 +18,16 @@ L.WriterTileLayer = L.TileLayer.extend({
var topLeftTwips = new L.Point(command.x, command.y);
var offset = new L.Point(command.width, command.height);
var bottomRightTwips = topLeftTwips.add(offset);
+ if (this._debug) {
+ this._debugAddInvalidationRectangle(topLeftTwips, bottomRightTwips);
+ }
var invalidBounds = new L.Bounds(topLeftTwips, bottomRightTwips);
var visibleTopLeft = this._latLngToTwips(this._map.getBounds().getNorthWest());
var visibleBottomRight = this._latLngToTwips(this._map.getBounds().getSouthEast());
var visibleArea = new L.Bounds(visibleTopLeft, visibleBottomRight);
-
var tilePositionsX = '';
var tilePositionsY = '';
var needsNewTiles = false;
-
for (var key in this._tiles) {
var coords = this._tiles[key].coords;
var tileTopLeft = this._coordsToTwips(coords);
@@ -51,6 +52,7 @@ L.WriterTileLayer = L.TileLayer.extend({
needsNewTiles = true;
if (this._debug && this._tiles[key]._debugTile) {
this._tiles[key]._debugTile.setStyle({fillOpacity: 0.5});
+ this._tiles[key]._debugInvalidateCount++;
}
}
else {
@@ -76,6 +78,9 @@ L.WriterTileLayer = L.TileLayer.extend({
'tileheight=' + this._tileHeightTwips;
this._map._socket.sendMessage(message, '');
+ if (this._debug) {
+ this._debugDataTileCombine.setPrefix(message);
+ }
}
for (key in this._tileCache) {
More information about the Libreoffice-commits
mailing list