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 <[email protected]> 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 <[email protected]> Tested-by: pranavk <[email protected]> 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 <[email protected]> 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 <[email protected]> Tested-by: pranavk <[email protected]> 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 <[email protected]> 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 <[email protected]> Tested-by: pranavk <[email protected]> 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 <[email protected]> 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 <[email protected]> Tested-by: pranavk <[email protected]> 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) { _______________________________________________ Libreoffice-commits mailing list [email protected] https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
