@quantlab/handsontable
Version:
Spreadsheet-like data grid editor that provides copy/paste functionality compatible with Excel/Google Docs
498 lines (440 loc) • 14.3 kB
JavaScript
import BasePlugin from './../_base';
import {arrayEach, arrayFilter} from './../../helpers/array';
import {cancelAnimationFrame, requestAnimationFrame} from './../../helpers/feature';
import {isVisible} from './../../helpers/dom/element';
import GhostTable from './../../utils/ghostTable';
import {isObject, objectEach, hasOwnProperty} from './../../helpers/object';
import {valueAccordingPercent, rangeEach} from './../../helpers/number';
import {registerPlugin} from './../../plugins';
import SamplesGenerator from './../../utils/samplesGenerator';
import {isPercentValue} from './../../helpers/string';
/**
* @plugin AutoRowSize
*
* @description
* This plugin allows to set row heights based on their highest cells.
*
* By default, the plugin is declared as `undefined`, which makes it disabled (same as if it was declared as `false`).
* Enabling this plugin may decrease the overall table performance, as it needs to calculate the heights of all cells to
* resize the rows accordingly.
* If you experience problems with the performance, try turning this feature off and declaring the row heights manually.
*
* Row height calculations are divided into sync and async part. Each of this parts has their own advantages and
* disadvantages. Synchronous calculations are faster but they block the browser UI, while the slower asynchronous operations don't
* block the browser UI.
*
* To configure the sync/async distribution, you can pass an absolute value (number of columns) or a percentage value to a config object:
* ```js
* ...
* // as a number (300 columns in sync, rest async)
* autoRowSize: {syncLimit: 300},
* ...
*
* ...
* // as a string (percent)
* autoRowSize: {syncLimit: '40%'},
* ...
* ```
*
* You can also use the `allowSampleDuplicates` option to allow sampling duplicate values when calculating the row height. Note, that this might have
* a negative impact on performance.
*
* To configure this plugin see {@link Options#autoRowSize}.
*
* @example
*
* ```js
* ...
* var hot = new Handsontable(document.getElementById('example'), {
* date: getData(),
* autoRowSize: true
* });
* // Access to plugin instance:
* var plugin = hot.getPlugin('autoRowSize');
*
* plugin.getRowHeight(4);
*
* if (plugin.isEnabled()) {
* // code...
* }
* ...
* ```
*/
class AutoRowSize extends BasePlugin {
static get CALCULATION_STEP() {
return 50;
}
static get SYNC_CALCULATION_LIMIT() {
return 500;
}
constructor(hotInstance) {
super(hotInstance);
/**
* Cached rows heights.
*
* @type {Array}
*/
this.heights = [];
/**
* Instance of {@link GhostTable} for rows and columns size calculations.
*
* @type {GhostTable}
*/
this.ghostTable = new GhostTable(this.hot);
/**
* Instance of {@link SamplesGenerator} for generating samples necessary for rows height calculations.
*
* @type {SamplesGenerator}
*/
this.samplesGenerator = new SamplesGenerator((row, col) => {
if (row >= 0) {
return this.hot.getDataAtCell(row, col);
} else if (row === -1) {
return this.hot.getColHeader(col);
}
return null;
});
/**
* `true` if only the first calculation was performed.
*
* @type {Boolean}
*/
this.firstCalculation = true;
/**
* `true` if the size calculation is in progress.
*
* @type {Boolean}
*/
this.inProgress = false;
// moved to constructor to allow auto-sizing the rows when the plugin is disabled
this.addHook('beforeRowResize', (row, size, isDblClick) => this.onBeforeRowResize(row, size, isDblClick));
}
/**
* Check if the plugin is enabled in the Handsontable settings.
*
* @returns {Boolean}
*/
isEnabled() {
return this.hot.getSettings().autoRowSize === true || isObject(this.hot.getSettings().autoRowSize);
}
/**
* Enable plugin for this Handsontable instance.
*/
enablePlugin() {
if (this.enabled) {
return;
}
this.setSamplingOptions();
this.addHook('afterLoadData', () => this.onAfterLoadData());
this.addHook('beforeChange', (changes) => this.onBeforeChange(changes));
this.addHook('beforeColumnMove', () => this.recalculateAllRowsHeight());
this.addHook('beforeColumnResize', () => this.recalculateAllRowsHeight());
this.addHook('beforeColumnSort', () => this.clearCache());
this.addHook('beforeRender', (force) => this.onBeforeRender(force));
this.addHook('beforeRowMove', (rowStart, rowEnd) => this.onBeforeRowMove(rowStart, rowEnd));
this.addHook('modifyRowHeight', (height, row) => this.getRowHeight(row, height));
this.addHook('modifyColumnHeaderHeight', () => this.getColumnHeaderHeight());
super.enablePlugin();
}
/**
* Disable plugin for this Handsontable instance.
*/
disablePlugin() {
super.disablePlugin();
}
/**
* Calculate a given rows height.
*
* @param {Number|Object} rowRange Row range object.
* @param {Number|Object} colRange Column range object.
* @param {Boolean} [force=false] If `true` force calculate height even when value was cached earlier.
*/
calculateRowsHeight(rowRange = {from: 0, to: this.hot.countRows() - 1}, colRange = {from: 0, to: this.hot.countCols() - 1}, force = false) {
if (typeof rowRange === 'number') {
rowRange = {from: rowRange, to: rowRange};
}
if (typeof colRange === 'number') {
colRange = {from: colRange, to: colRange};
}
if (this.hot.getColHeader(0) !== null) {
const samples = this.samplesGenerator.generateRowSamples(-1, colRange);
this.ghostTable.addColumnHeadersRow(samples.get(-1));
}
rangeEach(rowRange.from, rowRange.to, (row) => {
// For rows we must calculate row height even when user had set height value manually.
// We can shrink column but cannot shrink rows!
if (force || this.heights[row] === void 0) {
const samples = this.samplesGenerator.generateRowSamples(row, colRange);
samples.forEach((sample, row) => {
this.ghostTable.addRow(row, sample);
});
}
});
if (this.ghostTable.rows.length) {
this.ghostTable.getHeights((row, height) => {
this.heights[row] = height;
});
this.ghostTable.clean();
}
}
/**
* Calculate the height of all the rows.
*
* @param {Object|Number} colRange Column range object.
*/
calculateAllRowsHeight(colRange = {from: 0, to: this.hot.countCols() - 1}) {
let current = 0;
let length = this.hot.countRows() - 1;
let timer = null;
this.inProgress = true;
let loop = () => {
// When hot was destroyed after calculating finished cancel frame
if (!this.hot) {
cancelAnimationFrame(timer);
this.inProgress = false;
return;
}
this.calculateRowsHeight({from: current, to: Math.min(current + AutoRowSize.CALCULATION_STEP, length)}, colRange);
current = current + AutoRowSize.CALCULATION_STEP + 1;
if (current < length) {
timer = requestAnimationFrame(loop);
} else {
cancelAnimationFrame(timer);
this.inProgress = false;
// @TODO Should call once per render cycle, currently fired separately in different plugins
this.hot.view.wt.wtOverlays.adjustElementsSize(true);
// tmp
if (this.hot.view.wt.wtOverlays.leftOverlay.needFullRender) {
this.hot.view.wt.wtOverlays.leftOverlay.clone.draw();
}
}
};
// sync
if (this.firstCalculation && this.getSyncCalculationLimit()) {
this.calculateRowsHeight({from: 0, to: this.getSyncCalculationLimit()}, colRange);
this.firstCalculation = false;
current = this.getSyncCalculationLimit() + 1;
}
// async
if (current < length) {
loop();
} else {
this.inProgress = false;
this.hot.view.wt.wtOverlays.adjustElementsSize(false);
}
}
/**
* Set the sampling options.
*
* @private
*/
setSamplingOptions() {
let setting = this.hot.getSettings().autoRowSize;
let samplingRatio = setting && hasOwnProperty(setting, 'samplingRatio') ? this.hot.getSettings().autoRowSize.samplingRatio : void 0;
let allowSampleDuplicates = setting && hasOwnProperty(setting, 'allowSampleDuplicates') ? this.hot.getSettings().autoRowSize.allowSampleDuplicates : void 0;
if (samplingRatio && !isNaN(samplingRatio)) {
this.samplesGenerator.setSampleCount(parseInt(samplingRatio, 10));
}
if (allowSampleDuplicates) {
this.samplesGenerator.setAllowDuplicates(allowSampleDuplicates);
}
}
/**
* Recalculate all rows height (overwrite cache values).
*/
recalculateAllRowsHeight() {
if (isVisible(this.hot.view.wt.wtTable.TABLE)) {
this.clearCache();
this.calculateAllRowsHeight();
}
}
/**
* Get value which tells how much rows will be calculated synchronously. Rest rows will be calculated asynchronously.
*
* @returns {Number}
*/
getSyncCalculationLimit() {
/* eslint-disable no-bitwise */
let limit = AutoRowSize.SYNC_CALCULATION_LIMIT;
let rowsLimit = this.hot.countRows() - 1;
if (isObject(this.hot.getSettings().autoRowSize)) {
limit = this.hot.getSettings().autoRowSize.syncLimit;
if (isPercentValue(limit)) {
limit = valueAccordingPercent(rowsLimit, limit);
} else {
// Force to Number
limit >>= 0;
}
}
return Math.min(limit, rowsLimit);
}
/**
* Get the calculated row height.
*
* @param {Number} row Visual row index.
* @param {Number} [defaultHeight] Default row height. It will be pick up if no calculated height found.
* @returns {Number}
*/
getRowHeight(row, defaultHeight = void 0) {
let height = defaultHeight;
if (this.heights[row] !== void 0 && this.heights[row] > (defaultHeight || 0)) {
height = this.heights[row];
}
return height;
}
/**
* Get the calculated column header height.
*
* @returns {Number|undefined}
*/
getColumnHeaderHeight() {
return this.heights[-1];
}
/**
* Get the first visible row.
*
* @returns {Number} Returns row index or -1 if table is not rendered.
*/
getFirstVisibleRow() {
const wot = this.hot.view.wt;
if (wot.wtViewport.rowsVisibleCalculator) {
return wot.wtTable.getFirstVisibleRow();
}
if (wot.wtViewport.rowsRenderCalculator) {
return wot.wtTable.getFirstRenderedRow();
}
return -1;
}
/**
* Get the last visible row.
*
* @returns {Number} Returns row index or -1 if table is not rendered.
*/
getLastVisibleRow() {
const wot = this.hot.view.wt;
if (wot.wtViewport.rowsVisibleCalculator) {
return wot.wtTable.getLastVisibleRow();
}
if (wot.wtViewport.rowsRenderCalculator) {
return wot.wtTable.getLastRenderedRow();
}
return -1;
}
/**
* Clear cached heights.
*/
clearCache() {
this.heights.length = 0;
this.heights[-1] = void 0;
}
/**
* Clear cache by range.
*
* @param {Object|Number} range Row range object.
*/
clearCacheByRange(range) {
if (typeof range === 'number') {
range = {from: range, to: range};
}
rangeEach(Math.min(range.from, range.to), Math.max(range.from, range.to), (row) => {
this.heights[row] = void 0;
});
}
/**
* @returns {Boolean}
*/
isNeedRecalculate() {
return !!arrayFilter(this.heights, (item) => (item === void 0)).length;
}
/**
* On before render listener.
*
* @private
*/
onBeforeRender() {
let force = this.hot.renderCall;
this.calculateRowsHeight({from: this.getFirstVisibleRow(), to: this.getLastVisibleRow()}, void 0, force);
let fixedRowsBottom = this.hot.getSettings().fixedRowsBottom;
// Calculate rows height synchronously for bottom overlay
if (fixedRowsBottom) {
let totalRows = this.hot.countRows() - 1;
this.calculateRowsHeight({from: totalRows - fixedRowsBottom, to: totalRows});
}
if (this.isNeedRecalculate() && !this.inProgress) {
this.calculateAllRowsHeight();
}
}
/**
* On before row move listener.
*
* @private
* @param {Number} from Row index where was grabbed.
* @param {Number} to Destination row index.
*/
onBeforeRowMove(from, to) {
this.clearCacheByRange({from, to});
this.calculateAllRowsHeight();
}
/**
* On before row resize listener.
*
* @private
* @param {Number} row
* @param {Number} size
* @param {Boolean} isDblClick
* @returns {Number}
*/
onBeforeRowResize(row, size, isDblClick) {
if (isDblClick) {
this.calculateRowsHeight(row, void 0, true);
size = this.getRowHeight(row);
}
return size;
}
/**
* On after load data listener.
*
* @private
*/
onAfterLoadData() {
if (this.hot.view) {
this.recalculateAllRowsHeight();
} else {
// first load - initialization
setTimeout(() => {
if (this.hot) {
this.recalculateAllRowsHeight();
}
}, 0);
}
}
/**
* On before change listener.
*
* @private
* @param {Array} changes
*/
onBeforeChange(changes) {
let range = null;
if (changes.length === 1) {
range = changes[0][0];
} else if (changes.length > 1) {
range = {
from: changes[0][0],
to: changes[changes.length - 1][0],
};
}
if (range !== null) {
this.clearCacheByRange(range);
}
}
/**
* Destroy plugin instance.
*/
destroy() {
this.ghostTable.clean();
super.destroy();
}
}
registerPlugin('autoRowSize', AutoRowSize);
export default AutoRowSize;