strepsirrhini/libreoffice-online
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

table handles: drag only in x/y axis, marker on hover, cursor

Browse source 
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>
This commit is contained in:
Tomaž Vajngerl 2019-08-18 10:22:21 +09:00 committed by Tomaž Vajngerl
parent 6d94b35c35
commit 7467710dab
6 changed files with 75 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
loleaflet/css/loleaflet.css
View file

@ -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 {

10
loleaflet/images/table-column-resize-marker-hover.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 510 B

10
loleaflet/images/table-row-resize-marker-hover.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 509 B

16
loleaflet/src/dom/Draggable.js
View file

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

10
loleaflet/src/layer/marker/Marker.Drag.js
View file

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

5
loleaflet/src/layer/tile/TileLayer.TableOverlay.js
View file

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