loleaflet/css/loleaflet.css | 24 ++++++++++++++++++
loleaflet/images/table-column-resize-marker-hover.svg | 10 +++++++
loleaflet/images/table-row-resize-marker-hover.svg | 10 +++++++
loleaflet/src/dom/Draggable.js | 16 ++++++++++++
loleaflet/src/layer/marker/Marker.Drag.js | 10 +++++++
loleaflet/src/layer/tile/TileLayer.TableOverlay.js | 5 +++
6 files changed, 75 insertions(+)
New commits:
commit 7467710dab48d30fc3dcee66fc5a2fdec46184ae
Author: Tomaž Vajngerl <tomaz.vajng...@collabora.co.uk>
AuthorDate: Sun Aug 18 10:22:21 2019 +0900
Commit: Tomaž Vajngerl <qui...@gmail.com>
CommitDate: Mon Aug 19 01:03:20 2019 +0200
table handles: drag only in x/y axis, marker on hover, cursor
This adds:
- support to freeze movement to x or y axis when dragging the
marker (depends on the marker type - column or row marker)
- change marker on hover, which uses a different image, which is
solved in css
- change cursor to col-resize / row-resize when howering over the
marker
Change-Id: I63bf5e82860ef75f2dfde31ee2ab7ede6f61ce70
Reviewed-on: https://gerrit.libreoffice.org/77652
Reviewed-by: Tomaž Vajngerl <qui...@gmail.com>
Tested-by: Tomaž Vajngerl <qui...@gmail.com>
diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index 62cecafa9..08d172546 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -49,6 +49,18 @@
background-image: url('images/table-column-resize-marker.svg');
background-size: 100% 100%;
background-repeat: no-repeat;
+ cursor: col-resize;
+}
+
+.table-column-resize-marker:hover {
+ margin-left: 0px;
+ margin-top: 0px;
+ width: 24px;
+ height: 24px;
+ background-image: url('images/table-column-resize-marker-hover.svg');
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ cursor: col-resize;
}
.table-row-resize-marker {
@@ -59,6 +71,18 @@
background-image: url('images/table-row-resize-marker.svg');
background-size: 100% 100%;
background-repeat: no-repeat;
+ cursor: row-resize;
+}
+
+.table-row-resize-marker:hover {
+ margin-left: 0px;
+ margin-top: 0px;
+ width: 24px;
+ height: 24px;
+ background-image: url('images/table-row-resize-marker-hover.svg');
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ cursor: row-resize;
}
body {
diff --git a/loleaflet/images/table-column-resize-marker-hover.svg
b/loleaflet/images/table-column-resize-marker-hover.svg
new file mode 100644
index 000000000..a805d05ae
--- /dev/null
+++ b/loleaflet/images/table-column-resize-marker-hover.svg
@@ -0,0 +1,10 @@
+<svg version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg";>
+ <g transform="matrix(0 -.70331 .70329 0 4.7475 27.253)" fill="#fff"
fill-opacity=".86275" stroke="#38f" stroke-linecap="round">
+ <rect x="2.5185" y="2.5185" width="26.963" height="26.963" rx="4.4235"
ry="4.4236" stroke-width="1.4745"/>
+ <g stroke-width="1.4219">
+ <rect x="8.5" y="8.5" width="15" height="1"/>
+ <rect x="8.5" y="15.5" width="15" height="1"/>
+ <rect x="8.5" y="22.5" width="15" height="1"/>
+ </g>
+ </g>
+</svg>
diff --git a/loleaflet/images/table-row-resize-marker-hover.svg
b/loleaflet/images/table-row-resize-marker-hover.svg
new file mode 100644
index 000000000..7dab991ac
--- /dev/null
+++ b/loleaflet/images/table-row-resize-marker-hover.svg
@@ -0,0 +1,10 @@
+<svg version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg";>
+ <g transform="matrix(.70331 0 0 .70329 4.7472 4.7474)" fill="#fff"
fill-opacity=".86275" stroke="#38f" stroke-linecap="round">
+ <rect x="2.5185" y="2.5185" width="26.963" height="26.963" rx="4.4235"
ry="4.4236" stroke-width="1.4745"/>
+ <g stroke-width="1.4219">
+ <rect x="8.5" y="8.5" width="15" height="1"/>
+ <rect x="8.5" y="15.5" width="15" height="1"/>
+ <rect x="8.5" y="22.5" width="15" height="1"/>
+ </g>
+ </g>
+</svg>
diff --git a/loleaflet/src/dom/Draggable.js b/loleaflet/src/dom/Draggable.js
index df22f3b11..d9f5485a8 100644
--- a/loleaflet/src/dom/Draggable.js
+++ b/loleaflet/src/dom/Draggable.js
@@ -25,6 +25,16 @@ L.Draggable = L.Evented.extend({
this._element = element;
this._dragStartTarget = dragStartTarget || element;
this._preventOutline = preventOutline;
+ this._freezeX = false;
+ this._freezeY = false;
+ },
+
+ freezeX: function (boolChoice) {
+ this._freezeX = boolChoice;
+ },
+
+ freezeY: function (boolChoice) {
+ this._freezeY = boolChoice;
},
enable: function () {
@@ -139,6 +149,12 @@ L.Draggable = L.Evented.extend({
}
this._newPos = this._startPos.add(offset);
+
+ if (this._freezeY)
+ this._newPos.y = this._startPos.y
+ if (this._freezeX)
+ this._newPos.x = this._startPos.x
+
this._moving = true;
L.Util.cancelAnimFrame(this._animRequest);
diff --git a/loleaflet/src/layer/marker/Marker.Drag.js
b/loleaflet/src/layer/marker/Marker.Drag.js
index 5b879cd2b..d9f789235 100644
--- a/loleaflet/src/layer/marker/Marker.Drag.js
+++ b/loleaflet/src/layer/marker/Marker.Drag.js
@@ -44,6 +44,16 @@ L.Handler.MarkerDrag = L.Handler.extend({
return this._draggable && this._draggable._moved;
},
+ freezeX: function (boolChoice) {
+ if (this._draggable)
+ this._draggable.freezeX(boolChoice);
+ },
+
+ freezeY: function (boolChoice) {
+ if (this._draggable)
+ this._draggable.freezeY(boolChoice);
+ },
+
_onDown: function (e) {
this._marker.fire('down', e);
},
diff --git a/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
b/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
index 169af9d8e..4ace14da0 100644
--- a/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
+++ b/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
@@ -19,6 +19,11 @@ L.TileLayer.include({
point = point.subtract(new L.Point(markerRect.width,
markerRect.height / 2));
point = this._map.unproject(point);
marker.setLatLng(point);
+
+ if (marker._type.startsWith('column'))
+ marker.dragging.freezeY(true);
+ else
+ marker.dragging.freezeX(true);
},
_createMarker: function(markerType, entry, left, right) {
var className;
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
