d2coreui 23.0.13 → 23.0.15

package/components/grid/cell/rangeSelector.js

@@ -1,527 +1,674 @@
-import { _areEqual, _exists, _includes, _isDomLayout, _last, _makeNull, _missing, _removeFromArray, _shallowCompare, AutoScrollService, BeanStub } from "ag-grid-community";
-export class RangeSelector extends BeanStub {
-    constructor() {
-        super(...arguments);
-        this.beanName = "RangeSelector";
-    }
-    wireBeans(beans) {
-        this.rowModel = beans.rowModel;
-        this.dragService = beans.dragService;
-        this.columnModel = beans.columnModel;
-        this.visibleColsService = beans.visibleColsService;
-        this.cellNavigationService = beans.cellNavigationService;
-        this.pinnedRowModel = beans.pinnedRowModel;
-        this.rowPositionUtils = beans.rowPositionUtils;
-        this.cellPositionUtils = beans.cellPositionUtils;
-        this.ctrlsService = beans.ctrlsService;
-        this.valueService = beans.valueService;
-        this.eventService = beans.eventService;
-        this.mouseEventService = beans.mouseEventService;
-        this.gridApi = beans.gridApi;
-        this.eGridDiv = beans.eGridDiv;
-        this.focusService = beans.focusService;
-        this.gos = beans.gos;
-    }
-    postConstruct() {
-        this.cellRanges = [];
-        this.bodyScrollListener = this.onBodyScroll.bind(this);
-        this.dragging = false;
-        this.eventService.addEventListener("newColumnsLoaded", () => this.removeAllCellRanges());
-        this.eventService.addEventListener("columnPivotModeChanged", () => this.removeAllCellRanges());
-        this.eventService.addEventListener("columnRowGroupChanged", () => this.removeAllCellRanges());
-        this.eventService.addEventListener("columnPivotChanged", () => this.removeAllCellRanges());
-        this.eventService.addEventListener("columnGroupOpened", this.refreshLastRangeStart.bind(this));
-        this.eventService.addEventListener("columnMoved", this.refreshLastRangeStart.bind(this));
-        this.eventService.addEventListener("columnPinned", this.refreshLastRangeStart.bind(this));
-        this.eventService.addEventListener("columnVisible", this.onColumnVisibleChange.bind(this));
-        this.ctrlsService.whenReady(this, () => {
-            const gridBodyCon = this.ctrlsService.getGridBodyCtrl();
-            this.autoScrollService = new AutoScrollService({
-                scrollContainer: gridBodyCon.getBodyViewportElement(),
-                scrollAxis: 'xy',
-                getVerticalPosition: () => gridBodyCon.getScrollFeature().getVScrollPosition().top,
-                setVerticalPosition: (position) => gridBodyCon.getScrollFeature().setVerticalScrollPosition(position),
-                getHorizontalPosition: () => gridBodyCon.getScrollFeature().getHScrollPosition().left,
-                setHorizontalPosition: (position) => gridBodyCon.getScrollFeature().setHorizontalScrollPosition(position),
-                shouldSkipVerticalScroll: () => !_isDomLayout(this.gos, 'normal'),
-                shouldSkipHorizontalScroll: () => !gridBodyCon.getScrollFeature().isHorizontalScrollShowing()
-            });
-        });
-        const params = {
-            eElement: this.eGridDiv,
-            onDragStart: this.onDragStart.bind(this),
-            onDragStop: this.onDragStop.bind(this),
-            onDragging: this.onDragging.bind(this)
-        };
-        this.dragService.addDragSource(params);
-        this.dragService.addDestroyFunc(() => this.dragService.removeDragSource(params));
-    }
-    cellPositionEquals(cellA, cellB) {
-        const colsMatch = cellA.column === cellB.column;
-        const floatingMatch = cellA.rowPinned === cellB.rowPinned;
-        const indexMatch = cellA.rowIndex === cellB.rowIndex;
-        return colsMatch && floatingMatch && indexMatch;
-    }
-    onColumnVisibleChange() {
-        this.refreshLastRangeStart();
-        this.cellRanges.forEach(cellRange => {
-            const beforeCols = cellRange.columns;
-            cellRange.columns = cellRange.columns.filter(col => col.isVisible());
-            const colsInRangeChanged = !_areEqual(beforeCols, cellRange.columns);
-            if (colsInRangeChanged) {
-                this.dispatchChangedEvent(false, true, cellRange.id);
-            }
-        });
-    }
-    refreshLastRangeStart() {
-        const lastRange = _last(this.cellRanges);
-        if (!lastRange) {
-            return;
-        }
-        this.refreshRangeStart(lastRange);
-    }
-    isContiguousRange(cellRange) {
-        const rangeColumns = cellRange.columns;
-        if (!rangeColumns.length) {
-            return false;
-        }
-        const allColumns = this.visibleColsService.getAllCols();
-        const allPositions = rangeColumns.map(c => allColumns.indexOf(c)).sort((a, b) => a - b);
-        return _last(allPositions) - allPositions[0] + 1 === rangeColumns.length;
-    }
-    getRangeStartRow(cellRange) {
-        if (cellRange.startRow && cellRange.endRow) {
-            return this.rowPositionUtils.before(cellRange.startRow, cellRange.endRow) ?
-                cellRange.startRow : cellRange.endRow;
-        }
-        const rowPinned = this.pinnedRowModel.getPinnedTopRowCount() > 0 ? 'top' : null;
-        return { rowIndex: 0, rowPinned };
-    }
-    getRangeEndRow(cellRange) {
-        if (cellRange.startRow && cellRange.endRow) {
-            return this.rowPositionUtils.before(cellRange.startRow, cellRange.endRow) ?
-                cellRange.endRow : cellRange.startRow;
-        }
-        const pinnedBottomRowCount = this.pinnedRowModel.getPinnedBottomRowCount();
-        const pinnedBottom = pinnedBottomRowCount > 0;
-        if (pinnedBottom) {
-            return {
-                rowIndex: pinnedBottomRowCount - 1,
-                rowPinned: 'bottom'
-            };
-        }
-        return {
-            rowIndex: this.rowModel.getRowCount() - 1,
-            rowPinned: null
-        };
-    }
-    setRangeToCell(cell, appendRange = false) {
-        const columns = this.calculateColumnsBetween(cell.column, cell.column);
-        if (!columns) {
-            return;
-        }
-        this.removeAllCellRanges(true);
-        const rowForCell = {
-            rowIndex: cell.rowIndex,
-            rowPinned: cell.rowPinned
-        };
-        let cellRange;
-        for (let i = 0; i < this.cellRanges.length; i++) {
-            const range = this.cellRanges[i];
-            const matches = (range.columns && range.columns.length === 1 && range.columns[0] === cell.column) &&
-                this.rowPositionUtils.sameRow(rowForCell, range.startRow) &&
-                this.rowPositionUtils.sameRow(rowForCell, range.endRow);
-            if (matches) {
-                cellRange = range;
-                break;
-            }
-        }
-        if (cellRange) {
-            const atEndOfList = _last(this.cellRanges) === cellRange;
-            if (!atEndOfList) {
-                _removeFromArray(this.cellRanges, cellRange);
-                this.cellRanges.push(cellRange);
-            }
-        }
-        else {
-            cellRange = {
-                startRow: rowForCell,
-                endRow: rowForCell,
-                columns: columns,
-                startColumn: cell.column
-            };
-            this.cellRanges.push(cellRange);
-        }
-        this.newestRangeStartCell = cell;
-        this.onDragStop();
-        this.dispatchChangedEvent(true, true, cellRange.id);
-    }
-    extendLatestRangeToCell(cellPosition) {
-        if (this.isEmpty() || !this.newestRangeStartCell) {
-            return;
-        }
-        const cellRange = _last(this.cellRanges);
-        this.updateRangeEnd(cellRange, cellPosition);
-    }
-    updateRangeEnd(cellRange, cellPosition, silent) {
-        silent = !!silent;
-        const endColumn = cellPosition.column;
-        const colsToAdd = this.calculateColumnsBetween(cellRange.startColumn, endColumn);
-        if (!colsToAdd || this.isLastCellOfRange(cellRange, cellPosition)) {
-            return;
-        }
-        cellRange.columns = colsToAdd;
-        cellRange.endRow = { rowIndex: cellPosition.rowIndex, rowPinned: cellPosition.rowPinned };
-        if (!silent) {
-            this.dispatchChangedEvent(true, true, cellRange.id);
-        }
-    }
-    refreshRangeStart(cellRange) {
-        const { startColumn, columns } = cellRange;
-        const moveColInCellRange = (colToMove, moveToFront) => {
-            const otherCols = cellRange.columns.filter(col => col !== colToMove);
-            if (colToMove) {
-                cellRange.startColumn = colToMove;
-                cellRange.columns = moveToFront ? [colToMove, ...otherCols] : [...otherCols, colToMove];
-            }
-            else {
-                cellRange.columns = otherCols;
-            }
-        };
-        const { left, right } = this.getRangeEdgeColumns(cellRange);
-        const shouldMoveLeftCol = startColumn === columns[0] && startColumn !== left;
-        if (shouldMoveLeftCol) {
-            moveColInCellRange(left, true);
-            return;
-        }
-        const shouldMoveRightCol = startColumn === _last(columns) && startColumn === right;
-        if (shouldMoveRightCol) {
-            moveColInCellRange(right, false);
-            return;
-        }
-    }
-    getRangeEdgeColumns(cellRange) {
-        const allColumns = this.visibleColsService.getAllCols();
-        const allIndices = cellRange.columns
-            .map(c => allColumns.indexOf(c))
-            .filter(i => i > -1)
-            .sort((a, b) => a - b);
-        return {
-            left: allColumns[allIndices[0]],
-            right: allColumns[_last(allIndices)]
-        };
-    }
-    extendLatestRangeInDirection(key) {
-        if (this.isEmpty() || !this.newestRangeStartCell) {
-            return;
-        }
-        const lastRange = _last(this.cellRanges);
-        const startCell = this.newestRangeStartCell;
-        const firstCol = lastRange.columns[0];
-        const lastCol = _last(lastRange.columns);
-        const endCellIndex = lastRange.endRow.rowIndex;
-        const endCellFloating = lastRange.endRow.rowPinned;
-        const endCellColumn = startCell.column === firstCol ? lastCol : firstCol;
-        const endCell = { column: endCellColumn, rowIndex: endCellIndex, rowPinned: endCellFloating };
-        const newEndCell = this.cellNavigationService.getNextCellToFocus(key, endCell);
-        if (!newEndCell) {
-            return;
-        }
-        this.setCellRange({
-            rowStartIndex: startCell.rowIndex,
-            rowStartPinned: startCell.rowPinned,
-            rowEndIndex: newEndCell.rowIndex,
-            rowEndPinned: newEndCell.rowPinned,
-            columnStart: startCell.column,
-            columnEnd: newEndCell.column
-        });
-        return newEndCell;
-    }
-    setCellRange(params) {
-        this.removeAllCellRanges(true);
-        this.addCellRange(params);
-    }
-    setCellRanges(cellRanges) {
-        if (_shallowCompare(this.cellRanges, cellRanges)) {
-            return;
-        }
-        this.removeAllCellRanges(true);
-        cellRanges.forEach(newRange => {
-            if (newRange.columns && newRange.startRow) {
-                this.newestRangeStartCell = {
-                    rowIndex: newRange.startRow.rowIndex,
-                    rowPinned: newRange.startRow.rowPinned,
-                    column: newRange.columns[0]
-                };
-            }
-            this.cellRanges.push(newRange);
-        });
-        this.dispatchChangedEvent(false, true);
-    }
-    createCellRangeFromCellRangeParams(params) {
-        let columns;
-        if (params.columns) {
-            columns = params.columns.map(c => this.columnModel.getColumnWithValidation(c)).filter(c => c);
-        }
-        else {
-            const columnStart = this.columnModel.getColumnWithValidation(params.columnStart);
-            const columnEnd = this.columnModel.getColumnWithValidation(params.columnEnd);
-            if (!columnStart || !columnEnd) {
-                return;
-            }
-            columns = this.calculateColumnsBetween(columnStart, columnEnd);
-        }
-        if (!columns) {
-            return;
-        }
-        const startRow = params.rowStartIndex != null ? {
-            rowIndex: params.rowStartIndex,
-            rowPinned: params.rowStartPinned
-        } : undefined;
-        const endRow = params.rowEndIndex != null ? {
-            rowIndex: params.rowEndIndex,
-            rowPinned: params.rowEndPinned
-        } : undefined;
-        return {
-            startRow: startRow,
-            endRow: endRow,
-            columns: columns,
-            startColumn: columns[0]
-        };
-    }
-    addCellRange(params) {
-        const newRange = this.createCellRangeFromCellRangeParams(params);
-        if (newRange) {
-            this.cellRanges.push(newRange);
-            this.dispatchChangedEvent(false, true, newRange.id);
-        }
-    }
-    getCellRanges() {
-        return this.cellRanges;
-    }
-    isEmpty() {
-        return this.cellRanges.length === 0;
-    }
-    isMoreThanOneCell() {
-        if (this.cellRanges.length === 0) {
-            return false;
-        }
-        else if (this.cellRanges.length > 1) {
-            return true;
-        }
-        const range = this.cellRanges[0];
-        const startRow = this.getRangeStartRow(range);
-        const endRow = this.getRangeEndRow(range);
-        return startRow.rowPinned !== endRow.rowPinned ||
-            startRow.rowIndex !== endRow.rowIndex ||
-            range.columns.length !== 1;
-    }
-    removeAllCellRanges(silent) {
-        if (this.isEmpty()) {
-            return;
-        }
-        this.onDragStop();
-        this.cellRanges.length = 0;
-        if (!silent) {
-            this.dispatchChangedEvent(false, true);
-        }
-    }
-    onBodyScroll() {
-        this.onDragging(this.lastMouseEvent);
-    }
-    isCellInAnyRange(cell) {
-        return this.getCellRangeCount(cell) > 0;
-    }
-    isCellInSpecificRange(cell, range) {
-        const columnInRange = range.columns !== null && _includes(range.columns, cell.column);
-        const rowInRange = this.isRowInRange(cell.rowIndex, cell.rowPinned, range);
-        return columnInRange && rowInRange;
-    }
-    isLastCellOfRange(cellRange, cell) {
-        const { startRow, endRow } = cellRange;
-        const lastRow = this.rowPositionUtils.before(startRow, endRow) ? endRow : startRow;
-        const isLastRow = cell.rowIndex === lastRow.rowIndex && cell.rowPinned === lastRow.rowPinned;
-        const rangeFirstIndexColumn = cellRange.columns[0];
-        const rangeLastIndexColumn = _last(cellRange.columns);
-        const lastRangeColumn = cellRange.startColumn === rangeFirstIndexColumn ? rangeLastIndexColumn : rangeFirstIndexColumn;
-        const isLastColumn = cell.column === lastRangeColumn;
-        return isLastColumn && isLastRow;
-    }
-    isBottomRightCell(cellRange, cell) {
-        const allColumns = this.visibleColsService.getAllCols();
-        const allPositions = cellRange.columns.map(c => allColumns.indexOf(c)).sort((a, b) => a - b);
-        const { startRow, endRow } = cellRange;
-        const lastRow = this.rowPositionUtils.before(startRow, endRow) ? endRow : startRow;
-        const isRightColumn = allColumns.indexOf(cell.column) === _last(allPositions);
-        const isLastRow = cell.rowIndex === lastRow.rowIndex && _makeNull(cell.rowPinned) === _makeNull(lastRow.rowPinned);
-        return isRightColumn && isLastRow;
-    }
-    getCellRangeCount(cell) {
-        if (this.isEmpty()) {
-            return 0;
-        }
-        return this.cellRanges.filter(cellRange => this.isCellInSpecificRange(cell, cellRange)).length;
-    }
-    isRowInRange(rowIndex, floating, cellRange) {
-        const firstRow = this.getRangeStartRow(cellRange);
-        const lastRow = this.getRangeEndRow(cellRange);
-        const thisRow = { rowIndex: rowIndex, rowPinned: floating };
-        const equalsFirstRow = thisRow.rowIndex === firstRow.rowIndex && thisRow.rowPinned == firstRow.rowPinned;
-        const equalsLastRow = thisRow.rowIndex === lastRow.rowIndex && thisRow.rowPinned == lastRow.rowPinned;
-        if (equalsFirstRow || equalsLastRow) {
-            return true;
-        }
-        const afterFirstRow = !this.rowPositionUtils.before(thisRow, firstRow);
-        const beforeLastRow = this.rowPositionUtils.before(thisRow, lastRow);
-        return afterFirstRow && beforeLastRow;
-    }
-    getDraggingRange() {
-        return this.draggingRange;
-    }
-    onDragStart(mouseEvent) {
-        const { shiftKey } = mouseEvent;
-        const mouseCell = this.mouseEventService.getCellPositionForEvent(mouseEvent);
-        if (_missing(mouseCell)) {
-            return;
-        }
-        if (!shiftKey || _exists(_last(this.cellRanges).type)) {
-            this.removeAllCellRanges(true);
-        }
-        this.dragging = true;
-        this.draggingCell = mouseCell;
-        this.lastMouseEvent = mouseEvent;
-        if (!shiftKey) {
-            this.newestRangeStartCell = mouseCell;
-        }
-        if (this.cellRanges.length > 0) {
-            this.draggingRange = _last(this.cellRanges);
-        }
-        else {
-            const mouseRowPosition = {
-                rowIndex: mouseCell.rowIndex,
-                rowPinned: mouseCell.rowPinned
-            };
-            this.draggingRange = {
-                startRow: mouseRowPosition,
-                endRow: mouseRowPosition,
-                columns: [mouseCell.column],
-                startColumn: this.newestRangeStartCell.column
-            };
-            this.cellRanges.push(this.draggingRange);
-        }
-        this.ctrlsService.getGridBodyCtrl().addScrollEventListener(this.bodyScrollListener);
-        this.dispatchChangedEvent(true, false, this.draggingRange.id);
-    }
-    onDragging(mouseEvent) {
-        if (!this.dragging || !mouseEvent) {
-            return;
-        }
-        this.lastMouseEvent = mouseEvent;
-        const cellPosition = this.mouseEventService.getCellPositionForEvent(mouseEvent);
-        const isMouseAndStartInPinned = (position) => cellPosition && cellPosition.rowPinned === position && this.newestRangeStartCell.rowPinned === position;
-        const skipVerticalScroll = isMouseAndStartInPinned('top') || isMouseAndStartInPinned('bottom');
-        this.autoScrollService.check(mouseEvent, skipVerticalScroll);
-        if (!cellPosition ||
-            !this.draggingCell ||
-            this.cellPositionEquals(this.draggingCell, cellPosition)) {
-            return;
-        }
-        const columns = this.calculateColumnsBetween(this.newestRangeStartCell.column, cellPosition.column);
-        if (!columns) {
-            return;
-        }
-        this.draggingCell = cellPosition;
-        this.draggingRange.endRow = {
-            rowIndex: cellPosition.rowIndex,
-            rowPinned: cellPosition.rowPinned
-        };
-        this.draggingRange.columns = columns;
-        this.dispatchChangedEvent(false, false, this.draggingRange.id);
-        this.focusCell(cellPosition);
-    }
-    focusCell(cellPosition) {
-        const cellFocused = this.focusService.isCellFocused(cellPosition);
-        if (!cellFocused) {
-            this.focusService.setFocusedCell(cellPosition.rowIndex, cellPosition.column, cellPosition.rowPinned, true);
-        }
-    }
-    onDragStop() {
-        if (!this.dragging) {
-            return;
-        }
-        const { id } = this.draggingRange;
-        this.autoScrollService.ensureCleared();
-        this.ctrlsService.getGridBodyCtrl().removeScrollEventListener(this.bodyScrollListener);
-        this.lastMouseEvent = null;
-        this.dragging = false;
-        this.draggingRange = undefined;
-        this.draggingCell = undefined;
-        this.dispatchChangedEvent(false, true, id);
-    }
-    dispatchChangedEvent(started, finished, id) {
-        this.cellRanges.map((cellRange) => {
-            let currentRow = this.getRangeStartRow(cellRange);
-            const lastRow = this.getRangeEndRow(cellRange);
-            const nodesToBeSelected = [];
-            while (true) {
-                const finishedAllRows = _missing(currentRow) || !currentRow || this.rowPositionUtils.before(lastRow, currentRow);
-                if (finishedAllRows || !currentRow || !cellRange.columns) {
-                    break;
-                }
-                const rowNode = this.rowPositionUtils.getRowNode(currentRow);
-                if (!rowNode) {
-                    break;
-                }
-                if (!rowNode.isSelected()) {
-                    rowNode.setSelected(true);
-                }
-                nodesToBeSelected.push(rowNode.data);
-                currentRow = this.cellNavigationService.getRowBelow(currentRow);
-            }
-            this.gridApi.getSelectedNodes().forEach((node) => {
-                if (!nodesToBeSelected.some(nodeToBeSelected => node.data === nodeToBeSelected)) {
-                    node.setSelected(false);
-                }
-            });
-        });
-        const eventCellSelection = {
-            type: "cellSelectionChanged",
-            started: started,
-            finished: finished,
-            id: id,
-        };
-        this.eventService.dispatchEvent(eventCellSelection);
-        const eventRangeSelection = {
-            type: "rangeSelectionChanged",
-            started: started,
-            finished: finished,
-            id: id,
-        };
-        this.eventService.dispatchEvent(eventRangeSelection);
-    }
-    calculateColumnsBetween(columnFrom, columnTo) {
-        const allColumns = this.visibleColsService.getAllCols();
-        const isSameColumn = columnFrom === columnTo;
-        const fromIndex = allColumns.indexOf(columnFrom);
-        if (fromIndex < 0) {
-            console.warn(`ag-Grid: column ${columnFrom.getId()} is not visible`);
-            return undefined;
-        }
-        const toIndex = isSameColumn ? fromIndex : allColumns.indexOf(columnTo);
-        if (toIndex < 0) {
-            console.warn(`ag-Grid: column ${columnTo.getId()} is not visible`);
-            return undefined;
-        }
-        if (isSameColumn) {
-            return [columnFrom];
-        }
-        const firstIndex = Math.min(fromIndex, toIndex);
-        const lastIndex = firstIndex === fromIndex ? toIndex : fromIndex;
-        const columns = [];
-        for (let i = firstIndex; i <= lastIndex; i++) {
-            columns.push(allColumns[i]);
-        }
-        return columns;
-    }
-}
-//# sourceMappingURL=rangeSelector.js.map
+import {
+    _areEqual,
+    _exists,
+    _includes, _isDomLayout,
+    _last,
+    _makeNull,
+    _missing, _removeFromArray,
+    _shallowCompare,
+    AutoScrollService, BeanStub
+} from "ag-grid-community";
+
+export class RangeSelector extends BeanStub {
+    beanName = "RangeSelector";
+
+    wireBeans(beans) {
+        this.rowModel = beans.rowModel;
+        this.dragService = beans.dragService;
+        this.columnModel = beans.columnModel;
+        this.visibleColsService = beans.visibleColsService;
+        this.cellNavigationService = beans.cellNavigationService;
+        this.pinnedRowModel = beans.pinnedRowModel;
+        this.rowPositionUtils = beans.rowPositionUtils;
+        this.cellPositionUtils = beans.cellPositionUtils;
+        this.ctrlsService = beans.ctrlsService;
+        this.valueService = beans.valueService;
+        this.eventService = beans.eventService;
+        this.mouseEventService = beans.mouseEventService;
+        this.gridApi = beans.gridApi;
+        this.eGridDiv = beans.eGridDiv;
+        this.focusService = beans.focusService;
+        this.gos = beans.gos;
+    }
+
+    postConstruct() {
+        this.cellRanges = [];
+        this.bodyScrollListener = this.onBodyScroll.bind(this);
+        this.dragging = false;
+
+        this.eventService.addEventListener("newColumnsLoaded", () => this.removeAllCellRanges());
+        this.eventService.addEventListener("columnPivotModeChanged", () => this.removeAllCellRanges());
+        this.eventService.addEventListener("columnRowGroupChanged", () => this.removeAllCellRanges());
+        this.eventService.addEventListener("columnPivotChanged", () => this.removeAllCellRanges());
+        this.eventService.addEventListener("columnGroupOpened", this.refreshLastRangeStart.bind(this));
+        this.eventService.addEventListener("columnMoved", this.refreshLastRangeStart.bind(this));
+        this.eventService.addEventListener("columnPinned", this.refreshLastRangeStart.bind(this));
+        this.eventService.addEventListener("columnVisible", this.onColumnVisibleChange.bind(this));
+
+        this.ctrlsService.whenReady(this,() => {
+            const gridBodyCon = this.ctrlsService.getGridBodyCtrl();
+            this.autoScrollService = new AutoScrollService({
+                scrollContainer: gridBodyCon.getBodyViewportElement(),
+                scrollAxis: 'xy',
+                getVerticalPosition: () => gridBodyCon.getScrollFeature().getVScrollPosition().top,
+                setVerticalPosition: (position) => gridBodyCon.getScrollFeature().setVerticalScrollPosition(position),
+                getHorizontalPosition: () => gridBodyCon.getScrollFeature().getHScrollPosition().left,
+                setHorizontalPosition: (position) => gridBodyCon.getScrollFeature().setHorizontalScrollPosition(position),
+                shouldSkipVerticalScroll: () => !_isDomLayout(this.gos, 'normal'),
+                shouldSkipHorizontalScroll: () => !gridBodyCon.getScrollFeature().isHorizontalScrollShowing()
+            });
+        });
+
+        //intitialization of drag event handling
+        // const eContainers = guiRoot.querySelectorAll(`[ref="eContainer"]`);
+        // for (const eContainer of eContainers) {
+        const params = {
+            eElement: this.eGridDiv,
+            onDragStart: this.onDragStart.bind(this),
+            onDragStop: this.onDragStop.bind(this),
+            onDragging: this.onDragging.bind(this)
+        };
+
+        this.dragService.addDragSource(params);
+        this.dragService.addDestroyFunc(() => this.dragService.removeDragSource(params));
+        // }
+    }
+
+    cellPositionEquals(cellA, cellB) {
+        const colsMatch = cellA.column === cellB.column;
+        const floatingMatch = cellA.rowPinned === cellB.rowPinned;
+        const indexMatch = cellA.rowIndex === cellB.rowIndex;
+        return colsMatch && floatingMatch && indexMatch;
+    }
+
+    onColumnVisibleChange() {
+        // first move start column in last cell range (i.e. series chart range)
+        this.refreshLastRangeStart();
+
+        // then check if the column visibility has changed in any cell range
+        this.cellRanges.forEach(cellRange => {
+            const beforeCols = cellRange.columns;
+
+            // remove hidden cols from cell range
+            cellRange.columns = cellRange.columns.filter(col => col.isVisible());
+
+            const colsInRangeChanged = !_areEqual(beforeCols, cellRange.columns);
+            if (colsInRangeChanged) {
+                this.dispatchChangedEvent(false, true, cellRange.id);
+            }
+        });
+    }
+
+    refreshLastRangeStart() {
+        const lastRange = _last(this.cellRanges);
+        if (!lastRange) {
+            return;
+        }
+
+        this.refreshRangeStart(lastRange);
+    }
+
+    isContiguousRange(cellRange) {
+        const rangeColumns = cellRange.columns;
+
+        if (!rangeColumns.length) {
+            return false;
+        }
+
+        const allColumns = this.visibleColsService.getAllCols();
+        const allPositions = rangeColumns.map(c => allColumns.indexOf(c)).sort((a, b) => a - b);
+
+        return _last(allPositions) - allPositions[0] + 1 === rangeColumns.length;
+    }
+
+    getRangeStartRow(cellRange) {
+        if (cellRange.startRow && cellRange.endRow) {
+            return this.rowPositionUtils.before(cellRange.startRow, cellRange.endRow) ?
+                cellRange.startRow : cellRange.endRow;
+        }
+        const rowPinned = this.pinnedRowModel.getPinnedTopRowCount() > 0 ? 'top' : null;
+        return {rowIndex: 0, rowPinned};
+    }
+
+    getRangeEndRow(cellRange) {
+        if (cellRange.startRow && cellRange.endRow) {
+            return this.rowPositionUtils.before(cellRange.startRow, cellRange.endRow) ?
+                cellRange.endRow : cellRange.startRow;
+        }
+
+        const pinnedBottomRowCount = this.pinnedRowModel.getPinnedBottomRowCount();
+        const pinnedBottom = pinnedBottomRowCount > 0;
+
+        if (pinnedBottom) {
+            return {
+                rowIndex: pinnedBottomRowCount - 1,
+                rowPinned: 'bottom'
+            };
+        }
+
+        return {
+            rowIndex: this.rowModel.getRowCount() - 1,
+            rowPinned: null
+        };
+    }
+
+    setRangeToCell(cell, appendRange = false) {
+        const columns = this.calculateColumnsBetween(cell.column, cell.column);
+        if (!columns) {
+            return;
+        }
+        this.removeAllCellRanges(true);
+        const rowForCell = {
+            rowIndex: cell.rowIndex,
+            rowPinned: cell.rowPinned
+        };
+
+        // if there is already a range for this cell, then we reuse the same range, otherwise the user
+        // can ctrl & click a cell many times and hit ctrl+c, which would result in the cell getting copied
+        // many times to the clipboard.
+        let cellRange;
+        for (let i = 0; i < this.cellRanges.length; i++) {
+            const range = this.cellRanges[i];
+            const matches =
+                // check cols are same
+                (range.columns && range.columns.length === 1 && range.columns[0] === cell.column) &&
+                // check rows are same
+                this.rowPositionUtils.sameRow(rowForCell, range.startRow) &&
+                this.rowPositionUtils.sameRow(rowForCell, range.endRow);
+            if (matches) {
+                cellRange = range;
+                break;
+            }
+        }
+
+        if (cellRange) {
+            // we need it at the end of the list, as the dragStart picks the last created
+            // range as the start point for the drag
+            const atEndOfList = _last(this.cellRanges) === cellRange;
+
+            if (!atEndOfList) {
+                _removeFromArray(this.cellRanges, cellRange);
+                this.cellRanges.push(cellRange);
+            }
+        } else {
+            cellRange = {
+                startRow: rowForCell,
+                endRow: rowForCell,
+                columns: columns,
+                startColumn: cell.column
+            };
+            this.cellRanges.push(cellRange);
+        }
+
+        this.newestRangeStartCell = cell;
+        this.onDragStop();
+        this.dispatchChangedEvent(true, true, cellRange.id);
+    }
+
+    extendLatestRangeToCell(cellPosition) {
+        if (this.isEmpty() || !this.newestRangeStartCell) {
+            return;
+        }
+        const cellRange = _last(this.cellRanges);
+
+        this.updateRangeEnd(cellRange, cellPosition);
+    }
+
+    updateRangeEnd(cellRange, cellPosition, silent) {
+        silent = !!silent;
+        const endColumn = cellPosition.column;
+        const colsToAdd = this.calculateColumnsBetween(cellRange.startColumn, endColumn);
+        if (!colsToAdd || this.isLastCellOfRange(cellRange, cellPosition)) {
+            return;
+        }
+
+        cellRange.columns = colsToAdd;
+        cellRange.endRow = {rowIndex: cellPosition.rowIndex, rowPinned: cellPosition.rowPinned};
+
+        if (!silent) {
+            this.dispatchChangedEvent(true, true, cellRange.id);
+        }
+    }
+
+    refreshRangeStart(cellRange) {
+        const {startColumn, columns} = cellRange;
+
+        const moveColInCellRange = (colToMove, moveToFront) => {
+            const otherCols = cellRange.columns.filter(col => col !== colToMove);
+            if (colToMove) {
+                cellRange.startColumn = colToMove;
+                cellRange.columns = moveToFront ? [colToMove, ...otherCols] : [...otherCols, colToMove];
+            } else {
+                cellRange.columns = otherCols;
+            }
+        };
+
+        const {left, right} = this.getRangeEdgeColumns(cellRange);
+        const shouldMoveLeftCol = startColumn === columns[0] && startColumn !== left;
+        if (shouldMoveLeftCol) {
+            moveColInCellRange(left, true);
+            return;
+        }
+        const shouldMoveRightCol = startColumn === _last(columns) && startColumn === right;
+        if (shouldMoveRightCol) {
+            moveColInCellRange(right, false);
+            return;
+        }
+    }
+
+    getRangeEdgeColumns(cellRange) {
+        const allColumns = this.visibleColsService.getAllCols();
+        const allIndices = cellRange.columns
+            .map(c => allColumns.indexOf(c))
+            .filter(i => i > -1)
+            .sort((a, b) => a - b);
+
+        return {
+            left: allColumns[allIndices[0]],
+            right: allColumns[_last(allIndices)]
+        };
+    }
+
+    // returns true if successful, false if not successful
+    extendLatestRangeInDirection(key) {
+        if (this.isEmpty() || !this.newestRangeStartCell) {
+            return;
+        }
+
+        const lastRange = _last(this.cellRanges);
+
+        const startCell = this.newestRangeStartCell;
+
+        const firstCol = lastRange.columns[0];
+        const lastCol = _last(lastRange.columns);
+
+        // find the cell that is at the furthest away corner from the starting cell
+        const endCellIndex = lastRange.endRow.rowIndex;
+        const endCellFloating = lastRange.endRow.rowPinned;
+        const endCellColumn = startCell.column === firstCol ? lastCol : firstCol;
+
+        const endCell = {column: endCellColumn, rowIndex: endCellIndex, rowPinned: endCellFloating};
+        const newEndCell = this.cellNavigationService.getNextCellToFocus(key, endCell);
+
+        // if user is at end of grid, so no cell to extend to, we return false
+        if (!newEndCell) {
+            return;
+        }
+
+        this.setCellRange({
+            rowStartIndex: startCell.rowIndex,
+            rowStartPinned: startCell.rowPinned,
+            rowEndIndex: newEndCell.rowIndex,
+            rowEndPinned: newEndCell.rowPinned,
+            columnStart: startCell.column,
+            columnEnd: newEndCell.column
+        });
+
+        return newEndCell;
+    }
+
+    setCellRange(params) {
+        this.removeAllCellRanges(true);
+        this.addCellRange(params);
+    }
+
+    setCellRanges(cellRanges) {
+        if (_shallowCompare(this.cellRanges, cellRanges)) {
+            return;
+        }
+        this.removeAllCellRanges(true);
+
+        cellRanges.forEach(newRange => {
+            if (newRange.columns && newRange.startRow) {
+                this.newestRangeStartCell = {
+                    rowIndex: newRange.startRow.rowIndex,
+                    rowPinned: newRange.startRow.rowPinned,
+                    column: newRange.columns[0]
+                };
+            }
+            this.cellRanges.push(newRange);
+        });
+
+        this.dispatchChangedEvent(false, true);
+    }
+
+    createCellRangeFromCellRangeParams(params) {
+        let columns;
+        if (params.columns) {
+            columns = params.columns.map(c => this.columnModel.getColumnWithValidation(c)).filter(c => c);
+        } else {
+            const columnStart = this.columnModel.getColumnWithValidation(params.columnStart);
+            const columnEnd = this.columnModel.getColumnWithValidation(params.columnEnd);
+            if (!columnStart || !columnEnd) {
+                return;
+            }
+            columns = this.calculateColumnsBetween(columnStart, columnEnd);
+        }
+
+        if (!columns) {
+            return;
+        }
+
+        const startRow = params.rowStartIndex != null ? {
+            rowIndex: params.rowStartIndex,
+            rowPinned: params.rowStartPinned
+        } : undefined;
+
+        const endRow = params.rowEndIndex != null ? {
+            rowIndex: params.rowEndIndex,
+            rowPinned: params.rowEndPinned
+        } : undefined;
+
+        return {
+            startRow: startRow,
+            endRow: endRow,
+            columns: columns,
+            startColumn: columns[0]
+        };
+    }
+
+    addCellRange(params) {
+        const newRange = this.createCellRangeFromCellRangeParams(params);
+        if (newRange) {
+            this.cellRanges.push(newRange);
+            this.dispatchChangedEvent(false, true, newRange.id);
+        }
+    }
+
+    getCellRanges() {
+        return this.cellRanges;
+    }
+
+    isEmpty() {
+        return this.cellRanges.length === 0;
+    }
+
+    isMoreThanOneCell() {
+        if (this.cellRanges.length === 0) {
+            // no ranges, so not more than one cell
+            return false;
+        } else if (this.cellRanges.length > 1) {
+            // many ranges, so more than one cell
+            return true;
+        }
+
+        // only one range, return true if range has more than one
+        const range = this.cellRanges[0];
+        const startRow = this.getRangeStartRow(range);
+        const endRow = this.getRangeEndRow(range);
+        return startRow.rowPinned !== endRow.rowPinned ||
+            startRow.rowIndex !== endRow.rowIndex ||
+            range.columns.length !== 1;
+    }
+
+    removeAllCellRanges(silent) {
+        if (this.isEmpty()) {
+            return;
+        }
+
+        this.onDragStop();
+        this.cellRanges.length = 0;
+
+        if (!silent) {
+            this.dispatchChangedEvent(false, true);
+        }
+    }
+
+// as the user is dragging outside of the panel, the div starts to scroll, which in turn
+// means we are selection more (or less) cells, but the mouse isn't moving, so we recalculate
+// the selection my mimicking a new mouse event
+    onBodyScroll() {
+        this.onDragging(this.lastMouseEvent);
+    }
+
+    isCellInAnyRange(cell) {
+        return this.getCellRangeCount(cell) > 0;
+    }
+
+    isCellInSpecificRange(cell, range) {
+        const columnInRange = range.columns !== null && _includes(range.columns, cell.column);
+        const rowInRange = this.isRowInRange(cell.rowIndex, cell.rowPinned, range);
+        return columnInRange && rowInRange;
+    }
+
+    isLastCellOfRange(cellRange, cell) {
+        const {startRow, endRow} = cellRange;
+        const lastRow = this.rowPositionUtils.before(startRow, endRow) ? endRow : startRow;
+        const isLastRow = cell.rowIndex === lastRow.rowIndex && cell.rowPinned === lastRow.rowPinned;
+        const rangeFirstIndexColumn = cellRange.columns[0];
+        const rangeLastIndexColumn = _last(cellRange.columns);
+        const lastRangeColumn = cellRange.startColumn === rangeFirstIndexColumn ? rangeLastIndexColumn : rangeFirstIndexColumn;
+        const isLastColumn = cell.column === lastRangeColumn;
+        return isLastColumn && isLastRow;
+    }
+
+    isBottomRightCell(cellRange, cell) {
+        const allColumns = this.visibleColsService.getAllCols();
+        const allPositions = cellRange.columns.map(c => allColumns.indexOf(c)).sort((a, b) => a - b);
+        const {startRow, endRow} = cellRange;
+        const lastRow = this.rowPositionUtils.before(startRow, endRow) ? endRow : startRow;
+
+        const isRightColumn = allColumns.indexOf(cell.column) === _last(allPositions);
+        const isLastRow = cell.rowIndex === lastRow.rowIndex && _makeNull(cell.rowPinned) === _makeNull(lastRow.rowPinned);
+
+        return isRightColumn && isLastRow;
+    }
+
+// returns the number of ranges this cell is in
+    getCellRangeCount(cell) {
+        if (this.isEmpty()) {
+            return 0;
+        }
+        return this.cellRanges.filter(cellRange => this.isCellInSpecificRange(cell, cellRange)).length;
+    }
+
+    isRowInRange(rowIndex, floating, cellRange) {
+
+        const firstRow = this.getRangeStartRow(cellRange);
+        const lastRow = this.getRangeEndRow(cellRange);
+
+        const thisRow = {rowIndex: rowIndex, rowPinned: floating};
+
+        // compare rowPinned with == instead of === because it can be `null` or `undefined`
+        const equalsFirstRow = thisRow.rowIndex === firstRow.rowIndex && thisRow.rowPinned == firstRow.rowPinned;
+        const equalsLastRow = thisRow.rowIndex === lastRow.rowIndex && thisRow.rowPinned == lastRow.rowPinned;
+
+        if (equalsFirstRow || equalsLastRow) {
+            return true;
+        }
+
+        const afterFirstRow = !this.rowPositionUtils.before(thisRow, firstRow);
+        const beforeLastRow = this.rowPositionUtils.before(thisRow, lastRow);
+        return afterFirstRow && beforeLastRow;
+    }
+
+    getDraggingRange() {
+        return this.draggingRange;
+    }
+
+    onDragStart(mouseEvent) {
+        const {shiftKey} = mouseEvent;
+        const mouseCell = this.mouseEventService.getCellPositionForEvent(mouseEvent);
+        if (_missing(mouseCell)) {
+            // if drag wasn't on cell, then do nothing, including do not set dragging=true,
+            // (which them means onDragging and onDragStop do nothing)
+            return;
+        }
+
+        if (!shiftKey || _exists(_last(this.cellRanges).type)) {
+            this.removeAllCellRanges(true);
+        }
+
+        this.dragging = true;
+        this.draggingCell = mouseCell;
+        this.lastMouseEvent = mouseEvent;
+
+        if (!shiftKey) {
+            this.newestRangeStartCell = mouseCell;
+        }
+
+        // if we didn't clear the ranges, then dragging means the user clicked, and when the
+        // user clicks it means a range of one cell was created. we need to extend this range
+        // rather than creating another range. otherwise we end up with two distinct ranges
+        // from a drag operation (one from click, and one from drag).
+        if (this.cellRanges.length > 0) {
+            this.draggingRange = _last(this.cellRanges);
+        } else {
+            const mouseRowPosition = {
+                rowIndex: mouseCell.rowIndex,
+                rowPinned: mouseCell.rowPinned
+            };
+
+            this.draggingRange = {
+                startRow: mouseRowPosition,
+                endRow: mouseRowPosition,
+                columns: [mouseCell.column],
+                startColumn: this.newestRangeStartCell.column
+            };
+            this.cellRanges.push(this.draggingRange);
+        }
+
+        this.ctrlsService.getGridBodyCtrl().addScrollEventListener(this.bodyScrollListener);
+
+        this.dispatchChangedEvent(true, false, this.draggingRange.id);
+    }
+
+    onDragging(mouseEvent) {
+        if (!this.dragging || !mouseEvent) {
+            return;
+        }
+        this.lastMouseEvent = mouseEvent;
+
+        const cellPosition = this.mouseEventService.getCellPositionForEvent(mouseEvent);
+
+        const isMouseAndStartInPinned = (position) =>
+            cellPosition && cellPosition.rowPinned === position && this.newestRangeStartCell.rowPinned === position;
+
+        const skipVerticalScroll = isMouseAndStartInPinned('top') || isMouseAndStartInPinned('bottom');
+
+        this.autoScrollService.check(mouseEvent, skipVerticalScroll);
+
+        if (
+            !cellPosition ||
+            !this.draggingCell ||
+            this.cellPositionEquals(this.draggingCell, cellPosition)
+        ) {
+            return;
+        }
+
+        const columns = this.calculateColumnsBetween(this.newestRangeStartCell.column, cellPosition.column);
+
+        if (!columns) {
+            return;
+        }
+
+        this.draggingCell = cellPosition;
+
+        this.draggingRange.endRow = {
+            rowIndex: cellPosition.rowIndex,
+            rowPinned: cellPosition.rowPinned
+        };
+        this.draggingRange.columns = columns;
+
+        this.dispatchChangedEvent(false, false, this.draggingRange.id);
+        this.focusCell(cellPosition);
+    }
+
+    focusCell(cellPosition) {
+        const cellFocused = this.focusService.isCellFocused(cellPosition);
+        if (!cellFocused) {
+            this.focusService.setFocusedCell(cellPosition.rowIndex, cellPosition.column, cellPosition.rowPinned, true);
+        }
+    }
+
+    onDragStop() {
+        if (!this.dragging) {
+            return;
+        }
+        const {id} = this.draggingRange;
+        this.autoScrollService.ensureCleared();
+
+        this.ctrlsService.getGridBodyCtrl().removeScrollEventListener(this.bodyScrollListener);
+        this.lastMouseEvent = null;
+        this.dragging = false;
+        this.draggingRange = undefined;
+        this.draggingCell = undefined;
+
+        this.dispatchChangedEvent(false, true, id);
+    }
+
+    dispatchChangedEvent(started, finished, id) {
+        this.cellRanges.map((cellRange) => {
+            let currentRow = this.getRangeStartRow(cellRange);
+            const lastRow = this.getRangeEndRow(cellRange);
+            const nodesToBeSelected = [];
+            while (true) {
+                const finishedAllRows = _missing(currentRow) || !currentRow || this.rowPositionUtils.before(lastRow, currentRow);
+                if (finishedAllRows || !currentRow || !cellRange.columns) {
+                    break;
+                }
+                const rowNode = this.rowPositionUtils.getRowNode(currentRow);
+                if (!rowNode) {
+                    break;
+                }
+                if (!rowNode.isSelected()) {
+                    rowNode.setSelected(true);
+                }
+                nodesToBeSelected.push(rowNode.data);
+                currentRow = this.cellNavigationService.getRowBelow(currentRow);
+            }
+            this.gridApi.getSelectedNodes().forEach((node) => {
+                if (!nodesToBeSelected.some(nodeToBeSelected => node.data === nodeToBeSelected)) {
+                    node.setSelected(false);
+                }
+            });
+        });
+        const eventCellSelection = {
+            type: "cellSelectionChanged",
+            started: started,
+            finished: finished,
+            id: id,
+        };
+        this.eventService.dispatchEvent(eventCellSelection);
+        const eventRangeSelection = {
+            type: "rangeSelectionChanged",
+            started: started,
+            finished: finished,
+            id: id,
+        };
+        this.eventService.dispatchEvent(eventRangeSelection);
+    }
+
+    calculateColumnsBetween(columnFrom, columnTo) {
+        const allColumns = this.visibleColsService.getAllCols();
+        const isSameColumn = columnFrom === columnTo;
+        const fromIndex = allColumns.indexOf(columnFrom);
+
+        if (fromIndex < 0) {
+            console.warn(`ag-Grid: column ${columnFrom.getId()} is not visible`);
+            return undefined;
+        }
+
+        const toIndex = isSameColumn ? fromIndex : allColumns.indexOf(columnTo);
+
+        if (toIndex < 0) {
+            console.warn(`ag-Grid: column ${columnTo.getId()} is not visible`);
+            return undefined;
+        }
+
+        if (isSameColumn) {
+            return [columnFrom];
+        }
+
+        const firstIndex = Math.min(fromIndex, toIndex);
+        const lastIndex = firstIndex === fromIndex ? toIndex : fromIndex;
+
+        const columns = [];
+
+        for (let i = firstIndex; i <= lastIndex; i++) {
+            columns.push(allColumns[i]);
+        }
+
+        return columns;
+    }
+}