| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509 |
- import BasePlugin from './../_base';
- import {arrayEach, arrayFilter, arrayReduce, arrayMap} 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';
- import {ViewportColumnsCalculator} from './../../3rdparty/walkontable/src';
- const privatePool = new WeakMap();
- /**
- * @plugin AutoColumnSize
- *
- * @description
- * This plugin allows to set column widths based on their widest cells.
- *
- * By default, the plugin is declared as `undefined`, which makes it enabled (same as if it was declared as `true`).
- * Enabling this plugin may decrease the overall table performance, as it needs to calculate the widths of all cells to
- * resize the columns accordingly.
- * If you experience problems with the performance, try turning this feature off and declaring the column widths manually.
- *
- * Column width 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)
- * autoColumnSize: {syncLimit: 300},
- * ...
- *
- * ...
- * // as a string (percent)
- * autoColumnSize: {syncLimit: '40%'},
- * ...
- * ```
- *
- * To configure this plugin see {@link Options#autoColumnSize}.
- *
- * @example
- * ```js
- * ...
- * var hot = new Handsontable(document.getElementById('example'), {
- * date: getData(),
- * autoColumnSize: true
- * });
- * // Access to plugin instance:
- * var plugin = hot.getPlugin('autoColumnSize');
- *
- * plugin.getColumnWidth(4);
- *
- * if (plugin.isEnabled()) {
- * // code...
- * }
- * ...
- * ```
- */
- class AutoColumnSize extends BasePlugin {
- static get CALCULATION_STEP() {
- return 50;
- }
- static get SYNC_CALCULATION_LIMIT() {
- return 50;
- }
- constructor(hotInstance) {
- super(hotInstance);
- privatePool.set(this, {
- /**
- * Cached column header names. It is used to diff current column headers with previous state and detect which
- * columns width should be updated.
- *
- * @private
- * @type {Array}
- */
- cachedColumnHeaders: [],
- });
- /**
- * Cached columns widths.
- *
- * @type {Array}
- */
- this.widths = [];
- /**
- * 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 columns width calculations.
- *
- * @type {SamplesGenerator}
- */
- this.samplesGenerator = new SamplesGenerator((row, col) => this.hot.getDataAtCell(row, col));
- /**
- * `true` only if 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 columns when the plugin is disabled
- this.addHook('beforeColumnResize', (col, size, isDblClick) => this.onBeforeColumnResize(col, size, isDblClick));
- }
- /**
- * Check if the plugin is enabled in the handsontable settings.
- *
- * @returns {Boolean}
- */
- isEnabled() {
- return this.hot.getSettings().autoColumnSize !== false && !this.hot.getSettings().colWidths;
- }
- /**
- * Enable plugin for this Handsontable instance.
- */
- enablePlugin() {
- if (this.enabled) {
- return;
- }
- let setting = this.hot.getSettings().autoColumnSize;
- if (setting && setting.useHeaders != null) {
- this.ghostTable.setSetting('useHeaders', setting.useHeaders);
- }
- this.addHook('afterLoadData', () => this.onAfterLoadData());
- this.addHook('beforeChange', (changes) => this.onBeforeChange(changes));
- this.addHook('beforeRender', (force) => this.onBeforeRender(force));
- this.addHook('modifyColWidth', (width, col) => this.getColumnWidth(col, width));
- this.addHook('afterInit', () => this.onAfterInit());
- super.enablePlugin();
- }
- /**
- * Update plugin state.
- */
- updatePlugin() {
- const changedColumns = this.findColumnsWhereHeaderWasChanged();
- if (changedColumns.length) {
- this.clearCache(changedColumns);
- }
- super.updatePlugin();
- }
- /**
- * Disable plugin for this Handsontable instance.
- */
- disablePlugin() {
- super.disablePlugin();
- }
- /**
- * Calculate a columns width.
- *
- * @param {Number|Object} colRange Column range object.
- * @param {Number|Object} rowRange Row range object.
- * @param {Boolean} [force=false] If `true` force calculate width even when value was cached earlier.
- */
- calculateColumnsWidth(colRange = {from: 0, to: this.hot.countCols() - 1}, rowRange = {from: 0, to: this.hot.countRows() - 1}, force = false) {
- if (typeof colRange === 'number') {
- colRange = {from: colRange, to: colRange};
- }
- if (typeof rowRange === 'number') {
- rowRange = {from: rowRange, to: rowRange};
- }
- rangeEach(colRange.from, colRange.to, (col) => {
- if (force || (this.widths[col] === void 0 && !this.hot._getColWidthFromSettings(col))) {
- const samples = this.samplesGenerator.generateColumnSamples(col, rowRange);
- samples.forEach((sample, col) => this.ghostTable.addColumn(col, sample));
- }
- });
- if (this.ghostTable.columns.length) {
- this.ghostTable.getWidths((col, width) => {
- this.widths[col] = width;
- });
- this.ghostTable.clean();
- }
- }
- /**
- * Calculate all columns width.
- *
- * @param {Object|Number} rowRange Row range object.
- */
- calculateAllColumnsWidth(rowRange = {from: 0, to: this.hot.countRows() - 1}) {
- let current = 0;
- let length = this.hot.countCols() - 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.calculateColumnsWidth({
- from: current,
- to: Math.min(current + AutoColumnSize.CALCULATION_STEP, length)
- }, rowRange);
- current = current + AutoColumnSize.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.calculateColumnsWidth({from: 0, to: this.getSyncCalculationLimit()}, rowRange);
- this.firstCalculation = false;
- current = this.getSyncCalculationLimit() + 1;
- }
- // async
- if (current < length) {
- loop();
- } else {
- this.inProgress = false;
- }
- }
- /**
- * Set the sampling options.
- *
- * @private
- */
- setSamplingOptions() {
- let setting = this.hot.getSettings().autoColumnSize;
- let samplingRatio = setting && hasOwnProperty(setting, 'samplingRatio') ? this.hot.getSettings().autoColumnSize.samplingRatio : void 0;
- let allowSampleDuplicates = setting && hasOwnProperty(setting, 'allowSampleDuplicates') ? this.hot.getSettings().autoColumnSize.allowSampleDuplicates : void 0;
- if (samplingRatio && !isNaN(samplingRatio)) {
- this.samplesGenerator.setSampleCount(parseInt(samplingRatio, 10));
- }
- if (allowSampleDuplicates) {
- this.samplesGenerator.setAllowDuplicates(allowSampleDuplicates);
- }
- }
- /**
- * Recalculate all columns width (overwrite cache values).
- */
- recalculateAllColumnsWidth() {
- if (this.hot.view && isVisible(this.hot.view.wt.wtTable.TABLE)) {
- this.clearCache();
- this.calculateAllColumnsWidth();
- }
- }
- /**
- * Get value which tells how many columns should be calculated synchronously. Rest of the columns will be calculated asynchronously.
- *
- * @returns {Number}
- */
- getSyncCalculationLimit() {
- /* eslint-disable no-bitwise */
- let limit = AutoColumnSize.SYNC_CALCULATION_LIMIT;
- let colsLimit = this.hot.countCols() - 1;
- if (isObject(this.hot.getSettings().autoColumnSize)) {
- limit = this.hot.getSettings().autoColumnSize.syncLimit;
- if (isPercentValue(limit)) {
- limit = valueAccordingPercent(colsLimit, limit);
- } else {
- // Force to Number
- limit >>= 0;
- }
- }
- return Math.min(limit, colsLimit);
- }
- /**
- * Get the calculated column width.
- *
- * @param {Number} col Column index.
- * @param {Number} [defaultWidth] Default column width. It will be picked up if no calculated width found.
- * @param {Boolean} [keepMinimum=true] If `true` then returned value won't be smaller then 50 (default column width).
- * @returns {Number}
- */
- getColumnWidth(col, defaultWidth = void 0, keepMinimum = true) {
- let width = defaultWidth;
- if (width === void 0) {
- width = this.widths[col];
- if (keepMinimum && typeof width === 'number') {
- width = Math.max(width, ViewportColumnsCalculator.DEFAULT_WIDTH);
- }
- }
- return width;
- }
- /**
- * Get the first visible column.
- *
- * @returns {Number} Returns column index or -1 if table is not rendered.
- */
- getFirstVisibleColumn() {
- const wot = this.hot.view.wt;
- if (wot.wtViewport.columnsVisibleCalculator) {
- return wot.wtTable.getFirstVisibleColumn();
- }
- if (wot.wtViewport.columnsRenderCalculator) {
- return wot.wtTable.getFirstRenderedColumn();
- }
- return -1;
- }
- /**
- * Get the last visible column.
- *
- * @returns {Number} Returns column index or -1 if table is not rendered.
- */
- getLastVisibleColumn() {
- const wot = this.hot.view.wt;
- if (wot.wtViewport.columnsVisibleCalculator) {
- return wot.wtTable.getLastVisibleColumn();
- }
- if (wot.wtViewport.columnsRenderCalculator) {
- return wot.wtTable.getLastRenderedColumn();
- }
- return -1;
- }
- /**
- * Collects all columns which titles has been changed in comparison to the previous state.
- *
- * @returns {Array} It returns an array of physical column indexes.
- */
- findColumnsWhereHeaderWasChanged() {
- const columnHeaders = this.hot.getColHeader();
- const {cachedColumnHeaders} = privatePool.get(this);
- const changedColumns = arrayReduce(columnHeaders, (acc, columnTitle, physicalColumn) => {
- const cachedColumnsLength = cachedColumnHeaders.length;
- if (cachedColumnsLength - 1 < physicalColumn || cachedColumnHeaders[physicalColumn] !== columnTitle) {
- acc.push(physicalColumn);
- }
- if (cachedColumnsLength - 1 < physicalColumn) {
- cachedColumnHeaders.push(columnTitle);
- } else {
- cachedColumnHeaders[physicalColumn] = columnTitle;
- }
- return acc;
- }, []);
- return changedColumns;
- }
- /**
- * Clear cache of calculated column widths. If you want to clear only selected columns pass an array with their indexes.
- * Otherwise whole cache will be cleared.
- *
- * @param {Array} [columns=[]] List of column indexes (physical indexes) to clear.
- */
- clearCache(columns = []) {
- if (columns.length) {
- arrayEach(columns, (physicalIndex) => {
- this.widths[physicalIndex] = void 0;
- });
- } else {
- this.widths.length = 0;
- }
- }
- /**
- * Check if all widths were calculated. If not then return `true` (need recalculate).
- *
- * @returns {Boolean}
- */
- isNeedRecalculate() {
- return !!arrayFilter(this.widths, (item) => (item === void 0)).length;
- }
- /**
- * On before render listener.
- *
- * @private
- */
- onBeforeRender() {
- const force = this.hot.renderCall;
- const rowsCount = this.hot.countRows();
- // Keep last column widths unchanged for situation when all rows was deleted or trimmed (pro #6)
- if (!rowsCount) {
- return;
- }
- this.calculateColumnsWidth({from: this.getFirstVisibleColumn(), to: this.getLastVisibleColumn()}, void 0, force);
- if (this.isNeedRecalculate() && !this.inProgress) {
- this.calculateAllColumnsWidth();
- }
- }
- /**
- * On after load data listener.
- *
- * @private
- */
- onAfterLoadData() {
- if (this.hot.view) {
- this.recalculateAllColumnsWidth();
- } else {
- // first load - initialization
- setTimeout(() => {
- if (this.hot) {
- this.recalculateAllColumnsWidth();
- }
- }, 0);
- }
- }
- /**
- * On before change listener.
- *
- * @private
- * @param {Array} changes
- */
- onBeforeChange(changes) {
- const changedColumns = arrayMap(changes, ([row, column]) => this.hot.propToCol(column));
- this.clearCache(changedColumns);
- }
- /**
- * On before column resize listener.
- *
- * @private
- * @param {Number} col
- * @param {Number} size
- * @param {Boolean} isDblClick
- * @returns {Number}
- */
- onBeforeColumnResize(col, size, isDblClick) {
- if (isDblClick) {
- this.calculateColumnsWidth(col, void 0, true);
- size = this.getColumnWidth(col, void 0, false);
- }
- return size;
- }
- /**
- * On after Handsontable init fill plugin with all necessary values.
- *
- * @private
- */
- onAfterInit() {
- privatePool.get(this).cachedColumnHeaders = this.hot.getColHeader();
- }
- /**
- * Destroy plugin instance.
- */
- destroy() {
- this.ghostTable.clean();
- super.destroy();
- }
- }
- registerPlugin('autoColumnSize', AutoColumnSize);
- export default AutoColumnSize;
|