tdf#125565 Added table move marker
Change-Id: Iffa1b969986c9f9b405d5713b56a192a1069645f
Reviewed-on: https://gerrit.libreoffice.org/79821
Reviewed-by: Tomaž Vajngerl <quikee@gmail.com>
Tested-by: Tomaž Vajngerl <quikee@gmail.com>
diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index 30591d1..a26cfcf 100644
--- a/loleaflet/css/loleaflet.css
+++ b/loleaflet/css/loleaflet.css
@@ -89,6 +89,17 @@
cursor: row-resize;
}
.table-move-marker {
margin-left: 0px;
margin-top: 0px;
width: 24px;
height: 24px;
background-image: url('images/table-move-marker.svg');
background-size: 100% 100%;
background-repeat: no-repeat;
cursor: col-resize;
}
body {
margin: 0;
overflow: hidden;
diff --git a/loleaflet/images/table-move-marker.svg b/loleaflet/images/table-move-marker.svg
new file mode 100644
index 0000000..6ab8ef5
--- /dev/null
+++ b/loleaflet/images/table-move-marker.svg
@@ -0,0 +1,56 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 24 24"
version="1.1"
id="svg4"
sodipodi:docname="marker-move.svg"
width="24"
height="24"
inkscape:version="0.92.4 (unknown)">
<metadata
id="metadata10">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs8" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="3840"
inkscape:window-height="2032"
id="namedview6"
showgrid="false"
inkscape:zoom="23.8396"
inkscape:cx="38.712406"
inkscape:cy="0.44730152"
inkscape:window-x="0"
inkscape:window-y="54"
inkscape:window-maximized="1"
inkscape:current-layer="svg4" />
<path
d="M 11.999999,0 7.3846151,5.5384611 H 11.076923 V 11.076924 H 5.5384614 V 7.3846148 L 0,12 5.5384614,16.615385 v -3.692307 h 5.5384616 v 5.538461 H 7.3846151 L 11.999999,24 16.615384,18.461539 h -3.692308 v -5.538461 h 5.538461 v 3.692307 L 24,12 18.461537,7.3846148 V 11.076924 H 12.923076 V 5.5384611 h 3.692308 z"
id="path2"
inkscape:connector-curvature="0"
style="fill:#4d82b8;stroke-width:1" />
</svg>
diff --git a/loleaflet/src/dom/Draggable.js b/loleaflet/src/dom/Draggable.js
index 16f4823..d318370 100644
--- a/loleaflet/src/dom/Draggable.js
+++ b/loleaflet/src/dom/Draggable.js
@@ -137,7 +137,7 @@
L.DomEvent.preventDefault(e);
if (!this._moved) {
this.fire('dragstart');
this.fire('dragstart', {originalEvent: e});
this._moved = true;
this._startPos = L.DomUtil.getPosition(this._element).subtract(offset);
@@ -192,6 +192,7 @@
L.Util.cancelAnimFrame(this._animRequest);
this.fire('dragend', {
originalEvent: e,
distance: this._newPos.distanceTo(this._startPos)
});
} else {
diff --git a/loleaflet/src/layer/marker/Marker.Drag.js b/loleaflet/src/layer/marker/Marker.Drag.js
index d9f7892..179408e 100644
--- a/loleaflet/src/layer/marker/Marker.Drag.js
+++ b/loleaflet/src/layer/marker/Marker.Drag.js
@@ -58,11 +58,11 @@
this._marker.fire('down', e);
},
_onDragStart: function () {
_onDragStart: function (e) {
this._marker
.closePopup()
.fire('movestart')
.fire('dragstart');
.fire('movestart', e)
.fire('dragstart', e);
},
_onDrag: function (e) {
@@ -86,7 +86,7 @@
_onDragEnd: function (e) {
this._marker
.fire('moveend')
.fire('moveend', e)
.fire('dragend', e);
},
diff --git a/loleaflet/src/layer/tile/TileLayer.TableOverlay.js b/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
index 7af0d97..6a7cba2 100644
--- a/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
+++ b/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
@@ -8,6 +8,7 @@
this._tableColumnMarkers = [];
this._tableRowMarkers = [];
this._tableMarkersDragged = false;
this._initMoveMarkers();
this._tableSelectionColumnMarkers = [];
this._tableSelectionRowMarkers = [];
this._selectionHeaderDistanceFromTable = 6;
@@ -17,6 +18,17 @@
var point = this._latLngToTwips(this._map.unproject(new L.Point(pixel, 0)));
return point.x;
},
_initMoveMarkers: function () {
this._tableMoveMarker = L.marker(new L.LatLng(0, 0), {
icon: L.divIcon({
className: 'table-move-marker',
iconSize: null
}),
draggable: true
});
this._tableMoveMarker.on('dragstart drag dragend', this._onTableMoveMarkerDrag, this);
},
_setMarkerPosition: function(marker) {
var point = this._twipsToLatLng(marker._positionTwips, this._map.getZoom());
point = this._map.project(point);
@@ -108,6 +120,8 @@
}
this._tableSelectionRowMarkers = [];
this._map.removeLayer(this._tableMoveMarker);
// Create markers
if (this._currentTableData.rows && this._currentTableData.rows.entries.length > 0 && this._currentTableData.columns && this._currentTableData.columns.entries.length > 0) {
this._tablePositionColumnOffset = parseInt(this._currentTableData.columns.tableOffset);
@@ -146,7 +160,6 @@
this._addSelectionMarkers('column', columnPositions, firstRowPosition, lastRowPosition);
rowPositions.push(parseInt(this._currentTableData.rows.left));
for (i = 0; i < this._currentTableData.rows.entries.length; i++) {
entry = this._currentTableData.rows.entries[i];
rowPositions.push(parseInt(entry.position));
@@ -162,9 +175,28 @@
this._tableRowMarkers.push(markerX);
this._addSelectionMarkers('row', rowPositions, firstColumnPosition, lastColumnPosition);
if (this._map.getDocType() === 'presentation' && this._currentTableData.rectangle) {
var topLeftTwips = new L.Point(parseInt(this._currentTableData.rectangle.x), parseInt(this._currentTableData.rectangle.y));
var offset = new L.Point(parseInt(this._currentTableData.rectangle.width), parseInt(this._currentTableData.rectangle.height));
var bottomRightTwips = topLeftTwips.add(offset);
var tableRectangle = new L.LatLngBounds(
this._twipsToLatLng(topLeftTwips, this._map.getZoom()),
this._twipsToLatLng(bottomRightTwips, this._map.getZoom()));
this._map.addLayer(this._tableMoveMarker);
var markerRect;
var movePosition = new L.LatLng(tableRectangle.getNorth(), tableRectangle.getWest());
movePosition = this._map.project(movePosition);
markerRect = this._tableMoveMarker._icon.getBoundingClientRect();
movePosition = movePosition.subtract(new L.Point(markerRect.width + 4, markerRect.height + 4));
movePosition = this._map.unproject(movePosition);
this._tableMoveMarker.setLatLng(movePosition);
}
}
},
_onZoom: function () {
_onZoomForTableMarkers: function () {
this._updateTableMarkers();
},
_onTableSelectedMsg: function (textMsg) {
@@ -177,7 +209,7 @@
this._currentTableData = message;
this._hasTableSelection = this._currentTableData.rows != null || this._currentTableData.columns != null;
this._updateTableMarkers();
this._map.on('zoomend', L.bind(this._onZoom, this));
this._map.on('zoomend', L.bind(this._onZoomForTableMarkers, this));
},
_addSelectionMarkers: function (type, positions, start, end) {
if (positions.length < 2)
@@ -300,6 +332,39 @@
if (e.originalEvent)
e.originalEvent.preventDefault();
},
_createMouseEvent: function (type, inputEvent) {
var event = inputEvent;
if (inputEvent.type == 'touchstart' || inputEvent.type == 'touchmove') {
event = inputEvent.touches[0];
}
else if (inputEvent.type == 'touchend') {
event = inputEvent.changedTouches[0];
}
var newEvent = document.createEvent('MouseEvents');
newEvent.initMouseEvent(
type, true, true, window, 1,
event.screenX, event.screenY,
event.clientX, event.clientY,
false, false, false, false, 0, null
);
return newEvent;
},
_onTableMoveMarkerDrag: function (event) {
var mouseEvent;
if (event.type == 'dragstart') {
mouseEvent = this._createMouseEvent('mousedown', event.originalEvent);
this._graphicMarker._onDragStart(mouseEvent);
}
else if (event.type == 'drag') {
mouseEvent = this._createMouseEvent('mousemove', event.originalEvent);
this._graphicMarker._onDrag(mouseEvent);
}
else if (event.type == 'dragend') {
mouseEvent = this._createMouseEvent('mouseup', event.originalEvent);
this._graphicMarker._onDragEnd(mouseEvent);
}
}
});
