@visactor/vtable
Version:
canvas table width high performance
252 lines (242 loc) • 13.3 kB
JavaScript
import { HierarchyState, IconFuncTypeEnum, IconPosition, InternalIconName } from "../ts-types";
import * as registerIcons from "../icons";
import { cellInRange } from "../tools/helper";
import { isMenuHighlight } from "../components/menu/dom/logic/MenuElement";
import { ImageStyle } from "./style/ImageStyle";
import { TextHeaderStyle } from "./style";
import { CheckboxStyle } from "./style/CheckboxStyle";
import { isValid } from "@visactor/vutils";
export class HeaderHelper {
constructor(_table) {
this._table = _table;
const regedIcons = registerIcons.get();
this.freezeIcon = regedIcons[InternalIconName.freezeIconName], this.frozenIcon = regedIcons[InternalIconName.frozenIconName],
this.frozenCurrentIcon = regedIcons[InternalIconName.frozenCurrentIconName], this.normalIcon = regedIcons[InternalIconName.normalIconName],
this.upIcon = regedIcons[InternalIconName.upwardIconName], this.downIcon = regedIcons[InternalIconName.downwardIconName],
this.dropDownAbsoluteIcon = regedIcons[InternalIconName.dropdownIconName], this.expandIcon = regedIcons[InternalIconName.expandIconName],
this.collapseIcon = regedIcons[InternalIconName.collapseIconName];
}
getIcons(col, row) {
const icons = [];
if (this._table.isPivotTable()) {
const {showSort: showSort, sort: sort} = this._table.internalProps.layoutMap.getHeader(col, row);
let _showSort;
if (_showSort = "function" == typeof showSort ? showSort({
col: col,
row: row,
table: this._table
}) : showSort, _showSort) {
let order = this._table.getPivotSortState(col, row);
order && (order = order.toUpperCase());
const sortIcon = "ASC" === order ? this.upIcon : "DESC" === order ? this.downIcon : this.normalIcon;
sortIcon && icons.push(sortIcon);
} else if (sort) {
const sortIcon = this.getSortIconForPivotTable(this._table.getPivotSortState(col, row), this._table, col, row);
sortIcon && icons.push(sortIcon);
}
} else {
const states = this._table.sortState;
let order;
order = void 0;
const range = this._table.getCellRange(col, row);
if (states) if (Array.isArray(states)) for (let i = 0; i < states.length; i++) {
const state = states[i], stateRange = this._table._getHeaderCellBySortState(state);
if (stateRange && cellInRange(range, stateRange.col, stateRange.row)) {
({order: order} = state);
break;
}
} else {
const stateRange = this._table._getHeaderCellBySortState(states);
stateRange && cellInRange(range, stateRange.col, stateRange.row) && ({order: order} = states);
}
const sortIcon = this.getSortIcon(order, this._table, col, row);
sortIcon && icons.push(sortIcon);
}
if (this._table.showFrozenIcon && col < this._table.allowFrozenColCount) {
const pinInline = this.getFrozenIcon(col, row);
pinInline && icons.push(pinInline);
}
if (this.checkDropDownIcon(this._table, col, row)) {
const dropDownMenuIcon = this.dropDownAbsoluteIcon;
icons.push(dropDownMenuIcon);
}
const dropDownStateIcons = this.getDropDownStateIcons(this._table, col, row);
dropDownStateIcons.length && icons.push(...dropDownStateIcons);
const {headerIcon: headerIcon} = this._table._getHeaderLayoutMap(col, row), hierarchyIcon = this.getHierarchyIcon(col, row);
if (hierarchyIcon && icons.push(hierarchyIcon), headerIcon) {
let headerIconStrs;
if ("function" == typeof headerIcon) {
headerIconStrs = headerIcon({
col: col,
row: row,
value: this._table.getCellValue(col, row),
dataValue: this._table.getCellOriginValue(col, row),
table: this._table
});
} else headerIconStrs = headerIcon;
const regedIcons = registerIcons.get(), addIcon = headerIcon => {
let icon;
icon = "string" == typeof headerIcon ? regedIcons[headerIcon] : headerIcon, icon && icons.push(icon);
};
Array.isArray(headerIconStrs) ? headerIconStrs.forEach(((columnIcon, index) => {
addIcon(columnIcon);
})) : addIcon(headerIconStrs);
}
return icons;
}
getFrozenIcon(col, row) {
if (this._table.isPivotTable() || this._table.transpose) return null;
if (this._table.rightFrozenColCount && col >= this._table.colCount - this._table.rightFrozenColCount) return null;
const headerC = this._table.getHeaderDefine(col, row);
if (headerC.columns && headerC.columns.length > 0) return null;
let frozen = this.freezeIcon;
return this._table.options.frozenColCount - 1 > col ? frozen = this.frozenIcon : this._table.options.frozenColCount - 1 === col && (frozen = this.frozenCurrentIcon),
frozen;
}
getSortIcon(order, _table, col, row) {
const icon = "asc" === order ? this.upIcon : "desc" === order ? this.downIcon : this.normalIcon, headerC = _table.getHeaderDefine(col, row);
let _showSort;
return headerC && (_showSort = "function" == typeof headerC.showSort ? headerC.showSort({
col: col,
row: row,
table: this._table
}) : headerC.showSort), !headerC || !1 === _showSort || !isValid(_showSort) && !headerC.sort || headerC.columns && headerC.columns.length > 0 ? null : icon;
}
getSortIconForPivotTable(order, _table, col, row) {
const headerC = _table.getHeaderDefine(col, row);
let _showSort;
if (headerC && (_showSort = "function" == typeof headerC.showSort ? headerC.showSort({
col: col,
row: row,
table: this._table
}) : headerC.showSort), !headerC || !1 === _showSort || !isValid(_showSort) && !headerC.sort || headerC.columns && headerC.columns.length > 0) return null;
return "ASC" === (null == order ? void 0 : order.toUpperCase()) ? this.upIcon : "DESC" === (null == order ? void 0 : order.toUpperCase()) ? this.downIcon : this.normalIcon;
}
getDropDownStateIcons(_table, col, row) {
var _a, _b, _c;
const headerC = _table.getHeaderDefine(col, row), headerL = _table._getHeaderLayoutMap(col, row);
let {dropDownMenu: dropDownMenu} = headerL;
"function" == typeof dropDownMenu && (dropDownMenu = dropDownMenu({
row: row,
col: col,
table: _table
}));
let globalDropDownMenu = _table.globalDropDownMenu;
"function" == typeof globalDropDownMenu && (globalDropDownMenu = globalDropDownMenu({
row: row,
col: col,
table: _table
}));
const results = [];
if (Array.isArray(dropDownMenu) && dropDownMenu.length || Array.isArray(globalDropDownMenu) && globalDropDownMenu.length && !(null === (_a = null == headerC ? void 0 : headerC.columns) || void 0 === _a ? void 0 : _a.length)) {
const menus = dropDownMenu || globalDropDownMenu;
let highlightIndex = -1, subHighlightIndex = -1;
for (let i = 0; i < menus.length; i++) {
const menu = menus[i];
if ("object" == typeof menu && menu.children && menu.children.length) for (let j = 0; j < menu.children.length; j++) {
const childItem = menu.children[j];
if ((null === (_b = _table.stateManager.menu) || void 0 === _b ? void 0 : _b.dropDownMenuHighlight) && isMenuHighlight(_table, null === (_c = _table.stateManager.menu) || void 0 === _c ? void 0 : _c.dropDownMenuHighlight, "object" == typeof childItem ? null == childItem ? void 0 : childItem.menuKey : childItem, col, row, i)) {
highlightIndex = i, subHighlightIndex = j;
break;
}
}
if (_table._dropDownMenuIsHighlight(col, row, i)) {
highlightIndex = i;
break;
}
}
if (-1 !== highlightIndex) {
let menu;
menu = -1 !== subHighlightIndex ? menus[highlightIndex].children[subHighlightIndex] : menus[highlightIndex],
menu.stateIcon && (menu.stateIcon.svg ? results.push({
type: "svg",
name: menu.stateIcon.src || menu.stateIcon.svg,
width: menu.stateIcon.width || 22,
height: menu.stateIcon.height || 22,
svg: menu.stateIcon.svg,
positionType: IconPosition.right,
marginRight: 0,
funcType: IconFuncTypeEnum.dropDownState,
interactive: !1
}) : menu.stateIcon.src && results.push({
type: "image",
name: menu.stateIcon.src || menu.stateIcon.svg,
width: menu.stateIcon.width || 22,
height: menu.stateIcon.height || 22,
src: menu.stateIcon.src,
positionType: IconPosition.right,
marginRight: 0,
funcType: IconFuncTypeEnum.dropDownState,
interactive: !1
}));
}
}
return results;
}
getDropDownIconRect(cellRect, marginTop, baseline) {
var _a, _b, _c, _d, _e, _f, _g, _h;
const iconW = null !== (_d = null !== (_b = null === (_a = this.downIcon.hover) || void 0 === _a ? void 0 : _a.width) && void 0 !== _b ? _b : null === (_c = this.downIcon) || void 0 === _c ? void 0 : _c.width) && void 0 !== _d ? _d : 0, iconH = null !== (_h = null !== (_f = null === (_e = this.downIcon.hover) || void 0 === _e ? void 0 : _e.height) && void 0 !== _f ? _f : null === (_g = this.downIcon) || void 0 === _g ? void 0 : _g.height) && void 0 !== _h ? _h : 0, left = cellRect.right - 2 - iconW, right = cellRect.right - 2;
let top;
top = "middle" === baseline ? cellRect.top + cellRect.height / 2 - iconW / 2 : "top" === baseline ? cellRect.top + marginTop / 2 : "bottom" === baseline ? cellRect.bottom - 2 * marginTop : cellRect.top;
return {
left: left,
right: right,
top: top,
bottom: iconH + top,
width: iconW,
height: iconH
};
}
getHierarchyIcon(col, row) {
const {hierarchyState: hierarchyState} = this._table._getHeaderLayoutMap(col, row);
if (hierarchyState) {
if (hierarchyState === HierarchyState.expand) return this.expandIcon;
if (hierarchyState === HierarchyState.collapse) return this.collapseIcon;
}
}
getHierarchyIconWidth() {
var _a, _b;
return this.expandIcon.width + (null !== (_a = this.expandIcon.marginLeft) && void 0 !== _a ? _a : 0) + (null !== (_b = this.expandIcon.marginRight) && void 0 !== _b ? _b : 0);
}
checkDropDownIcon(_table, col, row) {
var _a;
if (_table.isPivotTable()) {
let dropDownMenu = _table._getHeaderLayoutMap(col, row).dropDownMenu;
if ("function" == typeof dropDownMenu && (dropDownMenu = dropDownMenu({
row: row,
col: col,
table: _table
})), Array.isArray(dropDownMenu) && dropDownMenu.length) return !0;
} else {
const headerC = _table.getHeaderDefine(col, row), dropDownMenu = headerC.dropDownMenu;
let globalDropDownMenu = _table.globalDropDownMenu;
if ("function" == typeof globalDropDownMenu && (globalDropDownMenu = globalDropDownMenu({
row: row,
col: col,
table: _table
})), Array.isArray(dropDownMenu) && dropDownMenu.length || (!Array.isArray(headerC.dropDownMenu) || 0 !== headerC.dropDownMenu.length) && Array.isArray(globalDropDownMenu) && globalDropDownMenu.length && !(null === (_a = null == headerC ? void 0 : headerC.columns) || void 0 === _a ? void 0 : _a.length)) return !0;
}
return !1;
}
getStyleClass(headerType) {
switch (headerType) {
case "text":
case "link":
return TextHeaderStyle;
case "image":
case "video":
return ImageStyle;
case "checkbox":
return CheckboxStyle;
}
}
setTableColumnsEditor() {
const setEditor = (colDefines, setColumns) => {
null == colDefines || colDefines.forEach(((colDefine, index) => {
colDefine.editor && (setColumns[index].editor = colDefine.editor), colDefine.columns && setEditor(colDefine.columns, setColumns[index].columns);
}));
};
setEditor(this._table.options.columns, this._table.internalProps.columns);
}
}
//# sourceMappingURL=header-helper.js.map