[Libreoffice-commits] online.git: loleaflet/build loleaflet/src

[Libreoffice Gerrit user]

 loleaflet/build/deps.js                |    5 +
 loleaflet/src/core/Socket.js           |    3 
 loleaflet/src/layer/BackgroundColor.js |  101 +++++++++++++++++++++++++++++++++
 3 files changed, 108 insertions(+), 1 deletion(-)

New commits:
commit 5f79f5d89484b3498e97ed67072afad0751454d7
Author:     Iván Sánchez Ortega <ivan.sanchez at collabora.com>
AuthorDate: Wed May 8 16:48:05 2019 +0200
Commit:     Iván Sánchez Ortega <ivan.sanchez at collabora.com>
CommitDate: Thu May 16 12:21:35 2019 +0200

    loleaflet: Background color for Calc
    
    This adds a new L.Layer, L.CalcBackground, which reacts to 'statechange' websocket
    messages, and sets the background style of the Leaflet container to match
    the color of the current Calc sheet.
    
    Change-Id: I33d39c86fb52708419756b85660d7be450c91eba
    Reviewed-on: https://gerrit.libreoffice.org/71995
    Reviewed-by: Iván Sánchez Ortega <ivan.sanchez at collabora.com>
    Tested-by: Iván Sánchez Ortega <ivan.sanchez at collabora.com>

diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js
index 4e18f1989..6db2915ba 100644
--- a/loleaflet/build/deps.js
+++ b/loleaflet/build/deps.js
@@ -59,7 +59,10 @@ var deps = {
 	},
 
 	CalcTileLayer: {
-		src: ['layer/tile/CalcTileLayer.js'],
+		src: [
+			'layer/tile/CalcTileLayer.js',
+			'layer/BackgroundColor.js',
+		],
 		desc: 'Calc tile layer.',
 		deps: ['TileLayer']
 	},
diff --git a/loleaflet/src/core/Socket.js b/loleaflet/src/core/Socket.js
index 3a3d8f269..ecc6f6014 100644
--- a/loleaflet/src/core/Socket.js
+++ b/loleaflet/src/core/Socket.js
@@ -746,6 +746,9 @@ L.Socket = L.Class.extend({
 						tileHeightTwips: tileHeightTwips,
 						docType: command.type
 					});
+					if (!this._map.options.backgroundLayer) {
+						this._map.options.backgroundLayer = new L.CalcBackground().addTo(this._map);
+					}
 				}
 				else {
 					if (command.type === 'presentation' &&
diff --git a/loleaflet/src/layer/BackgroundColor.js b/loleaflet/src/layer/BackgroundColor.js
new file mode 100644
index 000000000..2e0198e28
--- /dev/null
+++ b/loleaflet/src/layer/BackgroundColor.js
@@ -0,0 +1,101 @@
+/*
+ * A Leaflet layer that just sets the background colour of the map.
+ *
+ * This just changes the map container's style, and does not
+ * implement pane positioning - adding two instances of this
+ * layer to a map at a time will conflict.
+ */
+
+L.BackgroundColor = L.Layer.extend({
+	options: {
+		/*
+		 * The background color that the map shall take when this layer is
+		 * added to it. Must be a string containing a CSS color value, as per
+		 * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+		 *
+		 * The default is Leaflet's default grey.
+		 */
+		color: '#dfdfdf'
+	},
+
+	onAdd: function() {
+		return this.setColor(this.options.color);
+	},
+
+	remove: function() {
+		delete this._map.style.background;
+	},
+
+	/*
+	 * Expects a CSS color value. Sets the map background to that color, and
+	 * resets the 'color' option of this layer.
+	 */
+	setColor: function(cssColor) {
+		this.options.color = cssColor;
+		if (this._map) {
+			this._map.getContainer().style.background = cssColor;
+		}
+		return this;
+	}
+});
+
+// Libreoffice-specific functionality follows.
+
+/*
+ * A L.BackgroundColor that automatically resets its color
+ * based on 'statechange' messages from lowsd.
+ */
+L.CalcBackground = L.BackgroundColor.extend({
+	onAdd: function(map) {
+		map.on('commandstatechanged', this._onStateChanged, this);
+		return this.setColor(this.options.color);
+	},
+
+	remove: function() {
+		delete this._map.style.background;
+		this._map.off('commandstatechanged', this._onStateChanged, this);
+	},
+
+	// State flag for the heuristic algorithm used in _onStateChanged
+	_bgCanBeSet: true,
+
+	_onStateChanged: function(ev) {
+		// There are lots of statechange events - but there is no indication of what the
+		// background color of a Calc sheet is. In order to discern the background color
+		// there is a heuristic method which uses three statechange events: BackgroundColor,
+		// RowColSelCount and StatusPosDoc.
+		// A BackgroundColor statechange will be regarded as a change of background
+		// color only if:
+		// - There has been no previous RowColSelCount statechange (first load),
+		// - There has been a StatusPosDoc (sheet change) before the last RowColSelCount,
+		// - The last RowColSelCount affected all the sheet (re-applying color).
+
+		if (ev.commandName === '.uno:StatusDocPos') {
+			this._bgCanBeSet = true;
+			return;
+		}
+		if (ev.commandName === '.uno:RowColSelCount') {
+			this._bgCanBeSet = ev.state === '1048576 rows, 1024 columns selected';
+			return;
+		}
+		if (ev.commandName !== '.uno:BackgroundColor') {
+			return;
+		}
+
+		// Given an integer coming from a websocket message from UNO,
+		// calculate a '#RRGGBB' string for the corresponding CSS color
+		// Special value: -1 means 'no fill' which translates to white background in Calc
+		var color;
+		if (ev.state === '-1') {
+			color = 'white';
+		} else {
+			color =
+				'#' +
+				parseInt(ev.state)
+					.toString(16)
+					.padStart(6, '0');
+		}
+
+		this.setColor(color);
+	}
+});