@visactor/vtable
Version:
canvas table width high performance
297 lines (275 loc) • 18.1 kB
JavaScript
;
var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
void 0 === k2 && (k2 = k);
var desc = Object.getOwnPropertyDescriptor(m, k);
desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
enumerable: !0,
get: function() {
return m[k];
}
}), Object.defineProperty(o, k2, desc);
} : function(o, m, k, k2) {
void 0 === k2 && (k2 = k), o[k2] = m[k];
}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
Object.defineProperty(o, "default", {
enumerable: !0,
value: v
});
} : function(o, v) {
o.default = v;
}), __importStar = this && this.__importStar || function(mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
return __setModuleDefault(result, mod), result;
};
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.checkHasColumnAutoWidth = exports.checkHasAggregationOnColumnDefine = exports.generateAggregationForColumn = exports.parseMarkLineGetExtendRange = exports.getCellCornerRadius = exports.getStyleTheme = exports._getScrollableVisibleRect = exports.isAutoDefine = exports._applyColWidthLimits = exports._toPxWidth = exports._getTargetFrozenColAt = exports._getTargetFrozenRowAt = exports._setDataSource = exports._setRecords = exports._dealWithUpdateDataSource = exports.updateRootElementPadding = exports.createRootElement = void 0;
const data_1 = require("../data"), font_1 = require("../scenegraph/utils/font"), padding_1 = require("../scenegraph/utils/padding"), Rect_1 = require("../tools/Rect"), calc = __importStar(require("../tools/calc")), vutils_1 = require("@visactor/vutils");
function createRootElement(padding, className = "vtable") {
var _a, _b;
const element = document.createElement("div");
element.setAttribute("tabindex", "0"), element.classList.add(className), element.style.outline = "none",
element.style.margin = `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
const width = (element.offsetWidth || (null === (_a = element.parentElement) || void 0 === _a ? void 0 : _a.offsetWidth) || 1) - 1, height = (element.offsetHeight || (null === (_b = element.parentElement) || void 0 === _b ? void 0 : _b.offsetHeight) || 1) - 1;
return element.style.width = width && width - padding.left - padding.right + "px" || "0px",
element.style.height = height && height - padding.top - padding.bottom + "px" || "0px",
element;
}
function updateRootElementPadding(element, padding) {
var _a, _b;
element.style.margin = `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
const width = (element.offsetWidth || (null === (_a = element.parentElement) || void 0 === _a ? void 0 : _a.offsetWidth) || 1) - 1, height = (element.offsetHeight || (null === (_b = element.parentElement) || void 0 === _b ? void 0 : _b.offsetHeight) || 1) - 1;
element.style.width = width && width - padding.left - padding.right + "px" || "0px",
element.style.height = height && height - padding.top - padding.bottom + "px" || "0px";
}
function _dealWithUpdateDataSource(table, fn) {
const {dataSourceEventIds: dataSourceEventIds} = table.internalProps;
dataSourceEventIds && dataSourceEventIds.forEach((id => table.internalProps.handler.off(id))),
fn(table), table.internalProps.dataSourceEventIds = [ table.internalProps.handler.on(table.internalProps.dataSource, data_1.DataSource.EVENT_TYPE.CHANGE_ORDER, (() => {
table.dataSource.hierarchyExpandLevel && table.refreshRowColCount(), table.render();
})) ];
}
function _setRecords(table, records = []) {
const tableWithPlugins = table;
_dealWithUpdateDataSource(table, (() => {
var _a;
table.internalProps.records = records;
let rowHierarchyType = table.internalProps.layoutMap.rowHierarchyType;
(0, vutils_1.isArray)(null === (_a = table.internalProps.dataConfig) || void 0 === _a ? void 0 : _a.groupByRules) && (rowHierarchyType = "tree"),
tableWithPlugins.pluginManager.getPluginByName("Master Detail Plugin") && (rowHierarchyType = "grid");
const newDataSource = table.internalProps.dataSource = data_1.CachedDataSource.ofArray(records, table.internalProps.dataConfig, table.pagination, table.internalProps.columns, rowHierarchyType, getHierarchyExpandLevel(table));
table.addReleaseObj(newDataSource);
}));
}
function getHierarchyExpandLevel(table) {
var _a;
return table.options.hierarchyExpandLevel ? table.options.hierarchyExpandLevel : table.internalProps.groupBy ? 1 / 0 : (null === (_a = table._hasHierarchyTreeHeader) || void 0 === _a ? void 0 : _a.call(table)) ? 1 : void 0;
}
function _setDataSource(table, dataSource) {
_dealWithUpdateDataSource(table, (() => {
table.internalProps.dataSource && table.internalProps.releaseList.forEach((releaseObj => {
releaseObj instanceof data_1.DataSource && (releaseObj.release(), table.internalProps.releaseList.splice(table.internalProps.releaseList.indexOf(releaseObj), 1));
})), dataSource ? dataSource instanceof data_1.DataSource ? (table.internalProps.dataSource = dataSource,
table.internalProps.dataSource.supplementConfig(table.pagination, table.options.columns, table.internalProps.layoutMap.rowHierarchyType, getHierarchyExpandLevel(table))) : table.internalProps.dataSource = new data_1.CachedDataSource(dataSource) : table.internalProps.dataSource = data_1.DataSource.EMPTY,
table.addReleaseObj(table.internalProps.dataSource), table.internalProps.records = null;
}));
}
function _getTargetFrozenRowAt(table, absoluteY) {
if (!table.internalProps.frozenRowCount) return null;
let {scrollTop: scrollTop} = table;
const rowCount = table.internalProps.frozenRowCount;
for (let row = 0; row < rowCount; row++) {
const height = table.getRowHeight(row), bottom = scrollTop + height;
if (bottom > absoluteY) return {
top: scrollTop,
row: row,
bottom: bottom,
height: height
};
scrollTop = bottom;
}
return null;
}
function _getTargetFrozenColAt(table, absoluteX) {
if (!table.internalProps.frozenColCount) return null;
let {scrollLeft: scrollLeft} = table;
const colCount = table.internalProps.frozenColCount;
for (let col = 0; col < colCount; col++) {
const width = table.getColWidth(col), right = scrollLeft + width;
if (right > absoluteX) return {
left: scrollLeft,
col: col,
right: right,
width: width
};
scrollLeft = right;
}
return null;
}
function _toPxWidth(table, width) {
return Math.round(calc.toPx(width, table.internalProps.calcWidthContext));
}
function _applyColWidthLimits(limits, orgWidth) {
return limits ? limits.min && limits.min > orgWidth ? limits.min : limits.max && limits.max < orgWidth ? limits.max : orgWidth : orgWidth;
}
function isAutoDefine(width) {
return Boolean(width && "string" == typeof width && "auto" === width.toLowerCase());
}
function _getScrollableVisibleRect(table) {
var _a, _b;
let frozenColsWidth = 0, frozenColsContentWidth = 0, rightFrozenColsWidth = 0;
table.frozenColCount > 0 && (frozenColsWidth = table.getFrozenColsWidth(), frozenColsContentWidth = null !== (_b = null === (_a = table.getFrozenColsContentWidth) || void 0 === _a ? void 0 : _a.call(table)) && void 0 !== _b ? _b : frozenColsWidth),
table.rightFrozenColCount > 0 && (rightFrozenColsWidth = table.getRightFrozenColsWidth());
let frozenRowsHeight = 0, bottomFrozenRowsHeight = 0;
return table.frozenRowCount > 0 && (frozenRowsHeight = table.getFrozenRowsHeight()),
table.bottomFrozenRowCount > 0 && (bottomFrozenRowsHeight = table.getBottomFrozenRowsHeight()),
new Rect_1.Rect(table.scrollLeft + frozenColsContentWidth, table.scrollTop + frozenRowsHeight, table.tableNoFrameWidth - frozenColsWidth - rightFrozenColsWidth, table.tableNoFrameHeight - frozenRowsHeight - bottomFrozenRowsHeight);
}
function getStyleTheme(headerStyle, table, col, row, getProp, needGetTheme = !0) {
const padding = (0, padding_1.getQuadProps)(getProp("padding", headerStyle, col, row, table)), bgColor = getProp("bgColor", headerStyle, col, row, table), font = getProp("font", headerStyle, col, row, table);
let fontFamily, fontSize, fontWeight, fontStyle, fontVariant;
if (font) {
const {family: family, size: size, weight: weight, style: style, variant: variant} = (0,
font_1.parseFont)(font);
fontFamily = family.join(" "), fontSize = size, fontWeight = weight, fontStyle = style,
fontStyle = variant;
} else fontFamily = getProp("fontFamily", headerStyle, col, row, table), fontSize = getProp("fontSize", headerStyle, col, row, table),
fontWeight = getProp("fontWeight", headerStyle, col, row, table), fontStyle = getProp("fontStyle", headerStyle, col, row, table),
fontVariant = getProp("fontVariant", headerStyle, col, row, table);
const textAlign = getProp("textAlign", headerStyle, col, row, table), textBaseline = getProp("textBaseline", headerStyle, col, row, table), color = getProp("color", headerStyle, col, row, table), strokeColor = getProp("strokeColor", headerStyle, col, row, table), lineHeight = getProp("lineHeight", headerStyle, col, row, table), underline = getProp("underline", headerStyle, col, row, table), underlineDash = getProp("underlineDash", headerStyle, col, row, table), underlineOffset = getProp("underlineOffset", headerStyle, col, row, table), lineThrough = getProp("lineThrough", headerStyle, col, row, table), textDecorationWidth = Math.max(1, Math.floor(fontSize / 10)), textOverflow = getProp("textOverflow", headerStyle, col, row, table), borderColor = getProp("borderColor", headerStyle, col, row, table), borderLineWidth = getProp("borderLineWidth", headerStyle, col, row, table), borderLineDash = getProp("borderLineDash", headerStyle, col, row, table), marked = getProp("marked", headerStyle, col, row, table), cursor = getProp("cursor", headerStyle, col, row, table), hasFunctionPros = !(padding && bgColor && font && textAlign && textBaseline && color && textOverflow && borderColor && borderLineWidth && borderLineDash && "boolean" == typeof underline && "boolean" == typeof lineThrough && "boolean" == typeof marked);
if (!needGetTheme) return {
hasFunctionPros: hasFunctionPros
};
const theme = {
text: {
fontFamily: fontFamily,
fontSize: fontSize,
fontWeight: fontWeight,
fontStyle: fontStyle,
fontVariant: fontVariant,
fill: color,
stroke: null != strokeColor && strokeColor,
textAlign: textAlign,
textBaseline: textBaseline,
lineHeight: null != lineHeight ? lineHeight : fontSize,
underline: underline ? textDecorationWidth : void 0,
underlineDash: underlineDash,
underlineOffset: underlineOffset,
lineThrough: lineThrough ? textDecorationWidth : void 0,
ellipsis: "clip" === textOverflow ? "" : "ellipsis" === textOverflow ? "..." : (0,
vutils_1.isValid)(textOverflow) ? textOverflow : void 0
},
group: {
fill: bgColor,
lineDash: borderLineDash,
lineWidth: borderLineWidth,
stroke: borderColor,
cursor: "auto" === cursor || "default" === cursor ? void 0 : cursor
},
_vtable: {
padding: padding,
marked: marked
}
};
if (Array.isArray(borderLineWidth) && (theme.group.strokeArrayWidth = (0, padding_1.getQuadProps)(borderLineWidth)),
Array.isArray(borderColor)) {
const strokeColors = (0, padding_1.getQuadProps)(borderColor);
theme.group.stroke = !strokeColors.every((color => !color)) && strokeColors, theme.group.strokeArrayColor = (0,
padding_1.getQuadProps)(borderColor);
}
return {
theme: theme,
hasFunctionPros: hasFunctionPros
};
}
function getCellCornerRadius(col, row, table) {
const tableCornerRadius = table.theme.frameStyle.cornerRadius;
if (table.theme.cellInnerBorder) {
if (Array.isArray(tableCornerRadius)) {
const radius = [ 0, 0, 0, 0 ];
return 0 === col && 0 === row && (radius[0] = tableCornerRadius[0]), col === table.colCount - 1 && 0 === row && (radius[1] = tableCornerRadius[1]),
0 === col && row === table.rowCount - 1 && (radius[3] = tableCornerRadius[3]), col === table.colCount - 1 && row === table.rowCount - 1 && (radius[2] = tableCornerRadius[2]),
radius;
}
if (tableCornerRadius) {
const radius = [ 0, 0, 0, 0 ];
return 0 === col && 0 === row && (radius[0] = tableCornerRadius), col === table.colCount - 1 && 0 === row && (radius[1] = tableCornerRadius),
0 === col && row === table.rowCount - 1 && (radius[3] = tableCornerRadius), col === table.colCount - 1 && row === table.rowCount - 1 && (radius[2] = tableCornerRadius),
radius;
}
}
return 0;
}
function parseMarkLineGetExtendRange(markLine) {
var _a, _b, _c, _d;
if (markLine) {
if (Array.isArray(markLine)) {
let extendRange;
for (let i = 0; i < markLine.length; i++) if (markLine[i].autoRange) {
if ("sum" === markLine[i].y || "sum" === markLine[i].x || "sum" === markLine[i].y1 || "sum" === markLine[i].x1) return "sum";
"max" !== markLine[i].y && "max" !== markLine[i].x && "max" !== markLine[i].y1 && "max" !== markLine[i].x1 || (extendRange = "max"),
"number" == typeof markLine[i].y && "number" == typeof (null != extendRange ? extendRange : 0) && (extendRange = Math.max(null !== (_a = extendRange) && void 0 !== _a ? _a : 0, markLine[i].y)),
"number" == typeof markLine[i].x && "number" == typeof (null != extendRange ? extendRange : 0) && (extendRange = Math.max(null !== (_b = extendRange) && void 0 !== _b ? _b : 0, markLine[i].x)),
"number" == typeof markLine[i].y1 && "number" == typeof (null != extendRange ? extendRange : 0) && (extendRange = Math.max(null !== (_c = extendRange) && void 0 !== _c ? _c : 0, markLine[i].y1)),
"number" == typeof markLine[i].x1 && "number" == typeof (null != extendRange ? extendRange : 0) && (extendRange = Math.max(null !== (_d = extendRange) && void 0 !== _d ? _d : 0, markLine[i].x1));
}
return extendRange;
}
if (markLine.autoRange) {
if ("sum" === markLine.y || "sum" === markLine.x || "sum" === markLine.y1 || "sum" === markLine.x1) return "sum";
if ("max" === markLine.y || "max" === markLine.x || "max" === markLine.y1 || "max" === markLine.x1) return "max";
if ("number" == typeof markLine.y) return markLine.y;
if ("number" == typeof markLine.x) return markLine.x;
if ("number" == typeof markLine.y1) return markLine.y1;
if ("number" == typeof markLine.x1) return markLine.x1;
}
}
}
function generateAggregationForColumn(table) {
for (let col = 0; col < table.internalProps.columns.length; col++) {
const colDef = table.internalProps.columns[col];
if (colDef.aggregation) ; else if (table.options.aggregation) {
let aggregation;
if (aggregation = "function" == typeof table.options.aggregation ? table.options.aggregation({
col: col,
field: colDef.field
}) : table.options.aggregation, aggregation) if (Array.isArray(aggregation)) {
const aggregations = [];
aggregation.forEach((item => {
aggregations.push(Object.assign({
showOnTop: !1
}, item));
})), colDef.aggregation = aggregations;
} else colDef.aggregation = Object.assign({
showOnTop: !1
}, aggregation);
}
}
}
function checkHasAggregationOnColumnDefine(colDefs) {
for (let i = 0; i < colDefs.length; i++) {
if (colDefs[i].aggregation) return !0;
}
return !1;
}
function checkHasColumnAutoWidth(table) {
if ("autoWidth" === table.options.widthMode) return !0;
if ("auto" === table.options.defaultHeaderColWidth || Array.isArray(table.options.defaultHeaderColWidth) && table.options.defaultHeaderColWidth.includes("auto")) return !0;
const columnObjects = table.internalProps.layoutMap.columnObjects;
for (let i = 0; i < columnObjects.length; i++) {
if ("auto" === columnObjects[i].width) return !0;
}
return !1;
}
exports.createRootElement = createRootElement, exports.updateRootElementPadding = updateRootElementPadding,
exports._dealWithUpdateDataSource = _dealWithUpdateDataSource, exports._setRecords = _setRecords,
exports._setDataSource = _setDataSource, exports._getTargetFrozenRowAt = _getTargetFrozenRowAt,
exports._getTargetFrozenColAt = _getTargetFrozenColAt, exports._toPxWidth = _toPxWidth,
exports._applyColWidthLimits = _applyColWidthLimits, exports.isAutoDefine = isAutoDefine,
exports._getScrollableVisibleRect = _getScrollableVisibleRect, exports.getStyleTheme = getStyleTheme,
exports.getCellCornerRadius = getCellCornerRadius, exports.parseMarkLineGetExtendRange = parseMarkLineGetExtendRange,
exports.generateAggregationForColumn = generateAggregationForColumn, exports.checkHasAggregationOnColumnDefine = checkHasAggregationOnColumnDefine,
exports.checkHasColumnAutoWidth = checkHasColumnAutoWidth;
//# sourceMappingURL=tableHelper.js.map