[Libreoffice-commits] online.git: loleaflet/src
Michael Meeks (via logerrit)
logerrit at kemper.freedesktop.org
Thu Sep 17 19:33:41 UTC 2020
loleaflet/src/layer/tile/CalcTileLayer.js | 101 ++++++++++++++++++++++++++--
loleaflet/src/layer/tile/CanvasTileLayer.js | 23 +++---
2 files changed, 109 insertions(+), 15 deletions(-)
New commits:
commit 8093b8941a30ebff087f5563a1115e3438de3dc3
Author: Michael Meeks <michael.meeks at collabora.com>
AuthorDate: Wed Sep 9 10:05:44 2020 +0100
Commit: Jan Holesovsky <kendy at collabora.com>
CommitDate: Thu Sep 17 21:33:22 2020 +0200
calc canvas: start of direct grid rendering.
Change-Id: If471fc4ff94b3cb8e2897ac76e712aa3958fc7d2
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/102950
Tested-by: Jan Holesovsky <kendy at collabora.com>
Reviewed-by: Jan Holesovsky <kendy at collabora.com>
diff --git a/loleaflet/src/layer/tile/CalcTileLayer.js b/loleaflet/src/layer/tile/CalcTileLayer.js
index 66e264817..54abd8731 100644
--- a/loleaflet/src/layer/tile/CalcTileLayer.js
+++ b/loleaflet/src/layer/tile/CalcTileLayer.js
@@ -739,6 +739,67 @@ L.CalcTileLayer = BaseTileLayer.extend({
converter: this._twipsToPixels,
context: this
});
+ var that = this;
+ this._painter.renderBackground = function(canvas, ctx)
+ {
+ if (this._layer._debug)
+ this._canvasCtx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+ else
+ this._canvasCtx.fillStyle = 'white'; // FIXME: sheet bg color
+ this._canvasCtx.fillRect(0, 0, ctx.canvasSize.x, ctx.canvasSize.y);
+
+ if (that._debug)
+ canvas.strokeStyle = 'blue';
+ else // now fr some grid-lines ...
+ canvas.strokeStyle = '#c0c0c0';
+ canvas.lineWidth = 1.0;
+
+ canvas.beginPath();
+ for (var i = 0; i < ctx.paneBoundsList.length; ++i) {
+ // FIXME: de-duplicate before firing myself:
+
+ // co-ordinates of this pane in core document pixels
+ var paneBounds = that._cssBoundsToCore(ctx.paneBoundsList[i]);
+ // co-ordinates of the main-(bottom right) pane in core document pixels
+ var viewBounds = that._cssBoundsToCore(ctx.viewBounds);
+ // into real pixel-land ...
+ paneBounds.round();
+ viewBounds.round();
+
+ var paneOffset = paneBounds.getTopLeft(); // allocates
+ // Cute way to detect the in-canvas pixel offset of each pane
+ paneOffset.x = Math.min(paneOffset.x, viewBounds.min.x);
+ paneOffset.y = Math.min(paneOffset.y, viewBounds.min.y);
+
+ // when using the pinch to zoom, set additional translation based */
+ // on the pinch movement
+ if (that._map._animatingZoom) {
+ var centerOffset = this._map._getCenterOffset(this._map._animateToCenter);
+ paneOffset.x += Math.round(centerOffset.x);
+ paneOffset.y += Math.round(centerOffset.y);
+ }
+
+ // URGH -> zooming etc. (!?) ...
+ if (that.sheetGeometry._columns)
+ that.sheetGeometry._columns.forEachInCorePixelRange(
+ paneBounds.min.x, paneBounds.max.x,
+ function(pos) {
+ canvas.moveTo(pos - paneOffset.x - 0.5, paneBounds.min.y - paneOffset.y - 0.5);
+ canvas.lineTo(pos - paneOffset.x - 0.5, paneBounds.max.y - paneOffset.y - 0.5);
+ canvas.stroke();
+ });
+
+ if (that.sheetGeometry._rows)
+ that.sheetGeometry._rows.forEachInCorePixelRange(
+ paneBounds.min.y, paneBounds.max.y,
+ function(pos) {
+ canvas.moveTo(paneBounds.min.x - paneOffset.x - 0.5, pos - paneOffset.y - 0.5);
+ canvas.lineTo(paneBounds.max.x - paneOffset.x - 0.5, pos - paneOffset.y - 0.5);
+ canvas.stroke();
+ });
+ }
+ canvas.closePath();
+ };
},
_handleSheetGeometryDataMsg: function (jsonMsgObj) {
@@ -916,12 +977,15 @@ L.CalcTileLayer = BaseTileLayer.extend({
comment.tab = parseInt(comment.tab);
comment.cellPos = L.LOUtil.stringToBounds(comment.cellPos);
comment.cellPos = L.latLngBounds(this._twipsToLatLng(comment.cellPos.getBottomLeft()),
- this._twipsToLatLng(comment.cellPos.getTopRight()));
- var annotation = this._annotations[comment.tab][comment.id];
- if (annotation) {
- annotation.setLatLngBounds(comment.cellPos);
- if (annotation.mark) {
- annotation.mark.setLatLng(comment.cellPos.getNorthEast());
+ this._twipsToLatLng(comment.cellPos.getTopRight()));
+ if (this._annotations && this._annotations[comment.tab])
+ {
+ var annotation = this._annotations[comment.tab][comment.id];
+ if (annotation) {
+ annotation.setLatLngBounds(comment.cellPos);
+ if (annotation.mark) {
+ annotation.mark.setLatLng(comment.cellPos.getNorthEast());
+ }
}
}
}
@@ -1771,6 +1835,25 @@ L.SheetDimension = L.Class.extend({
});
},
+ // callback with a position for each grid line in this pixel range
+ forEachInCorePixelRange: function(startPix, endPix, callback) {
+ this._visibleSizes.forEachSpan(function (spanData) {
+ // do we overlap ?
+ var spanFirstCorePx = spanData.data.poscorepx -
+ (spanData.data.sizecore * (spanData.end - spanData.start + 1));
+ if (spanFirstCorePx < endPix && spanData.data.poscorepx > startPix)
+ {
+ var firstCorePx = startPix + spanData.data.sizecore -
+ ((startPix - spanFirstCorePx) % spanData.data.sizecore);
+ var lastCorePx = Math.min(endPix, spanData.data.poscorepx);
+
+ for (var pos = firstCorePx; pos <= lastCorePx; pos += spanData.data.sizecore) {
+ callback(pos);
+ }
+ }
+ });
+ },
+
// computes element index from tile-twips position and returns
// an object with this index and the span data.
_getSpanAndIndexFromTileTwipsPos: function (pos) {
@@ -2151,6 +2234,12 @@ L.SpanList = L.Class.extend({
}
},
+ forEachSpan: function(callback) {
+ for (var id = 0; id < this._spanlist.length; ++id) {
+ callback(this._getSpanData(id));
+ }
+ },
+
_getSpanData: function (spanid) {
var span = this._spanlist[spanid];
diff --git a/loleaflet/src/layer/tile/CanvasTileLayer.js b/loleaflet/src/layer/tile/CanvasTileLayer.js
index 5c93af7de..3149ebb6c 100644
--- a/loleaflet/src/layer/tile/CanvasTileLayer.js
+++ b/loleaflet/src/layer/tile/CanvasTileLayer.js
@@ -90,7 +90,6 @@ L.CanvasTilePainter = L.Class.extend({
this._canvasCtx.imageSmoothingEnabled = false;
this._canvasCtx.msImageSmoothingEnabled = false;
var mapSize = this._map.getPixelBounds().getSize();
- this._lastSize = mapSize;
this._lastMapSize = mapSize;
this._setCanvasSize(mapSize.x, mapSize.y);
this._canvasCtx.setTransform(1,0,0,1,0,0);
@@ -115,6 +114,8 @@ L.CanvasTilePainter = L.Class.extend({
this._height = parseInt(this._canvas.style.height);
this.clear();
this._syncTileContainerSize();
+
+ this._lastSize = new L.Point(widthCSSPx, heightCSSPx);
},
canvasDPIScale: function () {
@@ -155,7 +156,6 @@ L.CanvasTilePainter = L.Class.extend({
},
paint: function (tile, ctx) {
-
if (!ctx)
ctx = this._paintContext();
@@ -245,9 +245,9 @@ L.CanvasTilePainter = L.Class.extend({
var mapSizeChanged = !newMapSize.equals(this._lastMapSize);
// To avoid flicker, only resize the canvas element if width or height of the map increases.
- var newSize = new L.Point(Math.max(newMapSize.x, this._lastSize.x),
- Math.max(newMapSize.y, this._lastSize.y));
- var resizeCanvas = !newSize.equals(this._lastSize);
+ var newSize = new L.Point(Math.max(newMapSize.x, this._lastSize ? this._lastSize.x : 0),
+ Math.max(newMapSize.y, this._lastSize ? this._lastSize.y : 0));
+ var resizeCanvas = !this._lastSize || !newSize.equals(this._lastSize);
var topLeftChanged = this._topLeft === undefined || !newTopLeft.equals(this._topLeft);
var splitPosChanged = !newSplitPos.equals(this._splitPos);
@@ -267,7 +267,6 @@ L.CanvasTilePainter = L.Class.extend({
if (resizeCanvas || scaleChanged) {
this._setCanvasSize(newSize.x, newSize.y);
- this._lastSize = newSize;
}
else if (mapSizeChanged && topLeftChanged) {
this.clear();
@@ -291,14 +290,16 @@ L.CanvasTilePainter = L.Class.extend({
_paintWholeCanvas: function () {
- if (this._layer._debug)
- this.clear();
-
var zoom = this._lastZoom || Math.round(this._map.getZoom());
var part = this._lastPart || this._layer._selectedPart;
// Calculate all this here intead of doing it per tile.
var ctx = this._paintContext();
+
+ // First render the background / sheet grid if we can
+ if (this.renderBackground)
+ this.renderBackground(this._canvasCtx, ctx);
+
var tileRanges = ctx.paneBoundsList.map(this._layer._pxBoundsToTileRange, this._layer);
for (var rangeIdx = 0; rangeIdx < tileRanges.length; ++rangeIdx) {
@@ -324,6 +325,10 @@ L.CanvasTilePainter = L.Class.extend({
}
}
}
+
+ // Render on top to check matchup
+ if (this._layer._debug && this.renderBackground)
+ this.renderBackground(this._canvasCtx, ctx);
},
});
More information about the Libreoffice-commits
mailing list