loleaflet/css/loleaflet.css | 11 +++
loleaflet/images/table-move-marker.svg | 56 ++++++++++++++++
loleaflet/src/dom/Draggable.js | 3
loleaflet/src/layer/marker/Marker.Drag.js | 8 +-
loleaflet/src/layer/tile/TileLayer.TableOverlay.js | 71 ++++++++++++++++++++-
5 files changed, 141 insertions(+), 8 deletions(-)
New commits:
commit cd5b538c1cf17d69bec5bf29ccf351bec5fefd4c
Author: Tomaž Vajngerl <tomaz.vajng...@collabora.co.uk>
AuthorDate: Sun Sep 29 23:41:28 2019 +0200
Commit: Tomaž Vajngerl <qui...@gmail.com>
CommitDate: Wed Oct 2 23:26:38 2019 +0200
tdf#125565 Added table move marker
Change-Id: Iffa1b969986c9f9b405d5713b56a192a1069645f
Reviewed-on: https://gerrit.libreoffice.org/79821
Reviewed-by: Tomaž Vajngerl <qui...@gmail.com>
Tested-by: Tomaž Vajngerl <qui...@gmail.com>
(cherry picked from commit d1eaa895aa6a4b5978ed4038cd6b03aebbaa6107)
Reviewed-on: https://gerrit.libreoffice.org/79823
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoff...@gmail.com>
diff --git a/loleaflet/css/loleaflet.css b/loleaflet/css/loleaflet.css
index a270af77a..8589c811c 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 000000000..6ab8ef55a
--- /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 d9f5485a8..b6cd70954 100644
--- a/loleaflet/src/dom/Draggable.js
+++ b/loleaflet/src/dom/Draggable.js
@@ -137,7 +137,7 @@ L.Draggable = L.Evented.extend({
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.Draggable = L.Evented.extend({
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 d9f789235..179408e9b 100644
--- a/loleaflet/src/layer/marker/Marker.Drag.js
+++ b/loleaflet/src/layer/marker/Marker.Drag.js
@@ -58,11 +58,11 @@ L.Handler.MarkerDrag = L.Handler.extend({
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 @@ L.Handler.MarkerDrag = L.Handler.extend({
_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 7af0d971b..6a7cba29b 100644
--- a/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
+++ b/loleaflet/src/layer/tile/TileLayer.TableOverlay.js
@@ -8,6 +8,7 @@ L.TileLayer.include({
this._tableColumnMarkers = [];
this._tableRowMarkers = [];
this._tableMarkersDragged = false;
+ this._initMoveMarkers();
this._tableSelectionColumnMarkers = [];
this._tableSelectionRowMarkers = [];
this._selectionHeaderDistanceFromTable = 6;
@@ -17,6 +18,17 @@ L.TileLayer.include({
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 @@ L.TileLayer.include({
}
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 @@ L.TileLayer.include({
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 @@ L.TileLayer.include({
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 @@ L.TileLayer.include({
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 @@ L.TileLayer.include({
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);
+ }
}
});
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
