@antv/s2/esm/interaction/base-interaction/hover.js

effective spreadsheet render core lib

import { isBoolean, isEmpty } from 'lodash';
import { S2Event } from '../../common/constant';
import { HOVER_FOCUS_DURATION, InteractionStateName, InterceptType, } from '../../common/constant/interaction';
import { getCellMeta } from '../../utils/interaction/select-event';
import { BaseEvent } from '../base-event';
/**
 * @description Hover event for data cells, row cells and col cells
 */
export class HoverEvent extends BaseEvent {
    bindEvents() {
        this.bindDataCellHover();
        this.bindHeaderCellHover();
    }
    changeStateToHoverFocus(cell, event) {
        var _a;
        if (!cell) {
            return;
        }
        const meta = cell.getMeta();
        const { interaction } = this.spreadsheet;
        const { interaction: interactionOptions } = this.spreadsheet.options;
        const { hoverFocus } = interactionOptions;
        interaction.clearHoverTimer();
        const handleHoverFocus = () => {
            if (interaction.hasIntercepts([InterceptType.HOVER])) {
                return;
            }
            interaction.changeState({
                cells: [getCellMeta(cell)],
                stateName: InteractionStateName.HOVER_FOCUS,
            });
            const onlyShowCellText = this.spreadsheet.isTableMode();
            const options = {
                isTotals: meta.isTotals,
                hideSummary: true,
                onlyShowCellText,
            };
            if (interactionOptions === null || interactionOptions === void 0 ? void 0 : interactionOptions.hoverHighlight) {
                interaction.updateDataCellRelevantHeaderCells(InteractionStateName.HOVER, meta);
            }
            this.spreadsheet.emit(S2Event.DATA_CELL_HOVER_TRIGGERED_PRIVATE, cell);
            const data = this.getCellData(meta, onlyShowCellText);
            this.spreadsheet.showTooltipWithInfo(event, data, options);
        };
        const hoverFocusDuration = !isBoolean(hoverFocus)
            ? (_a = hoverFocus === null || hoverFocus === void 0 ? void 0 : hoverFocus.duration) !== null && _a !== void 0 ? _a : HOVER_FOCUS_DURATION
            : HOVER_FOCUS_DURATION;
        if (hoverFocusDuration === 0) {
            handleHoverFocus();
        }
        else {
            const hoverTimer = window.setTimeout(() => handleHoverFocus(), hoverFocusDuration);
            interaction.setHoverTimer(hoverTimer);
        }
    }
    /**
     * @description handle the row or column header hover state
     * @param event
     */
    handleHeaderHover(event) {
        var _a;
        const cell = this.spreadsheet.getCell(event.target);
        if (isEmpty(cell)) {
            return;
        }
        const { interaction, facet } = this.spreadsheet;
        interaction.clearHoverTimer();
        // 避免在同一单元格内鼠标移动造成的多次渲染
        if (interaction.isActiveCell(cell)) {
            return;
        }
        interaction.changeState({
            cells: [getCellMeta(cell)],
            stateName: InteractionStateName.HOVER,
        });
        cell.update();
        this.showEllipsisTooltip(event, cell);
        // 由于绘制的顺序问题, 交互背景图层展示后, 会遮挡边框, 需要让边框展示在前面.
        (_a = facet.centerFrame) === null || _a === void 0 ? void 0 : _a.toFront();
    }
    showEllipsisTooltip(event, cell) {
        if (!cell || !cell.isTextOverflowing()) {
            this.spreadsheet.hideTooltip();
            return;
        }
        const meta = cell.getMeta();
        const options = {
            isTotals: meta.isTotals,
            hideSummary: true,
            onlyShowCellText: true,
            enableFormat: true,
        };
        const data = this.getCellData(meta, options.onlyShowCellText);
        this.spreadsheet.showTooltipWithInfo(event, data, options);
    }
    getCellData(meta = {}, onlyShowCellText) {
        const { data, query, value, field, fieldValue, valueField, rowQuery, colQuery, } = meta;
        const currentCellMeta = data;
        const cellInfos = onlyShowCellText
            ? [
                Object.assign(Object.assign({}, query), { value: value || fieldValue, valueField: field || valueField }),
            ]
            : [currentCellMeta || Object.assign(Object.assign({}, rowQuery), colQuery)];
        return cellInfos;
    }
    bindDataCellHover() {
        this.spreadsheet.on(S2Event.DATA_CELL_HOVER, (event) => {
            // FIXME: 趋势分析表 hover 的时候拿到的 event target 是错误的
            const cell = this.spreadsheet.getCell(event.target);
            if (isEmpty(cell)) {
                return;
            }
            const { interaction, options } = this.spreadsheet;
            // 避免在同一单元格内鼠标移动造成的多次渲染
            if (interaction.isActiveCell(cell)) {
                return;
            }
            const { interaction: interactionOptions } = options;
            const meta = cell === null || cell === void 0 ? void 0 : cell.getMeta();
            interaction.changeState({
                cells: [getCellMeta(cell)],
                stateName: InteractionStateName.HOVER,
            });
            if (interactionOptions === null || interactionOptions === void 0 ? void 0 : interactionOptions.hoverHighlight) {
                interaction.updateDataCellRelevantHeaderCells(InteractionStateName.HOVER, meta);
            }
            if (interactionOptions === null || interactionOptions === void 0 ? void 0 : interactionOptions.hoverFocus) {
                this.changeStateToHoverFocus(cell, event);
            }
            this.spreadsheet.emit(S2Event.DATA_CELL_HOVER_TRIGGERED_PRIVATE, cell);
        });
    }
    bindHeaderCellHover() {
        [
            S2Event.ROW_CELL_HOVER,
            S2Event.COL_CELL_HOVER,
            S2Event.CORNER_CELL_HOVER,
        ].forEach((eventName) => {
            this.spreadsheet.on(eventName, (event) => {
                this.handleHeaderHover(event);
            });
        });
    }
}
//# sourceMappingURL=hover.js.map