tdf#128509: Make the column and row headers tappable on touch devices
After you have sleected a table on a text document in the iOS (and
Android) app, you are supposed to be able to tap the "header"
rectangle that is painted for each column and row, in order to select
the whole of that column or row. But this worked only in web-based
Online with a desktop browser, for clicking it with a mouse.
Was much more complicated than expected. But now it seems to work. One
needs to use Marker instead of Rectangle.
Change-Id: I4f701c70dd4edce6a3edb6fcf9feffa7b7969a8c
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/87079
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Tor Lillqvist <tml@collabora.com>
diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index 7d33266..4f80a03 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -91,6 +91,15 @@
cursor: row-resize;
}
.table-row-or-column-select-marker {
margin: 0px;
width: 24px;
height: 24px;
background-image: url('images/table-row-or-column-select-marker.svg');
background-size: cover;
background-repeat: no-repeat;
}
.table-move-marker {
margin-left: 0px;
margin-top: 0px;
diff --git a/loleaflet/images/table-row-or-column-select-marker.svg b/loleaflet/images/table-row-or-column-select-marker.svg
new file mode 100644
index 0000000..6ee9d46
--- /dev/null
+++ b/loleaflet/images/table-row-or-column-select-marker.svg
@@ -0,0 +1,3 @@
<svg version="1.1" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="1" height="1" fill="#dddddd" />
</svg>
diff --git a/loleaflet/src/layer/tile/TileLayer.TableOverlay.js b/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
index 25e8f93..96c27ec 100644
--- a/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
+++ b/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
@@ -18,6 +18,11 @@
var point = this._latLngToTwips(this._map.unproject(new L.Point(pixel, 0)));
return point.x;
},
_convertTwipsToPixels: function(twips) {
var point = this._twipsToLatLng(twips)
point = this._map.project(point);
return point;
},
hasTableSelection: function () {
return this._currentTableData.rows != null || this._currentTableData.columns != null;
},
@@ -218,10 +223,14 @@
return;
var startX, endX, startY, endY;
var point1, point2;
var point1;
var delta1 = this._convertPixelToTwips(this._selectionHeaderDistanceFromTable);
var delta2 = this._convertPixelToTwips(this._selectionHeaderDistanceFromTable + this._selectionHeaderHeight);
// The 24 is the height and width of the .table-row-or-column-select-marker in loleaflet.css
var height = 24;
var width = height;
var selectionMarkerNominalSize = this._convertPixelToTwips(width);
for (var i = 0; i < positions.length - 1; i++) {
if (type === 'column') {
@@ -229,23 +238,29 @@
endX = this._tablePositionColumnOffset + positions[i + 1];
startY = start;
endY = end;
point1 = this._twipsToLatLng(new L.Point(startX, startY - delta1), this._map.getZoom());
point2 = this._twipsToLatLng(new L.Point(endX, startY - delta2), this._map.getZoom());
point1 = this._twipsToLatLng(new L.Point(startX, startY - delta1 - selectionMarkerNominalSize),
this._map.getZoom());
width = this._convertTwipsToPixels(new L.Point(endX - startX, 0)).x - 2;
}
else {
startX = start;
endX = end;
startY = this._tablePositionRowOffset + positions[i];
endY = this._tablePositionRowOffset + positions[i + 1];
point1 = this._twipsToLatLng(new L.Point(startX - delta1, startY), this._map.getZoom());
point2 = this._twipsToLatLng(new L.Point(startX - delta2, endY), this._map.getZoom());
point1 = this._twipsToLatLng(new L.Point(startX - delta1 - selectionMarkerNominalSize, startY),
this._map.getZoom());
height = this._convertTwipsToPixels(new L.Point(0, endY - startY)).y - 2;
}
var bounds = new L.LatLngBounds(point1, point2);
var selectionRectangle = new L.Rectangle(bounds, {
stroke: true, weight: 1, color: '#777777',
fillOpacity: 1, fillColor: '#dddddd'
});
var selectionRectangle = L.marker(point1,
{
icon: L.divIcon({
className: 'table-row-or-column-select-marker',
iconSize: [width, height],
iconAnchor: [0, 0],
}),
draggable: true,
});
selectionRectangle._start = { x: startX, y: startY };
selectionRectangle._end = { x: endX, y: endY };
@@ -255,7 +270,10 @@
else
this._tableSelectionRowMarkers.push(selectionRectangle);
selectionRectangle.on('click', this._onSelectRowColumnClick, this);
selectionRectangle.on('down', this._onSelectRowColumnClick, this);
// We don't actually want this to be draggable of course, so use a dragstart
// handler that freezes it.
selectionRectangle.on('dragstart drag dragend', this._onSelectRowColumnDrag, this);
this._map.addLayer(selectionRectangle);
}
},
@@ -264,6 +282,10 @@
this._postSelectTextEvent('start', e.target._start.x + 5, e.target._start.y + 5);
this._postSelectTextEvent('end', e.target._end.x - 5, e.target._end.y - 5);
},
_onSelectRowColumnDrag: function(e) {
e.target.freezeX(true);
e.target.freezeY(true);
},
// Update dragged text selection.
_onTableBorderResizeMarkerDrag: function (e) {
