[Libreoffice-commits] online.git: Branch 'feature/calc-canvas2' - 3 commits - loleaflet/src

Michael Meeks (via logerrit) logerrit at kemper.freedesktop.org
Wed Sep 16 13:18:36 UTC 2020


 loleaflet/src/layer/tile/CalcTileLayer.js   |  103 ++++++++++++++++++++++++++--
 loleaflet/src/layer/tile/CanvasTileLayer.js |   24 ++++--
 2 files changed, 112 insertions(+), 15 deletions(-)

New commits:
commit a31dd80975f0613651d4b753432e74fafb0564cf
Author:     Michael Meeks <michael.meeks at collabora.com>
AuthorDate: Tue Sep 15 19:53:16 2020 +0100
Commit:     Michael Meeks <michael.meeks at collabora.com>
CommitDate: Wed Sep 16 10:03:06 2020 +0100

    calc grid: re-render the canvas when we get grid details.
    
    Change-Id: I3d1d1485e561d8c807daa0dfe0a9f2cb5651d31b

diff --git a/loleaflet/src/layer/tile/CanvasTileLayer.js b/loleaflet/src/layer/tile/CanvasTileLayer.js
index 9eabee6fe..bbc4c3cfc 100644
--- a/loleaflet/src/layer/tile/CanvasTileLayer.js
+++ b/loleaflet/src/layer/tile/CanvasTileLayer.js
@@ -375,6 +375,7 @@ L.CanvasTileLayer = L.TileLayer.extend({
 		}
 		this._map.on('resize zoomend', this._painter.update, this._painter);
 		this._map.on('splitposchanged', this._painter.update, this._painter);
+		this._map.on('sheetgeometrychanged', this._painter.update, this._painter);
 		this._map.on('move', this._syncTilePanePos, this);
 	},
 
commit 6eeff3ac8e3717712635a015db4290e5673c23c0
Author:     Michael Meeks <michael.meeks at collabora.com>
AuthorDate: Tue Sep 15 11:02:54 2020 +0100
Commit:     Michael Meeks <michael.meeks at collabora.com>
CommitDate: Wed Sep 16 10:00:55 2020 +0100

    calc grid: fix this interleaving.
    
    When the span starts in the middle of the view don't render backwards.
    
    Change-Id: Icc97fef88a65c0ca83167ddb72c03bece9a8e047

diff --git a/loleaflet/src/layer/tile/CalcTileLayer.js b/loleaflet/src/layer/tile/CalcTileLayer.js
index 8a94e0799..8b9b3c4d9 100644
--- a/loleaflet/src/layer/tile/CalcTileLayer.js
+++ b/loleaflet/src/layer/tile/CalcTileLayer.js
@@ -1845,8 +1845,10 @@ L.SheetDimension = L.Class.extend({
 			    (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 firstCorePx = Math.max(
+					spanFirstCorePx,
+					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) {
commit 622e470d855d664ab72c546766ac3ec250754d61
Author:     Michael Meeks <michael.meeks at collabora.com>
AuthorDate: Wed Sep 9 10:05:44 2020 +0100
Commit:     Michael Meeks <michael.meeks at collabora.com>
CommitDate: Wed Sep 16 09:43:30 2020 +0100

    calc canvas: start of direct grid rendering.
    
    Change-Id: If471fc4ff94b3cb8e2897ac76e712aa3958fc7d2

diff --git a/loleaflet/src/layer/tile/CalcTileLayer.js b/loleaflet/src/layer/tile/CalcTileLayer.js
index 98238c598..8a94e0799 100644
--- a/loleaflet/src/layer/tile/CalcTileLayer.js
+++ b/loleaflet/src/layer/tile/CalcTileLayer.js
@@ -741,6 +741,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) {
@@ -918,12 +979,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());
+						}
 					}
 				}
 			}
@@ -1773,6 +1837,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) {
@@ -2153,6 +2236,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 0790a24c7..9eabee6fe 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