| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536 |
- import BasePlugin from './../_base';
- import Hooks from './../../pluginHooks';
- import {offset, outerHeight, outerWidth} from './../../helpers/dom/element';
- import EventManager from './../../eventManager';
- import {registerPlugin} from './../../plugins';
- import {CellCoords} from './../../3rdparty/walkontable/src';
- import {getDeltas, getDragDirectionAndRange, DIRECTIONS, getMappedFillHandleSetting} from './utils';
- Hooks.getSingleton().register('modifyAutofillRange');
- Hooks.getSingleton().register('beforeAutofill');
- const INSERT_ROW_ALTER_ACTION_NAME = 'insert_row';
- const INTERVAL_FOR_ADDING_ROW = 200;
- /**
- * This plugin provides "drag-down" and "copy-down" functionalities, both operated
- * using the small square in the right bottom of the cell selection.
- *
- * "Drag-down" expands the value of the selected cells to the neighbouring
- * cells when you drag the small square in the corner.
- *
- * "Copy-down" copies the value of the selection to all empty cells
- * below when you double click the small square.
- *
- * @class Autofill
- * @plugin Autofill
- */
- class Autofill extends BasePlugin {
- constructor(hotInstance) {
- super(hotInstance);
- /**
- * Event manager
- *
- * @type {EventManager}
- */
- this.eventManager = new EventManager(this);
- /**
- * Specifies if adding new row started.
- *
- * @type {Boolean}
- */
- this.addingStarted = false;
- /**
- * Specifies if there was mouse down on the cell corner.
- *
- * @type {Boolean}
- */
- this.mouseDownOnCellCorner = false;
- /**
- * Specifies if mouse was dragged outside Handsontable.
- *
- * @type {Boolean}
- */
- this.mouseDragOutside = false;
- /**
- * Specifies how many cell levels were dragged using the handle.
- *
- * @type {Boolean}
- */
- this.handleDraggedCells = 0;
- /**
- * Specifies allowed directions of drag.
- *
- * @type {Array}
- */
- this.directions = [];
- /**
- * Specifies if can insert new rows if needed.
- *
- * @type {Boolean}
- */
- this.autoInsertRow = false;
- }
- /**
- * Check if the plugin is enabled in the Handsontable settings.
- *
- * @returns {Boolean}
- */
- isEnabled() {
- return this.hot.getSettings().fillHandle;
- }
- /**
- * Enable plugin for this Handsontable instance.
- */
- enablePlugin() {
- if (this.enabled) {
- return;
- }
- this.mapSettings();
- this.registerEvents();
- this.addHook('afterOnCellCornerMouseDown', (event) => this.onAfterCellCornerMouseDown(event));
- this.addHook('afterOnCellCornerDblClick', (event) => this.onCellCornerDblClick(event));
- this.addHook('beforeOnCellMouseOver', (event, coords, TD) => this.onBeforeCellMouseOver(coords));
- super.enablePlugin();
- }
- /**
- * Update plugin for this Handsontable instance.
- */
- updatePlugin() {
- this.disablePlugin();
- this.enablePlugin();
- super.updatePlugin();
- }
- /**
- * Disable plugin for this Handsontable instance.
- */
- disablePlugin() {
- this.clearMappedSettings();
- super.disablePlugin();
- }
- /**
- * Get selection data
- *
- * @private
- * @returns {Array} Array with the data.
- */
- getSelectionData() {
- const selRange = {
- from: this.hot.getSelectedRange().from,
- to: this.hot.getSelectedRange().to,
- };
- return this.hot.getData(selRange.from.row, selRange.from.col, selRange.to.row, selRange.to.col);
- }
- /**
- * Try to apply fill values to the area in fill border, omitting the selection border.
- *
- * @private
- * @returns {Boolean} reports if fill was applied.
- */
- fillIn() {
- if (this.hot.view.wt.selections.fill.isEmpty()) {
- return false;
- }
- const cornersOfSelectionAndDragAreas = this.hot.view.wt.selections.fill.getCorners();
- this.resetSelectionOfDraggedArea();
- const cornersOfSelectedCells = this.getCornersOfSelectedCells();
- const {directionOfDrag, startOfDragCoords, endOfDragCoords} = getDragDirectionAndRange(cornersOfSelectedCells, cornersOfSelectionAndDragAreas);
- this.hot.runHooks('modifyAutofillRange', cornersOfSelectedCells, cornersOfSelectionAndDragAreas);
- if (startOfDragCoords && startOfDragCoords.row > -1 && startOfDragCoords.col > -1) {
- const selectionData = this.getSelectionData();
- const deltas = getDeltas(startOfDragCoords, endOfDragCoords, selectionData, directionOfDrag);
- this.hot.runHooks('beforeAutofill', startOfDragCoords, endOfDragCoords, selectionData);
- this.hot.populateFromArray(
- startOfDragCoords.row,
- startOfDragCoords.col,
- selectionData,
- endOfDragCoords.row,
- endOfDragCoords.col,
- `${this.pluginName}.fill`,
- null,
- directionOfDrag,
- deltas
- );
- this.setSelection(cornersOfSelectionAndDragAreas);
- } else {
- // reset to avoid some range bug
- this.hot.selection.refreshBorders();
- }
- return true;
- }
- /**
- * Reduce the selection area if the handle was dragged outside of the table or on headers.
- *
- * @private
- * @param {CellCoords} coords indexes of selection corners.
- * @returns {CellCoords}
- */
- reduceSelectionAreaIfNeeded(coords) {
- if (coords.row < 0) {
- coords.row = 0;
- }
- if (coords.col < 0) {
- coords.col = 0;
- }
- return coords;
- }
- /**
- * Get the coordinates of the drag & drop borders.
- *
- * @private
- * @param {CellCoords} coordsOfSelection `CellCoords` coord object.
- * @returns {Array}
- */
- getCoordsOfDragAndDropBorders(coordsOfSelection) {
- const topLeftCorner = this.hot.getSelectedRange().getTopLeftCorner();
- const bottomRightCorner = this.hot.getSelectedRange().getBottomRightCorner();
- let coords;
- if (this.directions.includes(DIRECTIONS.vertical) &&
- (bottomRightCorner.row < coordsOfSelection.row || topLeftCorner.row > coordsOfSelection.row)) {
- coords = new CellCoords(coordsOfSelection.row, bottomRightCorner.col);
- } else if (this.directions.includes(DIRECTIONS.horizontal)) {
- coords = new CellCoords(bottomRightCorner.row, coordsOfSelection.col);
- } else {
- // wrong direction
- return;
- }
- return this.reduceSelectionAreaIfNeeded(coords);
- }
- /**
- * Show the fill border.
- *
- * @private
- * @param {CellCoords} coordsOfSelection `CellCoords` coord object.
- */
- showBorder(coordsOfSelection) {
- const coordsOfDragAndDropBorders = this.getCoordsOfDragAndDropBorders(coordsOfSelection);
- if (coordsOfDragAndDropBorders) {
- this.redrawBorders(coordsOfDragAndDropBorders);
- }
- }
- /**
- * Add new row
- *
- * @private
- */
- addRow() {
- this.hot._registerTimeout(setTimeout(() => {
- this.hot.alter(INSERT_ROW_ALTER_ACTION_NAME, void 0, 1, `${this.pluginName}.fill`);
- this.addingStarted = false;
- }, INTERVAL_FOR_ADDING_ROW));
- }
- /**
- * Add new rows if they are needed to continue auto-filling values.
- *
- * @private
- */
- addNewRowIfNeeded() {
- if (this.hot.view.wt.selections.fill.cellRange && this.addingStarted === false && this.autoInsertRow) {
- const cornersOfSelectedCells = this.hot.getSelected();
- const cornersOfSelectedDragArea = this.hot.view.wt.selections.fill.getCorners();
- const nrOfTableRows = this.hot.countRows();
- if (cornersOfSelectedCells[2] < nrOfTableRows - 1 && cornersOfSelectedDragArea[2] === nrOfTableRows - 1) {
- this.addingStarted = true;
- this.addRow();
- }
- }
- }
- /**
- * Get corners of selected cells.
- *
- * @private
- * @returns {Array}
- */
- getCornersOfSelectedCells() {
- if (this.hot.selection.isMultiple()) {
- return this.hot.view.wt.selections.area.getCorners();
- }
- return this.hot.view.wt.selections.current.getCorners();
- }
- /**
- * Get index of last adjacent filled in row
- *
- * @private
- * @param {Array} cornersOfSelectedCells indexes of selection corners.
- * @returns {Number} gives number greater than or equal to zero when selection adjacent can be applied.
- * or -1 when selection adjacent can't be applied
- */
- getIndexOfLastAdjacentFilledInRow(cornersOfSelectedCells) {
- const data = this.hot.getData();
- const nrOfTableRows = this.hot.countRows();
- let lastFilledInRowIndex;
- for (let rowIndex = cornersOfSelectedCells[2] + 1; rowIndex < nrOfTableRows; rowIndex++) {
- for (let columnIndex = cornersOfSelectedCells[1]; columnIndex <= cornersOfSelectedCells[3]; columnIndex++) {
- const dataInCell = data[rowIndex][columnIndex];
- if (dataInCell) {
- return -1;
- }
- }
- const dataInNextLeftCell = data[rowIndex][cornersOfSelectedCells[1] - 1];
- const dataInNextRightCell = data[rowIndex][cornersOfSelectedCells[3] + 1];
- if (!!dataInNextLeftCell || !!dataInNextRightCell) {
- lastFilledInRowIndex = rowIndex;
- }
- }
- return lastFilledInRowIndex;
- }
- /**
- * Add a selection from the start area to the specific row index.
- *
- * @private
- * @param {Array} selectStartArea selection area from which we start to create more comprehensive selection.
- * @param {Number} rowIndex
- */
- addSelectionFromStartAreaToSpecificRowIndex(selectStartArea, rowIndex) {
- this.hot.view.wt.selections.fill.clear();
- this.hot.view.wt.selections.fill.add(new CellCoords(
- selectStartArea[0],
- selectStartArea[1])
- );
- this.hot.view.wt.selections.fill.add(new CellCoords(
- rowIndex,
- selectStartArea[3])
- );
- }
- /**
- * Set selection based on passed corners.
- *
- * @private
- * @param {Array} cornersOfArea
- */
- setSelection(cornersOfArea) {
- this.hot.selection.setRangeStart(new CellCoords(
- cornersOfArea[0],
- cornersOfArea[1])
- );
- this.hot.selection.setRangeEnd(new CellCoords(
- cornersOfArea[2],
- cornersOfArea[3])
- );
- }
- /**
- * Try to select cells down to the last row in the left column and then returns if selection was applied.
- *
- * @private
- * @returns {Boolean}
- */
- selectAdjacent() {
- const cornersOfSelectedCells = this.getCornersOfSelectedCells();
- const lastFilledInRowIndex = this.getIndexOfLastAdjacentFilledInRow(cornersOfSelectedCells);
- if (lastFilledInRowIndex === -1) {
- return false;
- }
- this.addSelectionFromStartAreaToSpecificRowIndex(cornersOfSelectedCells, lastFilledInRowIndex);
- return true;
- }
- /**
- * Reset selection of dragged area.
- *
- * @private
- */
- resetSelectionOfDraggedArea() {
- this.handleDraggedCells = 0;
- this.hot.view.wt.selections.fill.clear();
- }
- /**
- * Redraw borders.
- *
- * @private
- * @param {CellCoords} coords `CellCoords` coord object.
- */
- redrawBorders(coords) {
- this.hot.view.wt.selections.fill.clear();
- this.hot.view.wt.selections.fill.add(this.hot.getSelectedRange().from);
- this.hot.view.wt.selections.fill.add(this.hot.getSelectedRange().to);
- this.hot.view.wt.selections.fill.add(coords);
- this.hot.view.render();
- }
- /**
- * Get if mouse was dragged outside.
- *
- * @private
- * @param {MouseEvent} event `mousemove` event properties.
- * @returns {Boolean}
- */
- getIfMouseWasDraggedOutside(event) {
- const tableBottom = offset(this.hot.table).top - (window.pageYOffset ||
- document.documentElement.scrollTop) + outerHeight(this.hot.table);
- const tableRight = offset(this.hot.table).left - (window.pageXOffset ||
- document.documentElement.scrollLeft) + outerWidth(this.hot.table);
- return event.clientY > tableBottom && event.clientX <= tableRight;
- }
- /**
- * Bind the events used by the plugin.
- *
- * @private
- */
- registerEvents() {
- this.eventManager.addEventListener(document.documentElement, 'mouseup', () => this.onMouseUp());
- this.eventManager.addEventListener(document.documentElement, 'mousemove', (event) => this.onMouseMove(event));
- }
- /**
- * On cell corner double click callback.
- *
- * @private
- */
- onCellCornerDblClick() {
- const selectionApplied = this.selectAdjacent();
- if (selectionApplied) {
- this.fillIn();
- }
- }
- /**
- * On after cell corner mouse down listener.
- *
- * @private
- */
- onAfterCellCornerMouseDown() {
- this.handleDraggedCells = 1;
- this.mouseDownOnCellCorner = true;
- }
- /**
- * On before cell mouse over listener.
- *
- * @private
- * @param {CellCoords} coords `CellCoords` coord object.
- */
- onBeforeCellMouseOver(coords) {
- if (this.mouseDownOnCellCorner && !this.hot.view.isMouseDown() && this.handleDraggedCells) {
- this.handleDraggedCells++;
- this.showBorder(coords);
- this.addNewRowIfNeeded();
- }
- }
- /**
- * On mouse up listener.
- *
- * @private
- */
- onMouseUp() {
- if (this.handleDraggedCells) {
- if (this.handleDraggedCells > 1) {
- this.fillIn();
- }
- this.handleDraggedCells = 0;
- this.mouseDownOnCellCorner = false;
- }
- }
- /**
- * On mouse move listener.
- *
- * @private
- * @param {MouseEvent} event `mousemove` event properties.
- */
- onMouseMove(event) {
- const mouseWasDraggedOutside = this.getIfMouseWasDraggedOutside(event);
- if (this.addingStarted === false && this.handleDraggedCells > 0 && mouseWasDraggedOutside) {
- this.mouseDragOutside = true;
- this.addingStarted = true;
- } else {
- this.mouseDragOutside = false;
- }
- if (this.mouseDragOutside && this.autoInsertRow) {
- this.addRow();
- }
- }
- /**
- * Clear mapped settings.
- *
- * @private
- */
- clearMappedSettings() {
- this.directions.length = 0;
- this.autoInsertRow = false;
- }
- /**
- * Map settings.
- *
- * @private
- */
- mapSettings() {
- const mappedSettings = getMappedFillHandleSetting(this.hot.getSettings().fillHandle);
- this.directions = mappedSettings.directions;
- this.autoInsertRow = mappedSettings.autoInsertRow;
- }
- /**
- * Destroy plugin instance.
- */
- destroy() {
- super.destroy();
- }
- }
- registerPlugin('autofill', Autofill);
- export default Autofill;
|