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 <[email protected]> AuthorDate: Mon Jul 1 14:30:18 2019 +0900 Commit: Tomaž Vajngerl <[email protected]> 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 <[email protected]> Tested-by: Tomaž Vajngerl <[email protected]> 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; _______________________________________________ Libreoffice-commits mailing list [email protected] https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
