@antv/s2
Version:
effective spreadsheet render core lib
149 lines • 6.46 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.HoverEvent = void 0;
const lodash_1 = require("lodash");
const constant_1 = require("../../common/constant");
const interaction_1 = require("../../common/constant/interaction");
const select_event_1 = require("../../utils/interaction/select-event");
const base_event_1 = require("../base-event");
/**
* @description Hover event for data cells, row cells and col cells
*/
class HoverEvent extends base_event_1.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([interaction_1.InterceptType.HOVER])) {
return;
}
interaction.changeState({
cells: [(0, select_event_1.getCellMeta)(cell)],
stateName: interaction_1.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(interaction_1.InteractionStateName.HOVER, meta);
}
this.spreadsheet.emit(constant_1.S2Event.DATA_CELL_HOVER_TRIGGERED_PRIVATE, cell);
const data = this.getCellData(meta, onlyShowCellText);
this.spreadsheet.showTooltipWithInfo(event, data, options);
};
const hoverFocusDuration = !(0, lodash_1.isBoolean)(hoverFocus)
? (_a = hoverFocus === null || hoverFocus === void 0 ? void 0 : hoverFocus.duration) !== null && _a !== void 0 ? _a : interaction_1.HOVER_FOCUS_DURATION
: interaction_1.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 ((0, lodash_1.isEmpty)(cell)) {
return;
}
const { interaction, facet } = this.spreadsheet;
interaction.clearHoverTimer();
// 避免在同一单元格内鼠标移动造成的多次渲染
if (interaction.isActiveCell(cell)) {
return;
}
interaction.changeState({
cells: [(0, select_event_1.getCellMeta)(cell)],
stateName: interaction_1.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(constant_1.S2Event.DATA_CELL_HOVER, (event) => {
// FIXME: 趋势分析表 hover 的时候拿到的 event target 是错误的
const cell = this.spreadsheet.getCell(event.target);
if ((0, lodash_1.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: [(0, select_event_1.getCellMeta)(cell)],
stateName: interaction_1.InteractionStateName.HOVER,
});
if (interactionOptions === null || interactionOptions === void 0 ? void 0 : interactionOptions.hoverHighlight) {
interaction.updateDataCellRelevantHeaderCells(interaction_1.InteractionStateName.HOVER, meta);
}
if (interactionOptions === null || interactionOptions === void 0 ? void 0 : interactionOptions.hoverFocus) {
this.changeStateToHoverFocus(cell, event);
}
this.spreadsheet.emit(constant_1.S2Event.DATA_CELL_HOVER_TRIGGERED_PRIVATE, cell);
});
}
bindHeaderCellHover() {
[
constant_1.S2Event.ROW_CELL_HOVER,
constant_1.S2Event.COL_CELL_HOVER,
constant_1.S2Event.CORNER_CELL_HOVER,
].forEach((eventName) => {
this.spreadsheet.on(eventName, (event) => {
this.handleHeaderHover(event);
});
});
}
}
exports.HoverEvent = HoverEvent;
//# sourceMappingURL=hover.js.map