loleaflet: use the empty tile-container as a proxy...

... for the canvas to get the mouse-move+drag events and the various
touch events. This is needed because the canvas element (created by
L.CanvasTileLayer) is a sibling of the map-pane div and not a decendant.
Any change in canvas-size is also applied on the tile-container. Also if
there is a move event, counter adjust the tile-container position so
that it is precisely over the canvas at all times.

Change-Id: I5d5bc070c0063c5f24c4b1cb1448db0ce19841bd
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/100480
Tested-by: Jenkins
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Dennis Francis <dennis.francis@collabora.com>
This commit is contained in:
Dennis Francis 2020-08-07 14:36:42 +05:30
parent 4f58b83116
commit 0d366059e9

View file

@ -119,6 +119,15 @@ L.CanvasTilePainter = L.Class.extend({
this._width = parseInt(this._canvas.style.width);
this._height = parseInt(this._canvas.style.height);
this.clear();
this._syncTileContainerSize();
},
_syncTileContainerSize: function () {
var tileContainer = this._layer._container;
if (tileContainer) {
tileContainer.style.width = this._width + 'px';
tileContainer.style.height = this._height + 'px';
}
},
clear: function () {
@ -416,11 +425,6 @@ L.CanvasTileLayer = L.TileLayer.extend({
this._canvas = L.DomUtil.create('canvas', '', this._canvasContainer);
this._painter = new L.CanvasTilePainter(this, L.getDpiScaleFactor());
// FIXME: A hack to get the Hammer events from the pane, which does not happen with
// no tile img's in it.
this._container.style.width = this._canvas.style.width;
this._container.style.height = this._canvas.style.height;
this._container.style.position = 'absolute';
if (L.Browser.cypressTest) {
@ -431,6 +435,15 @@ L.CanvasTileLayer = L.TileLayer.extend({
this._map.on('moveend', this._painter.stopUpdates, this._painter);
this._map.on('zoomend', this._painter.update, this._painter);
this._map.on('splitposchanged', this._painter.update, this._painter);
this._map.on('move', this._syncTilePanePos, this);
},
_syncTilePanePos: function () {
var tilePane = this._container.parentElement;
if (tilePane) {
var mapPanePos = this._map._getMapPanePos();
L.DomUtil.setPosition(tilePane, new L.Point(-mapPanePos.x , -mapPanePos.y));
}
},
hasSplitPanesSupport: function () {