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

Henry Castro hcastro at collabora.com
Sun Aug 7 15:13:54 UTC 2016


 loleaflet/build/deps.js                       |   15 +++--
 loleaflet/src/control/Control.ColumnHeader.js |   38 ++++++++++++-
 loleaflet/src/control/Control.Header.js       |   75 ++++++++++++++++++++++++++
 loleaflet/src/control/Control.RowHeader.js    |   38 ++++++++++++-
 4 files changed, 160 insertions(+), 6 deletions(-)

New commits:
commit 77224486f28c12b34d004790fa2fcd4595f31b65
Author: Henry Castro <hcastro at collabora.com>
Date:   Sun Aug 7 11:13:59 2016 -0400

    loleaflet: add drag & drop Column/Row resize

diff --git a/loleaflet/build/deps.js b/loleaflet/build/deps.js
index 105cc6b..284aca3 100644
--- a/loleaflet/build/deps.js
+++ b/loleaflet/build/deps.js
@@ -260,30 +260,37 @@ var deps = {
 		desc: 'Parts preview sidebar'
 	},
 
+	ControlHeader: {
+		src: ['control/Control.js',
+		      'control/Control.Header.js'],
+		heading: 'Controls',
+		desc: 'Header Item'
+	},
+
 	ControlColumnHeader: {
 		src: ['control/Control.js',
-			  'control/Control.ColumnHeader.js'],
+		      'control/Control.ColumnHeader.js'],
 		heading: 'Controls',
 		desc: 'Column Header bar'
 	},
 
 	ControlRowHeader: {
 		src: ['control/Control.js',
-			  'control/Control.RowHeader.js'],
+		      'control/Control.RowHeader.js'],
 		heading: 'Controls',
 		desc: 'Row Header bar'
 	},
 
 	ControlContextmenu: {
 		src: ['control/Control.js',
-			'control/Control.ContextMenu.js'],
+		      'control/Control.ContextMenu.js'],
 		heading: 'Controls',
 		desc: 'Context Menu'
 	},
 
 	ControlMenubar: {
 		src: ['control/Control.js',
-			'control/Control.Menubar.js'],
+		      'control/Control.Menubar.js'],
 		heading: 'Controls',
 		desc: 'Menu bar'
 	},
diff --git a/loleaflet/src/control/Control.ColumnHeader.js b/loleaflet/src/control/Control.ColumnHeader.js
index 45d48b5..cd0460f 100644
--- a/loleaflet/src/control/Control.ColumnHeader.js
+++ b/loleaflet/src/control/Control.ColumnHeader.js
@@ -3,7 +3,11 @@
 */
 
 /* global $ _ */
-L.Control.ColumnHeader = L.Control.extend({
+L.Control.ColumnHeader = L.Control.Header.extend({
+	options: {
+		cursor: 'col-resize'
+	},
+
 	onAdd: function (map) {
 		map.on('updatepermission', this._onUpdatePermission, this);
 		this._initialized = false;
@@ -101,6 +105,8 @@ L.Control.ColumnHeader = L.Control.extend({
 			column = L.DomUtil.create('div', 'spreadsheet-header-column', this._columns);
 			text = L.DomUtil.create('div', 'spreadsheet-header-column-text', column);
 			resize = L.DomUtil.create('div', 'spreadsheet-header-column-resize', column);
+			resize.column = iterator + 1;
+			resize.width = width;
 			var content = columns[iterator].text;
 			text.setAttribute('rel', 'spreadsheet-column-' + content); // for easy addressing
 			text.innerHTML = content;
@@ -114,6 +120,7 @@ L.Control.ColumnHeader = L.Control.extend({
 				L.DomUtil.setStyle(resize, 'width', '3px');
 			}
 			L.DomEvent.addListener(text, 'click', this._onColumnHeaderClick, this);
+			this.mouseInit(resize);
 		}
 	},
 
@@ -163,6 +170,35 @@ L.Control.ColumnHeader = L.Control.extend({
 		this._map.sendUnoCommand('.uno:SelectAll');
 	},
 
+	onDragStart: function (item, start, end) {
+		// add vertical line
+	},
+
+	onDragMove: function (item, start, end) {
+		// move vertical line
+	},
+
+	onDragEnd: function (item, start, end) {
+		var distance = this._map._docLayer._pixelsToTwips(end.subtract(start));
+
+		if (distance.x > 0 && item.width != distance.x) {
+			var command = {
+				Column: {
+					type: 'unsigned short',
+					value: item.column
+				},
+				Width: {
+					type: 'unsigned short',
+					value: distance.x
+				}
+			};
+
+			this._map.sendUnoCommand('.uno:ColumnWidth', command);
+		}
+
+		// remove vertical line
+	},
+
 	_onUpdatePermission: function (e) {
 		if (this._map.getDocType() !== 'spreadsheet') {
 			return;
diff --git a/loleaflet/src/control/Control.Header.js b/loleaflet/src/control/Control.Header.js
new file mode 100644
index 0000000..58856f5
--- /dev/null
+++ b/loleaflet/src/control/Control.Header.js
@@ -0,0 +1,75 @@
+/*
+* Control.Header
+*/
+
+L.Control.Header = L.Control.extend({
+	options: {
+		cursor: 'col-resize'
+	},
+
+	mouseInit: function (element) {
+		L.DomEvent.on(element, 'mousedown', this._onMouseDown, this);
+	},
+
+	_onMouseDown: function (e) {
+		var target = e.target || e.srcElement;
+
+		if (!target || this._dragging) {
+			return false;
+		}
+
+		L.DomUtil.disableImageDrag();
+		L.DomUtil.disableTextSelection();
+
+		L.DomEvent.stopPropagation(e);
+		L.DomEvent.on(document, 'mousemove', this._onMouseMove, this)
+		L.DomEvent.on(document, 'mouseup', this._onMouseUp, this);
+
+		var rectangle = target.parentNode.getBoundingClientRect();
+		this._item = target;
+		this._start = new L.Point(rectangle.left, rectangle.top);
+		this._end = new L.Point(e.clientX, e.clientY);
+
+		this.onDragStart(this.item, this._start, this._end);
+	},
+
+	_onMouseMove: function (e) {
+		this._end = new L.Point(e.clientX, e.clientY);
+		this._dragging = true;
+
+		var target = e.target || e.srcElement;
+		if ((L.DomUtil.hasClass(target, 'spreadsheet-header-column-text') ||
+		     L.DomUtil.hasClass(target, 'spreadsheet-header-row-text')) &&
+		    target.style.cursor != this.options.cursor) {
+			this._cursor = target.style.cursor;
+			this._target = target;
+			target.style.cursor = this.options.cursor;
+		}
+
+		L.DomEvent.preventDefault(e);
+
+		this.onDragMove(this._item, this._start, this._end);
+	},
+
+	_onMouseUp: function (e) {
+		this._end = new L.Point(e.clientX, e.clientY);
+
+		if (this._target) {
+			this._target.style.cursor = this._oldCursor;
+		}
+
+		L.DomEvent.off(document, 'mousemove', this._onMouseMove, this);
+		L.DomEvent.off(document, 'mouseup', this._onMouseUp, this);
+
+		L.DomUtil.enableImageDrag();
+		L.DomUtil.enableTextSelection();
+
+		this.onDragEnd(this._item, this._start, this._end);
+		this._target = this._cursor = this._item = this._start = this._end = null;
+		this._dragging = false;
+	},
+
+	onDragStart: function () {},
+	onDragMove: function () {},
+	onDragEnd: function () {}
+});
diff --git a/loleaflet/src/control/Control.RowHeader.js b/loleaflet/src/control/Control.RowHeader.js
index 5cd01c1..cef7482 100644
--- a/loleaflet/src/control/Control.RowHeader.js
+++ b/loleaflet/src/control/Control.RowHeader.js
@@ -3,7 +3,11 @@
 */
 
 /* global $ _ */
-L.Control.RowHeader = L.Control.extend({
+L.Control.RowHeader = L.Control.Header.extend({
+	options: {
+		cursor: 'row-resize'
+	},
+
 	onAdd: function (map) {
 		map.on('updatepermission', this._onUpdatePermission, this);
 		this._initialized = false;
@@ -99,6 +103,8 @@ L.Control.RowHeader = L.Control.extend({
 			row = L.DomUtil.create('div', 'spreadsheet-header-row', this._rows);
 			text = L.DomUtil.create('div', 'spreadsheet-header-row-text', row);
 			resize = L.DomUtil.create('div', 'spreadsheet-header-row-resize', row);
+			resize.row = iterator + 1;
+			resize.height = height;
 			var content = rows[iterator].text;
 			text.setAttribute('rel', 'spreadsheet-row-' + content); // for easy addressing
 			text.innerHTML = content;
@@ -113,6 +119,7 @@ L.Control.RowHeader = L.Control.extend({
 			}
 
 			L.DomEvent.addListener(text, 'click', this._onRowHeaderClick, this);
+			this.mouseInit(resize);
 		}
 	},
 
@@ -144,6 +151,35 @@ L.Control.RowHeader = L.Control.extend({
 		this._selectRow(row, modifier);
 	},
 
+	onDragStart: function (item, start, end) {
+		// add horizontal line
+	},
+
+	onDragMove: function (item, start, end) {
+		// move horizontal line
+	},
+
+	onDragEnd: function (item, start, end) {
+		var distance = this._map._docLayer._pixelsToTwips(end.subtract(start));
+
+		if (distance.y > 0 && item.height != distance.y) {
+			var command = {
+				Row: {
+					type: 'unsigned short',
+					value: item.row
+				},
+				Height: {
+					type: 'unsigned short',
+					value: distance.y
+				}
+			};
+
+			this._map.sendUnoCommand('.uno:RowHeight', command);
+		}
+
+		// remove horizontal line
+	},
+
 	_onUpdatePermission: function (e) {
 		if (this._map.getDocType() !== 'spreadsheet') {
 			return;


More information about the Libreoffice-commits mailing list