@omegagrid/grid 0.10.2 → 0.10.4

package/dist/ui/grid.events.js

@@ -0,0 +1,581 @@
+import constants from "../constants";
+import { dom, ResizeEvent } from "@omegagrid/core";
+import { debounce } from "ts-debounce";
+import { autofill, CellRange } from "@omegagrid/grid-core";
+const IGNORED_KEYS = ['F5', 'F12'];
+export class GridErrorEvent extends Event {
+    constructor(error) {
+        super(`grid.error`, { bubbles: true, composed: true });
+        this.error = error;
+    }
+}
+export class GridEvent extends Event {
+    get selection() { return this.grid.selecting.selection; }
+    get activeCell() { return this.selection.activeCell; }
+    constructor(type, args) {
+        super(`grid.${type}`, { bubbles: true, composed: true });
+        Object.assign(this, args);
+        if (this.cell) {
+            this.row = this.cell.row;
+            this.column = this.cell.column;
+        }
+    }
+}
+export class GridEditEvent extends GridEvent {
+    constructor(args) {
+        super('edit', args);
+    }
+}
+export class GridResizeEvent extends ResizeEvent {
+    constructor(type, grid, args) {
+        super(`grid.${type}`, args);
+        this.grid = grid;
+    }
+}
+export class GridColumnResizeEvent extends GridResizeEvent {
+    constructor(type, grid, column, args) {
+        super(type, grid, args);
+        this.column = column;
+    }
+}
+export class GridRowResizeEvent extends GridResizeEvent {
+    constructor(type, grid, row, args) {
+        super(type, grid, args);
+        this.row = row;
+    }
+}
+export class GridEvents {
+    get model() { return this.grid.model; }
+    get selection() { return this.grid.selection; }
+    get table() { return this.grid.table; }
+    constructor(grid) {
+        this.grid = grid;
+        this.clickDisabled = false;
+        this.editDisabled = false;
+        this.clicked = false;
+        this.startOffset = { x: 0, y: 0 };
+        this.suspendClick = () => this.clickDisabled = true;
+        this.resumeClick = (delay = false) => {
+            if (this.isSliding)
+                return;
+            if (delay) {
+                setTimeout(() => this.clickDisabled = false, 100);
+            }
+            else {
+                this.clickDisabled = false;
+            }
+        };
+        this._onKeyDown = (e) => {
+            if (!IGNORED_KEYS.includes(e.key))
+                e.preventDefault();
+            switch (e.key) {
+                case 'Tab':
+                    e.preventDefault();
+                    this.grid.selecting.shiftActiveCell(e.shiftKey ? -1 : 1, true);
+                    break;
+                case 'ArrowRight':
+                    this.grid.selecting.debounceMoveSelector(1, 0);
+                    break;
+                case 'ArrowLeft':
+                    this.grid.selecting.debounceMoveSelector(-1, 0);
+                    break;
+                case 'ArrowDown':
+                    this.grid.selecting.debounceMoveSelector(0, 1);
+                    break;
+                case 'ArrowUp':
+                    this.grid.selecting.debounceMoveSelector(0, -1);
+                    break;
+                case 'PageUp':
+                    this.grid.selecting.debounceMoveSelector(0, -this.table.viewport.rows.length);
+                    break;
+                case 'PageDown':
+                    this.grid.selecting.debounceMoveSelector(0, this.table.viewport.rows.length);
+                    break;
+                case 'Home':
+                    this.grid.selecting.debounceMoveSelector(-this.selection.range.c1, e.ctrlKey ? -this.selection.range.r1 : 0);
+                    break;
+                case 'End':
+                    this.grid.selecting.debounceMoveSelector(this.model.gridRange.c2 - this.selection.range.c1, e.ctrlKey ? this.model.gridRange.r2 - this.selection.range.r1 : 0);
+                    break;
+                case 'Enter':
+                    this.grid.selecting.enter();
+                    break;
+                case 'Escape':
+                    this.grid.selecting.hideCopySelector();
+                    break;
+                case 'c':
+                case 'C':
+                    if (e.ctrlKey)
+                        this.grid.editing.copySelection();
+                    break;
+                case 'v':
+                case 'V':
+                    if (e.ctrlKey)
+                        this.grid.editing.paste();
+                    break;
+                case 'z':
+                case 'Z':
+                    if (!this.grid.options.undoRedo)
+                        return;
+                    if (e.ctrlKey)
+                        this.grid.editing.undo();
+                    break;
+                case 'y':
+                case 'Y':
+                    if (!this.grid.options.undoRedo)
+                        return;
+                    if (e.ctrlKey)
+                        this.grid.editing.redo();
+                    break;
+                case 'F2':
+                    e.preventDefault();
+                    this.grid.editing.startEdit();
+                    break;
+                case 'Delete':
+                    e.preventDefault();
+                    this.grid.objects.delete();
+                    this.grid.editing.clearSelection();
+                    break;
+                case 'Backspace':
+                    e.preventDefault();
+                    this.grid.editing.clearSelection();
+                    break;
+                case 'F1':
+                    if (!this.grid.options.commandWindow)
+                        return;
+                    e.preventDefault();
+                    this.grid.openCommands();
+                    break;
+            }
+            if (e.key.length == 1 && !e.ctrlKey) {
+                this.grid.editing.startEdit(e.key);
+            }
+        };
+        this._onMouseMove = (e) => {
+            if (!this.model)
+                return;
+            let hidePopups = true;
+            let hideSizers = true;
+            const hSizer = this.grid.hSizer;
+            const vSizer = this.grid.vSizer;
+            const { offsetX, offsetY } = e;
+            let scrollbarVisibilityTreshold = this.model.options.scrolling.scrollbarVisibilityTreshold;
+            if (scrollbarVisibilityTreshold <= 0)
+                scrollbarVisibilityTreshold = Math.max(this.grid.clientWidth, this.grid.clientHeight);
+            if (offsetX > this.grid.clientWidth - scrollbarVisibilityTreshold) {
+                this.grid.vSlider.show();
+            }
+            else {
+                this.grid.vSlider.hide();
+            }
+            if (offsetY > this.grid.clientHeight - scrollbarVisibilityTreshold) {
+                this.grid.hSlider.show();
+            }
+            else {
+                this.grid.hSlider.hide();
+            }
+            const [cell, exactCell] = this.table.findNearestTableCellByOffset(offsetX, offsetY);
+            if (exactCell && exactCell.tagName == 'TH') {
+                if (this.model.options.columnResize && !hSizer.resizing && exactCell.classList.contains('hlabel')) {
+                    if (exactCell.offsetWidth - e.offsetX + exactCell.offsetLeft < constants.RESIZE_TRESHOLD) {
+                        hSizer.snap(exactCell, this.grid);
+                        this.grid.rendering.currentResizedColumn = this.model.columns[exactCell.c];
+                    }
+                    else {
+                        dom.hideElement(hSizer);
+                    }
+                }
+                else if (this.model.options.rowResize && !vSizer.resizing && exactCell.classList.contains('vlabel')) {
+                    if (exactCell.offsetHeight - e.offsetY + exactCell.offsetTop < constants.RESIZE_TRESHOLD) {
+                        vSizer.snap(exactCell, this.grid);
+                        this.grid.rendering.currentResizedRow = this.model.rows[exactCell.r];
+                    }
+                    else {
+                        dom.hideElement(vSizer);
+                    }
+                }
+                if (exactCell.c != null) {
+                    const columnModel = this.model.columns[exactCell.c];
+                    if (columnModel?.hasHeaderTooltip(exactCell.r)) {
+                        hidePopups = false;
+                        this.grid.tooltip.attachToCell(exactCell, columnModel.header[exactCell.r], 'bottom');
+                    }
+                }
+            }
+            if (cell && cell.tagName == 'TH') {
+                if (this.grid.selecting.isSelecting) {
+                    this.suspendClick();
+                    this.grid.selecting.updateSelecting(cell.c, cell.r);
+                }
+                hideSizers = false;
+            }
+            else if (cell && cell.tagName == 'TD') {
+                if (this.grid.selecting.isSelectorOperationActive || this.grid.selecting.isFormulaSelectorOperationActive) {
+                    const { top, left } = dom.getElementOffset(cell, this.grid);
+                    this.grid.rendering.autoscroll({
+                        x: left - this.table.totalHeaderWidth + e.offsetX - cell.offsetLeft,
+                        y: top - this.table.thead.clientHeight + e.offsetY - cell.offsetTop
+                    });
+                    if (this.grid.selecting.isSelecting) {
+                        this.suspendClick();
+                    }
+                    this.grid.selecting.updateSelecting(cell.c, cell.r);
+                }
+                else {
+                    const cellModel = this.model.rows[cell.r]?.cell(cell.c);
+                    if (cellModel && cellModel.hasTooltip) {
+                        hidePopups = false;
+                        this.grid.tooltip.attachToCell(cell, cellModel);
+                    }
+                    if (cellModel && cellModel.hasComment) {
+                        hidePopups = false;
+                        if (this.grid.comment.attachedTo !== cell) {
+                            this.grid.comment.attachTo(cell, cellModel);
+                        }
+                    }
+                }
+            }
+            if (hidePopups) {
+                this.grid.tooltip.deatach();
+                this.grid.comment.deatach(this.model.options.comments.hideTimeout);
+            }
+            if (hideSizers) {
+                dom.hideElement(hSizer);
+                dom.hideElement(vSizer);
+            }
+        };
+        this._onMouseDown = (e) => {
+            if ((e.buttons & 1) == 0)
+                return;
+            this.grid.setPointerCapture(e.pointerId);
+            this.startOffset = { x: e.offsetX, y: e.offsetY };
+            for (const elm of e.composedPath()) {
+                if (elm.tagName == 'TD') {
+                    const td = elm;
+                    this.grid.selecting.startCellSelecting(new CellRange(td.c, td.r));
+                    break;
+                }
+                else if (elm.tagName == 'TH') {
+                    const th = elm;
+                    if (elm.matches('.sort')) {
+                        this.grid.sorting.sort(th.c);
+                    }
+                    else if (th.classList.contains('filter')) {
+                        this.grid.filtering.openFilter(this.model.columns[th.c], th);
+                    }
+                    else if (th.classList.contains('hlabel')) {
+                        this.grid.selecting.startColumnSelecting(th.c);
+                    }
+                    else if (th.classList.contains('vlabel')) {
+                        this.grid.selecting.startRowSelecting(th.r);
+                    }
+                    break;
+                }
+            }
+        };
+        this._onMouseUp = (e) => {
+            if (e.buttons != 0)
+                return;
+            const x = Math.abs(this.startOffset.x - e.offsetX);
+            const y = Math.abs(this.startOffset.y - e.offsetY);
+            if (Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) < this.model.options.events.click.mouseMoveTreshold) {
+                this.resumeClick();
+            }
+            this.grid.releasePointerCapture(e.pointerId);
+            this.grid.selecting.stopSelectOperations();
+        };
+        this._onClick = (e) => {
+            if (this.clickDisabled)
+                return;
+            // TODO: find better way to prevent clicks on scrollbars
+            if (this.grid.clientHeight - e.offsetY < this.grid.hSlider.offsetHeight)
+                return;
+            if (this.grid.clientWidth - e.offsetX < this.grid.vSlider.offsetWidth)
+                return;
+            const cell = this.table.findTableCellByOffset(e.offsetX, e.offsetY);
+            const cellModel = cell?.tagName == 'TD' ? this.model.rows[cell.r]?.cell(cell.c) : null;
+            this.grid.dispatchEvent(new GridEvent('click', { grid: this.grid, cell: cellModel }));
+        };
+        this._onContextMenu = (e) => {
+            e.preventDefault();
+            for (const elm of e.composedPath()) {
+                if (elm.tagName == 'TD') {
+                    const td = elm;
+                    this.grid.menus.openCellMenu(this.model.rows[td.r].cell(td.c), { x: e.pageX, y: e.pageY });
+                }
+                else if (elm.tagName == 'TH') {
+                    const th = elm;
+                    if (th.classList.contains('hlabel')) {
+                        this.grid.menus.openColumnMenu(this.model.columns[th.c], { x: e.pageX, y: e.pageY });
+                    }
+                    else if (th.classList.contains('vlabel')) {
+                        this.grid.menus.openRowMenu(this.model.rows[th.r], { x: e.pageX, y: e.pageY });
+                    }
+                }
+            }
+        };
+        this._onVerticalSlide = (e) => {
+            this.table.rowOffset = Math.min(e.value, this.model.visibleRows.length - 1);
+            this.grid.rendering.requireVerticalUpdate = true;
+            // this.grid.logger.info(`v-slide: ${e.value}`);
+            this.grid.rendering.renderCells();
+        };
+        this._onHorizontalSlide = (e) => {
+            this.table.colOffset = Math.min(e.value, this.model.visibleColumns.length - 1);
+            this.grid.rendering.requireHorizontalUpdate = true;
+            // this.grid.logger.info(`h-slide: ${e.value}`);
+            this.grid.rendering.renderCells();
+        };
+        this._onSlideStart = () => {
+            this.suspendClick();
+        };
+        this._onSlideStop = () => {
+            this.resumeClick(true);
+        };
+        this._denbounceHorizontalScroll = debounce((dx) => this.grid.rendering.scrollHorizontalByPixels(dx), 50);
+        this._onWheel = (e) => {
+            if (e.ctrlKey)
+                return;
+            if (e.deltaY != 0)
+                this.grid.rendering.scrollVerticalByPixels(e.deltaY);
+            if (e.deltaX != 0) {
+                this._denbounceHorizontalScroll(Math.sign(e.deltaX) * Math.min(100, Math.abs(e.deltaX)));
+            }
+        };
+        this._onTouchStart = (e) => {
+            this.grid.rendering.touchStartX = e.touches[0];
+            this.grid.rendering.touchStartY = e.touches[0];
+        };
+        this._onTouchEnd = (e) => {
+            this.grid.rendering.touchStartX = e.touches[0];
+            this.grid.rendering.touchStartY = e.touches[0];
+        };
+        this._onTouchMove = (e) => {
+            const rendering = this.grid.rendering;
+            if (rendering.touchStartY) {
+                const deltaY = rendering.touchStartY.clientY - e.touches[0].clientY;
+                if (Math.abs(deltaY) > this.model.options.rowHeight && this.table.viewport.rows.length > 0) {
+                    rendering.scrollVerticalByPixels(deltaY);
+                    rendering.touchStartY = e.touches[0];
+                }
+            }
+            if (rendering.touchStartX) {
+                const deltaX = rendering.touchStartX.clientX - e.touches[0].clientX;
+                if (Math.abs(deltaX) > this.model.options.columnWidth && this.table.viewport.columns.length > 0) {
+                    rendering.scrollHorizontalByPixels(deltaX);
+                    rendering.touchStartX = e.touches[0];
+                }
+            }
+        };
+        this._onHorizontalResizeStart = () => {
+            this.grid.rendering.resizing = true;
+            this.grid.rendering.currentResizedColumnWidth = this.grid.rendering.currentResizedColumn.width;
+        };
+        this._onHorizontalResizeStop = (e) => {
+            this.suspendClick();
+            this.grid.rendering.resizing = false;
+            this.table.clearHeaderCache();
+            this.table.renderCells({ horizontal: true });
+            this.grid.dispatchEvent(new GridColumnResizeEvent('column.resize', this.grid, this.grid.rendering.currentResizedColumn, e));
+        };
+        this._onHorizontalResize = (e) => {
+            const rendering = this.grid.rendering;
+            // if (this.resizing) e.stopPropagation();
+            rendering.currentResizedColumn.width = rendering.currentResizedColumnWidth + e.deltaX;
+            // this.showMouseTooltip(`${columnModel.width.toString()}px`, {t: e.mouseY, l: e.mouseX});
+            dom.setSize(this.table.getColumnByModelIndex(rendering.currentResizedColumn.index), { w: rendering.currentResizedColumn.width }, true);
+            this.grid.selecting.updateSelector();
+        };
+        this._onVerticalResizeStart = () => {
+            this.grid.rendering.resizing = true;
+            this.grid.rendering.currentResizedRowHeight = this.grid.rendering.currentResizedRow.height;
+        };
+        this._onVerticalResizeStop = (e) => {
+            this.suspendClick();
+            this.grid.rendering.resizing = false;
+            this.table.clearBodyCache();
+            this.table.renderCells({ vertical: true });
+            this.grid.dispatchEvent(new GridRowResizeEvent('row.resize', this.grid, this.grid.rendering.currentResizedRow, e));
+        };
+        this._onVerticalResize = (e) => {
+            const rendering = this.grid.rendering;
+            // if (this.resizing) e.stopPropagation();
+            rendering.currentResizedRow.height = rendering.currentResizedRowHeight + e.deltaY;
+            // this.showMouseTooltip(`${columnModel.width.toString()}px`, {t: e.mouseY, l: e.mouseX});
+            dom.setSize(this.table.getRowByModelIndex(rendering.currentResizedRow.index), { h: rendering.currentResizedRow.height }, false);
+            this.grid.selecting.updateSelector();
+        };
+        this._onCommentCommit = (e) => {
+            this.grid.model.comments.set(e.cell.address, e.items);
+            e.cell.invalidateStyle();
+            this.grid.rendering.updateCells([e.cell]);
+        };
+        this._onAutofill = (e) => {
+            this.suspendClick();
+            if (this.grid.selection.range.equals(e.selector.autofillRange))
+                return;
+            const { cells, oldValues } = autofill(this.model, this.grid.selection.range, e.selector.autofillRange, e.selector.autofillDirection);
+            this.grid.rendering.updateCells(cells, true);
+            this.grid.selection.setRange(this.grid.selection.range.unite(e.selector.autofillRange));
+            this.grid.selecting.updateSelector();
+            this.grid.dispatchEvent(new GridEditEvent({
+                grid: this.grid,
+                editType: 'autofill',
+                cells: cells,
+                oldValues: oldValues,
+                newValues: cells.map(cell => cell.value2)
+            }));
+        };
+        this._onEdit = (e) => {
+            if (e.fromHistory)
+                return;
+            const addresses = [];
+            const names = [];
+            const nameRangeMap = this.model.names.rangeMap;
+            let newValues = [];
+            let newProps = [];
+            let oldValues = [];
+            let oldProps = [];
+            switch (e.editType) {
+                case 'value':
+                    newValues = e.newValues;
+                    newProps = e.newProps;
+                    oldValues = e.oldValues;
+                    oldProps = e.oldProps;
+                    e.cells.forEach(cell => {
+                        const a = cell.address;
+                        addresses.push(a);
+                        names.push(nameRangeMap.get(a));
+                    });
+                    break;
+                case 'insert_column':
+                case 'insert_row':
+                    e.newValues.forEach(row => {
+                        const a = row.address;
+                        addresses.push(a);
+                        names.push(nameRangeMap.get(a));
+                        newValues.push(row.getSourceData());
+                    });
+                    break;
+            }
+            this.grid.history.push({
+                type: e.editType,
+                addresses,
+                names,
+                oldValues,
+                oldProps,
+                newValues,
+                newProps
+            });
+        };
+        this._onSelectorMove = (e) => {
+            this.suspendClick();
+            this.selection.setRange(e.toRange);
+            if (e.fromRange.isRow) {
+                this.grid.editing.moveRows({
+                    index: e.fromRange.r1,
+                    count: e.fromRange.size.rows,
+                    targetIndex: e.toRange.r1
+                });
+            }
+            else if (e.fromRange.isColumn) {
+                this.grid.editing.moveColumns({
+                    index: e.fromRange.c1,
+                    count: e.fromRange.size.columns,
+                    targetIndex: e.toRange.c1
+                });
+            }
+            else {
+                console.log(e);
+            }
+        };
+        this._onMouseLeave = () => {
+            this.grid.rendering.hideSliders();
+        };
+        // _debounceMouseMove: ReturnType<typeof debounce>;
+        // registerMouseMove() {
+        // 	if (this._debounceMouseMove) return;
+        // 	this._debounceMouseMove = debounce(this._onMouseMove, 20, {maxWait: 50, isImmediate: true});
+        // 	this.grid.addEventListener('pointermove', this._debounceMouseMove);
+        // }
+        // unregisterMouseMove() {
+        // 	if (!this._debounceMouseMove) return;
+        // 	this.grid.removeEventListener('pointermove', this._debounceMouseMove);
+        // 	this._debounceMouseMove = null;
+        // }
+        this.debounceHideSliders = debounce(() => this.grid.rendering.hideSliders(), 1000, { isImmediate: false });
+        this._onRender = () => {
+            const grid = this.grid;
+            grid.selecting.updateSelectors();
+            grid.dispatchEvent(new GridEvent('render', { grid: this.grid }));
+            if (grid.adapter && grid.options.pageSize && grid.rendering.isLastRowInViewport()) {
+                grid.rendering.loadNextPage();
+            }
+            grid.rendering.updateSliderVisibility();
+            if (this.model.options.scrolling.scrollbarVisibilityTreshold > 0) {
+                this.debounceHideSliders();
+            }
+        };
+        this._onHorizontalSizerDblClick = (e) => {
+            e.stopPropagation();
+            this.editDisabled = true;
+            this.grid.rendering.autofitColumn(this.grid.rendering.currentResizedColumn.index);
+            this.grid.dispatchEvent(new GridColumnResizeEvent('column.resize', this.grid, this.grid.rendering.currentResizedColumn, e));
+        };
+        this._onVerticalSizerDblClick = (e) => {
+            e.stopPropagation();
+            this.editDisabled = true;
+            this.grid.rendering.autofitRow(this.grid.rendering.currentResizedRow.index);
+            this.grid.dispatchEvent(new GridRowResizeEvent('row.resize', this.grid, this.grid.rendering.currentResizedRow, e));
+        };
+        this._onDblClick = () => {
+            if (this.editDisabled) {
+                this.editDisabled = false;
+                return;
+            }
+            this.grid.editing.startEdit();
+        };
+    }
+    get isSliding() { return this.grid.hSlider.sliding || this.grid.vSlider.sliding; }
+    async init() {
+        await this.grid.updateComplete;
+        await this.table.updateComplete;
+        const grid = this.grid;
+        // wheel scroling
+        grid.addEventListener('wheel', this._onWheel, { passive: true });
+        // touch scrolling
+        grid.addEventListener('touchstart', this._onTouchStart, { passive: true });
+        grid.addEventListener('touchend', this._onTouchEnd, { passive: true });
+        grid.addEventListener('touchmove', this._onTouchMove, { passive: true });
+        // col/row resize
+        grid.hSizer.addEventListener('resizestart', this._onHorizontalResizeStart);
+        grid.hSizer.addEventListener('resizestop', this._onHorizontalResizeStop);
+        grid.hSizer.addEventListener('resize', this._onHorizontalResize);
+        grid.hSizer.addEventListener('dblclick', this._onHorizontalSizerDblClick);
+        grid.vSizer.addEventListener('resizestart', this._onVerticalResizeStart);
+        grid.vSizer.addEventListener('resizestop', this._onVerticalResizeStop);
+        grid.vSizer.addEventListener('resize', this._onVerticalResize);
+        grid.vSizer.addEventListener('dblclick', this._onVerticalSizerDblClick);
+        // comments
+        grid.comment.addEventListener('comment.commit', this._onCommentCommit);
+        grid.addEventListener('keydown', this._onKeyDown);
+        grid.addEventListener('click', this._onClick);
+        grid.addEventListener('contextmenu', this._onContextMenu);
+        grid.addEventListener('toggle', () => grid.rendering.debounceCalculateViewport());
+        grid.addEventListener('pointerup', this._onMouseUp);
+        grid.addEventListener('pointerdown', this._onMouseDown);
+        // grid.addEventListener('pointermove', this._onMouseMove);
+        const debounceMouseMove = debounce(this._onMouseMove, 20, { maxWait: 50, isImmediate: true });
+        grid.addEventListener('pointermove', debounceMouseMove);
+        grid.addEventListener('mouseleave', this._onMouseLeave);
+        // table event handlers
+        grid.table.addEventListener('rendercells', this._onRender);
+        // selector event handlers
+        grid.selector.addEventListener('grid.selector.autofill', this._onAutofill);
+        grid.selector.addEventListener('grid.selector.move', this._onSelectorMove);
+        // editing event handlers
+        grid.addEventListener('dblclick', this._onDblClick);
+        grid.addEventListener('grid.edit', this._onEdit);
+    }
+}
+//# sourceMappingURL=grid.events.js.map