[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