Reset Top/Bottom values of page margin if view section changes

- we are string previous response values of top/bottom margin
- resone is because we need that values to pass after dragEnd.
- but if we change section foucs from Header to Footer or Text area to Shape then we need to reset that old values with the incoming response
- this patch will do that.
- for `table` we will hide the marker as we do not need that. table already have there marker to resize.
Signed-off-by: Darshan-upadhyay1110 <[email protected]>

Change-Id: Iffd3cbf08806666b858d9c3da7ca6362085223dd

browser/src/control/VRuler.js

@@ -36,6 +36,8 @@ L.Control.VRuler = L.Control.extend({
  map.on('scrolllimits', this._updatePaintTimer, this);
  map.on('moveend', this._fixOffset, this);
  map.on('updatepermission', this._changeInteractions, this);
+ map.on('resettopbottompagespacing', this._resetTopBottomPageSpacing, this);
+ map.on('commandstatechanged', this.onCommandStateChanged, this);
  L.DomUtil.addClass(map.getContainer(), 'hasruler');
  this._map = map;
 
@@ -47,6 +49,19 @@ L.Control.VRuler = L.Control.extend({
  this.options.timer = setTimeout(L.bind(this._updateBreakPoints, this), 300);
  },
 
+ _resetTopBottomPageSpacing: function(e) {
+ this.options.pageTopMargin = undefined;
+ this.options.pageBottomMargin = undefined;
+ this.options.disableMarker = e.disableMarker;
+ },
+
+ onCommandStateChanged(e) {
+ // reset Top bottom margin on style change
+ // Style will change when we do focus on section like Header, Footer, Main text section
+ if (e.commandName == '.uno:StyleApply')
+ this._resetTopBottomPageSpacing();
+ },
+
  _changeInteractions: function(e) {
  if (this._tMarginDrag) {
  if (e.perm === 'edit') {
@@ -139,41 +154,27 @@ L.Control.VRuler = L.Control.extend({
  },
 
  _updateParagraphIndentations: function() {
- var items = this._map['stateChangeHandler'];
- var state = items.getItemValue('.uno:LeftRightParaMargin');
-
- if (!state)
- return;
-
- this.options.leftParagraphIndent = parseFloat(state.left.replace(',', '.'));
- this.options.rightParagraphIndent = parseFloat(state.right.replace(',', '.'));
- this.options.indentUnit = state.unit;
-
- var pxPerMm100 = this._map._docLayer._docPixelSize.x / (this._map._docLayer._docWidthTwips * 2540/1440);
-
- // Conversion to mm100.
- if (this.options.indentUnit === 'inch') {
- this.options.leftParagraphIndent = this.options.leftParagraphIndent * 2540;
- this.options.rightParagraphIndent = this.options.rightParagraphIndent * 2540;
- }
-
- this.options.leftParagraphIndent *= pxPerMm100;
- this.options.rightParagraphIndent *= pxPerMm100;
 
  // for horizontal Ruler we need to also consider height of navigation and toolbar-wrraper 
  var documentTop = document.getElementById('document-container').getBoundingClientRect().top;
  // rTSContainer is the reference element.
- var pStartPosition = this._rTSContainer.getBoundingClientRect().top + this.options.leftParagraphIndent - documentTop;
- var pEndPosition = this._rTSContainer.getBoundingClientRect().bottom - this.options.rightParagraphIndent - documentTop;
+ var pStartPosition = this._rTSContainer.getBoundingClientRect().top - documentTop;
+ var pEndPosition = this._rTSContainer.getBoundingClientRect().bottom - documentTop;
 
  // We calculated the positions. Now we should move them to left in order to make their sharp edge point to the right direction..
- this._pVerticalStartMarker.style.left = pStartPosition - this._pVerticalStartMarker.getBoundingClientRect().width + 'px';
+ this._pVerticalStartMarker.style.left = pStartPosition - (this._pVerticalStartMarker.getBoundingClientRect().width/2) + 'px';
+ this._pVerticalStartMarker.style.display = 'block';
  this._pVerticalEndMarker.style.left = pEndPosition - this._pVerticalEndMarker.getBoundingClientRect().width + 'px';
+ this._pVerticalEndMarker.style.display = 'block';
 
  // we do similar operation as we do in Horizontal ruler 
  // but this element rotated to 90deg so top of marker should be opposite to horizontal (Negative in this case)
  this._markerHorizontalLine.style.top = '-100vw';
  this._markerHorizontalLine.style.left = this._pVerticalStartMarker.style.left;
+ if (this.options.disableMarker) {
+ this._pVerticalStartMarker.style.display = 'none';
+ this._pVerticalEndMarker.style.display = 'none';
+ }
  },
 
  _updateBreakPoints: function() {
@@ -193,6 +194,7 @@ L.Control.VRuler = L.Control.extend({
  // this._bMarginDrag.style.width near the end of this function), so presumably it
  // doesn't matter that much what bottomMargin is.
  bottomMargin = this.options.pageWidth - (this.options.nullOffset + this.options.margin2);
+ this.options.pageBottomMargin = bottomMargin;
 
  scale = this._map.getZoomScale(this._map.getZoom(), 10);
  wPixel = (docLayer._docPixelSize.y/docLayer._pages) - (this.options.tileMargin * 2) * scale;

browser/src/layer/tile/CanvasTileLayer.js

@@ -1287,6 +1287,7 @@ L.CanvasTileLayer = L.Layer.extend({
  this._onShapeSelectionContent(textMsg);
  }
  else if (textMsg.startsWith('graphicselection:')) {
+ this._map.fire('resettopbottompagespacing');
  this._onGraphicSelectionMsg(textMsg);
  }
  else if (textMsg.startsWith('graphicinnertextarea:')) {

browser/src/layer/tile/TileLayer.TableOverlay.js

@@ -263,6 +263,7 @@ L.CanvasTileLayer.include({
  var message = JSON.parse(textMsg);
  this._currentTableMarkerJson = textMsg;
  this._currentTableData = message;
+ this._map.fire('resettopbottompagespacing',{disableMarker:this._map._docLayer.hasTableSelection()});
  },
  _addSelectionMarkers: function (type, positions, start, end) {
  if (positions.length < 2)