loleaflet/Makefile.am | 1 loleaflet/src/core/Socket.js | 7 - loleaflet/src/layer/CalcGridLines.js | 112 ---------------------------- loleaflet/src/layer/tile/CalcTileLayer.js | 101 +++++++++++++++++++++++-- loleaflet/src/layer/tile/CanvasTileLayer.js | 26 ++++-- loleaflet/src/map/Map.js | 1 6 files changed, 111 insertions(+), 137 deletions(-)
New commits: commit 6c1d69e248e36c2afc9499bcacbf5750d47e19c6 Author: Michael Meeks <michael.me...@collabora.com> AuthorDate: Wed Sep 9 22:47:14 2020 +0100 Commit: Michael Meeks <michael.me...@collabora.com> CommitDate: Wed Sep 9 22:47:14 2020 +0100 calc canvas: remove svg grid-line background layer. occluded by opaque canvas above it anyway. Change-Id: I954da92c43ae680e6041cbff6092f9a2ac71ebe2 diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am index 44c4886fa..62036d993 100644 --- a/loleaflet/Makefile.am +++ b/loleaflet/Makefile.am @@ -221,7 +221,6 @@ LOLEAFLET_JS =\ src/layer/marker/Marker.Popup.js \ src/layer/LayerGroup.js \ src/layer/FeatureGroup.js \ - src/layer/CalcGridLines.js \ src/layer/vector/Renderer.js \ src/layer/vector/Path.js \ src/layer/vector/Path.Popup.js \ diff --git a/loleaflet/src/core/Socket.js b/loleaflet/src/core/Socket.js index fa78bf1a3..473c85ce5 100644 --- a/loleaflet/src/core/Socket.js +++ b/loleaflet/src/core/Socket.js @@ -994,13 +994,6 @@ L.Socket = L.Class.extend({ tileHeightTwips: tileHeightTwips, docType: command.type }); - - this._map.options.backgroundLayerEnabled = !(docLayer instanceof L.CanvasTileLayer); - - if (this._map.options.backgroundLayerEnabled) { - docLayer.backgroundLayer = new L.CalcBackground().addTo(this._map); - (new L.CalcGridLines()).addTo(this._map); - } } else { if (command.type === 'presentation' && diff --git a/loleaflet/src/layer/CalcGridLines.js b/loleaflet/src/layer/CalcGridLines.js deleted file mode 100644 index fce802101..000000000 --- a/loleaflet/src/layer/CalcGridLines.js +++ /dev/null @@ -1,112 +0,0 @@ -/* - * 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 headerInfo, pos; - - // Aux stuff to convert css pixels to map coordinate units - var pixelToMapUnitRatio = this._map.options.crs.scale(this._map.getZoom()); - - if (ev.updatecolumns) { - headerInfo = new L.Control.Header.HeaderInfo(this._map, true /* isCol */); - this._colLines.clearLayers(); - - headerInfo.forEachElement(function(columnData) { - pos = headerInfo.headerToDocPos(columnData.pos) / pixelToMapUnitRatio; - this._colLines.addLayer( - L.polyline([[[ L.Util.MIN_SAFE_INTEGER, pos ],[ L.Util.MAX_SAFE_INTEGER, pos ]]], - this.options - ) - ); - }.bind(this)); - } - - if (ev.updaterows) { - headerInfo = new L.Control.Header.HeaderInfo(this._map, false /* isCol */); - this._rowLines.clearLayers(); - - headerInfo.forEachElement(function(rowData) { - pos = headerInfo.headerToDocPos(rowData.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 - L.polyline([[[ -pos, L.Util.MIN_SAFE_INTEGER ],[ -pos, L.Util.MAX_SAFE_INTEGER ]]], - this.options - ) - ); - }.bind(this)); - } - } - -}); - diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js index 673af34b8..312fbd45b 100644 --- a/loleaflet/src/map/Map.js +++ b/loleaflet/src/map/Map.js @@ -42,7 +42,6 @@ L.Map = L.Evented.extend({ urlPrefix: 'lool', wopiSrc: '', cursorURL: L.LOUtil.getURL('cursors'), - backgroundLayerEnabled: true, }, // Control.UIManager instance, set in main.js commit f9f07d165357bb9e431371a77874aed0932e0404 Author: Michael Meeks <michael.me...@collabora.com> AuthorDate: Wed Sep 9 10:05:44 2020 +0100 Commit: Michael Meeks <michael.me...@collabora.com> CommitDate: Wed Sep 9 22:43:22 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 fc96f0546..7cf1318a7 100644 --- a/loleaflet/src/layer/tile/CalcTileLayer.js +++ b/loleaflet/src/layer/tile/CalcTileLayer.js @@ -735,6 +735,67 @@ L.CalcTileLayer = L.CanvasTileLayer.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) { @@ -912,12 +973,15 @@ L.CalcTileLayer = L.CanvasTileLayer.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()); + } } } } @@ -1767,6 +1831,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) { @@ -2147,6 +2230,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 ab7850853..e60042334 100644 --- a/loleaflet/src/layer/tile/CanvasTileLayer.js +++ b/loleaflet/src/layer/tile/CanvasTileLayer.js @@ -91,7 +91,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); @@ -116,6 +115,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 () { @@ -148,13 +149,13 @@ L.CanvasTilePainter = L.Class.extend({ splitPanesContext.getPxBoundList(viewBounds) : [viewBounds]; - return { tileSize: tileSize, + return { canvasSize: this._lastSize, + tileSize: tileSize, viewBounds: viewBounds, paneBoundsList: paneBoundsList }; }, paint: function (tile, ctx) { - if (!ctx) ctx = this._paintContext(); @@ -251,9 +252,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); @@ -273,7 +274,6 @@ L.CanvasTilePainter = L.Class.extend({ if (resizeCanvas || scaleChanged) { this._setCanvasSize(newSize.x, newSize.y); - this._lastSize = newSize; } else if (mapSizeChanged && topLeftChanged) { this.clear(); @@ -298,14 +298,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) { @@ -331,6 +333,10 @@ L.CanvasTilePainter = L.Class.extend({ } } } + + // Render on top to check matchup + if (this._layer._debug && this.renderBackground) + this.renderBackground(this._canvasCtx, ctx); }, }); _______________________________________________ Libreoffice-commits mailing list libreoffice-comm...@lists.freedesktop.org https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits