@highcharts/dashboards
Version:
Highcharts Dashboards framework
155 lines (154 loc) • 4.7 kB
JavaScript
/* *
*
* Grid Columns Resizer class.
*
* (c) 2020-2025 Highsoft AS
*
* License: www.highcharts.com/license
*
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
*
* Authors:
* - Dawid Dragula
* - Sebastian Bochan
*
* */
'use strict';
import GridUtils from '../../GridUtils.js';
import Globals from '../../Globals.js';
import Utils from '../../../../Core/Utilities.js';
const { makeHTMLElement } = GridUtils;
const { fireEvent } = Utils;
/* *
*
* Class
*
* */
/**
* The class that handles the resizing of columns in the data grid.
*/
class ColumnsResizer {
/* *
*
* Constructor
*
* */
constructor(viewport) {
/**
* Any column is being resized. Turned off after slight delay.
*/
this.isResizing = false;
/**
* The handles and their mouse down event listeners.
*/
this.handles = [];
/**
* Handles the mouse move event on the document.
*
* @param e
* The mouse event.
*
* @internal
*/
this.onDocumentMouseMove = (e) => {
if (!this.draggedResizeHandle || !this.draggedColumn) {
return;
}
const diff = e.pageX - (this.dragStartX || 0);
const vp = this.viewport;
vp.columnDistribution.resize(this, diff);
vp.reflow();
vp.rowsVirtualizer.adjustRowHeights();
fireEvent(this.draggedColumn, 'afterResize', {
target: this.draggedColumn,
originalEvent: e
});
};
/**
* Handles the mouse up event on the document.
*/
this.onDocumentMouseUp = () => {
this.draggedColumn?.header?.htmlElement?.classList.remove(Globals.getClassName('resizedColumn'));
this.dragStartX = void 0;
this.draggedColumn = void 0;
this.draggedResizeHandle = void 0;
this.columnStartWidth = void 0;
this.nextColumnStartWidth = void 0;
requestAnimationFrame(() => {
this.isResizing = false;
});
};
this.viewport = viewport;
document.addEventListener('mousemove', this.onDocumentMouseMove);
document.addEventListener('mouseup', this.onDocumentMouseUp);
}
/* *
*
* Functions
*
* */
/**
* Render the drag handle for resizing columns.
*
* @param column
* The reference to rendered column
*
* @param cell
* The reference to rendered cell, where hadles should be added
*/
renderColumnDragHandles(column, cell) {
const vp = column.viewport;
if (vp.columnsResizer && (vp.columnDistribution.type !== 'full' ||
(vp.grid.enabledColumns &&
column.index < vp.grid.enabledColumns.length - 1))) {
const handle = makeHTMLElement('div', {
className: Globals.getClassName('resizerHandles')
}, cell.htmlElement);
handle.setAttribute('aria-hidden', true);
vp.columnsResizer?.addHandleListeners(handle, column);
}
}
/**
* Adds event listeners to the handle.
*
* @param handle
* The handle element.
*
* @param column
* The column the handle belongs to.
*/
addHandleListeners(handle, column) {
const onHandleMouseDown = (e) => {
const vp = column.viewport;
this.isResizing = true;
vp.reflow();
this.dragStartX = e.pageX;
this.draggedColumn = column;
this.draggedResizeHandle = handle;
this.columnStartWidth = column.getWidth();
this.nextColumnStartWidth =
vp.columns[column.index + 1]?.getWidth();
column.header?.htmlElement.classList.add(Globals.getClassName('resizedColumn'));
};
this.handles.push([handle, onHandleMouseDown]);
handle.addEventListener('mousedown', onHandleMouseDown);
}
/**
* Removes all added event listeners from the document and handles. This
* should be called on the destroy of the data grid.
*/
removeEventListeners() {
document.removeEventListener('mousemove', this.onDocumentMouseMove);
document.removeEventListener('mouseup', this.onDocumentMouseUp);
for (let i = 0, iEnd = this.handles.length; i < iEnd; i++) {
const [handle, listener] = this.handles[i];
handle.removeEventListener('mousedown', listener);
}
}
}
/* *
*
* Default Export
*
* */
export default ColumnsResizer;