loleaflet/Makefile.am | 1
loleaflet/css/leaflet.css | 19 +++
loleaflet/src/layer/tile/CanvasTileLayer.js | 30 +++++
loleaflet/src/layer/vector/SplitterLine.js | 158 ++++++++++++++++++++++++++++
4 files changed, 208 insertions(+)
New commits:
commit 3c3adc3f5d22171c9fa5ca18351ae9376c04f88a
Author: Dennis Francis <dennis.fran...@collabora.com>
AuthorDate: Tue Jul 7 14:57:24 2020 +0530
Commit: Dennis Francis <dennis.fran...@collabora.com>
CommitDate: Wed Jul 8 16:59:04 2020 +0200
add draggable splitters that controls the split-panes
Change-Id: I7d6f681fbacfd8b1a6699c52a8bd9d007f20b99d
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/98355
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoff...@gmail.com>
Tested-by: Jenkins
Reviewed-by: Dennis Francis <dennis.fran...@collabora.com>
diff --git a/loleaflet/Makefile.am b/loleaflet/Makefile.am
index 589a95448..dfc9d5984 100644
--- a/loleaflet/Makefile.am
+++ b/loleaflet/Makefile.am
@@ -231,6 +231,7 @@ LOLEAFLET_JS =\
src/geometry/PolyUtil.js \
src/layer/vector/Polygon.js \
src/layer/vector/Rectangle.js \
+ src/layer/vector/SplitterLine.js \
src/layer/vector/CircleMarker.js \
src/layer/vector/Circle.js \
src/layer/vector/SVG.js \
diff --git a/loleaflet/css/leaflet.css b/loleaflet/css/leaflet.css
index 2ea1f74ea..f4bd5abf0 100644
--- a/loleaflet/css/leaflet.css
+++ b/loleaflet/css/leaflet.css
@@ -1001,3 +1001,22 @@ input.clipboard {
top: 0;
z-index: 9;
}
+
+.leaflet-pane-splitter {
+ cursor:grab;
+ stroke: #e0e0e0;
+ fill: #e0e0e0;
+ opacity: 1;
+ }
+
+.splitter-hidden {
+ opacity: 0.6;
+ stroke: #eeeeee;
+ fill: #eeeeee;
+ }
+
+path.leaflet-pane-splitter:hover {
+ opacity: 1 !important;
+ stroke: #cdcdcd;
+ fill: #cdcdcd;
+ }
diff --git a/loleaflet/src/layer/tile/CanvasTileLayer.js
b/loleaflet/src/layer/tile/CanvasTileLayer.js
index a9df21726..e086a08ad 100644
--- a/loleaflet/src/layer/tile/CanvasTileLayer.js
+++ b/loleaflet/src/layer/tile/CanvasTileLayer.js
@@ -1329,4 +1329,34 @@ L.CanvasTileLayer = L.TileLayer.extend({
this._map._socket.sendMessage('tileprocessed tile=' + tileID);
},
+ updateHorizPaneSplitter: function () {
+
+ var map = this._map;
+
+ if (!this._xSplitter) {
+ this._xSplitter = new L.SplitterLine(
+ map, { isHoriz: true });
+
+ map.addLayer(this._xSplitter);
+ }
+ else {
+ this._xSplitter.update();
+ }
+ },
+
+ updateVertPaneSplitter: function () {
+
+ var map = this._map;
+
+ if (!this._ySplitter) {
+ this._ySplitter = new L.SplitterLine(
+ map, { isHoriz: false });
+
+ map.addLayer(this._ySplitter);
+ }
+ else {
+ this._ySplitter.update();
+ }
+ },
+
});
diff --git a/loleaflet/src/layer/vector/SplitterLine.js
b/loleaflet/src/layer/vector/SplitterLine.js
new file mode 100644
index 000000000..a769a58e0
--- /dev/null
+++ b/loleaflet/src/layer/vector/SplitterLine.js
@@ -0,0 +1,158 @@
+/* -*- js-indent-level: 8 -*- */
+/*
+ * L.SplitterLine is a draggable L.Rectangle to be used as control for
split-panes.
+ */
+
+L.SplitterLine = L.Rectangle.extend({
+
+ options: {
+ color: '#e0e0e0',
+ fill: true,
+ weight: 1,
+ fillOpacity: 1,
+ opacity: 1,
+ interactive: true,
+ fixed: true,
+ draggable: true,
+ noClip: true,
+ isHoriz: true,
+ manualDrag: false,
+ },
+
+ initialize: function (map, options) {
+
+ this.options.isHoriz = options.isHoriz;
+ var latlngBounds = this._calculateLatLngBounds(map);
+ L.Rectangle.prototype.initialize.call(this, latlngBounds);
+ L.setOptions(this, options);
+ },
+
+ _calculateLatLngBounds: function (map) {
+ map = map || this._map;
+ this._splitPanesContext = this._splitPanesContext ||
map.getSplitPanesContext();
+ console.assert(this._splitPanesContext, 'no
_splitPanesContext!');
+
+ var size = map._docLayer.getMaxDocSize();
+ var isHoriz = this.options.isHoriz;
+ var splitPos = this._splitPanesContext.getSplitPos();
+
+ this._lastPos = isHoriz ? splitPos.x : splitPos.y;
+
+ var thickness = 4;
+
+ var xmin = isHoriz ? splitPos.x - thickness/2 : -size.x;
+ var xmax = isHoriz ? splitPos.x + thickness/2 : size.x;
+
+ var ymin = !isHoriz ? splitPos.y - thickness/2 : -size.y;
+ var ymax = !isHoriz ? splitPos.y + thickness/2 : size.y;
+
+ return new L.LatLngBounds(
+ map.unproject(new L.Point(xmin, ymin)),
+ map.unproject(new L.Point(xmax, ymax))
+ );
+ },
+
+ onAdd: function () {
+
+ L.Rectangle.prototype.onAdd.call(this);
+
+ if (!this.dragging) {
+ this.makeDraggable();
+ }
+
+ this._pathNodeCollection.forEachNode(function (nodeData) {
+ var node = nodeData.getNode();
+ L.DomEvent.on(node, 'mousedown', this._onDragStart,
this);
+ }.bind(this));
+
+ this.addClass('leaflet-pane-splitter');
+ },
+
+ _onDragStart: function(evt) {
+ if (!this._map || !this.dragging) {
+ return;
+ }
+
+ this._curPos = undefined;
+
+ this._dragStarted = true;
+ L.DomEvent.stop(evt);
+
+ this._pathNodeCollection.forEachNode(function (nodeData) {
+ var node = nodeData.getNode();
+ L.DomEvent.on(node, 'mousemove', this._onDrag, this);
+ L.DomEvent.on(node, 'mouseup', this._onDragEnd, this);
+ }.bind(this));
+
+
+ var data = {
+ originalEvent: evt,
+ containerPoint:
this._map.mouseEventToContainerPoint(evt)
+ };
+ this.dragging._onDragStart(data);
+ },
+
+ _onDrag: function(evt) {
+
+ if (!this._map || !this.dragging)
+ return;
+
+ if (!this._moved) {
+ this._moved = true;
+ }
+
+ var first = (evt.touches && evt.touches.length >= 1 ?
evt.touches[0] : evt);
+ var containerPoint =
this._map.mouseEventToContainerPoint(first);
+
+ var maxPos;
+ if (this.options.isHoriz) {
+ maxPos = this._map.getSize().x;
+ this._curPos = Math.min(Math.max(0, containerPoint.x),
maxPos);
+ }
+ else {
+ maxPos = this._map.getSize().y;
+ this._curPos = Math.min(Math.max(0, containerPoint.y),
maxPos);
+ }
+
+ this.dragging._onDrag(evt);
+ },
+
+ _onDragEnd: function(evt) {
+ if (!this._map || !this.dragging)
+ return;
+
+ this._pathNodeCollection.forEachNode(function (nodeData) {
+ var node = nodeData.getNode();
+ L.DomEvent.off(node, 'mousemove', this._onDrag, this);
+ L.DomEvent.off(node, 'mouseup', this._onDragEnd, this);
+ }.bind(this));
+
+ this._moved = false;
+
+
+ this.dragging._onDragEnd(evt);
+ this._dragStarted = false;
+
+ if (this._curPos !== undefined) {
+ if (this.options.isHoriz) {
+
this._splitPanesContext.setHorizSplitPos(this._curPos);
+ }
+ else {
+
this._splitPanesContext.setVertSplitPos(this._curPos);
+ }
+
+ var newPoint = this._splitPanesContext.getSplitPos();
+ var newPos = this.options.isHoriz ? newPoint.x :
newPoint.y;
+ if (newPos == this._lastPos) {
+ this._splitPanesContext.updateSplitters();
+ }
+ }
+
+ this._curPos = undefined;
+ },
+
+ update: function () {
+ this.setBounds(this._calculateLatLngBounds());
+ },
+
+});
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
