@visactor/vtable
Version:
canvas table width high performance
240 lines (218 loc) • 16 kB
JavaScript
import { RichText } from "./../vrender";
import { TABLE_EVENT_TYPE } from "../core/TABLE_EVENT_TYPE";
import { bindMediaClick } from "./media-click";
import { bindDrillEvent, checkHaveDrill } from "./drill";
import { bindSparklineHoverEvent } from "./sparkline-event";
import { checkHaveTextStick, handleTextStick } from "../scenegraph/stick-text";
import { bindGesture, bindTableGroupListener } from "./listener/table-group";
import { bindScrollBarListener } from "./listener/scroll-bar";
import { bindContainerDomListener } from "./listener/container-dom";
import { bindTouchListener } from "./listener/touch";
import { bindAxisClickEvent } from "./self-event-listener/pivot-chart/axis-click";
import { bindAxisHoverEvent } from "./self-event-listener/pivot-chart/axis-hover";
import { Env } from "../tools/env";
import { isValid } from "@visactor/vutils";
import { InertiaScroll } from "./scroll";
import { isCellDisableSelect } from "../state/select/is-cell-select-highlight";
import { bindGroupTitleCheckboxChange, bindHeaderCheckboxChange } from "./self-event-listener/list-table/checkbox";
import { bindButtonClickEvent } from "./component/button";
import { bindIconClickEvent } from "./self-event-listener/base-table/icon";
import { bindDropdownMenuClickEvent } from "./self-event-listener/base-table/dropdown-menu";
import { bindDBClickAutoColumnWidthEvent } from "./self-event-listener/base-table/dbclick-auto-column-width";
import { rightButtonClickEvent } from "./self-event-listener/base-table/right-button-click";
export class EventManager {
constructor(table) {
this.isDown = !1, this.isDraging = !1, this.globalEventListeners = [], this._enableTableScroll = !0,
this.table = table, this.handleTextStickBindId = [], this.inertiaScroll = new InertiaScroll(table.stateManager),
"node" === Env.mode || table.options.disableInteraction || (this.bindOuterEvent(),
setTimeout((() => {
this.bindSelfEvent();
}), 0));
}
bindOuterEvent() {
bindTableGroupListener(this), bindContainerDomListener(this), bindScrollBarListener(this),
bindTouchListener(this), bindGesture(this);
}
updateEventBinder() {
setTimeout((() => {
var _a;
this.table.isReleased || (checkHaveTextStick(this.table) && 0 === (null === (_a = this.handleTextStickBindId) || void 0 === _a ? void 0 : _a.length) ? (this.handleTextStickBindId.push(this.table.on(TABLE_EVENT_TYPE.SCROLL, (e => {
handleTextStick(this.table);
}))), this.handleTextStickBindId.push(this.table.on(TABLE_EVENT_TYPE.RESIZE_COLUMN_END, (e => {
handleTextStick(this.table);
}))), this.handleTextStickBindId.push(this.table.on(TABLE_EVENT_TYPE.RESIZE_ROW_END, (e => {
handleTextStick(this.table);
})))) : !checkHaveTextStick(this.table) && this.handleTextStickBindId && (this.handleTextStickBindId.forEach((id => {
this.table.off(id);
})), this.handleTextStickBindId = []), bindSparklineHoverEvent(this.table));
}), 0);
}
bindSelfEvent() {
this.table.isReleased || (bindIconClickEvent(this.table), bindDropdownMenuClickEvent(this.table),
this.updateEventBinder(), bindMediaClick(this.table), bindDBClickAutoColumnWidthEvent(this.table),
this.table.isPivotTable() && checkHaveDrill(this.table) && bindDrillEvent(this.table),
bindSparklineHoverEvent(this.table), bindAxisClickEvent(this.table), bindAxisHoverEvent(this.table),
bindGroupTitleCheckboxChange(this.table), bindHeaderCheckboxChange(this.table),
bindButtonClickEvent(this.table), rightButtonClickEvent(this.table));
}
dealTableHover(eventArgsSet) {
if (!eventArgsSet) return void this.table.stateManager.updateHoverPos(-1, -1);
const {eventArgs: eventArgs} = eventArgsSet;
eventArgs ? this.table.stateManager.updateHoverPos(eventArgs.col, eventArgs.row) : this.table.stateManager.updateHoverPos(-1, -1);
}
dealIconHover(eventArgsSet) {
const {eventArgs: eventArgs} = eventArgsSet;
eventArgs ? this.table.stateManager.updateHoverIcon(eventArgs.col, eventArgs.row, eventArgs.target, eventArgs.targetCell) : this.table.stateManager.updateHoverIcon(-1, -1, void 0, void 0);
}
dealMenuHover(eventArgsSet) {}
dealTableSelect(eventArgsSet, isSelectMoving) {
var _a, _b, _c, _d, _e;
if (!eventArgsSet) return this.table.stateManager.updateSelectPos(-1, -1), !1;
const {eventArgs: eventArgs} = eventArgsSet;
if (eventArgs) {
if ("checkbox" === eventArgs.target.name || "radio" === eventArgs.target.name || "switch" === eventArgs.target.name || "button" === eventArgs.target.name) return !1;
if (this.table.isHeader(eventArgs.col, eventArgs.row) && isCellDisableSelect(this.table, eventArgs.col, eventArgs.row)) return isSelectMoving || this.table.stateManager.updateSelectPos(-1, -1),
!1;
if (!this.table.isHeader(eventArgs.col, eventArgs.row) && isCellDisableSelect(this.table, eventArgs.col, eventArgs.row)) {
if (!isSelectMoving) {
const isHasSelected = !!(null === (_a = this.table.stateManager.select.ranges) || void 0 === _a ? void 0 : _a.length);
this.table.stateManager.updateSelectPos(-1, -1), isHasSelected && this.table.stateManager.endSelectCells(!0, isHasSelected);
}
return !1;
}
return !this.table.isPivotChart() || "axis-label" !== (null === (_b = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _b ? void 0 : _b.target.name) && "chart" !== (null === (_c = null == eventArgsSet ? void 0 : eventArgsSet.eventArgs) || void 0 === _c ? void 0 : _c.target.type) ? (this.table.stateManager.updateSelectPos(eventArgs.col, eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey, !1, !isSelectMoving && (null === (_e = null === (_d = this.table.options.select) || void 0 === _d ? void 0 : _d.makeSelectCellVisible) || void 0 === _e || _e)),
!0) : (this.table.stateManager.updateSelectPos(-1, -1), !1);
}
return !1;
}
dealFillSelect(eventArgsSet, isSelectMoving) {
var _a, _b;
const {eventArgs: eventArgs} = eventArgsSet;
if (eventArgs) {
if ((null === (_b = null === (_a = this.table.stateManager.select) || void 0 === _a ? void 0 : _a.ranges) || void 0 === _b ? void 0 : _b.length) && this.table.stateManager.isFillHandle()) {
let updateRow, updateCol;
const currentRange = this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1];
isSelectMoving && (isValid(this.table.stateManager.fillHandle.directionRow) || (Math.abs(this.table.stateManager.fillHandle.startY - eventArgsSet.abstractPos.y) >= Math.abs(this.table.stateManager.fillHandle.startX - eventArgsSet.abstractPos.x) ? this.table.stateManager.fillHandle.directionRow = !0 : this.table.stateManager.fillHandle.directionRow = !1),
Math.abs(this.table.stateManager.fillHandle.startY - eventArgsSet.abstractPos.y) >= Math.abs(this.table.stateManager.fillHandle.startX - eventArgsSet.abstractPos.x) ? this.table.stateManager.fillHandle.startY - eventArgsSet.abstractPos.y > 0 ? this.table.stateManager.fillHandle.direction = "top" : this.table.stateManager.fillHandle.direction = "bottom" : this.table.stateManager.fillHandle.startX - eventArgsSet.abstractPos.x > 0 ? this.table.stateManager.fillHandle.direction = "left" : this.table.stateManager.fillHandle.direction = "right",
this.table.stateManager.fillHandle.directionRow ? (updateRow = eventArgs.row, updateCol = currentRange.end.col) : (updateRow = currentRange.end.row,
updateCol = eventArgs.col)), this.table.stateManager.updateSelectPos(isSelectMoving ? updateCol : currentRange.end.col, isSelectMoving ? updateRow : currentRange.end.row, !0, eventArgs.event.ctrlKey || eventArgs.event.metaKey, !1, !isSelectMoving);
} else this.table.stateManager.updateSelectPos(eventArgs.col, eventArgs.row, eventArgs.event.shiftKey, eventArgs.event.ctrlKey || eventArgs.event.metaKey, !1, !isSelectMoving);
return !0;
}
return !1;
}
deelTableSelectAll() {
this.table.stateManager.updateSelectPos(-1, -1, !1, !1, !0), this.table.fireListeners(TABLE_EVENT_TYPE.SELECTED_CELL, {
ranges: this.table.stateManager.select.ranges,
col: 0,
row: 0
});
}
dealMenuSelect(eventArgsSet) {}
checkColumnResize(eventArgsSet, update) {
const {eventArgs: eventArgs} = eventArgsSet;
if (this.table.options.enableTreeStickCell && !eventArgs) return !1;
const resizeCol = this.table.scenegraph.getResizeColAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null == eventArgs ? void 0 : eventArgs.targetCell);
return this.table._canResizeColumn(resizeCol.col, resizeCol.row) && resizeCol.col >= 0 ? (update && this.table.stateManager.startResizeCol(resizeCol.col, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, resizeCol.rightFrozen),
!0) : (this.table.stateManager.isResizeCol() && this.table.stateManager.endResizeCol(),
!1);
}
checkRowResize(eventArgsSet, update) {
const {eventArgs: eventArgs} = eventArgsSet;
if (eventArgs) {
const resizeRow = this.table.scenegraph.getResizeRowAt(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, eventArgs.targetCell);
if (this.table._canResizeRow(resizeRow.col, resizeRow.row) && resizeRow.row >= 0) return update && this.table.stateManager.startResizeRow(resizeRow.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, resizeRow.bottomFrozen),
!0;
}
return !1;
}
cellIsHeaderCheck(eventArgsSet, update) {
const {eventArgs: eventArgs} = eventArgsSet, {col: col, row: row, target: target} = eventArgs;
if (!this.table.isHeader(col, row)) return !1;
return "checkbox" === this.table.getCellType(eventArgs.col, eventArgs.row) && "checkbox" === target.name;
}
checkCellFillhandle(eventArgsSet, update) {
var _a, _b, _c, _d, _e;
let isFillHandle = !1;
if (isFillHandle = "function" == typeof (null === (_a = this.table.options.excelOptions) || void 0 === _a ? void 0 : _a.fillHandle) ? this.table.options.excelOptions.fillHandle({
selectRanges: this.table.stateManager.select.ranges,
table: this.table
}) : null === (_b = this.table.options.excelOptions) || void 0 === _b ? void 0 : _b.fillHandle,
isFillHandle) {
const {eventArgs: eventArgs} = eventArgsSet;
if (eventArgs && (null === (_d = null === (_c = this.table.stateManager.select) || void 0 === _c ? void 0 : _c.ranges) || void 0 === _d ? void 0 : _d.length)) {
const lastCol = Math.max(this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].start.col, this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].end.col), lastRow = Math.max(this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].start.row, this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].end.row), startCol = Math.min(this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].start.col, this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].end.col), startRow = Math.min(this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].start.row, this.table.stateManager.select.ranges[this.table.stateManager.select.ranges.length - 1].end.row);
let lastCellBound;
lastCellBound = lastCol < this.table.colCount - 1 ? this.table.scenegraph.highPerformanceGetCell(lastCol, lastRow).globalAABBBounds : this.table.scenegraph.highPerformanceGetCell(startCol - 1, lastRow).globalAABBBounds;
const distanceX = Math.abs(eventArgsSet.abstractPos.x - lastCellBound.x2);
lastCellBound = lastRow < this.table.rowCount - 1 ? this.table.scenegraph.highPerformanceGetCell(lastCol, lastRow).globalAABBBounds : this.table.scenegraph.highPerformanceGetCell(lastCol, startRow - 1).globalAABBBounds;
const distanceY = Math.abs(eventArgsSet.abstractPos.y - lastCellBound.y2), squareSize = 18;
if ((null === (_e = this.table.stateManager.fillHandle) || void 0 === _e ? void 0 : _e.isFilling) || distanceX <= squareSize / 2 && distanceY <= squareSize / 2) return update && this.table.stateManager.startFillSelect(eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y),
!0;
}
}
return !1;
}
dealColumnResize(xInTable, yInTable) {
this.table.stateManager.updateResizeCol(xInTable, yInTable);
}
dealRowResize(xInTable, yInTable) {
this.table.stateManager.updateResizeRow(xInTable, yInTable);
}
checkColumnMover(eventArgsSet) {
var _a;
const {eventArgs: eventArgs} = eventArgsSet;
return !(!eventArgs || !this.table._canDragHeaderPosition(eventArgs.col, eventArgs.row)) && (this.table.stateManager.startMoveCol(eventArgs.col, eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null === (_a = null == eventArgs ? void 0 : eventArgs.event) || void 0 === _a ? void 0 : _a.nativeEvent),
!0);
}
dealColumnMover(eventArgsSet) {
var _a;
const {eventArgs: eventArgs} = eventArgsSet;
isValid(eventArgs.col) && isValid(eventArgs.row) && this.table.stateManager.updateMoveCol(eventArgs.col, eventArgs.row, eventArgsSet.abstractPos.x, eventArgsSet.abstractPos.y, null === (_a = null == eventArgs ? void 0 : eventArgs.event) || void 0 === _a ? void 0 : _a.nativeEvent);
}
startColumnResize(eventArgsSet) {}
dealIconClick(e, eventArgsSet) {
const {eventArgs: eventArgs} = eventArgsSet, {target: target, event: event, col: col, row: row} = eventArgs || {
target: e.target,
event: e,
col: -1,
row: -1
}, icon = target;
if (icon.role && icon.role.startsWith("icon-")) return this.table.fireListeners(TABLE_EVENT_TYPE.ICON_CLICK, {
name: icon.name,
x: (icon.globalAABBBounds.x1 + icon.globalAABBBounds.x2) / 2,
y: icon.globalAABBBounds.y2,
col: col,
row: row,
funcType: icon.attribute.funcType,
icon: icon,
event: event
}), !0;
if (target instanceof RichText) {
const icon = target.pickIcon(event.global);
if (icon) return this.table.fireListeners(TABLE_EVENT_TYPE.ICON_CLICK, {
name: icon.attribute.id,
x: icon.globalX + icon.globalAABBBounds.width() / 2,
y: icon.globalY + icon.AABBBounds.height(),
col: col,
row: row,
funcType: icon.attribute.funcType,
icon: icon,
event: event
}), !0;
}
return !1;
}
release() {
this.gesture.release(), this.globalEventListeners.forEach((item => {
"document" === item.env ? document.removeEventListener(item.name, item.callback) : "body" === item.env ? document.body.removeEventListener(item.name, item.callback) : "window" === item.env && window.removeEventListener(item.name, item.callback);
})), this.globalEventListeners = [];
}
enableScroll() {
this._enableTableScroll = !0;
}
disableScroll() {
this._enableTableScroll = !1;
}
}
//# sourceMappingURL=event.js.map