[Libreoffice-commits] online.git: loleaflet/src
Tomaž Vajngerl (via logerrit)
logerrit at kemper.freedesktop.org
Fri Sep 6 14:44:48 UTC 2019
loleaflet/src/layer/tile/TileLayer.TableOverlay.js | 195 ++++++++++++++++-----
1 file changed, 150 insertions(+), 45 deletions(-)
New commits:
commit 3ae259238f049e54ae86657d3f4ef731531aab6e
Author: Tomaž Vajngerl <tomaz.vajngerl at collabora.co.uk>
AuthorDate: Fri Sep 6 09:20:57 2019 +0200
Commit: Tomaž Vajngerl <quikee at gmail.com>
CommitDate: Fri Sep 6 16:44:31 2019 +0200
loleaflet: add column/row selection markers for the table
Change-Id: Iad1037338057e798c3a83695fedb4e6f9ea968f4
Reviewed-on: https://gerrit.libreoffice.org/78689
Reviewed-by: Tomaž Vajngerl <quikee at gmail.com>
Tested-by: Tomaž Vajngerl <quikee at gmail.com>
diff --git a/loleaflet/src/layer/tile/TileLayer.TableOverlay.js b/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
index f2d72e33e..d02c89b59 100644
--- a/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
+++ b/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
@@ -8,15 +8,36 @@ L.TileLayer.include({
this._tableColumnMarkers = [];
this._tableRowMarkers = [];
this._tableMarkersDragged = false;
+ this._tableSelectionColumnMarkers = [];
+ this._tableSelectionRowMarkers = [];
+ this._selectionHeaderDistanceFromTable = 6;
+ this._selectionHeaderHeight = 16;
+ },
+ _convertPixelToTwips: function(pixel) {
+ var point = this._latLngToTwips(this._map.unproject(new L.Point(pixel, 0)));
+ return point.x;
},
_setMarkerPosition: function(marker) {
- var point = this._twipsToLatLng(marker._pointTwips, this._map.getZoom());
+ var point = this._twipsToLatLng(marker._positionTwips, this._map.getZoom());
point = this._map.project(point);
var markerRect = marker._icon.getBoundingClientRect();
- if (marker._type.startsWith('column'))
+
+ var raiseDelta;
+ var aboveSelectionHeaders = this._selectionHeaderDistanceFromTable + this._selectionHeaderHeight;
+ aboveSelectionHeaders = this._convertPixelToTwips(aboveSelectionHeaders);
+
+ if (marker._type.startsWith('column')) {
point = point.subtract(new L.Point(markerRect.width / 2, markerRect.height));
- else
+ raiseDelta = new L.Point(0, aboveSelectionHeaders);
+ }
+ else {
point = point.subtract(new L.Point(markerRect.width, markerRect.height / 2));
+ raiseDelta = new L.Point(aboveSelectionHeaders, 0);
+ }
+
+ raiseDelta = this._map.project(this._twipsToLatLng(raiseDelta, this._map.getZoom()));
+ point = point.subtract(raiseDelta);
+
point = this._map.unproject(point);
marker.setLatLng(point);
@@ -47,29 +68,25 @@ L.TileLayer.include({
marker._max = parseInt(entry.max);
marker._index = parseInt(entry.index);
if (markerType === 'column') {
- marker._pointTwips = new L.Point(this._tablePositionColumnOffset + marker._position, left);
- marker._pointTop = new L.Point(this._tablePositionColumnOffset + marker._position, left);
- marker._pointTop = this._twipsToLatLng(marker._pointTop, this._map.getZoom());
- marker._pointBottom = new L.Point(this._tablePositionColumnOffset + marker._position, right);
- marker._pointBottom = this._twipsToLatLng(marker._pointBottom, this._map.getZoom());
+ marker._positionTwips = new L.Point(this._tablePositionColumnOffset + marker._position, left);
+ marker._topBorderPoint = new L.Point(this._tablePositionColumnOffset + marker._position, left);
+ marker._topBorderPoint = this._twipsToLatLng(marker._topBorderPoint, this._map.getZoom());
+ marker._bottomBorderPoint = new L.Point(this._tablePositionColumnOffset + marker._position, right);
+ marker._bottomBorderPoint = this._twipsToLatLng(marker._bottomBorderPoint, this._map.getZoom());
}
else {
- marker._pointTwips = new L.Point(left, this._tablePositionRowOffset + marker._position);
- marker._pointTop = new L.Point(left, this._tablePositionRowOffset + marker._position);
- marker._pointTop = this._twipsToLatLng(marker._pointTop, this._map.getZoom());
- marker._pointBottom = new L.Point(right, this._tablePositionRowOffset + marker._position);
- marker._pointBottom = this._twipsToLatLng(marker._pointBottom, this._map.getZoom());
+ marker._positionTwips = new L.Point(left, this._tablePositionRowOffset + marker._position);
+ marker._topBorderPoint = new L.Point(left, this._tablePositionRowOffset + marker._position);
+ marker._topBorderPoint = this._twipsToLatLng(marker._topBorderPoint, this._map.getZoom());
+ marker._bottomBorderPoint = new L.Point(right, this._tablePositionRowOffset + marker._position);
+ marker._bottomBorderPoint = this._twipsToLatLng(marker._bottomBorderPoint, this._map.getZoom());
}
this._setMarkerPosition(marker);
- marker.on('dragstart drag dragend', this._onTableResizeMarkerDrag, this);
+ marker.on('dragstart drag dragend', this._onTableBorderResizeMarkerDrag, this);
return marker;
},
- _onTableSelectedMsg: function (textMsg) {
- if (this._tableMarkersDragged == true) {
- return;
- }
-
- // Clean-up first
+ _updateTableMarkers: function() {
+ // Clean-up first
var markerIndex;
for (markerIndex = 0; markerIndex < this._tableColumnMarkers.length; markerIndex++) {
this._map.removeLayer(this._tableColumnMarkers[markerIndex]);
@@ -81,52 +98,140 @@ L.TileLayer.include({
}
this._tableRowMarkers = [];
- // Parse the message
- textMsg = textMsg.substring('tableselected:'.length + 1);
- var message = JSON.parse(textMsg);
+ for (markerIndex = 0; markerIndex < this._tableSelectionColumnMarkers.length; markerIndex++) {
+ this._map.removeLayer(this._tableSelectionColumnMarkers[markerIndex]);
+ }
+ this._tableSelectionColumnMarkers = [];
+
+ for (markerIndex = 0; markerIndex < this._tableSelectionRowMarkers.length; markerIndex++) {
+ this._map.removeLayer(this._tableSelectionRowMarkers[markerIndex]);
+ }
+ this._tableSelectionRowMarkers = [];
// Create markers
- if (message.rows && message.rows.entries.length > 0 && message.columns && message.columns.entries.length > 0) {
- this._tablePositionColumnOffset = parseInt(message.columns.tableOffset);
- this._tablePositionRowOffset = parseInt(message.rows.tableOffset);
- var firstRowPosition = parseInt(message.rows.left) + this._tablePositionRowOffset;
- var lastRowPosition = parseInt(message.rows.right) + this._tablePositionRowOffset;
- var firstColumnPosition = parseInt(message.columns.left) + this._tablePositionColumnOffset;
- var lastColumnPosition = parseInt(message.columns.right) + this._tablePositionColumnOffset;
+ if (this._currentTableData.rows && this._currentTableData.rows.entries.length > 0 && this._currentTableData.columns && this._currentTableData.columns.entries.length > 0) {
+ this._tablePositionColumnOffset = parseInt(this._currentTableData.columns.tableOffset);
+ this._tablePositionRowOffset = parseInt(this._currentTableData.rows.tableOffset);
+ var firstRowPosition = parseInt(this._currentTableData.rows.left) + this._tablePositionRowOffset;
+ var lastRowPosition = parseInt(this._currentTableData.rows.right) + this._tablePositionRowOffset;
+ var firstColumnPosition = parseInt(this._currentTableData.columns.left) + this._tablePositionColumnOffset;
+ var lastColumnPosition = parseInt(this._currentTableData.columns.right) + this._tablePositionColumnOffset;
var markerX, i, entry;
- entry = { type: 'left', position: message.columns.left, index: 0 };
- markerX = this._createMarker('column', entry, firstRowPosition, lastRowPosition);
- this._tableColumnMarkers.push(markerX);
+ var columnPositions = [];
+ var rowPositions = [];
+
+ columnPositions.push(parseInt(this._currentTableData.columns.left));
+ if (this._map.getDocType() !== 'presentation') {
+ entry = { type: 'left', position: this._currentTableData.columns.left, index: 0 };
+ markerX = this._createMarker('column', entry, firstRowPosition, lastRowPosition);
+ this._tableColumnMarkers.push(markerX);
+ }
- for (i = 0; i < message.columns.entries.length; i++) {
- entry = message.columns.entries[i];
+ for (i = 0; i < this._currentTableData.columns.entries.length; i++) {
+ entry = this._currentTableData.columns.entries[i];
+ columnPositions.push(parseInt(entry.position));
entry.type = 'middle';
entry.index = i;
markerX = this._createMarker('column', entry, firstRowPosition, lastRowPosition);
this._tableColumnMarkers.push(markerX);
}
- entry = { type: 'right', position: message.columns.right, index: 0 };
+ columnPositions.push(parseInt(this._currentTableData.columns.right));
+
+ entry = { type: 'right', position: this._currentTableData.columns.right, index: 0 };
markerX = this._createMarker('column', entry, firstRowPosition, lastRowPosition);
this._tableColumnMarkers.push(markerX);
- for (i = 0; i < message.rows.entries.length; i++) {
- entry = message.rows.entries[i];
+ this._addSelectionMarkers('column', columnPositions, firstRowPosition, lastRowPosition);
+
+ rowPositions.push(parseInt(this._currentTableData.rows.left));
+
+ for (i = 0; i < this._currentTableData.rows.entries.length; i++) {
+ entry = this._currentTableData.rows.entries[i];
+ rowPositions.push(parseInt(entry.position));
entry.type = 'middle';
entry.index = i;
markerX = this._createMarker('row', entry, firstColumnPosition, lastColumnPosition);
this._tableRowMarkers.push(markerX);
}
- entry = { type: 'right', position: message.rows.right };
+ rowPositions.push(parseInt(this._currentTableData.rows.right));
+ entry = { type: 'right', position: this._currentTableData.rows.right };
markerX = this._createMarker('row', entry, firstColumnPosition, lastColumnPosition);
this._tableRowMarkers.push(markerX);
+
+ this._addSelectionMarkers('row', rowPositions, firstColumnPosition, lastColumnPosition);
+ }
+ },
+ _onZoom: function () {
+ this._updateTableMarkers();
+ },
+ _onTableSelectedMsg: function (textMsg) {
+ if (this._tableMarkersDragged == true) {
+ return;
+ }
+ // Parse the message
+ textMsg = textMsg.substring('tableselected:'.length + 1);
+ var message = JSON.parse(textMsg);
+ this._currentTableData = message;
+ this._updateTableMarkers();
+ this._map.on('zoomend', L.bind(this._onZoom, this));
+ },
+ _addSelectionMarkers: function (type, positions, start, end) {
+ if (positions.length < 2)
+ return;
+
+ var startX, endX, startY, endY;
+ var point1, point2;
+
+ var delta1 = this._convertPixelToTwips(this._selectionHeaderDistanceFromTable);
+ var delta2 = this._convertPixelToTwips(this._selectionHeaderDistanceFromTable + this._selectionHeaderHeight);
+
+ for (var i = 0; i < positions.length - 1; i++) {
+ if (type === 'column') {
+ startX = this._tablePositionColumnOffset + positions[i];
+ 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());
+ }
+ 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());
+ }
+
+ var bounds = new L.LatLngBounds(point1, point2);
+ var selectionRectangle = new L.Rectangle(bounds, {
+ stroke: true, weight: 1, color: '#777777',
+ fillOpacity: 1, fillColor: '#dddddd'
+ });
+
+ selectionRectangle._start = { x: startX, y: startY };
+ selectionRectangle._end = { x: endX, y: endY };
+
+ if (type === 'column')
+ this._tableSelectionColumnMarkers.push(selectionRectangle);
+ else
+ this._tableSelectionRowMarkers.push(selectionRectangle);
+
+ selectionRectangle.on('click', this._onSelectRowColumnClick, this);
+ this._map.addLayer(selectionRectangle);
}
},
+ _onSelectRowColumnClick: function(e) {
+ // fake seelcting a column
+ 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);
+ },
// Update dragged text selection.
- _onTableResizeMarkerDrag: function (e) {
+ _onTableBorderResizeMarkerDrag: function (e) {
if (e.type === 'dragstart') {
e.target.isDragged = true;
this._tableMarkersDragged = true;
@@ -148,17 +253,17 @@ L.TileLayer.include({
var newPosition;
if (e.target._type.startsWith('column')) {
newPosition = aMousePosition.x - this._tablePositionColumnOffset;
- e.target._pointTop.lng = aLatLonPosition.lng;
- e.target._pointBottom.lng = aLatLonPosition.lng;
+ e.target._topBorderPoint.lng = aLatLonPosition.lng;
+ e.target._bottomBorderPoint.lng = aLatLonPosition.lng;
}
else {
newPosition = aMousePosition.y - this._tablePositionRowOffset;
- e.target._pointTop.lat = aLatLonPosition.lat;
- e.target._pointBottom.lat = aLatLonPosition.lat;
+ e.target._topBorderPoint.lat = aLatLonPosition.lat;
+ e.target._bottomBorderPoint.lat = aLatLonPosition.lat;
}
e.target._position = newPosition;
- var bounds = new L.LatLngBounds(e.target._pointTop, e.target._pointBottom);
+ var bounds = new L.LatLngBounds(e.target._topBorderPoint, e.target._bottomBorderPoint);
if (e.type === 'dragstart') {
this._rectangle = new L.Rectangle(bounds);
More information about the Libreoffice-commits
mailing list