@visactor/vtable
Version:
canvas table width high performance
130 lines (123 loc) • 8.62 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.Chart = exports.CHART_NUMBER_TYPE = void 0;
const vrender_1 = require("./../../vrender"), vutils_1 = require("@visactor/vutils");
exports.CHART_NUMBER_TYPE = (0, vrender_1.genNumberType)();
class Chart extends vrender_1.Group {
constructor(isShareChartSpec, params) {
if (super(params), this.type = "chart", this.numberType = exports.CHART_NUMBER_TYPE,
this.isShareChartSpec = isShareChartSpec, params.chartInstance) this.chartInstance = params.chartInstance; else {
const chartInstance = this.chartInstance = new params.ClassType(params.spec, (0,
vutils_1.merge)({}, this.attribute.tableChartOption, {
renderCanvas: params.canvas,
mode: "node" === this.attribute.mode ? "node" : "desktop-browser",
modeParams: this.attribute.modeParams,
canvasControled: !1,
viewBox: {
x1: 0,
x2: 0,
y1: 0,
y2: 0
},
dpr: params.dpr,
interactive: !1,
animation: !1,
autoFit: !1
}));
chartInstance.renderSync(), chartInstance.getStage().enableDirtyBounds(), params.chartInstance = this.chartInstance = chartInstance;
}
}
activate(table) {
var _a, _b, _c, _d, _e;
this.active = !0;
const {col: col, row: row} = this.parent, {x1: x1, y1: y1, x2: x2, y2: y2} = this.getViewBox(), clipBound = getTableBounds(col, row, table).intersect({
x1: x1 - table.scrollLeft,
x2: x2 - table.scrollLeft,
y1: y1 - table.scrollTop,
y2: y2 - table.scrollTop
});
null === (_a = this.activeChartInstance) || void 0 === _a || _a.release(), this.activeChartInstance = new this.attribute.ClassType(this.attribute.spec, (0,
vutils_1.merge)({}, this.attribute.tableChartOption, {
renderCanvas: this.attribute.canvas,
mode: "desktop-browser",
canvasControled: !1,
viewBox: {
x1: 0,
x2: x2 - x1,
y1: 0,
y2: y2 - y1
},
dpr: table.internalProps.pixelRatio,
animation: !1,
interactive: !0,
autoFit: !1,
beforeRender: chartStage => {
const stage = this.stage, ctx = chartStage.window.getContext(), stageMatrix = stage.window.getViewBoxTransform(), viewBox = stage.window.getViewBox();
ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransform(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f, !0),
ctx.translate(viewBox.x1, viewBox.y1), ctx.setTransformForCurrent(!0), ctx.beginPath(),
ctx.rect(clipBound.x1, clipBound.y1, clipBound.x2 - clipBound.x1, clipBound.y2 - clipBound.y1),
ctx.clip(), ctx.clearMatrix(), table.options.canvas && !chartStage.needRender && (chartStage.pauseRender(),
table.scenegraph.stage.dirtyBounds.union(this.globalAABBBounds), table.scenegraph.updateNextFrame());
},
afterRender(stage) {
stage.window.getContext().inuse = !1, stage.needRender = !1, chartStage.resumeRender();
}
}));
const chartStage = this.activeChartInstance.getStage(), matrix = this.globalTransMatrix.clone(), stageMatrix = this.stage.window.getViewBoxTransform();
matrix.multiply(stageMatrix.a, stageMatrix.b, stageMatrix.c, stageMatrix.d, stageMatrix.e, stageMatrix.f),
chartStage.window.setViewBoxTransform && chartStage.window.setViewBoxTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f),
this.activeChartInstance.renderSync(), null === (_c = null === (_b = table.internalProps.layoutMap) || void 0 === _b ? void 0 : _b.updateDataStateToActiveChartInstance) || void 0 === _c || _c.call(_b, this.activeChartInstance),
this.activeChartInstance.on("click", (params => {
var _a;
!1 === (null === (_a = this.attribute.spec.select) || void 0 === _a ? void 0 : _a.enable) ? table.scenegraph.updateChartState(null) : Chart.temp && table.scenegraph.updateChartState(null == params ? void 0 : params.datum);
})), this.activeChartInstance.on("brushEnd", (params => {
var _a;
table.scenegraph.updateChartState(null === (_a = null == params ? void 0 : params.value) || void 0 === _a ? void 0 : _a.inBrushData),
Chart.temp = 0, setTimeout((() => {
Chart.temp = 1;
}), 0);
})), null === (_e = (_d = table)._bindChartEvent) || void 0 === _e || _e.call(_d, this.activeChartInstance);
}
deactivate() {
var _a, _b;
this.active = !1, null === (_a = this.activeChartInstance) || void 0 === _a || _a.updateViewBox({
x1: -1e3,
x2: -800,
y1: -1e3,
y2: -800
}, !1, !1), null === (_b = this.activeChartInstance) || void 0 === _b || _b.release(),
this.activeChartInstance = null;
}
updateData(data) {
this.attribute.data = data;
}
getViewBox() {
var _a, _b, _c, _d, _e, _f, _g, _h;
const cellGroup = this.parent, padding = this.attribute.cellPadding, table = this.stage.table, {x1: x1, y1: y1, x2: x2, y2: y2} = cellGroup.globalAABBBounds;
return {
x1: Math.ceil(x1 + padding[3] + table.scrollLeft + (null !== (_b = null === (_a = table.options.viewBox) || void 0 === _a ? void 0 : _a.x1) && void 0 !== _b ? _b : 0)),
x2: Math.ceil(x1 + cellGroup.attribute.width - padding[1] + table.scrollLeft + (null !== (_d = null === (_c = table.options.viewBox) || void 0 === _c ? void 0 : _c.x1) && void 0 !== _d ? _d : 0)),
y1: Math.ceil(y1 + padding[0] + table.scrollTop + (null !== (_f = null === (_e = table.options.viewBox) || void 0 === _e ? void 0 : _e.y1) && void 0 !== _f ? _f : 0)),
y2: Math.ceil(y1 + cellGroup.attribute.height - padding[2] + table.scrollTop + (null !== (_h = null === (_g = table.options.viewBox) || void 0 === _g ? void 0 : _g.y1) && void 0 !== _h ? _h : 0))
};
}
}
function getTableBounds(col, row, table) {
var _a, _b, _c, _d, _e, _f, _g, _h;
const {layoutMap: layoutMap} = table.internalProps, bodyBound = new vutils_1.Bounds, tableBound = table.scenegraph.tableGroup.globalAABBBounds;
return bodyBound.x1 = tableBound.x1, bodyBound.x2 = tableBound.x2, bodyBound.y1 = tableBound.y1,
bodyBound.y2 = tableBound.y2, layoutMap.isLeftBottomCorner(col, row) || layoutMap.isRightTopCorner(col, row) || layoutMap.isLeftTopCorner(col, row) || layoutMap.isRightBottomCorner(col, row) || (layoutMap.isFrozenColumn(col, row) ? (bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight(),
bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight()) : layoutMap.isFrozenRow(col, row) ? (bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth(),
bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth()) : layoutMap.isRightFrozenColumn(col, row) ? (bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight(),
bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight()) : layoutMap.isBottomFrozenRow(col, row) ? (bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth(),
bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth()) : layoutMap.isFrozenColumn(col, row) || layoutMap.isRightFrozenColumn(col, row) || (bodyBound.x1 = tableBound.x1 + table.getFrozenColsWidth(),
bodyBound.x2 = tableBound.x2 - table.getRightFrozenColsWidth(), bodyBound.y1 = tableBound.y1 + table.getFrozenRowsHeight(),
bodyBound.y2 = tableBound.y2 - table.getBottomFrozenRowsHeight())), bodyBound.x1 = bodyBound.x1 + (null !== (_b = null === (_a = table.options.viewBox) || void 0 === _a ? void 0 : _a.x1) && void 0 !== _b ? _b : 0),
bodyBound.x2 = bodyBound.x2 + (null !== (_d = null === (_c = table.options.viewBox) || void 0 === _c ? void 0 : _c.x1) && void 0 !== _d ? _d : 0),
bodyBound.y1 = bodyBound.y1 + (null !== (_f = null === (_e = table.options.viewBox) || void 0 === _e ? void 0 : _e.y1) && void 0 !== _f ? _f : 0),
bodyBound.y2 = bodyBound.y2 + (null !== (_h = null === (_g = table.options.viewBox) || void 0 === _g ? void 0 : _g.y1) && void 0 !== _h ? _h : 0),
bodyBound;
}
exports.Chart = Chart, Chart.temp = 1;
//# sourceMappingURL=chart.js.map