| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517 |
- import BasePlugin from './../_base.js';
- import {addClass, hasClass, removeClass, outerHeight} from './../../helpers/dom/element';
- import EventManager from './../../eventManager';
- import {pageX, pageY} from './../../helpers/dom/event';
- import {arrayEach} from './../../helpers/array';
- import {rangeEach} from './../../helpers/number';
- import {registerPlugin} from './../../plugins';
- // Developer note! Whenever you make a change in this file, make an analogous change in manualRowResize.js
- /**
- * @description
- * ManualColumnResize Plugin.
- *
- * Has 2 UI components:
- * - handle - the draggable element that sets the desired width of the column.
- * - guide - the helper guide that shows the desired width as a vertical guide.
- *
- * @plugin ManualColumnResize
- */
- class ManualColumnResize extends BasePlugin {
- constructor(hotInstance) {
- super(hotInstance);
- this.currentTH = null;
- this.currentCol = null;
- this.selectedCols = [];
- this.currentWidth = null;
- this.newSize = null;
- this.startY = null;
- this.startWidth = null;
- this.startOffset = null;
- this.handle = document.createElement('DIV');
- this.guide = document.createElement('DIV');
- this.eventManager = new EventManager(this);
- this.pressed = null;
- this.dblclick = 0;
- this.autoresizeTimeout = null;
- this.manualColumnWidths = [];
- addClass(this.handle, 'manualColumnResizer');
- addClass(this.guide, 'manualColumnResizerGuide');
- }
- /**
- * Check if the plugin is enabled in the handsontable settings.
- *
- * @returns {Boolean}
- */
- isEnabled() {
- return this.hot.getSettings().manualColumnResize;
- }
- /**
- * Enable plugin for this Handsontable instance.
- */
- enablePlugin() {
- if (this.enabled) {
- return;
- }
- this.manualColumnWidths = [];
- let initialColumnWidth = this.hot.getSettings().manualColumnResize;
- let loadedManualColumnWidths = this.loadManualColumnWidths();
- this.addHook('modifyColWidth', (width, col) => this.onModifyColWidth(width, col));
- this.addHook('beforeStretchingColumnWidth', (stretchedWidth, column) => this.onBeforeStretchingColumnWidth(stretchedWidth, column));
- this.addHook('beforeColumnResize', (currentColumn, newSize, isDoubleClick) => this.onBeforeColumnResize(currentColumn, newSize, isDoubleClick));
- if (typeof loadedManualColumnWidths != 'undefined') {
- this.manualColumnWidths = loadedManualColumnWidths;
- } else if (Array.isArray(initialColumnWidth)) {
- this.manualColumnWidths = initialColumnWidth;
- } else {
- this.manualColumnWidths = [];
- }
- // Handsontable.hooks.register('beforeColumnResize');
- // Handsontable.hooks.register('afterColumnResize');
- this.bindEvents();
- super.enablePlugin();
- }
- /**
- * Updates the plugin to use the latest options you have specified.
- */
- updatePlugin() {
- let initialColumnWidth = this.hot.getSettings().manualColumnResize;
- if (Array.isArray(initialColumnWidth)) {
- this.manualColumnWidths = initialColumnWidth;
- } else if (!initialColumnWidth) {
- this.manualColumnWidths = [];
- }
- }
- /**
- * Disable plugin for this Handsontable instance.
- */
- disablePlugin() {
- super.disablePlugin();
- }
- /**
- * Save the current sizes using the persistentState plugin.
- */
- saveManualColumnWidths() {
- this.hot.runHooks('persistentStateSave', 'manualColumnWidths', this.manualColumnWidths);
- }
- /**
- * Load the previously saved sizes using the persistentState plugin.
- *
- * @returns {Array}
- */
- loadManualColumnWidths() {
- let storedState = {};
- this.hot.runHooks('persistentStateLoad', 'manualColumnWidths', storedState);
- return storedState.value;
- }
- /**
- * Set the resize handle position.
- *
- * @param {HTMLCellElement} TH TH HTML element.
- */
- setupHandlePosition(TH) {
- if (!TH.parentNode) {
- return false;
- }
- this.currentTH = TH;
- let col = this.hot.view.wt.wtTable.getCoords(TH).col; // getCoords returns CellCoords
- let headerHeight = outerHeight(this.currentTH);
- if (col >= 0) { // if not col header
- let box = this.currentTH.getBoundingClientRect();
- this.currentCol = col;
- this.selectedCols = [];
- if (this.hot.selection.isSelected() && this.hot.selection.selectedHeader.cols) {
- let {from, to} = this.hot.getSelectedRange();
- let start = from.col;
- let end = to.col;
- if (start >= end) {
- start = to.col;
- end = from.col;
- }
- if (this.currentCol >= start && this.currentCol <= end) {
- rangeEach(start, end, (i) => this.selectedCols.push(i));
- } else {
- this.selectedCols.push(this.currentCol);
- }
- } else {
- this.selectedCols.push(this.currentCol);
- }
- this.startOffset = box.left - 6;
- this.startWidth = parseInt(box.width, 10);
- this.handle.style.top = `${box.top}px`;
- this.handle.style.left = `${this.startOffset + this.startWidth}px`;
- this.handle.style.height = `${headerHeight}px`;
- this.hot.rootElement.appendChild(this.handle);
- }
- }
- /**
- * Refresh the resize handle position.
- */
- refreshHandlePosition() {
- this.handle.style.left = `${this.startOffset + this.currentWidth}px`;
- }
- /**
- * Set the resize guide position.
- */
- setupGuidePosition() {
- let handleHeight = parseInt(outerHeight(this.handle), 10);
- let handleBottomPosition = parseInt(this.handle.style.top, 10) + handleHeight;
- let maximumVisibleElementHeight = parseInt(this.hot.view.maximumVisibleElementHeight(0), 10);
- addClass(this.handle, 'active');
- addClass(this.guide, 'active');
- this.guide.style.top = `${handleBottomPosition}px`;
- this.guide.style.left = this.handle.style.left;
- this.guide.style.height = `${maximumVisibleElementHeight - handleHeight}px`;
- this.hot.rootElement.appendChild(this.guide);
- }
- /**
- * Refresh the resize guide position.
- */
- refreshGuidePosition() {
- this.guide.style.left = this.handle.style.left;
- }
- /**
- * Hide both the resize handle and resize guide.
- */
- hideHandleAndGuide() {
- removeClass(this.handle, 'active');
- removeClass(this.guide, 'active');
- }
- /**
- * Check if provided element is considered a column header.
- *
- * @param {HTMLElement} element HTML element.
- * @returns {Boolean}
- */
- checkIfColumnHeader(element) {
- if (element != this.hot.rootElement) {
- let parent = element.parentNode;
- if (parent.tagName === 'THEAD') {
- return true;
- }
- return this.checkIfColumnHeader(parent);
- }
- return false;
- }
- /**
- * Get the TH element from the provided element.
- *
- * @param {HTMLElement} element HTML element.
- * @returns {HTMLElement}
- */
- getTHFromTargetElement(element) {
- if (element.tagName != 'TABLE') {
- if (element.tagName == 'TH') {
- return element;
- }
- return this.getTHFromTargetElement(element.parentNode);
- }
- return null;
- }
- /**
- * 'mouseover' event callback - set the handle position.
- *
- * @private
- * @param {MouseEvent} event
- */
- onMouseOver(event) {
- if (this.checkIfColumnHeader(event.target)) {
- let th = this.getTHFromTargetElement(event.target);
- if (!th) {
- return;
- }
- let colspan = th.getAttribute('colspan');
- if (th && (colspan === null || colspan === 1)) {
- if (!this.pressed) {
- this.setupHandlePosition(th);
- }
- }
- }
- }
- /**
- * Auto-size row after doubleclick - callback.
- *
- * @private
- */
- afterMouseDownTimeout() {
- const render = () => {
- this.hot.forceFullRender = true;
- this.hot.view.render(); // updates all
- this.hot.view.wt.wtOverlays.adjustElementsSize(true);
- };
- const resize = (selectedCol, forceRender) => {
- let hookNewSize = this.hot.runHooks('beforeColumnResize', selectedCol, this.newSize, true);
- if (hookNewSize !== void 0) {
- this.newSize = hookNewSize;
- }
- if (this.hot.getSettings().stretchH === 'all') {
- this.clearManualSize(selectedCol);
- } else {
- this.setManualSize(selectedCol, this.newSize); // double click sets by auto row size plugin
- }
- if (forceRender) {
- render();
- }
- this.saveManualColumnWidths();
- this.hot.runHooks('afterColumnResize', selectedCol, this.newSize, true);
- };
- if (this.dblclick >= 2) {
- let selectedColsLength = this.selectedCols.length;
- if (selectedColsLength > 1) {
- arrayEach(this.selectedCols, (selectedCol) => {
- resize(selectedCol);
- });
- render();
- } else {
- arrayEach(this.selectedCols, (selectedCol) => {
- resize(selectedCol, true);
- });
- }
- }
- this.dblclick = 0;
- this.autoresizeTimeout = null;
- }
- /**
- * 'mousedown' event callback.
- *
- * @private
- * @param {MouseEvent} e
- */
- onMouseDown(event) {
- if (hasClass(event.target, 'manualColumnResizer')) {
- this.setupGuidePosition();
- this.pressed = this.hot;
- if (this.autoresizeTimeout === null) {
- this.autoresizeTimeout = setTimeout(() => this.afterMouseDownTimeout(), 500);
- this.hot._registerTimeout(this.autoresizeTimeout);
- }
- this.dblclick++;
- this.startX = pageX(event);
- this.newSize = this.startWidth;
- }
- }
- /**
- * 'mousemove' event callback - refresh the handle and guide positions, cache the new column width.
- *
- * @private
- * @param {MouseEvent} e
- */
- onMouseMove(event) {
- if (this.pressed) {
- this.currentWidth = this.startWidth + (pageX(event) - this.startX);
- arrayEach(this.selectedCols, (selectedCol) => {
- this.newSize = this.setManualSize(selectedCol, this.currentWidth);
- });
- this.refreshHandlePosition();
- this.refreshGuidePosition();
- }
- }
- /**
- * 'mouseup' event callback - apply the column resizing.
- *
- * @private
- * @param {MouseEvent} e
- */
- onMouseUp(event) {
- const render = () => {
- this.hot.forceFullRender = true;
- this.hot.view.render(); // updates all
- this.hot.view.wt.wtOverlays.adjustElementsSize(true);
- };
- const resize = (selectedCol, forceRender) => {
- this.hot.runHooks('beforeColumnResize', selectedCol, this.newSize);
- if (forceRender) {
- render();
- }
- this.saveManualColumnWidths();
- this.hot.runHooks('afterColumnResize', selectedCol, this.newSize);
- };
- if (this.pressed) {
- this.hideHandleAndGuide();
- this.pressed = false;
- if (this.newSize != this.startWidth) {
- let selectedColsLength = this.selectedCols.length;
- if (selectedColsLength > 1) {
- arrayEach(this.selectedCols, (selectedCol) => {
- resize(selectedCol);
- });
- render();
- } else {
- arrayEach(this.selectedCols, (selectedCol) => {
- resize(selectedCol, true);
- });
- }
- }
- this.setupHandlePosition(this.currentTH);
- }
- }
- /**
- * Bind the mouse events.
- *
- * @private
- */
- bindEvents() {
- this.eventManager.addEventListener(this.hot.rootElement, 'mouseover', (e) => this.onMouseOver(e));
- this.eventManager.addEventListener(this.hot.rootElement, 'mousedown', (e) => this.onMouseDown(e));
- this.eventManager.addEventListener(window, 'mousemove', (e) => this.onMouseMove(e));
- this.eventManager.addEventListener(window, 'mouseup', (e) => this.onMouseUp(e));
- }
- /**
- * Cache the current column width.
- *
- * @param {Number} column Column index.
- * @param {Number} width Column width.
- * @returns {Number}
- */
- setManualSize(column, width) {
- width = Math.max(width, 20);
- /**
- * We need to run col through modifyCol hook, in case the order of displayed columns is different than the order
- * in data source. For instance, this order can be modified by manualColumnMove plugin.
- */
- column = this.hot.runHooks('modifyCol', column);
- this.manualColumnWidths[column] = width;
- return width;
- }
- /**
- * Clear cache for the current column index.
- *
- * @param {Number} column Column index.
- */
- clearManualSize(column) {
- column = this.hot.runHooks('modifyCol', column);
- this.manualColumnWidths[column] = void 0;
- }
- /**
- * Modify the provided column width, based on the plugin settings
- *
- * @private
- * @param {Number} width Column width.
- * @param {Number} column Column index.
- * @returns {Number}
- */
- onModifyColWidth(width, column) {
- if (this.enabled) {
- column = this.hot.runHooks('modifyCol', column);
- if (this.hot.getSettings().manualColumnResize && this.manualColumnWidths[column]) {
- return this.manualColumnWidths[column];
- }
- }
- return width;
- }
- /**
- * Modify the provided column stretched width. This hook decides if specified column should be stretched or not.
- *
- * @private
- * @param {Number} stretchedWidth Stretched width.
- * @param {Number} column Column index.
- * @returns {Number}
- */
- onBeforeStretchingColumnWidth(stretchedWidth, column) {
- let width = this.manualColumnWidths[column];
- if (width === void 0) {
- width = stretchedWidth;
- }
- return width;
- }
- /**
- * `beforeColumnResize` hook callback.
- *
- * @private
- * @param {Number} currentColumn Index of the resized column.
- * @param {Number} newSize Calculated new column width.
- * @param {Boolean} isDoubleClick Flag that determines whether there was a double-click.
- */
- onBeforeColumnResize() {
- // clear the header height cache information
- this.hot.view.wt.wtViewport.hasOversizedColumnHeadersMarked = {};
- }
- }
- registerPlugin('manualColumnResize', ManualColumnResize);
- export default ManualColumnResize;
|