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 <quikee@gmail.com>
Tested-by: Tomaž Vajngerl <quikee@gmail.com>

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 {

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>

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>

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);

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);
 	},

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;