Calc: Implement column row highlight feature

browser/css/color-palette-dark.css

@@ -56,6 +56,7 @@
 	--color-text-calc-header-selected: #fff;
 	--color-border-calc-header: var(--color-border-dark);
 	--color-calc-header-hover: #646464;
+	--column-row-highlight: #B0B0B0;
 
 	--color-grid-helper-line-solid: #e6e6e6;
 	--color-grid-helper-line-dashed: #191919;

browser/css/color-palette.css

@@ -57,6 +57,7 @@
 	--color-border-calc-header: #c0c0c0;
 	--color-calc-header-hover: #fff;
 	--color-calc-comment: #BF819E;
+	--column-row-highlight: #CCFFFF;
 
 	--color-grid-helper-line-solid: #e6e6e6;
 	--color-grid-helper-line-dashed: #191919;

browser/src/control/Control.Menubar.js

@@ -768,6 +768,7 @@ L.Control.Menubar = L.Control.extend({
 				   {uno: '.uno:Navigator', id: 'navigator'},
 				   {type: 'separator'},
 				   {name: _UNO('.uno:ToggleSheetGrid', 'spreadsheet', true), uno: '.uno:ToggleSheetGrid', id: 'sheetgrid'},
+				   {name: _UNO('.uno:ViewColumnRowHighlighting', 'spreadsheet', true), type:'action', id: 'columnrowhighlight'},
 				   {name: _UNO('.uno:FreezePanes', 'spreadsheet', true), id: 'FreezePanes', type: 'action', uno: '.uno:FreezePanes'},
 				   {name: _UNO('.uno:FreezeCellsMenu', 'spreadsheet', true), id: 'FreezeCellsMenu', type: 'menu', uno: '.uno:FreezeCellsMenu', menu: [
 					   {name: _UNO('.uno:FreezePanesColumn', 'spreadsheet', true), id: 'FreezePanesColumn', type: 'action', uno: '.uno:FreezePanesColumn'},
@@ -1888,6 +1889,10 @@ L.Control.Menubar = L.Control.extend({
 						}
 					} else if (id === 'serveraudit' && (app.isAdminUser === false || !self._map.serverAuditDialog)) {
 						$(aItem).css('display', 'none');
+					} else if (id === 'columnrowhighlight') {
+						itemState = app.map.uiManager.getHighlightMode();
+						if (itemState) $(aItem).addClass(constChecked);
+						else $(aItem).removeClass(constChecked);
 					} else {
 						$(aItem).removeClass('disabled');
 					}
@@ -2149,6 +2154,8 @@ L.Control.Menubar = L.Control.extend({
 			app.dispatcher.dispatch('.uno:AcceptAllTrackedChanges');
 		} else if (id === 'rejectalltrackedchanges') {
 			app.dispatcher.dispatch('.uno:RejectAllTrackedChanges');
+		} else if (id === 'columnrowhighlight') {
+			app.dispatcher.dispatch('columnrowhighlight');
 		}
 		// Inform the host if asked
 		if (postmessage)

browser/src/control/Control.NotebookbarCalc.js

@@ -1169,6 +1169,13 @@ L.Control.NotebookbarCalc = L.Control.NotebookbarWriter.extend({
 				'command': '.uno:ToggleSheetGrid',
 				'accessibility': { focusBack: true,	combination: 'SG', de: null }
 			},
+			{
+				'id': 'colrowhighlight',
+				'type': 'bigcustomtoolitem',
+				'text': _UNO('.uno:ViewColumnRowHighlighting', 'spreadsheet', true),
+				'command': 'columnrowhighlight',
+				'accessibility': { focusBack: true,	combination: 'HL', de: null }
+			},
 			(window.mode.isTablet()) ?
 				{
 					'id': 'closemobile',

browser/src/control/Control.UIManager.js

@@ -80,6 +80,17 @@ L.Control.UIManager = L.Control.extend({
 		return this.shouldUseNotebookbarMode() ? 'notebookbar' : 'classic';
 	},
 
+	getHighlightMode: function() {
+		return window.prefs.getBoolean('ColumnRowHighlightEnabled', false);
+	},
+
+	setHighlightMode: function( newState ) {
+		window.prefs.set('ColumnRowHighlightEnabled', newState);
+		let highlightState = newState? 'true' : 'false';
+		this.map['stateChangeHandler'].setItemValue('columnrowhighlight', highlightState);
+		this._map.fire('commandstatechanged', {commandName : 'columnrowhighlight', state : highlightState});
+	},
+
 	shouldUseNotebookbarMode: function() {
 		let forceCompact = window.prefs.getBoolean('compactMode', null);
 		// all other cases should default to notebookbar
@@ -376,6 +387,10 @@ L.Control.UIManager = L.Control.extend({
 			// remove unused elements
 			L.DomUtil.remove(L.DomUtil.get('presentation-controls-wrapper'));
 			document.getElementById('selectbackground').parentNode.removeChild(document.getElementById('selectbackground'));
+
+			let highlightState = this.getHighlightMode()? 'true' : 'false';
+			this.map['stateChangeHandler'].setItemValue('columnrowhighlight', highlightState);
+			this._map.fire('commandstatechanged', {commandName : 'columnrowhighlight', state : highlightState});
 		}
 
 		if (this.map.isPresentationOrDrawing()) {

browser/src/docdispatcher.ts

@@ -456,6 +456,10 @@ class Dispatcher {
 			// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
 			L.DomUtil.get('spreadsheet-tab-scroll').scrollLeft = 100000;
 		};
+		this.actionsMap['columnrowhighlight'] = function () {
+			var newState = !app.map.uiManager.getHighlightMode();
+			app.map.uiManager.setHighlightMode(newState);
+		};
 	}
 
 	private addImpressAndDrawCommands() {

browser/src/layer/tile/CalcTileLayer.js

@@ -13,7 +13,7 @@
  * Calc tile layer is used to display a spreadsheet document
  */
 
-/* global app */
+/* global app CPolyUtil CPolygon */
 
 L.CalcTileLayer = L.CanvasTileLayer.extend({
 	options: {
@@ -1045,6 +1045,60 @@ L.CalcTileLayer = L.CanvasTileLayer.extend({
 			this._update();
 			this.enableDrawing();
 		}
+		if (this._map.uiManager.getHighlightMode())
+			this._highlightColAndRow(textMsg);
+		else
+			this._resetReferencesMarks();
+	},
+
+	_highlightColAndRow: function (textMsg) {
+		this._resetReferencesMarks();
+		var strTwips = textMsg.match(/\d+/g);
+		var references = [];
+		this._referencesAll = [];
+		var rectangles = [];
+		var strColor = getComputedStyle(document.documentElement).getPropertyValue('--column-row-highlight');
+		var maxCol = 268435455;
+		var maxRow = 20971124;
+		var part = this._selectedPart;
+		var topLeftTwips, offset, boundsTwips;
+
+		for(let i = 0; i < 2; i++) {
+			if (i == 0) {
+				// Column rectangle
+				topLeftTwips = new L.Point(parseInt(strTwips[0]), parseInt(0));
+				offset = new L.Point(parseInt(strTwips[2]), parseInt(maxCol));
+				boundsTwips = this._convertToTileTwipsSheetArea(
+					new L.Bounds(topLeftTwips, topLeftTwips.add(offset)));
+				rectangles.push([boundsTwips.getBottomLeft(), boundsTwips.getBottomRight(),
+				boundsTwips.getTopLeft(), boundsTwips.getTopRight()]);
+			} else {
+				// Row rectangle
+				topLeftTwips = new L.Point(parseInt(0), parseInt(strTwips[1]));
+				offset = new L.Point(parseInt(maxRow), parseInt(strTwips[4]));
+				boundsTwips = this._convertToTileTwipsSheetArea(
+					new L.Bounds(topLeftTwips, topLeftTwips.add(offset)));
+				rectangles.push([boundsTwips.getBottomLeft(), boundsTwips.getBottomRight(),
+					boundsTwips.getTopLeft(), boundsTwips.getTopRight()]);
+			}
+
+		    var docLayer = this;
+		    var pointSet = CPolyUtil.rectanglesToPointSet(rectangles, function (twipsPoint) {
+				var corePxPt = docLayer._twipsToCorePixels(twipsPoint);
+				corePxPt.round();
+				return corePxPt;
+			});
+			var reference = new CPolygon(pointSet, {
+				pointerEvents: 'none',
+				fillColor: strColor,
+				fillOpacity: 0.25,
+				weight: 2 * app.dpiScale,
+				opacity: 0.25});
+
+			references.push({mark: reference, part: part});
+			this._referencesAll.push(references[i]);
+		}
+		this._updateReferenceMarks();
 	},
 
 	_getEditCursorRectangle: function (msgObj) {

browser/src/unocommands.js

@@ -519,6 +519,7 @@ var unoCommandsArray = {
 	'Validation':{spreadsheet:{menu:_('~Validity...'),},},
 	'VerticalText':{global:{context:_('Insert Vertical Text'),menu:_('Vertical Text'),},},
 	'View3D':{global:{menu:_('~3D View...'),},},
+	'ViewColumnRowHighlighting':{spreadsheet:{menu:_('Column/Row Highlighting'),},},
 	'ViewMenu':{global:{menu:_('~View'),},},
 	'Watermark':{text:{menu:_('Watermark...'),},},
 	'WordCountDialog':{text:{menu:_('~Word Count...'),},},