[Libreoffice-commits] online.git: 4 commits - kit/ChildSession.cpp loleaflet/build loleaflet/dist loleaflet/src
Aditya Dewan
iit2015097 at iiita.ac.in
Mon Aug 28 08:46:49 UTC 2017
kit/ChildSession.cpp | 3
loleaflet/build/deps.js | 5
loleaflet/dist/leaflet.css | 104 +++++++++++++
loleaflet/src/control/Ruler.js | 220 ++++++++++++++++++++++++++++
loleaflet/src/layer/tile/GridLayer.js | 9 -
loleaflet/src/layer/tile/TileLayer.js | 10 +
loleaflet/src/layer/tile/WriterTileLayer.js | 4
loleaflet/src/map/Map.js | 3
8 files changed, 353 insertions(+), 5 deletions(-)
New commits:
commit c61db390c9741fd7deee426089bdfd72d89077a6
Author: Aditya Dewan <iit2015097 at iiita.ac.in>
Date: Fri Aug 25 16:34:43 2017 +0530
Ruler now compatible with comments and zoom
Change-Id: Ic5e99eb3a280ce5f5f4621b20d0e44250ea30621
Reviewed-on: https://gerrit.libreoffice.org/41562
Reviewed-by: pranavk <pranavk at collabora.co.uk>
Tested-by: pranavk <pranavk at collabora.co.uk>
diff --git a/loleaflet/dist/leaflet.css b/loleaflet/dist/leaflet.css
index 57a8f8fe..c324ebfd 100644
--- a/loleaflet/dist/leaflet.css
+++ b/loleaflet/dist/leaflet.css
@@ -776,7 +776,6 @@ div.leaflet-cursor-container:hover > .leaflet-cursor-header {
.loleaflet-ruler-breakcontainer {
height: 100%;
position: absolute;
- width: 100vw;
}
.loleaflet-ruler-marginwrapper {
@@ -795,9 +794,8 @@ div.leaflet-cursor-container:hover > .leaflet-cursor-header {
}
.loleaflet-ruler-face {
- margin:0px auto;
height: 100%;
- transition: width .2s;
+ background-color: white;
}
.loleaflet-ruler-maj {
@@ -815,7 +813,6 @@ div.leaflet-cursor-container:hover > .leaflet-cursor-header {
.loleaflet-ruler-margin {
height: 100%;
background-color: #efefef;
- transition: width .1s;
}
.loleaflet-ruler-left {
diff --git a/loleaflet/src/control/Ruler.js b/loleaflet/src/control/Ruler.js
index c23ce16d..22453cee 100644
--- a/loleaflet/src/control/Ruler.js
+++ b/loleaflet/src/control/Ruler.js
@@ -8,22 +8,33 @@ L.Control.Ruler = L.Control.extend({
interactive: true,
marginSet: false,
displayNumber: true,
+ tileMargin: 18,
+ extraSize: 0,
margin1: null,
margin2: null,
nullOffset: null,
pageOffset: null,
pageWidth: null,
unit: null,
- convertRatioDrag: null
+ DraggableConvertRatio: null,
+ timer: null
},
onAdd: function(map) {
map.on('rulerupdate', this._updateOptions, this);
- map.on('docsize', this._updateBreakPoints, this);
+ map.on('docsize', this._updatePaintTimer, this);
+ map.on('scrolloffset resize', this._fixOffset, this);
+ this._map = map;
return this._initLayout();
},
+ _updatePaintTimer: function() {
+ clearTimeout(this.options.timer);
+ this.options.timer = setTimeout(L.bind(this._updateBreakPoints, this), 300);
+ },
+
+
_initLayout: function() {
this._rWrapper = L.DomUtil.create('div', 'loleaflet-ruler leaflet-bar leaflet-control leaflet-control-custom');
this._rFace = L.DomUtil.create('div', 'loleaflet-ruler-face', this._rWrapper);
@@ -51,6 +62,12 @@ L.Control.Ruler = L.Control.extend({
if (this.options.margin1 == null || this.options.margin2 == null)
return;
+ if (this._map._docLayer._annotations._items.length === 0)
+ this.options.extraSize = 0;
+ else
+ this.options.extraSize = 290;
+ /// as used for the size of actual comments
+
var classMajorSep = 'loleaflet-ruler-maj',
classMargin = 'loleaflet-ruler-margin',
classDraggable = 'loleaflet-ruler-drag',
@@ -60,30 +77,26 @@ L.Control.Ruler = L.Control.extend({
rToolTip = 'loleaflet-ruler-rtooltip',
leftMarginStr = _('Left Margin'),
rightMarginStr = _('Right Margin'),
- convertRatioDrag, lMargin, rMargin, wPixel, hPixel;
+ DraggableConvertRatio, lMargin, rMargin, wPixel, scale;
lMargin = this.options.nullOffset;
rMargin = this.options.pageWidth - (this.options.nullOffset + this.options.margin2);
+ scale = this._map.getZoomScale(this._map.getZoom(), 10);
+ wPixel = this._map._docLayer._docPixelSize.x - (this.options.extraSize + this.options.tileMargin * 2) * scale;
- // Multiplication with this facor is temporary,
- // I think, we need to find the margin in the left tiles
- // and subtract here accordingly
- wPixel = .958*this._map._docLayer._docPixelSize.x;
- hPixel = this._map._docLayer._docPixelSize.y;
-
- convertRatioDrag = this.options.convertRatioDrag = wPixel / this.options.pageWidth;
+ this._fixOffset();
+ DraggableConvertRatio = this.options.DraggableConvertRatio = wPixel / this.options.pageWidth;
this._rFace.style.width = wPixel + 'px';
- this._rFace.style.backgroundColor = 'white';
- this._rBPContainer.style.marginLeft = (-1 * (convertRatioDrag *(500 - (this.options.nullOffset % 1000))) + 1) + 'px';
+ this._rBPContainer.style.marginLeft = (-1 * (DraggableConvertRatio * (500 - (lMargin % 1000))) + 1) + 'px';
- var numCounter = -1 * parseInt(this.options.nullOffset/1000);
+ var numCounter = -1 * parseInt(lMargin / 1000);
$('.' + classMajorSep).remove();
for (var num = 0; num <= (this.options.pageWidth / 1000) + 1; num++) {
var marker = L.DomUtil.create('div', classMajorSep, this._rBPContainer);
- marker.style.width = convertRatioDrag*1000 - 2 + 'px';
+ marker.style.width = DraggableConvertRatio*1000 - 2 + 'px';
if (this.options.displayNumber) {
if (numCounter !== 0)
marker.innerText = Math.abs(numCounter++);
@@ -111,18 +124,29 @@ L.Control.Ruler = L.Control.extend({
}
}
- this._lMarginMarker.style.width = (convertRatioDrag*lMargin) + 'px';
- this._rMarginMarker.style.width = (convertRatioDrag*rMargin) + 'px';
+ this._lMarginMarker.style.width = (DraggableConvertRatio*lMargin) + 'px';
+ this._rMarginMarker.style.width = (DraggableConvertRatio*rMargin) + 'px';
if (this.options.interactive) {
- this._lMarginDrag.style.width = (convertRatioDrag*lMargin) + 'px';
- this._rMarginDrag.style.width = (convertRatioDrag*rMargin) + 'px';
+ this._lMarginDrag.style.width = (DraggableConvertRatio*lMargin) + 'px';
+ this._rMarginDrag.style.width = (DraggableConvertRatio*rMargin) + 'px';
}
L.DomEvent.on(this._rMarginDrag, 'mousedown', this._initiateDrag, this);
L.DomEvent.on(this._lMarginDrag, 'mousedown', this._initiateDrag, this);
},
+ _fixOffset: function() {
+ var scale = this._map.getZoomScale(this._map.getZoom(), 10);
+ var mapPane = this._map._mapPane;
+ var fTile = mapPane.getElementsByClassName('leaflet-tile')[0];
+ var tileContainer = mapPane.getElementsByClassName('leaflet-tile-container');
+ tileContainer = tileContainer[tileContainer.length - 1];
+ var mapPaneOffset = parseInt(mapPane.style.transform.match(/\(([-0-9]*)/)[1]) + parseInt(fTile.style.left) + parseInt(tileContainer.style.transform.match(/\(([-0-9]*)/)[1]) + 18 * scale;
+
+ this._rFace.style.marginLeft = mapPaneOffset + 'px';
+ },
+
_initiateDrag: function(e) {
var dragableElem = e.srcElement || e.target;
@@ -145,17 +169,17 @@ L.Control.Ruler = L.Control.extend({
var unit = this.options.unit ? this.options.unit : ' cm';
if (L.DomUtil.hasClass(this._rMarginDrag, 'leaflet-drag-moving')) {
var rMargin = this.options.pageWidth - (this.options.nullOffset + this.options.margin2);
- var newPos = this.options.convertRatioDrag*rMargin - posChange;
+ var newPos = this.options.DraggableConvertRatio*rMargin - posChange;
this._rToolTip.style.display = 'block';
this._rToolTip.style.right = newPos - 25 + 'px';
- this._rToolTip.innerText = (Math.round(this.options.pageWidth / 100 - newPos / (this.options.convertRatioDrag * 100)) / 10).toString() + unit;
+ this._rToolTip.innerText = (Math.round(this.options.pageWidth / 100 - newPos / (this.options.DraggableConvertRatio * 100)) / 10).toString() + unit;
this._rMarginDrag.style.width = newPos + 'px';
}
else {
- var newPos = this.options.convertRatioDrag*this.options.nullOffset + posChange;
+ var newPos = this.options.DraggableConvertRatio*this.options.nullOffset + posChange;
this._lToolTip.style.display = 'block';
this._lToolTip.style.left = newPos - 25 + 'px';
- this._lToolTip.innerText = (Math.round(newPos / (this.options.convertRatioDrag * 100)) / 10).toString() + unit;
+ this._lToolTip.innerText = (Math.round(newPos / (this.options.DraggableConvertRatio * 100)) / 10).toString() + unit;
this._lMarginDrag.style.width = newPos + 'px';
}
},
@@ -185,7 +209,7 @@ L.Control.Ruler = L.Control.extend({
unoObj[marginType] = {};
unoObj[marginType]['type'] = 'string';
- unoObj[marginType]['value'] = fact * posChange/(this.options.convertRatioDrag * this.options.pageWidth);
+ unoObj[marginType]['value'] = fact * posChange/(this.options.DraggableConvertRatio * this.options.pageWidth);
this._map._socket.sendMessage('uno .uno:RulerChangeState ' + JSON.stringify(unoObj));
}
});
diff --git a/loleaflet/src/layer/tile/GridLayer.js b/loleaflet/src/layer/tile/GridLayer.js
index f61d50c4..f963e8ba 100644
--- a/loleaflet/src/layer/tile/GridLayer.js
+++ b/loleaflet/src/layer/tile/GridLayer.js
@@ -339,7 +339,7 @@ L.GridLayer = L.Layer.extend({
this._tileZoom = tileZoom;
if (tileZoomChanged) {
this._updateTileTwips();
- this._updateMaxBounds();
+ this._updateMaxBounds(null, null, zoom);
}
this._updateLevels();
this._resetGrid();
@@ -363,16 +363,19 @@ L.GridLayer = L.Layer.extend({
this._tileHeightTwips = Math.round(this.options.tileHeightTwips * factor);
},
- _updateMaxBounds: function (sizeChanged, extraSize, options) {
+ _updateMaxBounds: function (sizeChanged, extraSize, options, zoom) {
if (this._docWidthTwips === undefined || this._docHeightTwips === undefined) {
return;
}
+ if (!zoom) {
+ var zoom = this._map.getZoom();
+ }
var docPixelLimits = new L.Point(this._docWidthTwips / this.options.tileWidthTwips,
this._docHeightTwips / this.options.tileHeightTwips);
docPixelLimits = extraSize ? docPixelLimits.multiplyBy(this._tileSize).add(extraSize) :
docPixelLimits.multiplyBy(this._tileSize);
- var scale = this._map.getZoomScale(this._map.getZoom(), 10);
+ var scale = this._map.getZoomScale(zoom, 10);
var topLeft = new L.Point(0, 0);
topLeft = this._map.unproject(topLeft.multiplyBy(scale));
var bottomRight = new L.Point(docPixelLimits.x, docPixelLimits.y);
diff --git a/loleaflet/src/layer/tile/WriterTileLayer.js b/loleaflet/src/layer/tile/WriterTileLayer.js
index 0b1f1487..afa5049c 100644
--- a/loleaflet/src/layer/tile/WriterTileLayer.js
+++ b/loleaflet/src/layer/tile/WriterTileLayer.js
@@ -230,11 +230,11 @@ L.WriterTileLayer = L.TileLayer.extend({
this._update();
},
- _updateMaxBounds: function (sizeChanged, extraSize) {
+ _updateMaxBounds: function (sizeChanged, extraSize, zoom) {
if (!extraSize) {
extraSize = this._annotations && this._annotations._items.length > 0 ?
this._annotations.options.extraSize : null;
}
- L.GridLayer.prototype._updateMaxBounds.call(this, sizeChanged, extraSize, {panInside: false});
+ L.GridLayer.prototype._updateMaxBounds.call(this, sizeChanged, extraSize, {panInside: false}, zoom);
}
});
commit 6494821d27987472b277861120c555cc2bca1783
Author: Aditya Dewan <iit2015097 at iiita.ac.in>
Date: Sun Aug 20 02:30:55 2017 +0530
add numbers on ruler
Change-Id: Iff90ddedf3c808cda3bad0a397b456cb8c9e607d
Reviewed-on: https://gerrit.libreoffice.org/41336
Reviewed-by: pranavk <pranavk at collabora.co.uk>
Tested-by: pranavk <pranavk at collabora.co.uk>
diff --git a/loleaflet/dist/leaflet.css b/loleaflet/dist/leaflet.css
index c82f949c..57a8f8fe 100644
--- a/loleaflet/dist/leaflet.css
+++ b/loleaflet/dist/leaflet.css
@@ -806,6 +806,10 @@ div.leaflet-cursor-container:hover > .leaflet-cursor-header {
border-width: 0px .5px;
border-style: solid;
border-color: grey;
+ font-size: 10px;
+ text-align: center;
+ color: grey;
+ line-height: 7px;
}
.loleaflet-ruler-margin {
diff --git a/loleaflet/src/control/Ruler.js b/loleaflet/src/control/Ruler.js
index 9f08d6bd..c23ce16d 100644
--- a/loleaflet/src/control/Ruler.js
+++ b/loleaflet/src/control/Ruler.js
@@ -7,6 +7,7 @@ L.Control.Ruler = L.Control.extend({
options: {
interactive: true,
marginSet: false,
+ displayNumber: true,
margin1: null,
margin2: null,
nullOffset: null,
@@ -74,14 +75,21 @@ L.Control.Ruler = L.Control.extend({
this._rFace.style.width = wPixel + 'px';
this._rFace.style.backgroundColor = 'white';
- this._rBPContainer.style.marginLeft = (-1 * (convertRatioDrag *(1000 - (this.options.nullOffset % 1000))) + 1) + 'px';
+ this._rBPContainer.style.marginLeft = (-1 * (convertRatioDrag *(500 - (this.options.nullOffset % 1000))) + 1) + 'px';
+
+ var numCounter = -1 * parseInt(this.options.nullOffset/1000);
$('.' + classMajorSep).remove();
for (var num = 0; num <= (this.options.pageWidth / 1000) + 1; num++) {
var marker = L.DomUtil.create('div', classMajorSep, this._rBPContainer);
marker.style.width = convertRatioDrag*1000 - 2 + 'px';
-
+ if (this.options.displayNumber) {
+ if (numCounter !== 0)
+ marker.innerText = Math.abs(numCounter++);
+ else
+ numCounter++;
+ }
}
if (!this.options.marginSet) {
commit 94ee746edc9fd07b6d87057fd659f237061cab1e
Author: Aditya Dewan <iit2015097 at iiita.ac.in>
Date: Sun Aug 20 13:27:19 2017 +0530
Add tooltip on ruler to track change
Change-Id: I6d982dadbee18e2ce492b80f429b65e20b3905f8
Reviewed-on: https://gerrit.libreoffice.org/41352
Reviewed-by: pranavk <pranavk at collabora.co.uk>
Tested-by: pranavk <pranavk at collabora.co.uk>
diff --git a/loleaflet/dist/leaflet.css b/loleaflet/dist/leaflet.css
index 4a147c0e..c82f949c 100644
--- a/loleaflet/dist/leaflet.css
+++ b/loleaflet/dist/leaflet.css
@@ -811,7 +811,7 @@ div.leaflet-cursor-container:hover > .leaflet-cursor-header {
.loleaflet-ruler-margin {
height: 100%;
background-color: #efefef;
- transition: width .2s;
+ transition: width .1s;
}
.loleaflet-ruler-left {
@@ -847,4 +847,19 @@ div.leaflet-cursor-container:hover > .leaflet-cursor-header {
.loleaflet-ruler-right.leaflet-drag-moving {
height: 100vh;
border-left: 2px dotted grey;
+ }
+
+.loleaflet-ruler-ltooltip, .loleaflet-ruler-rtooltip {
+ display: none;
+ text-align: center;
+ width: 46px;
+ height: 20px;
+ padding: 2px 4px;
+ line-height: 20px;
+ position: absolute;
+ border: 1px solid grey;
+ background-color: rgba(0,0,0,.4);
+ border-radius: 2px;
+ top: 24px;
+ color: white;
}
\ No newline at end of file
diff --git a/loleaflet/src/control/Ruler.js b/loleaflet/src/control/Ruler.js
index 2a23caa6..9f08d6bd 100644
--- a/loleaflet/src/control/Ruler.js
+++ b/loleaflet/src/control/Ruler.js
@@ -12,7 +12,7 @@ L.Control.Ruler = L.Control.extend({
nullOffset: null,
pageOffset: null,
pageWidth: null,
- unit: 'cm',
+ unit: null,
convertRatioDrag: null
},
@@ -55,6 +55,8 @@ L.Control.Ruler = L.Control.extend({
classDraggable = 'loleaflet-ruler-drag',
rightComp = 'loleaflet-ruler-right',
leftComp = 'loleaflet-ruler-left',
+ lToolTip = 'loleaflet-ruler-ltooltip',
+ rToolTip = 'loleaflet-ruler-rtooltip',
leftMarginStr = _('Left Margin'),
rightMarginStr = _('Right Margin'),
convertRatioDrag, lMargin, rMargin, wPixel, hPixel;
@@ -91,7 +93,9 @@ L.Control.Ruler = L.Control.extend({
if (this.options.interactive) {
this._lMarginDrag = L.DomUtil.create('div', classDraggable + ' ' + leftComp, this._rMarginWrapper);
+ this._lToolTip = L.DomUtil.create('div', lToolTip, this._lMarginDrag)
this._rMarginDrag = L.DomUtil.create('div', classDraggable + ' ' + rightComp, this._rMarginWrapper);
+ this._rToolTip = L.DomUtil.create('div', rToolTip, this._rMarginDrag)
this._lMarginDrag.style.cursor = 'e-resize';
this._rMarginDrag.style.cursor = 'w-resize';
this._lMarginDrag.title = leftMarginStr;
@@ -130,33 +134,43 @@ L.Control.Ruler = L.Control.extend({
_moveMargin: function(e) {
var posChange = e.clientX - this._initialposition;
-
+ var unit = this.options.unit ? this.options.unit : ' cm';
if (L.DomUtil.hasClass(this._rMarginDrag, 'leaflet-drag-moving')) {
var rMargin = this.options.pageWidth - (this.options.nullOffset + this.options.margin2);
- this._rMarginDrag.style.width = this.options.convertRatioDrag*rMargin - posChange + 'px';
+ var newPos = this.options.convertRatioDrag*rMargin - posChange;
+ this._rToolTip.style.display = 'block';
+ this._rToolTip.style.right = newPos - 25 + 'px';
+ this._rToolTip.innerText = (Math.round(this.options.pageWidth / 100 - newPos / (this.options.convertRatioDrag * 100)) / 10).toString() + unit;
+ this._rMarginDrag.style.width = newPos + 'px';
}
else {
- this._lMarginDrag.style.width = this.options.convertRatioDrag*this.options.nullOffset + posChange + 'px';
+ var newPos = this.options.convertRatioDrag*this.options.nullOffset + posChange;
+ this._lToolTip.style.display = 'block';
+ this._lToolTip.style.left = newPos - 25 + 'px';
+ this._lToolTip.innerText = (Math.round(newPos / (this.options.convertRatioDrag * 100)) / 10).toString() + unit;
+ this._lMarginDrag.style.width = newPos + 'px';
}
},
+
_endDrag: function(e) {
- var dragableElem = e.originalEvent.srcElement || e.originalEvent.target;
var posChange = e.originalEvent.clientX - this._initialposition;
var unoObj = {}, marginType, fact;
L.DomEvent.off(this._rFace, 'mousemove', this._moveMargin, this);
L.DomEvent.off(this._map, 'mouseup', this._endDrag, this);
- if (L.DomUtil.hasClass(dragableElem, 'loleaflet-ruler-right')) {
+ if (L.DomUtil.hasClass(this._rMarginDrag, 'leaflet-drag-moving')) {
marginType = 'Margin2';
fact = -1;
L.DomUtil.removeClass(this._rMarginDrag, 'leaflet-drag-moving');
+ this._rToolTip.style.display = 'none';
}
else {
marginType = 'Margin1';
fact = 1;
L.DomUtil.removeClass(this._lMarginDrag, 'leaflet-drag-moving');
+ this._lToolTip.style.display = 'none';
}
this._rFace.style.cursor = 'default';
commit 8ef4d33e15120e6edde85ef20775305d1f0f26ed
Author: Aditya Dewan <iit2015097 at iiita.ac.in>
Date: Thu Jul 27 00:44:30 2017 +0530
Adding ruler to loleaflet
Change-Id: I585850a7111eb5ab70bc5b51a508eb29317b92ca
Reviewed-on: https://gerrit.libreoffice.org/40461
Reviewed-by: pranavk <pranavk at collabora.co.uk>
Tested-by: pranavk <pranavk at collabora.co.uk>
diff --git a/kit/ChildSession.cpp b/kit/ChildSession.cpp
index 49cfde06..553f6dbf 100644
--- a/kit/ChildSession.cpp
+++ b/kit/ChildSession.cpp
@@ -1243,6 +1243,9 @@ void ChildSession::loKitCallback(const int type, const std::string& payload)
case LOK_CALLBACK_CELL_ADDRESS:
sendTextFrame("celladdress: " + payload);
break;
+ case LOK_CALLBACK_RULER_UPDATE:
+ sendTextFrame("rulerupdate: " + payload);
+ break;
default:
LOG_ERR("Unknown callback event (" << type << "): " << payload);
}
diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js
index e671dea3..7044f43d 100644
--- a/loleaflet/build/deps.js
+++ b/loleaflet/build/deps.js
@@ -410,6 +410,11 @@ var deps = {
desc: 'Contains LibreOffice programmatic to UI name style mappings'
},
+ Ruler: {
+ src: ['control/Ruler.js'],
+ desc: 'Ruler to be displayed on the map.'
+ },
+
AnimationPan: {
src: [
'dom/DomEvent.js',
diff --git a/loleaflet/dist/leaflet.css b/loleaflet/dist/leaflet.css
index 41c7abd4..4a147c0e 100644
--- a/loleaflet/dist/leaflet.css
+++ b/loleaflet/dist/leaflet.css
@@ -760,3 +760,91 @@ div.leaflet-cursor-container:hover > .leaflet-cursor-header {
.leaflet-slideshow {
background: #FFFFFF;
}
+
+/*Ruler styling*/
+.leaflet-left .leaflet-control {
+ margin: 0px;
+}
+
+.loleaflet-ruler {
+ background-color: #efefef;
+ height: 20px;
+ width: 100vw;
+ margin: 0px;
+ }
+
+.loleaflet-ruler-breakcontainer {
+ height: 100%;
+ position: absolute;
+ width: 100vw;
+ }
+
+.loleaflet-ruler-marginwrapper {
+ height: 100%;
+ position: absolute;
+ width: inherit;
+ z-index: 11;
+ }
+
+.loleaflet-ruler-breakwrapper {
+ position: absolute;
+ height: 100%;
+ overflow: hidden;
+ width: inherit;
+ z-index: 10;
+ }
+
+.loleaflet-ruler-face {
+ margin:0px auto;
+ height: 100%;
+ transition: width .2s;
+ }
+
+.loleaflet-ruler-maj {
+ height: 35%;
+ display: inline-block;
+ border-width: 0px .5px;
+ border-style: solid;
+ border-color: grey;
+ }
+
+.loleaflet-ruler-margin {
+ height: 100%;
+ background-color: #efefef;
+ transition: width .2s;
+ }
+
+.loleaflet-ruler-left {
+ left: 0px;
+ height: 100%;
+ float: left;
+ }
+
+.loleaflet-ruler-right {
+ left: 0px;
+ height: 100%;
+ float: right;
+ }
+
+.loleaflet-ruler-drag {
+ height: 100%;
+ width: 0px;
+ }
+
+.loleaflet-ruler-drag.loleaflet-ruler-right {
+ border-left: 3px solid grey;
+ }
+
+.loleaflet-ruler-drag.loleaflet-ruler-left {
+ border-right: 3px solid grey;
+ }
+
+.loleaflet-ruler-left.leaflet-drag-moving {
+ height: 100vh;
+ border-right: 2px dotted grey;
+ }
+
+.loleaflet-ruler-right.leaflet-drag-moving {
+ height: 100vh;
+ border-left: 2px dotted grey;
+ }
\ No newline at end of file
diff --git a/loleaflet/src/control/Ruler.js b/loleaflet/src/control/Ruler.js
new file mode 100644
index 00000000..2a23caa6
--- /dev/null
+++ b/loleaflet/src/control/Ruler.js
@@ -0,0 +1,174 @@
+/*
+ * Ruler Handler
+ */
+
+/* global $ L */
+L.Control.Ruler = L.Control.extend({
+ options: {
+ interactive: true,
+ marginSet: false,
+ margin1: null,
+ margin2: null,
+ nullOffset: null,
+ pageOffset: null,
+ pageWidth: null,
+ unit: 'cm',
+ convertRatioDrag: null
+ },
+
+ onAdd: function(map) {
+ map.on('rulerupdate', this._updateOptions, this);
+ map.on('docsize', this._updateBreakPoints, this);
+
+ return this._initLayout();
+ },
+
+ _initLayout: function() {
+ this._rWrapper = L.DomUtil.create('div', 'loleaflet-ruler leaflet-bar leaflet-control leaflet-control-custom');
+ this._rFace = L.DomUtil.create('div', 'loleaflet-ruler-face', this._rWrapper);
+ this._rMarginWrapper = L.DomUtil.create('div', 'loleaflet-ruler-marginwrapper', this._rFace);
+ // BP => Break Points
+ this._rBPWrapper = L.DomUtil.create('div', 'loleaflet-ruler-breakwrapper', this._rFace);
+ this._rBPContainer = L.DomUtil.create('div', 'loleaflet-ruler-breakcontainer', this._rBPWrapper);
+
+ return this._rWrapper;
+ },
+
+ _updateOptions: function(obj) {
+ this.options.margin1 = parseInt(obj['margin1']);
+ this.options.margin2 = parseInt(obj['margin2']);
+ this.options.nullOffset = parseInt(obj['leftOffset']);
+ this.options.pageWidth = parseInt(obj['pageWidth']);
+ // to be enabled only after adding support for other length units as well
+ // this.options.unit = obj['unit'].trim();
+
+ this._updateBreakPoints();
+ },
+
+ _updateBreakPoints: function() {
+
+ if (this.options.margin1 == null || this.options.margin2 == null)
+ return;
+
+ var classMajorSep = 'loleaflet-ruler-maj',
+ classMargin = 'loleaflet-ruler-margin',
+ classDraggable = 'loleaflet-ruler-drag',
+ rightComp = 'loleaflet-ruler-right',
+ leftComp = 'loleaflet-ruler-left',
+ leftMarginStr = _('Left Margin'),
+ rightMarginStr = _('Right Margin'),
+ convertRatioDrag, lMargin, rMargin, wPixel, hPixel;
+
+ lMargin = this.options.nullOffset;
+ rMargin = this.options.pageWidth - (this.options.nullOffset + this.options.margin2);
+
+ // Multiplication with this facor is temporary,
+ // I think, we need to find the margin in the left tiles
+ // and subtract here accordingly
+ wPixel = .958*this._map._docLayer._docPixelSize.x;
+ hPixel = this._map._docLayer._docPixelSize.y;
+
+ convertRatioDrag = this.options.convertRatioDrag = wPixel / this.options.pageWidth;
+
+ this._rFace.style.width = wPixel + 'px';
+ this._rFace.style.backgroundColor = 'white';
+ this._rBPContainer.style.marginLeft = (-1 * (convertRatioDrag *(1000 - (this.options.nullOffset % 1000))) + 1) + 'px';
+
+ $('.' + classMajorSep).remove();
+ for (var num = 0; num <= (this.options.pageWidth / 1000) + 1; num++) {
+
+ var marker = L.DomUtil.create('div', classMajorSep, this._rBPContainer);
+ marker.style.width = convertRatioDrag*1000 - 2 + 'px';
+
+ }
+
+ if (!this.options.marginSet) {
+
+ this.options.marginSet = true;
+
+ this._lMarginMarker = L.DomUtil.create('div', classMargin + ' ' + leftComp, this._rFace);
+ this._rMarginMarker = L.DomUtil.create('div', classMargin + ' ' + rightComp, this._rFace);
+
+ if (this.options.interactive) {
+ this._lMarginDrag = L.DomUtil.create('div', classDraggable + ' ' + leftComp, this._rMarginWrapper);
+ this._rMarginDrag = L.DomUtil.create('div', classDraggable + ' ' + rightComp, this._rMarginWrapper);
+ this._lMarginDrag.style.cursor = 'e-resize';
+ this._rMarginDrag.style.cursor = 'w-resize';
+ this._lMarginDrag.title = leftMarginStr;
+ this._rMarginDrag.title = rightMarginStr;
+ }
+ }
+
+ this._lMarginMarker.style.width = (convertRatioDrag*lMargin) + 'px';
+ this._rMarginMarker.style.width = (convertRatioDrag*rMargin) + 'px';
+
+ if (this.options.interactive) {
+ this._lMarginDrag.style.width = (convertRatioDrag*lMargin) + 'px';
+ this._rMarginDrag.style.width = (convertRatioDrag*rMargin) + 'px';
+ }
+
+ L.DomEvent.on(this._rMarginDrag, 'mousedown', this._initiateDrag, this);
+ L.DomEvent.on(this._lMarginDrag, 'mousedown', this._initiateDrag, this);
+ },
+
+ _initiateDrag: function(e) {
+
+ var dragableElem = e.srcElement || e.target;
+ L.DomEvent.on(this._rFace, 'mousemove', this._moveMargin, this);
+ L.DomEvent.on(this._map, 'mouseup', this._endDrag, this);
+ this._initialposition = e.clientX;
+
+ if (L.DomUtil.hasClass(dragableElem, 'loleaflet-ruler-right')) {
+ L.DomUtil.addClass(this._rMarginDrag, 'leaflet-drag-moving');
+ this._rFace.style.cursor = 'w-resize';
+ }
+ else {
+ L.DomUtil.addClass(this._lMarginDrag, 'leaflet-drag-moving');
+ this._rFace.style.cursor = 'e-resize';
+ }
+ },
+
+ _moveMargin: function(e) {
+ var posChange = e.clientX - this._initialposition;
+
+ if (L.DomUtil.hasClass(this._rMarginDrag, 'leaflet-drag-moving')) {
+ var rMargin = this.options.pageWidth - (this.options.nullOffset + this.options.margin2);
+ this._rMarginDrag.style.width = this.options.convertRatioDrag*rMargin - posChange + 'px';
+ }
+ else {
+ this._lMarginDrag.style.width = this.options.convertRatioDrag*this.options.nullOffset + posChange + 'px';
+ }
+ },
+
+ _endDrag: function(e) {
+ var dragableElem = e.originalEvent.srcElement || e.originalEvent.target;
+ var posChange = e.originalEvent.clientX - this._initialposition;
+ var unoObj = {}, marginType, fact;
+
+ L.DomEvent.off(this._rFace, 'mousemove', this._moveMargin, this);
+ L.DomEvent.off(this._map, 'mouseup', this._endDrag, this);
+
+ if (L.DomUtil.hasClass(dragableElem, 'loleaflet-ruler-right')) {
+ marginType = 'Margin2';
+ fact = -1;
+ L.DomUtil.removeClass(this._rMarginDrag, 'leaflet-drag-moving');
+ }
+ else {
+ marginType = 'Margin1';
+ fact = 1;
+ L.DomUtil.removeClass(this._lMarginDrag, 'leaflet-drag-moving');
+ }
+
+ this._rFace.style.cursor = 'default';
+
+ unoObj[marginType] = {};
+ unoObj[marginType]['type'] = 'string';
+ unoObj[marginType]['value'] = fact * posChange/(this.options.convertRatioDrag * this.options.pageWidth);
+ this._map._socket.sendMessage('uno .uno:RulerChangeState ' + JSON.stringify(unoObj));
+ }
+});
+
+
+L.control.ruler = function (options) {
+ return new L.Control.Ruler(options);
+};
\ No newline at end of file
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index d909ad8f..aed686f4 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -439,6 +439,9 @@ L.TileLayer = L.GridLayer.extend({
else if (textMsg.startsWith('unocommandresult:')) {
this._onUnoCommandResultMsg(textMsg);
}
+ else if (textMsg.startsWith('rulerupdate:')) {
+ this._onRulerUpdate(textMsg);
+ }
else if (textMsg.startsWith('contextmenu:')) {
this._onContextMenuMsg(textMsg);
}
@@ -1059,6 +1062,13 @@ L.TileLayer = L.GridLayer.extend({
},
+ _onRulerUpdate: function (textMsg) {
+ textMsg = textMsg.substring(13);
+ var obj = JSON.parse(textMsg);
+
+ this._map.fire('rulerupdate', obj);
+ },
+
_onContextMenuMsg: function (textMsg) {
textMsg = textMsg.substring(13);
var obj = JSON.parse(textMsg);
diff --git a/loleaflet/src/map/Map.js b/loleaflet/src/map/Map.js
index 600621e9..c8e99784 100644
--- a/loleaflet/src/map/Map.js
+++ b/loleaflet/src/map/Map.js
@@ -117,6 +117,9 @@ L.Map = L.Evented.extend({
if (!this.initComplete) {
this._fireInitComplete('doclayerinit');
}
+ if (this._docLayer._docType == 'text') {
+ L.control.ruler({position:'topleft'}).addTo(this);
+ }
});
this.on('updatetoolbarcommandvalues', function(e) {
if (this.initComplete) {
More information about the Libreoffice-commits
mailing list