@visactor/vtable
Version:
canvas table width high performance
135 lines (128 loc) • 6.79 kB
JavaScript
import { BubbleTooltip } from "./Tooltip";
import { cellInRange } from "../../tools/helper";
import { isMobile } from "../../tools/util";
import { TABLE_EVENT_TYPE } from "../../core/TABLE_EVENT_TYPE";
import { isFunction } from "@visactor/vutils";
const TOOLTIP_INSTANCE_FACTORY = {
"bubble-tooltip": function(table) {
return new BubbleTooltip(table);
}
};
export class TooltipHandler {
constructor(table, confine) {
this._table = table, this._tooltipInstances = {}, this._bindTableEvent(table), this.confine = confine;
}
release() {
var _a, _b;
const tooltipInstances = this._tooltipInstances;
for (const k in tooltipInstances) null === (_b = null === (_a = tooltipInstances[k]) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a);
delete this._tooltipInstances, this._attachInfo = null;
}
_bindToCell(col, row, tooltipOptions) {
var _a;
const info = this._attachInfo, instance = this._getTooltipInstanceInfo(col, row);
if (!info || instance && info.instance === instance || (null === (_a = info.instance) || void 0 === _a || _a.unbindTooltipElement(),
this._attachInfo = null), !instance) return;
if (instance && instance.bindTooltipElement(col, row, tooltipOptions, this.confine)) {
const range = this._table.getCellRange(col, row);
this._attachInfo = {
range: range,
instance: instance,
tooltipOptions: tooltipOptions
};
}
}
_move(col, row, tooltipOptions) {
const info = this._attachInfo;
if (!info || !cellInRange(info.range, col, row)) return;
const {instance: instance} = info;
null == instance || instance.moveTooltipElement(col, row, tooltipOptions, this.confine);
}
moveToPosition(col, row, position, referencePosition) {
const info = this._attachInfo;
if (!info || !cellInRange(info.range, col, row)) return;
const {instance: instance} = info;
this._attachInfo.tooltipOptions.position = position, this._attachInfo.tooltipOptions.referencePosition = referencePosition,
null == instance || instance.locateTooltipElement(col, row, position, referencePosition, this.confine);
}
_unbindFromCell() {
const info = this._attachInfo;
if (!info) return;
const {instance: instance} = info;
null == instance || instance.unbindTooltipElement(), this._attachInfo = null;
}
_isBindCell(col, row) {
const info = this._attachInfo;
return !!info && cellInRange(info.range, col, row);
}
_bindTableEvent(table) {
table.on(TABLE_EVENT_TYPE.MOUSEENTER_CELL, (e => {
if (isMobile()) return;
const {x1: left, x2: right, y1: top, y2: bottom} = table.stateManager.menu.bounds;
if (table.stateManager.menu.isShow && "number" == typeof e.x && "number" == typeof e.y && e.x > left && e.x < right && e.y > top && e.y < bottom) return;
const {col: col, row: row} = e;
this.showTooltip(col, row);
})), table.on(TABLE_EVENT_TYPE.MOUSEMOVE_CELL, (e => {
var _a, _b;
if (!isMobile()) {
if (null === (_b = null === (_a = this._attachInfo) || void 0 === _a ? void 0 : _a.tooltipOptions) || void 0 === _b ? void 0 : _b.referencePosition) {
const position = this._attachInfo.tooltipOptions.referencePosition, {event: event} = e, {left: left, right: right, top: top, bottom: bottom} = position.rect, abstractPos = table._getMouseAbstractPoint(event, !1);
abstractPos.inTable && abstractPos.x >= left - 5 && abstractPos.x <= right + 5 && abstractPos.y >= top - 5 && abstractPos.y <= bottom + 5 || this._unbindFromCell();
}
this._attachInfo && table.stateManager.menu.isShow && this._bindToCell(e.col, e.row);
}
})), table.on(TABLE_EVENT_TYPE.MOUSELEAVE_CELL, (e => {
this._unbindFromCell();
})), table.on(TABLE_EVENT_TYPE.SELECTED_CELL, (e => {
this._isBindCell(e.col, e.row) && this._unbindFromCell();
})), table.on(TABLE_EVENT_TYPE.MOUSELEAVE_TABLE, (e => {
this._unbindFromCell();
})), table.on(TABLE_EVENT_TYPE.SCROLL, (e => {
this._unbindFromCell();
}));
}
showTooltip(col, row) {
var _a, _b, _c;
let tooltipOption;
const table = this._table, headerDescription = table.getHeaderDescription(col, row);
if (headerDescription) {
const rect = table.getCellRangeRelativeRect({
col: col,
row: row
});
tooltipOption = {
content: headerDescription,
referencePosition: {
placement: table.internalProps.tooltip.position,
rect: rect
},
disappearDelay: null !== (_a = table.internalProps.tooltip.overflowTextTooltipDisappearDelay) && void 0 !== _a ? _a : 0,
style: table.theme.tooltipStyle
};
} else if (isFunction(null === (_b = table.internalProps.tooltip) || void 0 === _b ? void 0 : _b.isShowOverflowTextTooltip) ? table.internalProps.tooltip.isShowOverflowTextTooltip(col, row, table) : table.internalProps.tooltip.isShowOverflowTextTooltip) {
const overflowText = table.getCellOverflowText(col, row), rect = table.getCellRangeRelativeRect({
col: col,
row: row
});
overflowText && (tooltipOption = {
content: headerDescription ? `${headerDescription}\n ${overflowText}` : overflowText,
referencePosition: {
placement: table.internalProps.tooltip.position,
rect: rect
},
disappearDelay: null !== (_c = table.internalProps.tooltip.overflowTextTooltipDisappearDelay) && void 0 !== _c ? _c : 0,
style: table.theme.tooltipStyle
});
}
tooltipOption ? this._bindToCell(col, row, tooltipOption) : this._unbindFromCell();
}
_getTooltipInstanceInfo(col, row) {
const table = this._table, tooltipInstances = this._tooltipInstances;
return tooltipInstances && tooltipInstances["bubble-tooltip"] || tooltipInstances && (tooltipInstances["bubble-tooltip"] = TOOLTIP_INSTANCE_FACTORY["bubble-tooltip"](table));
}
isBinded(tooltipOptions) {
var _a;
return JSON.stringify(tooltipOptions) === JSON.stringify(null === (_a = this._attachInfo) || void 0 === _a ? void 0 : _a.tooltipOptions);
}
}
//# sourceMappingURL=TooltipHandler.js.map