loleaflet/src/control/Control.Header.js | 118 +++++++++++++++++++++++++++-----
1 file changed, 101 insertions(+), 17 deletions(-)
New commits:
commit 8049e28aaf2178a0c261b50ac88d82193f7e7a25
Author: Tomaž Vajngerl <tomaz.vajng...@collabora.co.uk>
AuthorDate: Sun Jul 7 21:14:05 2019 +0900
Commit: Tomaž Vajngerl <qui...@gmail.com>
CommitDate: Mon Jul 8 02:00:16 2019 +0200
tdf#124156 gesture support in Calc row/column header for resizing
The headers only worked when resizing with the mouse and the code
assumes that some variables are set when traveling with the mouse
over the header with mousemove. This adds pan gestures to resize
the row and column and refactors code so that it works without
the need for the varables (it recalculates then when gestrue
starts). Mouse events should still work as before.
Change-Id: I55d136497bed06f1be81be7709d34f95b17ab816
Reviewed-on: https://gerrit.libreoffice.org/75176
Reviewed-by: Tomaž Vajngerl <qui...@gmail.com>
Tested-by: Tomaž Vajngerl <qui...@gmail.com>
diff --git a/loleaflet/src/control/Control.Header.js
b/loleaflet/src/control/Control.Header.js
index e6be95ee0..81e784dcd 100644
--- a/loleaflet/src/control/Control.Header.js
+++ b/loleaflet/src/control/Control.Header.js
@@ -2,6 +2,7 @@
/*
* Control.Header
*/
+/* global L Hammer */
L.Control.Header = L.Control.extend({
options: {
@@ -24,6 +25,7 @@ L.Control.Header = L.Control.extend({
this._lastMouseOverIndex = undefined;
this._hitResizeArea = false;
this._overHeaderArea = false;
+ this._hammer = null;
this._selectionBackgroundGradient = [ '#3465A4', '#729FCF',
'#004586' ];
@@ -117,6 +119,14 @@ L.Control.Header = L.Control.extend({
},
mouseInit: function (element) {
+ var self = this;
+ if (this._hammer == null) {
+ this._hammer = new Hammer(element);
+ this._hammer.add(new Hammer.Pan({ threshold: 0,
pointers: 0 }));
+ this._hammer.on('panstart panmove panend', function
(event) {
+ self._onPan(event);
+ });
+ }
L.DomEvent.on(element, 'mousedown', this._onMouseDown, this);
},
@@ -256,6 +266,82 @@ L.Control.Header = L.Control.extend({
this._current = entry && !zeroSizeEntry ? entry.index : -1;
},
+ _onPan: function (event) {
+ if (event.pointerType != 'touch')
+ return;
+
+ if (event.type == 'panstart')
+ this._onPanStart(event);
+ else if (event.type == 'panmove') {
+ this._onPanMove(event);
+ }
+ else if (event.type == 'panend') {
+ this._onPanEnd(event);
+ }
+ },
+
+ _entryAtPoint: function(point) {
+ var position = this._getParallelPos(point);
+ position = position - this._position;
+
+ var eachEntry = this._data.getFirst();
+ while (eachEntry) {
+ var start = eachEntry.pos - eachEntry.size;
+ var end = eachEntry.pos;
+ if (position > start && position <= end) {
+ var resizeAreaStart = Math.max(start, end - 3);
+ if (this.isHeaderSelected(eachEntry.index)) {
+ resizeAreaStart = end -
this._resizeHandleSize;
+ }
+ var isMouseOverResizeArea = (position >
resizeAreaStart);
+ return {entry: eachEntry, hit:
isMouseOverResizeArea};
+ }
+ eachEntry = this._data.getNext();
+ }
+ return null;
+ },
+
+ _onPanStart: function (event) {
+ if (this._hitOutline(event))
+ return;
+
+ var target = event.target || event.srcElement;
+ if (!target)
+ return false;
+
+ var result =
this._entryAtPoint(this._hammerEventToCanvasPos(this._canvas, event));
+ if (!result)
+ return false;
+
+ this._mouseOverEntry = result.entry;
+ var rectangle =
this.getHeaderEntryBoundingClientRect(result.entry.index);
+ if (!rectangle)
+ return;
+
+ L.DomUtil.disableImageDrag();
+ L.DomUtil.disableTextSelection();
+
+ this._start = new L.Point(rectangle.left, rectangle.top);
+ this._offset = new L.Point(rectangle.right - event.center.x,
rectangle.bottom - event.center.y);
+ this._item = target;
+ this.onDragStart(this._item, this._start, this._offset,
{clientX: event.center.x, clientY: event.center.y});
+ },
+
+ _onPanMove: function (event) {
+ this.onDragMove(this._item, this._start, this._offset,
{clientX: event.center.x, clientY: event.center.y});
+ },
+
+ _onPanEnd: function (event) {
+ L.DomUtil.enableImageDrag();
+ L.DomUtil.enableTextSelection();
+
+ this.onDragEnd(this._item, this._start, this._offset, {clientX:
event.center.x, clientY: event.center.y});
+
+ this._mouseOverEntry = null;
+ this._item = this._start = this._offset = null;
+ this._dragging = false;
+ },
+
_mouseEventToCanvasPos: function(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
@@ -264,6 +350,14 @@ L.Control.Header = L.Control.extend({
};
},
+ _hammerEventToCanvasPos: function(canvas, event) {
+ var rect = canvas.getBoundingClientRect();
+ return {
+ x: event.center.x - rect.left,
+ y: event.center.y - rect.top
+ };
+ },
+
_onMouseOut: function (e) {
if (this._hitOutline(e))
return;
@@ -297,25 +391,15 @@ L.Control.Header = L.Control.extend({
this._overHeaderArea = true;
}
+ var mouseOverIndex = this._mouseOverEntry ?
this._mouseOverEntry.index : null;
var isMouseOverResizeArea = false;
- var pos =
this._getParallelPos(this._mouseEventToCanvasPos(this._canvas, e));
- pos = pos - this._position;
+ var result =
this._entryAtPoint(this._mouseEventToCanvasPos(this._canvas, e));
- var mouseOverIndex = this._mouseOverEntry ?
this._mouseOverEntry.index : undefined;
var entry = this._data.getFirst();
- while (entry) {
- var start = entry.pos - entry.size;
- var end = entry.pos;
- 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;
- }
- entry = this._data.getNext();
+ if (result) {
+ isMouseOverResizeArea = result.hit;
+ mouseOverIndex = result.entry.index;
+ entry = result.entry;
}
if (mouseOverIndex && (!this._mouseOverEntry || mouseOverIndex
!== this._mouseOverEntry.index)) {
@@ -441,7 +525,7 @@ L.Control.Header = L.Control.extend({
this._offset = new L.Point(rect.right - e.clientX, rect.bottom
- e.clientY);
this._item = target;
- this.onDragStart(this.item, this._start, this._offset, e);
+ this.onDragStart(this._item, this._start, this._offset, e);
},
_onMouseMoveForDragging: function (e) {
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
