diff --git a/web/pgadmin/static/js/selection/xcell_selection_model.js b/web/pgadmin/static/js/selection/xcell_selection_model.js index 81f46cce..32fed09f 100644 --- a/web/pgadmin/static/js/selection/xcell_selection_model.js +++ b/web/pgadmin/static/js/selection/xcell_selection_model.js @@ -2,10 +2,10 @@ define([ 'jquery', 'underscore', 'sources/selection/range_selection_helper', + 'sources/slickgrid/pgslick.cellrangeselector', - 'slickgrid', - 'slickgrid/plugins/slick.cellrangeselector' -], function ($, _, RangeSelectionHelper) { + 'slickgrid' +], function ($, _, RangeSelectionHelper, PGCellRangeSelector) { var XCellSelectionModel = function (options) { var KEY_ARROW_RIGHT = 39; @@ -17,7 +17,7 @@ define([ var _canvas; var _ranges = []; var _self = this; - var _selector = new Slick.CellRangeSelector({ + var _selector = new PGCellRangeSelector({ "selectionCss": { "border": "2px solid black" } diff --git a/web/pgadmin/static/js/slickgrid/pgslick.cellrangedecorator.js b/web/pgadmin/static/js/slickgrid/pgslick.cellrangedecorator.js new file mode 100644 index 00000000..8b0e340f --- /dev/null +++ b/web/pgadmin/static/js/slickgrid/pgslick.cellrangedecorator.js @@ -0,0 +1,73 @@ +define([ + 'jquery', + + 'slickgrid', +], function ($) { + /*** + * Displays an overlay on top of a given cell range. + * + * TODO: + * Currently, it blocks mouse events to DOM nodes behind it. + * Use FF and WebKit-specific "pointer-events" CSS style, or some kind of event forwarding. + * Could also construct the borders separately using 4 individual DIVs. + * + * @param {Grid} grid + * @param {Object} options + */ + var PGCellRangeDecorator = function (grid, options) { + var _elem; + var _defaults = { + selectionCssClass: 'slick-range-decorator', + selectionCss: { + "zIndex": "9999", + "border": "2px dashed red" + } + }; + + options = $.extend(true, {}, _defaults, options); + + + function show(range) { + if (!_elem) { + _elem = $("
", {css: options.selectionCss}) + .addClass(options.selectionCssClass) + .css("position", "absolute") + .appendTo(grid.getCanvasNode()); + } + + var from = grid.getCellNodeBox(range.fromRow, range.fromCell); + var to = grid.getCellNodeBox(range.toRow, range.toCell); + + // TODO: This is the original Slickgrid code temporary fix to solve + // pgAdmin alignment of the selection box on the bottom right corner + // _elem.css({ + // top: from.top - 1, + // left: from.left - 1, + // height: to.bottom - from.top - 2, + // width: to.right - from.left - 2 + // }); + + _elem.css({ + top: from.top - 1, + left: from.left - 1, + height: to.bottom - from.top + 2, + width: to.right - from.left + 1 + }); + + return _elem; + } + + function hide() { + if (_elem) { + _elem.remove(); + _elem = null; + } + } + + $.extend(this, { + "show": show, + "hide": hide + }); + }; + return PGCellRangeDecorator; +}); diff --git a/web/pgadmin/static/js/slickgrid/pgslick.cellrangeselector.js b/web/pgadmin/static/js/slickgrid/pgslick.cellrangeselector.js new file mode 100644 index 00000000..6a8649bc --- /dev/null +++ b/web/pgadmin/static/js/slickgrid/pgslick.cellrangeselector.js @@ -0,0 +1,119 @@ +define([ + 'jquery', + 'sources/slickgrid/pgslick.cellrangedecorator', + + 'slickgrid', +], function ($, PGCellRangeDecorator) { + + var PGCellRangeSelector = function (options) { + var _grid; + var _canvas; + var _currentlySelectedRange; + var _dragging; + var _decorator; + var _self = this; + var _handler = new Slick.EventHandler(); + var _defaults = { + selectionCss: { + "border": "2px dashed blue" + } + }; + + + function init(grid) { + options = $.extend(true, {}, _defaults, options); + _decorator = new PGCellRangeDecorator(grid, options); + _grid = grid; + _canvas = _grid.getCanvasNode(); + _handler + .subscribe(_grid.onDragInit, handleDragInit) + .subscribe(_grid.onDragStart, handleDragStart) + .subscribe(_grid.onDrag, handleDrag) + .subscribe(_grid.onDragEnd, handleDragEnd); + } + + function destroy() { + _handler.unsubscribeAll(); + } + + function handleDragInit(e, dd) { + // prevent the grid from cancelling drag'n'drop by default + e.stopImmediatePropagation(); + } + + function handleDragStart(e, dd) { + var cell = _grid.getCellFromEvent(e); + if (_self.onBeforeCellRangeSelected.notify(cell) !== false) { + if (_grid.canCellBeSelected(cell.row, cell.cell)) { + _dragging = true; + e.stopImmediatePropagation(); + } + } + if (!_dragging) { + return; + } + + _grid.focus(); + + var start = _grid.getCellFromPoint( + dd.startX - $(_canvas).offset().left, + dd.startY - $(_canvas).offset().top); + + dd.range = {start: start, end: {}}; + _currentlySelectedRange = dd.range; + return _decorator.show(new Slick.Range(start.row, start.cell)); + } + + function handleDrag(e, dd) { + if (!_dragging) { + return; + } + e.stopImmediatePropagation(); + + var end = _grid.getCellFromPoint( + e.pageX - $(_canvas).offset().left, + e.pageY - $(_canvas).offset().top); + + if (!_grid.canCellBeSelected(end.row, end.cell)) { + return; + } + + dd.range.end = end; + _currentlySelectedRange = dd.range; + _decorator.show(new Slick.Range(dd.range.start.row, dd.range.start.cell, end.row, end.cell)); + } + + function handleDragEnd(e, dd) { + if (!_dragging) { + return; + } + + _dragging = false; + e.stopImmediatePropagation(); + + _decorator.hide(); + _self.onCellRangeSelected.notify({ + range: new Slick.Range( + dd.range.start.row, + dd.range.start.cell, + dd.range.end.row, + dd.range.end.cell + ) + }); + } + + function getCurrentRange() { + return _currentlySelectedRange; + } + + $.extend(this, { + "init": init, + "destroy": destroy, + "getCurrentRange": getCurrentRange, + + "onBeforeCellRangeSelected": new Slick.Event(), + "onCellRangeSelected": new Slick.Event() + }); + }; + return PGCellRangeSelector; +}); \ No newline at end of file diff --git a/web/regression/javascript/selection/column_selector_spec.js b/web/regression/javascript/selection/column_selector_spec.js index 679af52f..7fa69aef 100644 --- a/web/regression/javascript/selection/column_selector_spec.js +++ b/web/regression/javascript/selection/column_selector_spec.js @@ -7,8 +7,8 @@ define( 'sources/selection/xcell_selection_model', "slickgrid", - 'slickgrid/plugins/slick.cellrangedecorator', - 'slickgrid/plugins/slick.cellrangeselector', + 'sources/slickgrid/pgslick.cellrangedecorator', + 'sources/slickgrid/pgslick.cellrangeselector', "slickgrid/slick.grid", ], function ($, _, ColumnSelector, ActiveCellCapture, GridSelector, XCellSelectionModel) { diff --git a/web/regression/javascript/selection/row_selector_spec.js b/web/regression/javascript/selection/row_selector_spec.js index e0bc63be..23a5b12e 100644 --- a/web/regression/javascript/selection/row_selector_spec.js +++ b/web/regression/javascript/selection/row_selector_spec.js @@ -7,8 +7,8 @@ define( 'sources/selection/xcell_selection_model', "slickgrid", - 'slickgrid/plugins/slick.cellrangedecorator', - 'slickgrid/plugins/slick.cellrangeselector', + 'sources/slickgrid/pgslick.cellrangedecorator', + 'sources/slickgrid/pgslick.cellrangeselector', ], function ($, _, SlickGrid, ActiveCellCapture, RowSelector, XCellSelectionModel, Slick) { var KEY_RIGHT = 39; diff --git a/web/regression/javascript/test-main.js b/web/regression/javascript/test-main.js index 065c950f..8bb8c027 100644 --- a/web/regression/javascript/test-main.js +++ b/web/regression/javascript/test-main.js @@ -36,8 +36,6 @@ require.config({ 'underscore.string': sourcesDir + 'vendor/underscore/underscore.string', 'slickgrid': sourcesDir + 'vendor/slickgrid/slick.core', 'slickgrid/slick.grid': sourcesDir + 'vendor/slickgrid/slick.grid', - 'slickgrid/plugins/slick.cellrangedecorator': sourcesDir + 'vendor/slickgrid/plugins/slick.cellrangedecorator', - 'slickgrid/plugins/slick.cellrangeselector': sourcesDir + 'vendor/slickgrid/plugins/slick.cellrangeselector', 'translations': '/base/regression/javascript/fake_translations', 'sources': sourcesDir + 'js', 'browser': '/base/pgadmin/browser/static/js' @@ -59,21 +57,21 @@ require.config({ ], "exports": 'window.Slick.Grid' }, - "slickgrid/plugins/slick.cellrangedecorator": { + "sources/slickgrid/pgslick.cellrangedecorator": { "deps": [ "jquery" ], - "exports": 'window.Slick.RowRangeDecorator' + "exports": 'PGRowRangeDecorator' }, - "slickgrid/plugins/slick.cellrangeselector": { + "sources/slickgrid/pgslick.cellrangeselector": { "deps": [ - "jquery", "slickgrid/plugins/slick.cellrangedecorator" + "jquery", "sources/slickgrid/pgslick.cellrangedecorator" ], - "exports": 'window.Slick.CellRangeSelector' + "exports": 'PGCellRangeSelector' }, "sources/selection/xcell_selection_model": { "deps": [ - "jquery", "slickgrid/plugins/slick.cellrangeselector" + "jquery", "sources/slickgrid/pgslick.cellrangeselector" ], "exports": 'XCellSelectionModel' },