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 <[email protected]> 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; _______________________________________________ Libreoffice-commits mailing list [email protected] https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
