@visactor/vtable
Version:
canvas table width high performance
114 lines (111 loc) • 5.15 kB
JavaScript
import { createLine, createRect, createSymbol } from "./../../vrender";
import { getCellMergeInfo } from "../utils/get-cell-merge";
export class CellMover {
constructor(table) {
const columnMoverLineWidth = table.theme.dragHeaderSplitLine.lineWidth, columnMoverLineColor = table.theme.dragHeaderSplitLine.lineColor, columnMoverShadowBlockColor = table.theme.dragHeaderSplitLine.shadowBlockColor;
this.columnMoverLabel = createSymbol({
visible: !1,
pickable: !1,
x: 0,
y: 0,
symbolType: "triangle",
fill: columnMoverLineColor
}), this.columnMoverLine = createLine({
visible: !1,
pickable: !1,
stroke: columnMoverLineColor,
lineWidth: columnMoverLineWidth,
x: 0,
y: 0,
points: [ {
x: 0,
y: 0
}, {
x: 0,
y: 0
} ]
}), this.columnMoverBack = createRect({
visible: !1,
pickable: !1,
fill: columnMoverShadowBlockColor,
x: 0,
y: 0,
width: 0,
height: 0
}), this.table = table;
}
appand(parent) {
parent.appendChild(this.columnMoverLabel), parent.appendChild(this.columnMoverLine),
parent.appendChild(this.columnMoverBack);
}
show(col, row, delta) {
const cellLocation = this.table.getCellLocation(col, row), mergeInfo = getCellMergeInfo(this.table, col, row);
mergeInfo && (col = mergeInfo.start.col, row = mergeInfo.start.row);
let rectX = 0, rectY = 0, rectWidth = 0, rectHeight = 0, rectDx = 0, rectDy = 0, symbolX = 0, symbolY = 0, symbolRotate = Math.PI;
const linePoints = [];
return "columnHeader" === cellLocation ? (rectX = this.table.getColsWidth(0, col - 1) - this.table.stateManager.scroll.horizontalBarPos,
rectY = this.table.getRowsHeight(0, this.table.frozenRowCount - 1), rectHeight = this.table.tableNoFrameHeight,
rectWidth = mergeInfo ? this.table.getColsWidth(mergeInfo.start.col, mergeInfo.end.col) : this.table.getColWidth(col),
rectDx = rectX - delta, symbolX = rectX + rectWidth, symbolY = 2, linePoints.push({
x: 0,
y: 0
}), linePoints.push({
x: 0,
y: this.table.tableNoFrameHeight
})) : ("rowHeader" === cellLocation || this.table.internalProps.layoutMap.isSeriesNumberInBody(col, row)) && (rectY = this.table.getRowsHeight(0, row - 1) - this.table.stateManager.scroll.verticalBarPos,
rectX = this.table.getColsWidth(0, this.table.frozenColCount - 1), rectWidth = this.table.tableNoFrameWidth,
rectHeight = mergeInfo ? this.table.getRowsHeight(mergeInfo.start.row, mergeInfo.end.row) : this.table.getRowHeight(row),
rectDy = rectY - delta, symbolX = 2, symbolY = rectY + rectHeight, symbolRotate = Math.PI / 2,
linePoints.push({
x: 0,
y: 0
}), linePoints.push({
x: this.table.tableNoFrameWidth,
y: 0
})), this.columnMoverBack.setAttributes({
visible: !0,
x: rectX - rectDx,
y: rectY - rectDy,
width: rectWidth,
height: rectHeight,
dx: rectDx,
dy: rectDy
}), this.columnMoverLine.setAttributes({
x: symbolX,
y: symbolY,
visible: !0,
points: linePoints
}), this.columnMoverLabel.setAttributes({
visible: !0,
x: symbolX,
y: symbolY,
angle: symbolRotate
}), {
backX: rectX - rectDx,
lineX: symbolX,
backY: rectY - rectDy,
lineY: symbolY
};
}
hide() {
this.columnMoverLabel.setAttribute("visible", !1), this.columnMoverLine.setAttribute("visible", !1),
this.columnMoverBack.setAttribute("visible", !1);
}
update(backX, lineX, backY, lineY) {
"number" == typeof backX && "number" == typeof lineX ? (this.columnMoverLabel.setAttribute("x", lineX),
this.columnMoverLine.setAttribute("x", lineX), this.columnMoverBack.setAttribute("x", backX)) : "number" == typeof backY && "number" == typeof lineY && (this.columnMoverLabel.setAttribute("y", lineY),
this.columnMoverLine.setAttribute("y", lineY), this.columnMoverBack.setAttribute("y", backY));
}
updateStyle() {
const columnMoverLineWidth = this.table.theme.dragHeaderSplitLine.lineWidth, columnMoverLineColor = this.table.theme.dragHeaderSplitLine.lineColor, columnMoverShadowBlockColor = this.table.theme.dragHeaderSplitLine.shadowBlockColor;
this.columnMoverLabel.setAttributes({
fill: columnMoverLineColor
}), this.columnMoverLine.setAttributes({
stroke: columnMoverLineColor,
lineWidth: columnMoverLineWidth
}), this.columnMoverBack.setAttributes({
fill: columnMoverShadowBlockColor
});
}
}
//# sourceMappingURL=cell-mover.js.map