loleaflet/css/loleaflet.css | 9 +++
loleaflet/images/table-row-or-column-select-marker.svg | 3 +
loleaflet/src/layer/tile/TileLayer.TableOverlay.js | 46 ++++++++++++-----
3 files changed, 46 insertions(+), 12 deletions(-)
New commits:
commit ebaca16c4f28ae7a499c632b70b24eaaa1083439
Author: Tor Lillqvist <t...@collabora.com>
AuthorDate: Mon Jan 20 16:12:47 2020 +0200
Commit: Tor Lillqvist <t...@collabora.com>
CommitDate: Tue Jan 21 10:26:58 2020 +0100
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 <jenkinscollaboraoff...@gmail.com>
Reviewed-by: Tor Lillqvist <t...@collabora.com>
diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index 7d3326687..4f80a03af 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 000000000..6ee9d4673
--- /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 25e8f93e7..96c27ecb5 100644
--- a/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
+++ b/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
@@ -18,6 +18,11 @@ L.TileLayer.include({
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 @@ L.TileLayer.include({
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 @@ L.TileLayer.include({
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 @@ L.TileLayer.include({
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 @@ L.TileLayer.include({
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) {
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
