[Libreoffice-commits] online.git: loleaflet/src
Tomaž Vajngerl (via logerrit)
logerrit at kemper.freedesktop.org
Tue Jul 2 06:05:36 UTC 2019
loleaflet/src/control/Control.ColumnHeader.js | 14 ++++++++++-
loleaflet/src/control/Control.Header.js | 31 ++++++++++++++++++--------
loleaflet/src/control/Control.RowHeader.js | 14 ++++++++++-
3 files changed, 48 insertions(+), 11 deletions(-)
New commits:
commit 14275b837e6bec94771ced9faaa57714f2c08f1b
Author: Tomaž Vajngerl <tomaz.vajngerl at collabora.co.uk>
AuthorDate: Mon Jul 1 14:30:18 2019 +0900
Commit: Tomaž Vajngerl <quikee at gmail.com>
CommitDate: Tue Jul 2 08:05:18 2019 +0200
tdf#124156 resize handle to header for resizing column/rows in calc
This adds a resize handle to calc column/row header, which is
enabled only on the currently selected column, which has a bigger
hit area, so it's easier to use - especially for resizing when
using touch devices.
Change-Id: Ia509fb61d0cc9161c585b17380f55034f77794ab
Reviewed-on: https://gerrit.libreoffice.org/74943
Reviewed-by: Tomaž Vajngerl <quikee at gmail.com>
Tested-by: Tomaž Vajngerl <quikee at gmail.com>
diff --git a/loleaflet/src/control/Control.ColumnHeader.js b/loleaflet/src/control/Control.ColumnHeader.js
index da1a87a7b..2d340be8d 100644
--- a/loleaflet/src/control/Control.ColumnHeader.js
+++ b/loleaflet/src/control/Control.ColumnHeader.js
@@ -198,7 +198,7 @@ L.Control.ColumnHeader = L.Control.Header.extend({
this._map.fire('updaterowcolumnheaders', {x: this._map._getTopLeftPoint().x, y: 0, offset: {x: undefined, y: 0}});
},
- drawHeaderEntry: function (entry, isOver, isHighlighted) {
+ drawHeaderEntry: function (entry, isOver, isHighlighted, isCurrent) {
if (!entry)
return;
@@ -243,6 +243,18 @@ L.Control.ColumnHeader = L.Control.Header.extend({
// draw background
ctx.fillStyle = isHighlighted ? selectionBackgroundGradient : isOver ? this._hoverColor : this._backgroundColor;
ctx.fillRect(startPar, startOrt, width, height);
+ // draw resize handle
+ var handleSize = this._resizeHandleSize;
+ if (isCurrent && width > 2 * handleSize) {
+ var center = startPar + width - handleSize / 2;
+ var y = startOrt + 2;
+ var h = height - 4;
+ var size = 2;
+ var offset = 1;
+ ctx.fillStyle = '#BBBBBB';
+ ctx.fillRect(center - size - offset, y + 2, size, h - 4);
+ ctx.fillRect(center + offset, y + 2, size, h - 4);
+ }
// draw text content
ctx.fillStyle = isHighlighted ? this._selectionTextColor : this._textColor;
ctx.font = this._font;
diff --git a/loleaflet/src/control/Control.Header.js b/loleaflet/src/control/Control.Header.js
index c2059da97..e6be95ee0 100644
--- a/loleaflet/src/control/Control.Header.js
+++ b/loleaflet/src/control/Control.Header.js
@@ -18,6 +18,7 @@ L.Control.Header = L.Control.extend({
this._canvasHeight = 0;
this._clicks = 0;
this._current = -1;
+ this._resizeHandleSize = 15;
this._selection = {start: -1, end: -1};
this._mouseOverEntry = null;
this._lastMouseOverIndex = undefined;
@@ -119,12 +120,16 @@ L.Control.Header = L.Control.extend({
L.DomEvent.on(element, 'mousedown', this._onMouseDown, this);
},
- select: function (entry) {
- this.drawHeaderEntry(entry, /*isOver=*/false, /*isHighlighted=*/true);
+ select: function (entry, isCurrent) {
+ this.drawHeaderEntry(entry, /*isOver=*/false, /*isHighlighted=*/true, isCurrent);
},
unselect: function (entry) {
- this.drawHeaderEntry(entry, /*isOver=*/false, /*isHighlighted=*/false);
+ this.drawHeaderEntry(entry, /*isOver=*/false, /*isHighlighted=*/false, false);
+ },
+
+ isHeaderSelected: function (index) {
+ return index === this._current;
},
isHighlighted: function (index) {
@@ -151,7 +156,7 @@ L.Control.Header = L.Control.extend({
// after clearing selection, we need to select the header entry for the current cursor position,
// since we can't be sure that the selection clearing is due to click on a cell
// different from the one where the cursor is already placed
- this.select(data.get(this._current));
+ this.select(data.get(this._current), true);
},
updateSelection: function(data, start, end) {
@@ -182,7 +187,7 @@ L.Control.Header = L.Control.extend({
itStart = entry.index;
}
if (selected) {
- this.select(entry);
+ this.select(entry, false);
}
if (x0 <= end && end <= x1) {
itEnd = entry.index;
@@ -246,7 +251,7 @@ L.Control.Header = L.Control.extend({
this.unselect(data.get(this._current));
// no selection when the cell cursor is slim
if (entry && !zeroSizeEntry)
- this.select(entry);
+ this.select(entry, true);
}
this._current = entry && !zeroSizeEntry ? entry.index : -1;
},
@@ -272,7 +277,8 @@ L.Control.Header = L.Control.extend({
this._overHeaderArea = false;
if (this._mouseOverEntry) {
- this.drawHeaderEntry(this._mouseOverEntry, /*isOver: */ false);
+ var mouseOverIsCurrent = (this._mouseOverEntry.index == this._current);
+ this.drawHeaderEntry(this._mouseOverEntry, /*isOver: */ false, null, mouseOverIsCurrent);
this._lastMouseOverIndex = this._mouseOverEntry.index + this._startHeaderIndex; // used by context menu
this._mouseOverEntry = null;
}
@@ -303,6 +309,9 @@ L.Control.Header = L.Control.extend({
if (pos > start && pos <= end) {
mouseOverIndex = entry.index;
var resizeAreaStart = Math.max(start, end - 3);
+ if (this.isHeaderSelected(entry.index)) {
+ resizeAreaStart = end - this._resizeHandleSize;
+ }
isMouseOverResizeArea = (pos > resizeAreaStart);
break;
}
@@ -310,8 +319,12 @@ L.Control.Header = L.Control.extend({
}
if (mouseOverIndex && (!this._mouseOverEntry || mouseOverIndex !== this._mouseOverEntry.index)) {
- this.drawHeaderEntry(this._mouseOverEntry, false);
- this.drawHeaderEntry(entry, true);
+ var mouseOverIsCurrent = false;
+ if (this._mouseOverEntry != null) {
+ mouseOverIsCurrent = (this._mouseOverEntry.index == this._current);
+ }
+ this.drawHeaderEntry(this._mouseOverEntry, false, null, mouseOverIsCurrent);
+ this.drawHeaderEntry(entry, true, null, entry.index == this._current);
this._mouseOverEntry = entry;
}
diff --git a/loleaflet/src/control/Control.RowHeader.js b/loleaflet/src/control/Control.RowHeader.js
index fa61c0516..12100b76a 100644
--- a/loleaflet/src/control/Control.RowHeader.js
+++ b/loleaflet/src/control/Control.RowHeader.js
@@ -191,7 +191,7 @@ L.Control.RowHeader = L.Control.Header.extend({
this._map.fire('updaterowcolumnheaders', {x: 0, y: this._map._getTopLeftPoint().y, offset: {x: 0, y: undefined}});
},
- drawHeaderEntry: function (entry, isOver, isHighlighted) {
+ drawHeaderEntry: function (entry, isOver, isHighlighted, isCurrent) {
if (!entry)
return;
@@ -236,6 +236,18 @@ L.Control.RowHeader = L.Control.Header.extend({
// draw background
ctx.fillStyle = isHighlighted ? selectionBackgroundGradient : isOver ? this._hoverColor : this._backgroundColor;
ctx.fillRect(startOrt, startPar, width, height);
+ // draw resize handle
+ var handleSize = this._resizeHandleSize;
+ if (isCurrent && height > 2 * handleSize) {
+ var center = startPar + height - handleSize / 2;
+ var x = startOrt + 2;
+ var w = width - 4;
+ var size = 2;
+ var offset = 1;
+ ctx.fillStyle = '#BBBBBB'
+ ctx.fillRect(x + 2, center - size - offset, w - 4, size);
+ ctx.fillRect(x + 2, center + offset, w - 4, size);
+ }
// draw text content
ctx.fillStyle = isHighlighted ? this._selectionTextColor : this._textColor;
ctx.font = this._font;
More information about the Libreoffice-commits
mailing list