loleaflet: add column/row-header selection supportfeature/calc-rowcolumn-selection

6 files changed, 101 insertions, 14 deletions

diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js
index 9f433acaf..657ad69cf 100644
--- a/loleaflet/build/deps.js
+++ b/loleaflet/build/deps.js
@@ -284,6 +284,7 @@ var deps = {
 
         ControlColumnHeader: {
                 src: ['control/Control.js',
+                      'control/Control.ColRowHeader.js',
                       'control/Control.ColumnHeader.js'],
                 heading: 'Controls',
                 desc: 'Column Header bar'
@@ -291,6 +292,7 @@ var deps = {
 
         ControlRowHeader: {
                 src: ['control/Control.js',
+                      'control/Control.ColRowHeader.js',
                       'control/Control.RowHeader.js'],
                 heading: 'Controls',
                 desc: 'Row Header bar'
diff --git a/loleaflet/dist/leaflet.css b/loleaflet/dist/leaflet.css
index d31be8a86..1c44072b4 100644
--- a/loleaflet/dist/leaflet.css
+++ b/loleaflet/dist/leaflet.css
@@ -785,6 +785,13 @@ a.leaflet-control-buttons:hover:first-child {
         overflow: hidden;
         }
 
+.spreadsheet-table-noselect {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+         user-select: none;
+        -webkit-user-drag: none;
+        }
+
 .spreadsheet-table-column {
         table-layout: fixed;
         left: 0px;
diff --git a/loleaflet/src/control/Control.ColRowHeader.js b/loleaflet/src/control/Control.ColRowHeader.js
new file mode 100644
index 000000000..2068d69a5
--- /dev/null
+++ b/loleaflet/src/control/Control.ColRowHeader.js
@@ -0,0 +1,69 @@
+/*
+ * L.Control.ColRowHeader
+ * 
+ * Provides common methods for the column and row headers.
+ */
+
+L.Control.ColRowHeader = L.Control.extend({
+
+	LOButtons: {
+		left: 1,
+		middle: 2,
+		right: 4
+	},
+
+	JSButtons: {
+		left: 0,
+		middle: 1,
+		right: 2
+	},
+
+	_initializeColRowBar: function(type) {
+	    this._type = type;
+	    L.DomEvent.on(this._table, 'mousedown', this._onMouseEvent, this);
+	    L.DomEvent.on(this._table, 'mouseup', this._onMouseEvent, this);
+	},
+	
+	// Avoid sending mouse move events when we don't have a button down (they are just
+	// ignored client side).
+	_enableMouseMove: function(enable) {
+	    if (enable === false) {
+	        L.DomEvent.off(this._table, 'mousemove', this._onMouseEvent, this);
+	    } else {
+		L.DomEvent.on(this._table, 'mousemove', this._onMouseEvent, this);
+	    }
+	},
+
+	_onMouseEvent: function(e) {
+	    var docLayer = this._map._docLayer;
+	    if (!docLayer) {
+		return;
+	    }
+
+	    var mousePos = docLayer._latLngToTwips(this._map.containerPointToLatLng(this._map.mouseEventToContainerPoint(e)));
+	    var modifier = this._map.keyboard.modifier;
+	    if (e.type === 'mousemove') {
+	        docLayer._postMouseEvent('move', mousePos.x, mousePos.y, 1, this._cachedButtons, modifier, this._type);
+	        return;
+	    }
+
+	    var buttons = 0;
+	    buttons |= e.button === this.JSButtons.left ? this.LOButtons.left : 0;
+	    buttons |= e.button === this.JSButtons.middle ? this.LOButtons.middle : 0;
+	    buttons |= e.button === this.JSButtons.right ? this.LOButtons.right : 0;
+
+	    if (e.type === 'mousedown') {
+	        this._enableMouseMove(true);
+	        this._cachedButtons = buttons;
+	        docLayer._postMouseEvent('buttondown', mousePos.x, mousePos.y, 1, buttons, modifier, this._type);
+	    } else if (e.type === 'mouseup') {
+	        this._enableMouseMove(false);
+	        docLayer._postMouseEvent('buttonup', mousePos.x, mousePos.y, 1, buttons, modifier, this._type);
+	    }
+	},
+
+});
+
+L.colrowheader = function (options) {
+	return new L.ColRowHeader(options);
+};
\ No newline at end of file
diff --git a/loleaflet/src/control/Control.ColumnHeader.js b/loleaflet/src/control/Control.ColumnHeader.js
index 17d9082ec..a6746b9ad 100644
--- a/loleaflet/src/control/Control.ColumnHeader.js
+++ b/loleaflet/src/control/Control.ColumnHeader.js
@@ -2,7 +2,8 @@
 * Control.ColumnHeader
 */
 
-L.Control.ColumnHeader = L.Control.extend({
+L.Control.ColumnHeader = L.Control.ColRowHeader.extend({
+
     onAdd: function () {
 	var docContainer = L.DomUtil.get('document-container');
 	var divHeader = L.DomUtil.create('div', 'spreadsheet-container-column', docContainer.parentElement);
@@ -22,8 +23,10 @@ L.Control.ColumnHeader = L.Control.extend({
 	this._viewPort = 0;
 
 	// dummy initial header
-	var dummy = L.DomUtil.create('th', 'spreadsheet-table-column-cell', this._columns);
-	L.DomUtil.create('div', 'spreadsheet-table-column-cell-text', dummy);
+	var dummy = L.DomUtil.create('th', 'spreadsheet-table-column-cell spreadsheet-table-noselect', this._columns);
+	L.DomUtil.create('div', 'spreadsheet-table-column-cell-text spreadsheet-table-noselect', dummy);
+
+	this._initializeColRowBar('colbar');
 
 	return document.createElement('div');
         },
@@ -57,8 +60,8 @@ L.Control.ColumnHeader = L.Control.extend({
 	    for (iterator = 0; iterator < columns.length; iterator++) {
 		width = columns[iterator].size - (iterator > 0 ? columns[iterator - 1].size : 0);
 		twip = new L.Point(width, width);
-		column = L.DomUtil.create('th', 'spreadsheet-table-column-cell', this._columns);
-		text = L.DomUtil.create('div', 'spreadsheet-table-column-cell-text', column);
+		column = L.DomUtil.create('th', 'spreadsheet-table-column-cell spreadsheet-table-noselect', this._columns);
+		text = L.DomUtil.create('div', 'spreadsheet-table-column-cell-text spreadsheet-table-noselect', column);
 		text.innerHTML = columns[iterator].text;
 		column.width = Math.round(converter.call(context, twip).x) - 1 + 'px';
 	    }
diff --git a/loleaflet/src/control/Control.RowHeader.js b/loleaflet/src/control/Control.RowHeader.js
index c4fab2aeb..8700c65c8 100644
--- a/loleaflet/src/control/Control.RowHeader.js
+++ b/loleaflet/src/control/Control.RowHeader.js
@@ -2,7 +2,7 @@
  * L.Control.RowHeader
 */
 
-L.Control.RowHeader = L.Control.extend({
+L.Control.RowHeader = L.Control.ColRowHeader.extend({
     onAdd: function () {
 	var docContainer = L.DomUtil.get('document-container');
 	var divRowHeader = L.DomUtil.create('div', 'spreadsheet-container-row', docContainer.parentElement);
@@ -15,8 +15,10 @@ L.Control.RowHeader = L.Control.extend({
 
 	// dummy initial row header
 	var trRow = L.DomUtil.create('tr', '', this._rows);
-	var thRow = L.DomUtil.create('th', 'spreadsheet-table-row-cell', trRow);
-	L.DomUtil.create('div', 'spreadsheet-table-row-cell-text', thRow);
+	var thRow = L.DomUtil.create('th', 'spreadsheet-table-row-cell  spreadsheet-table-noselect', trRow);
+	L.DomUtil.create('div', 'spreadsheet-table-row-cell-text  spreadsheet-table-noselect', thRow);
+
+	this._initializeColRowBar('rowbar');
 
 	return document.createElement('div');
     },
@@ -51,8 +53,8 @@ L.Control.RowHeader = L.Control.extend({
 		height = rows[iterator].size - (iterator > 0 ? rows[iterator - 1].size : 0);
 		twip = new L.Point(height, height);
 		row  = L.DomUtil.create('tr', '', this._rows);
-		cell = L.DomUtil.create('th', 'spreadsheet-table-row-cell', row);
-		text = L.DomUtil.create('div', 'spreadsheet-table-row-cell-text', cell);
+		cell = L.DomUtil.create('th', 'spreadsheet-table-row-cell  spreadsheet-table-noselect', row);
+		text = L.DomUtil.create('div', 'spreadsheet-table-row-cell-text  spreadsheet-table-noselect', cell);
 		text.innerHTML  = rows[iterator].text;
 		height = Math.round(converter.call(context, twip).y) - (iterator > 0 ? 1 : 0) + 'px';
 		L.DomUtil.setStyle(text, 'line-height', height);
diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index 1810ca374..6f05a2f53 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -660,15 +660,19 @@ L.TileLayer = L.GridLayer.extend({
 		this._onUpdateCellCursor();
 	},
 
-	_postMouseEvent: function(type, x, y, count, buttons, modifier) {
+	_postMouseEvent: function(type, x, y, count, buttons, modifier, targetwindow) {
 		if (this._clientZoom) {
 			// the zoom level has changed
 			L.Socket.sendMessage('clientzoom ' + this._clientZoom);
 			this._clientZoom = null;
 		}
-		L.Socket.sendMessage('mouse type=' + type +
-				' x=' + x + ' y=' + y + ' count=' + count +
-				' buttons=' + buttons + ' modifier=' + modifier);
+		var message = 'mouse type=' + type +
+			      ' x=' + x + ' y=' + y + ' count=' + count +
+			      ' buttons=' + buttons + ' modifier=' + modifier;
+		if (targetwindow) {
+		    message += ' targetwindow=' + targetwindow;
+		}
+		L.Socket.sendMessage(message);
 	},
 
 	_postKeyboardEvent: function(type, charcode, keycode) {