@visactor/vtable
Version:
canvas table width high performance
706 lines (698 loc) • 37.7 kB
JavaScript
import { createRect, createLine, createText, createGroup } from "./../../vrender";
import { ScrollBar } from "./../../vrender";
import { MenuHandler } from "./menu";
import { DrillIcon } from "./drill-icon";
import { CellMover } from "./cell-mover";
import { getColX, getRowY } from "./util";
import { isValid } from "@visactor/vutils";
export class TableComponent {
constructor(table) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
this.table = table;
const theme = this.table.theme;
this.createScrollBar();
const columnResizeColor = null === (_a = theme.columnResize) || void 0 === _a ? void 0 : _a.lineColor, columnResizeWidth = null === (_b = theme.columnResize) || void 0 === _b ? void 0 : _b.lineWidth, columnResizeBgColor = null === (_c = theme.columnResize) || void 0 === _c ? void 0 : _c.bgColor, columnResizeBgWidth = null === (_d = theme.columnResize) || void 0 === _d ? void 0 : _d.width, labelVisible = null === (_f = null === (_e = theme.columnResize) || void 0 === _e ? void 0 : _e.labelVisible) || void 0 === _f || _f, labelColor = null === (_g = theme.columnResize) || void 0 === _g ? void 0 : _g.labelColor, labelFontSize = null === (_h = theme.columnResize) || void 0 === _h ? void 0 : _h.labelFontSize, labelFontFamily = null === (_j = theme.columnResize) || void 0 === _j ? void 0 : _j.labelFontFamily, labelBackgroundFill = null === (_k = theme.columnResize) || void 0 === _k ? void 0 : _k.labelBackgroundFill, labelBackgroundCornerRadius = null === (_l = theme.columnResize) || void 0 === _l ? void 0 : _l.labelBackgroundCornerRadius;
this.labelVisible = labelVisible, this.columnResizeLine = createLine({
visible: !1,
pickable: !1,
stroke: columnResizeColor,
lineWidth: columnResizeWidth,
x: 0,
y: 0,
points: [ {
x: 0,
y: 0
}, {
x: 0,
y: 0
} ]
}), this.columnResizeBgLine = createLine({
visible: !1,
pickable: !1,
stroke: columnResizeBgColor,
lineWidth: columnResizeBgWidth,
x: 0,
y: 0,
points: [ {
x: 0,
y: 0
}, {
x: 0,
y: 0
} ]
});
const columnResizeLabelText = createText({
visible: !1,
pickable: !1,
x: 0,
y: 0,
fontSize: labelFontSize,
fill: labelColor,
fontFamily: labelFontFamily,
text: "",
textBaseline: "top",
dx: 16,
dy: -labelFontSize / 2
}), columnResizeLabelBack = createRect({
visible: !1,
pickable: !1,
fill: labelBackgroundFill,
x: 0,
y: 0,
width: 5 * labelFontSize * .8,
height: labelFontSize + 8,
cornerRadius: labelBackgroundCornerRadius,
dx: 12,
dy: -labelFontSize / 2 - 4
});
this.columnResizeLabel = createGroup({
visible: !1,
pickable: !1,
x: 0,
y: 0
}), this.columnResizeLabel.appendChild(columnResizeLabelBack), this.columnResizeLabel.appendChild(columnResizeLabelText),
this.rowResizeLine = createLine({
visible: !1,
pickable: !1,
stroke: columnResizeColor,
lineWidth: columnResizeWidth,
x: 0,
y: 0,
points: [ {
x: 0,
y: 0
}, {
x: 0,
y: 0
} ]
}), this.rowResizeBgLine = createLine({
visible: !1,
pickable: !1,
stroke: columnResizeBgColor,
lineWidth: columnResizeBgWidth,
x: 0,
y: 0,
points: [ {
x: 0,
y: 0
}, {
x: 0,
y: 0
} ]
});
const rowResizeLabelText = createText({
visible: !1,
pickable: !1,
x: 0,
y: 0,
fontSize: labelFontSize,
fill: labelColor,
fontFamily: labelFontFamily,
text: "",
textBaseline: "top",
dx: 16,
dy: -labelFontSize / 2
}), rowResizeLabelBack = createRect({
visible: !1,
pickable: !1,
fill: labelBackgroundFill,
x: 0,
y: 0,
width: 5 * labelFontSize * .8,
height: labelFontSize + 8,
cornerRadius: labelBackgroundCornerRadius,
dx: 12,
dy: -labelFontSize / 2 - 4
});
this.rowResizeLabel = createGroup({
visible: !1,
pickable: !1,
x: 0,
y: 0
}), this.rowResizeLabel.appendChild(rowResizeLabelBack), this.rowResizeLabel.appendChild(rowResizeLabelText),
this.cellMover = new CellMover(this.table);
const shadowWidth = null === (_o = null === (_m = theme.frozenColumnLine) || void 0 === _m ? void 0 : _m.shadow) || void 0 === _o ? void 0 : _o.width, shadowStartColor = null === (_q = null === (_p = theme.frozenColumnLine) || void 0 === _p ? void 0 : _p.shadow) || void 0 === _q ? void 0 : _q.startColor, shadowEndColor = null === (_s = null === (_r = theme.frozenColumnLine) || void 0 === _r ? void 0 : _r.shadow) || void 0 === _s ? void 0 : _s.endColor, visible = null === (_u = null === (_t = theme.frozenColumnLine) || void 0 === _t ? void 0 : _t.shadow) || void 0 === _u ? void 0 : _u.visible;
this.frozenShadowLine = createRect({
visible: "always" === visible,
pickable: !1,
x: 0,
y: 0,
width: shadowWidth,
height: 0,
fill: {
gradient: "linear",
x0: 0,
y0: 0,
x1: 1,
y1: 0,
stops: [ {
color: shadowStartColor,
offset: 0
}, {
color: shadowEndColor,
offset: 1
} ]
}
}), this.rightFrozenShadowLine = createRect({
visible: "always" === visible,
pickable: !1,
x: 0,
y: 0,
width: shadowWidth,
height: 0,
fill: {
gradient: "linear",
x0: 0,
y0: 0,
x1: 1,
y1: 0,
stops: [ {
color: shadowEndColor,
offset: 0
}, {
color: shadowStartColor,
offset: 1
} ]
}
}), this.menu = new MenuHandler(this.table), this.drillIcon = new DrillIcon;
}
addToGroup(componentGroup) {
componentGroup.addChild(this.frozenShadowLine), componentGroup.addChild(this.rightFrozenShadowLine),
componentGroup.addChild(this.columnResizeBgLine), componentGroup.addChild(this.columnResizeLine),
componentGroup.addChild(this.columnResizeLabel), componentGroup.addChild(this.rowResizeBgLine),
componentGroup.addChild(this.rowResizeLine), componentGroup.addChild(this.rowResizeLabel);
this.table.theme.scrollStyle.hoverOn && !this.table.theme.scrollStyle.barToSide ? (componentGroup.addChild(this.hScrollBar),
componentGroup.addChild(this.frozenHScrollBar), componentGroup.addChild(this.rightFrozenHScrollBar),
componentGroup.addChild(this.vScrollBar)) : (componentGroup.stage.defaultLayer.addChild(this.hScrollBar),
componentGroup.stage.defaultLayer.addChild(this.frozenHScrollBar), componentGroup.stage.defaultLayer.addChild(this.rightFrozenHScrollBar),
componentGroup.stage.defaultLayer.addChild(this.vScrollBar)), this.menu.bindTableComponent(componentGroup),
this.drillIcon.appand(componentGroup), this.cellMover.appand(componentGroup);
}
createScrollBar() {
var _a, _b, _c, _d, _e, _f;
const theme = this.table.theme, scrollRailColor = null === (_a = theme.scrollStyle) || void 0 === _a ? void 0 : _a.scrollRailColor, scrollSliderColor = null === (_b = theme.scrollStyle) || void 0 === _b ? void 0 : _b.scrollSliderColor, scrollSliderCornerRadius = null === (_c = theme.scrollStyle) || void 0 === _c ? void 0 : _c.scrollSliderCornerRadius, width = null === (_d = theme.scrollStyle) || void 0 === _d ? void 0 : _d.width, horizontalPadding = null === (_e = theme.scrollStyle) || void 0 === _e ? void 0 : _e.horizontalPadding, verticalPadding = null === (_f = theme.scrollStyle) || void 0 === _f ? void 0 : _f.verticalPadding;
let sliderStyle;
sliderStyle = isValid(scrollSliderCornerRadius) ? {
cornerRadius: scrollSliderCornerRadius,
fill: scrollSliderColor
} : {
fill: scrollSliderColor
}, this.hScrollBar = new ScrollBar({
direction: "horizontal",
x: 2 * -this.table.tableNoFrameWidth,
y: 2 * -this.table.tableNoFrameHeight,
width: this.table.tableNoFrameWidth,
height: width,
padding: horizontalPadding,
railStyle: {
fill: scrollRailColor
},
sliderStyle: sliderStyle,
range: [ 0, .1 ],
visible: !1
}), this.hScrollBar.render(), this.hScrollBar.hideAll(), this.frozenHScrollBar = new ScrollBar({
direction: "horizontal",
x: 2 * -this.table.tableNoFrameWidth,
y: 2 * -this.table.tableNoFrameHeight,
width: this.table.tableNoFrameWidth,
height: width,
padding: horizontalPadding,
railStyle: {
fill: scrollRailColor
},
sliderStyle: sliderStyle,
range: [ 0, .1 ],
visible: !1
}), this.frozenHScrollBar.render(), this.frozenHScrollBar.hideAll(), this.rightFrozenHScrollBar = new ScrollBar({
direction: "horizontal",
x: 2 * -this.table.tableNoFrameWidth,
y: 2 * -this.table.tableNoFrameHeight,
width: this.table.tableNoFrameWidth,
height: width,
padding: horizontalPadding,
railStyle: {
fill: scrollRailColor
},
sliderStyle: sliderStyle,
range: [ 0, .1 ],
visible: !1
}), this.rightFrozenHScrollBar.render(), this.rightFrozenHScrollBar.hideAll(), this.vScrollBar = new ScrollBar({
direction: "vertical",
x: 2 * -this.table.tableNoFrameWidth,
y: 2 * -this.table.tableNoFrameHeight,
width: width,
height: this.table.tableNoFrameHeight - this.table.getFrozenRowsHeight(),
padding: verticalPadding,
railStyle: {
fill: scrollRailColor
},
sliderStyle: sliderStyle,
range: [ 0, .1 ],
visible: !1
}), this.vScrollBar.render(), this.vScrollBar.hideAll();
}
updateScrollBar() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
const oldHorizontalBarPos = this.table.stateManager.scroll.horizontalBarPos, oldVerticalBarPos = this.table.stateManager.scroll.verticalBarPos, oldFrozenHorizontalBarPos = this.table.stateManager.scroll.frozenHorizontalBarPos, oldRightFrozenHorizontalBarPos = this.table.stateManager.scroll.rightFrozenHorizontalBarPos, theme = this.table.theme, width = null === (_a = theme.scrollStyle) || void 0 === _a ? void 0 : _a.width, visible1 = null === (_b = theme.scrollStyle) || void 0 === _b ? void 0 : _b.visible, horizontalVisible = null !== (_d = null === (_c = theme.scrollStyle) || void 0 === _c ? void 0 : _c.horizontalVisible) && void 0 !== _d ? _d : visible1, verticalVisible = null !== (_f = null === (_e = theme.scrollStyle) || void 0 === _e ? void 0 : _e.verticalVisible) && void 0 !== _f ? _f : visible1, tableWidth = Math.ceil(this.table.tableNoFrameWidth), tableHeight = Math.ceil(this.table.tableNoFrameHeight), totalHeight = this.table.getAllRowsHeight(), totalWidth = this.table.getAllColsWidth(), frozenRowsHeight = this.table.getFrozenRowsHeight(), frozenColsWidth = this.table.getFrozenColsWidth(), frozenColsContentWidth = null !== (_j = null === (_h = (_g = this.table).getFrozenColsContentWidth) || void 0 === _h ? void 0 : _h.call(_g)) && void 0 !== _j ? _j : frozenColsWidth, bottomFrozenRowsHeight = this.table.getBottomFrozenRowsHeight(), rightFrozenColsWidth = this.table.getRightFrozenColsWidth(), rightFrozenColsContentWidth = null !== (_m = null === (_l = (_k = this.table).getRightFrozenColsContentWidth) || void 0 === _l ? void 0 : _l.call(_k)) && void 0 !== _m ? _m : rightFrozenColsWidth, hoverOn = this.table.theme.scrollStyle.hoverOn, sizeTolerance = (null === (_o = this.table.options.customConfig) || void 0 === _o ? void 0 : _o._disableColumnAndRowSizeRound) ? 1 : 0;
if (totalWidth > tableWidth + sizeTolerance) {
const y = Math.min(tableHeight, totalHeight), bodyViewportWidth = tableWidth - frozenColsWidth - rightFrozenColsWidth, bodyContentWidth = totalWidth - frozenColsContentWidth - rightFrozenColsContentWidth, rangeEnd = bodyContentWidth > 0 ? Math.max(.05, bodyViewportWidth / bodyContentWidth) : 1;
let attrY = 0;
attrY = this.table.theme.scrollStyle.barToSide ? this.table.tableNoFrameHeight - (hoverOn ? width : -this.table.scenegraph.tableGroup.attribute.y) + this.table.tableY : y - (hoverOn ? width : -this.table.scenegraph.tableGroup.attribute.y);
let hScrollBarx = frozenColsWidth + (hoverOn ? 0 : this.table.scenegraph.tableGroup.attribute.x), hScrollBarWidth = tableWidth - frozenColsWidth - rightFrozenColsWidth;
const ignoreFrozenCols = null !== (_q = null === (_p = this.table.theme.scrollStyle) || void 0 === _p ? void 0 : _p.ignoreFrozenCols) && void 0 !== _q && _q;
ignoreFrozenCols ? (hScrollBarx = hoverOn ? 0 : this.table.scenegraph.tableGroup.attribute.x,
hScrollBarWidth = tableWidth) : (hScrollBarx = frozenColsWidth + (hoverOn ? 0 : this.table.scenegraph.tableGroup.attribute.x),
hScrollBarWidth = tableWidth - frozenColsWidth - rightFrozenColsWidth), this.hScrollBar.setAttributes({
x: hScrollBarx,
y: attrY,
width: hScrollBarWidth,
range: [ 0, rangeEnd ],
visible: "always" === horizontalVisible
});
const bounds = this.hScrollBar.AABBBounds && this.hScrollBar.globalAABBBounds;
this.hScrollBar._viewPosition = {
x: bounds.x1,
y: bounds.y1
}, "always" === horizontalVisible && this.hScrollBar.showAll();
const frozenScrollable = this.table.options.scrollFrozenCols && this.table.getFrozenColsOffset() > 0;
if (!ignoreFrozenCols && frozenScrollable) {
const frozenRangeEnd = Math.max(.05, frozenColsWidth / frozenColsContentWidth), x = hoverOn ? 0 : this.table.scenegraph.tableGroup.attribute.x;
this.frozenHScrollBar.setAttributes({
x: x,
y: attrY,
width: frozenColsWidth,
range: [ 0, frozenRangeEnd ],
visible: "always" === horizontalVisible
});
const bounds = this.frozenHScrollBar.AABBBounds && this.frozenHScrollBar.globalAABBBounds;
this.frozenHScrollBar._viewPosition = {
x: bounds.x1,
y: bounds.y1
}, "always" === horizontalVisible && this.frozenHScrollBar.showAll();
} else this.frozenHScrollBar.setAttributes({
x: 2 * -this.table.tableNoFrameWidth,
y: 2 * -this.table.tableNoFrameHeight,
width: 0,
visible: !1
});
const rightFrozenScrollable = this.table.options.scrollRightFrozenCols && this.table.getRightFrozenColsOffset() > 0;
if (!ignoreFrozenCols && rightFrozenScrollable) {
const rightFrozenRangeEnd = Math.max(.05, rightFrozenColsWidth / rightFrozenColsContentWidth), x = tableWidth - rightFrozenColsWidth + (hoverOn ? 0 : this.table.scenegraph.tableGroup.attribute.x);
this.rightFrozenHScrollBar.setAttributes({
x: x,
y: attrY,
width: rightFrozenColsWidth,
range: [ 0, rightFrozenRangeEnd ],
visible: "always" === horizontalVisible
});
const bounds = this.rightFrozenHScrollBar.AABBBounds && this.rightFrozenHScrollBar.globalAABBBounds;
this.rightFrozenHScrollBar._viewPosition = {
x: bounds.x1,
y: bounds.y1
}, "always" === horizontalVisible && this.rightFrozenHScrollBar.showAll();
} else this.rightFrozenHScrollBar.setAttributes({
x: 2 * -this.table.tableNoFrameWidth,
y: 2 * -this.table.tableNoFrameHeight,
width: 0,
visible: !1
});
} else this.hScrollBar.setAttributes({
x: 2 * -this.table.tableNoFrameWidth,
y: 2 * -this.table.tableNoFrameHeight,
width: 0,
visible: !1
}), this.frozenHScrollBar.setAttributes({
x: 2 * -this.table.tableNoFrameWidth,
y: 2 * -this.table.tableNoFrameHeight,
width: 0,
visible: !1
}), this.rightFrozenHScrollBar.setAttributes({
x: 2 * -this.table.tableNoFrameWidth,
y: 2 * -this.table.tableNoFrameHeight,
width: 0,
visible: !1
});
if (totalHeight > tableHeight + sizeTolerance) {
const x = Math.min(tableWidth, totalWidth), rangeEnd = Math.max(.05, (tableHeight - frozenRowsHeight) / (totalHeight - frozenRowsHeight));
let attrX = 0;
attrX = this.table.theme.scrollStyle.barToSide ? this.table.tableNoFrameWidth - (hoverOn ? width : -this.table.scenegraph.tableGroup.attribute.x) + this.table.tableX : x - (hoverOn ? width : -this.table.scenegraph.tableGroup.attribute.x),
this.vScrollBar.setAttributes({
x: attrX,
y: frozenRowsHeight + (hoverOn ? 0 : this.table.scenegraph.tableGroup.attribute.y),
height: tableHeight - frozenRowsHeight - bottomFrozenRowsHeight,
range: [ 0, rangeEnd ],
visible: "always" === verticalVisible
});
const bounds = this.vScrollBar.AABBBounds && this.vScrollBar.globalAABBBounds;
this.vScrollBar._viewPosition = {
x: bounds.x1,
y: bounds.y1
}, "always" === verticalVisible && this.vScrollBar.showAll();
} else this.vScrollBar.setAttributes({
x: 2 * -this.table.tableNoFrameWidth,
y: 2 * -this.table.tableNoFrameHeight,
height: 0,
visible: !1
});
this.table.stateManager.setScrollLeft(oldHorizontalBarPos), this.table.stateManager.setFrozenColsScrollLeft(oldFrozenHorizontalBarPos, !1),
this.table.stateManager.setRightFrozenColsScrollLeft(oldRightFrozenHorizontalBarPos, !1),
this.table.stateManager.setScrollTop(oldVerticalBarPos);
}
hideResizeCol() {
this.columnResizeLine.setAttribute("visible", !1), this.columnResizeBgLine.setAttribute("visible", !1),
this.columnResizeLabel.setAttribute("visible", !1), this.columnResizeLabel.hideAll();
}
showResizeCol(col, y, isRightFrozen) {
const colX = getColX(col, this.table, isRightFrozen);
this.columnResizeLine.setAttributes({
visible: !0,
x: colX,
points: [ {
x: 0,
y: 0
}, {
x: 0,
y: this.table.getRowsHeight(0, this.table.rowCount - 1)
} ]
}), this.columnResizeBgLine.setAttributes({
visible: !0,
x: colX,
points: [ {
x: 0,
y: 0
}, {
x: 0,
y: this.table.getRowsHeight(0, this.table.rowCount - 1)
} ]
}), this.labelVisible && (this.columnResizeLabel.showAll(), this.columnResizeLabel.setAttributes({
visible: !0,
x: colX,
y: y
}), this.columnResizeLabel.lastChild.setAttribute("text", `${this.table.getColWidth(col)}px`));
}
updateResizeCol(col, y, isRightFrozen) {
const colX = getColX(col, this.table, isRightFrozen);
this.columnResizeLine.setAttributes({
x: colX,
points: [ {
x: 0,
y: 0
}, {
x: 0,
y: this.table.getRowsHeight(0, this.table.rowCount - 1)
} ]
}), this.columnResizeBgLine.setAttributes({
x: colX,
points: [ {
x: 0,
y: 0
}, {
x: 0,
y: this.table.getRowsHeight(0, this.table.rowCount - 1)
} ]
}), this.labelVisible && (this.columnResizeLabel.setAttributes({
x: colX,
y: y
}), this.columnResizeLabel.lastChild.setAttribute("text", `${Math.floor(this.table.getColWidth(col))}px`));
}
hideResizeRow() {
this.rowResizeLine.setAttribute("visible", !1), this.rowResizeBgLine.setAttribute("visible", !1),
this.rowResizeLabel.setAttribute("visible", !1), this.rowResizeLabel.hideAll();
}
showResizeRow(row, x, isRightFrozen) {
const rowY = getRowY(row, this.table, isRightFrozen);
this.rowResizeLine.setAttributes({
visible: !0,
y: rowY,
points: [ {
y: 0,
x: 0
}, {
y: 0,
x: this.table.getColsWidth(0, this.table.colCount - 1)
} ]
}), this.rowResizeBgLine.setAttributes({
visible: !0,
y: rowY,
points: [ {
y: 0,
x: 0
}, {
y: 0,
x: this.table.getColsWidth(0, this.table.colCount - 1)
} ]
}), this.labelVisible && (this.rowResizeLabel.showAll(), this.rowResizeLabel.setAttributes({
visible: !0,
y: rowY,
x: x
}), this.rowResizeLabel.lastChild.setAttribute("text", `${this.table.getRowHeight(row)}px`));
}
updateResizeRow(row, x, isBottomFrozen) {
const rowY = getRowY(row, this.table, isBottomFrozen);
this.rowResizeLine.setAttributes({
y: rowY,
points: [ {
y: 0,
x: 0
}, {
y: 0,
x: this.table.getColsWidth(0, this.table.colCount - 1)
} ]
}), this.rowResizeBgLine.setAttributes({
y: rowY,
points: [ {
y: 0,
x: 0
}, {
y: 0,
x: this.table.getColsWidth(0, this.table.colCount - 1)
} ]
}), this.labelVisible && (this.rowResizeLabel.setAttributes({
y: rowY,
x: x
}), this.rowResizeLabel.lastChild.setAttribute("text", `${Math.floor(this.table.getRowHeight(row))}px`));
}
hideMoveCol() {
this.cellMover.hide();
}
showMoveCol(col, row, delta) {
return this.cellMover.show(col, row, delta);
}
updateMoveCol(backX, lineX, backY, lineY) {
this.cellMover.update(backX, lineX, backY, lineY);
}
setFrozenColumnShadow(col, isRightFrozen) {
var _a, _b, _c, _d, _e;
const colX = !isRightFrozen && col === this.table.frozenColCount - 1 && (null !== (_c = null === (_b = (_a = this.table).getFrozenColsOffset) || void 0 === _b ? void 0 : _b.call(_a)) && void 0 !== _c ? _c : 0) > 0 ? this.table.getFrozenColsWidth() : getColX(col, this.table, isRightFrozen);
col < 0 || "always" !== (null === (_e = null === (_d = this.table.theme.frozenColumnLine) || void 0 === _d ? void 0 : _d.shadow) || void 0 === _e ? void 0 : _e.visible) ? this.frozenShadowLine.setAttributes({
visible: !1,
x: colX,
height: this.table.getDrawRange().height
}) : this.frozenShadowLine.setAttributes({
visible: !0,
x: colX,
height: this.table.getDrawRange().height
});
}
setRightFrozenColumnShadow(col) {
var _a, _b, _c, _d, _e;
const colX = this.table.options.scrollRightFrozenCols && (null !== (_c = null === (_b = (_a = this.table).getRightFrozenColsOffset) || void 0 === _b ? void 0 : _b.call(_a)) && void 0 !== _c ? _c : 0) > 0 ? this.table.tableNoFrameWidth - this.table.getRightFrozenColsWidth() : getColX(col, this.table, !0);
col >= this.table.colCount || "always" !== (null === (_e = null === (_d = this.table.theme.frozenColumnLine) || void 0 === _d ? void 0 : _d.shadow) || void 0 === _e ? void 0 : _e.visible) ? this.rightFrozenShadowLine.setAttributes({
visible: !1,
x: colX - this.rightFrozenShadowLine.attribute.width,
height: this.table.getDrawRange().height
}) : this.rightFrozenShadowLine.setAttributes({
visible: !0,
x: colX - this.rightFrozenShadowLine.attribute.width,
height: this.table.getDrawRange().height
});
}
hideFrozenColumnShadow() {
var _a, _b, _c, _d, _e;
const visible1 = null === (_b = null === (_a = this.table.theme.frozenColumnLine) || void 0 === _a ? void 0 : _a.shadow) || void 0 === _b ? void 0 : _b.visible;
"scrolling" === (null !== (_e = null === (_d = null === (_c = this.table.theme.frozenColumnLine) || void 0 === _c ? void 0 : _c.shadow) || void 0 === _d ? void 0 : _d.visible) && void 0 !== _e ? _e : visible1) && (this.frozenShadowLine.setAttribute("visible", !1),
this.rightFrozenShadowLine.setAttribute("visible", !1), this.table.scenegraph.updateNextFrame());
}
showFrozenColumnShadow() {
var _a, _b, _c, _d, _e;
const visible1 = null === (_b = null === (_a = this.table.theme.frozenColumnLine) || void 0 === _a ? void 0 : _a.shadow) || void 0 === _b ? void 0 : _b.visible;
"scrolling" === (null !== (_e = null === (_d = null === (_c = this.table.theme.frozenColumnLine) || void 0 === _c ? void 0 : _c.shadow) || void 0 === _d ? void 0 : _d.visible) && void 0 !== _e ? _e : visible1) && (this.frozenShadowLine.setAttribute("visible", !0),
this.rightFrozenShadowLine.setAttribute("visible", !0), this.table.scenegraph.updateNextFrame());
}
hideVerticalScrollBar() {
var _a;
const visible1 = this.table.theme.scrollStyle.visible, verticalVisible = null !== (_a = this.table.theme.scrollStyle.verticalVisible) && void 0 !== _a ? _a : visible1;
"focus" !== verticalVisible && "scrolling" !== verticalVisible || (this.vScrollBar.setAttribute("visible", !1),
this.vScrollBar.hideAll(), this.table.scenegraph.updateNextFrame());
}
showVerticalScrollBar() {
var _a;
const visible1 = this.table.theme.scrollStyle.visible, verticalVisible = null !== (_a = this.table.theme.scrollStyle.verticalVisible) && void 0 !== _a ? _a : visible1;
"focus" !== verticalVisible && "scrolling" !== verticalVisible || (this.vScrollBar.setAttribute("visible", !0),
this.vScrollBar.showAll(), this.table.scenegraph.updateNextFrame());
}
hideHorizontalScrollBar() {
var _a;
const visible1 = this.table.theme.scrollStyle.visible, horizontalVisible = null !== (_a = this.table.theme.scrollStyle.horizontalVisible) && void 0 !== _a ? _a : visible1;
"focus" !== horizontalVisible && "scrolling" !== horizontalVisible || (this.hScrollBar.setAttribute("visible", !1),
this.hScrollBar.hideAll(), this.frozenHScrollBar.setAttribute("visible", !1), this.frozenHScrollBar.hideAll(),
this.rightFrozenHScrollBar.setAttribute("visible", !1), this.rightFrozenHScrollBar.hideAll(),
this._horizontalScrollBarTarget = void 0, this.table.scenegraph.updateNextFrame());
}
showHorizontalScrollBar(target = "all") {
var _a;
const visible1 = this.table.theme.scrollStyle.visible, horizontalVisible = null !== (_a = this.table.theme.scrollStyle.horizontalVisible) && void 0 !== _a ? _a : visible1;
if ("focus" !== horizontalVisible && "scrolling" !== horizontalVisible) return;
if (this._horizontalScrollBarTarget === target) return;
this._horizontalScrollBarTarget = target;
const showFrozen = "all" === target || "frozen" === target, showRightFrozen = "all" === target || "rightFrozen" === target, bodyVisible = ("all" === target || "body" === target) && this.hScrollBar.attribute.width > 0;
this.hScrollBar.setAttribute("visible", bodyVisible), bodyVisible ? this.hScrollBar.showAll() : this.hScrollBar.hideAll();
const frozenVisible = showFrozen && this.frozenHScrollBar.attribute.width > 0;
this.frozenHScrollBar.setAttribute("visible", frozenVisible), frozenVisible ? this.frozenHScrollBar.showAll() : this.frozenHScrollBar.hideAll();
const rightFrozenVisible = showRightFrozen && this.rightFrozenHScrollBar.attribute.width > 0;
this.rightFrozenHScrollBar.setAttribute("visible", rightFrozenVisible), rightFrozenVisible ? this.rightFrozenHScrollBar.showAll() : this.rightFrozenHScrollBar.hideAll(),
this.table.scenegraph.updateNextFrame();
}
updateVerticalScrollBarPos(topRatio) {
const range = this.vScrollBar.attribute.range, size = range[1] - range[0], range0 = topRatio * (1 - size);
this.vScrollBar.setAttribute("range", [ range0, range0 + size ]);
const bounds = this.vScrollBar.AABBBounds && this.vScrollBar.globalAABBBounds;
this.vScrollBar._viewPosition = {
x: bounds.x1,
y: bounds.y1
};
}
updateHorizontalScrollBarPos(leftRatio) {
const range = this.hScrollBar.attribute.range, size = range[1] - range[0], range0 = leftRatio * (1 - size);
this.hScrollBar.setAttribute("range", [ range0, range0 + size ]);
const bounds = this.hScrollBar.AABBBounds && this.hScrollBar.globalAABBBounds;
this.hScrollBar._viewPosition = {
x: bounds.x1,
y: bounds.y1
};
}
updateFrozenHorizontalScrollBarPos(leftRatio) {
const range = this.frozenHScrollBar.attribute.range, size = range[1] - range[0], range0 = leftRatio * (1 - size);
this.frozenHScrollBar.setAttribute("range", [ range0, range0 + size ]);
const bounds = this.frozenHScrollBar.AABBBounds && this.frozenHScrollBar.globalAABBBounds;
this.frozenHScrollBar._viewPosition = {
x: bounds.x1,
y: bounds.y1
};
}
updateRightFrozenHorizontalScrollBarPos(leftRatio) {
const range = this.rightFrozenHScrollBar.attribute.range, size = range[1] - range[0], range0 = leftRatio * (1 - size);
this.rightFrozenHScrollBar.setAttribute("range", [ range0, range0 + size ]);
const bounds = this.rightFrozenHScrollBar.AABBBounds && this.rightFrozenHScrollBar.globalAABBBounds;
this.rightFrozenHScrollBar._viewPosition = {
x: bounds.x1,
y: bounds.y1
};
}
updateStyle() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
const theme = this.table.theme, scrollRailColor = null === (_a = theme.scrollStyle) || void 0 === _a ? void 0 : _a.scrollRailColor, scrollSliderColor = null === (_b = theme.scrollStyle) || void 0 === _b ? void 0 : _b.scrollSliderColor, scrollSliderCornerRadius = null === (_c = theme.scrollStyle) || void 0 === _c ? void 0 : _c.scrollSliderCornerRadius, width = null === (_d = theme.scrollStyle) || void 0 === _d ? void 0 : _d.width, horizontalPadding = null === (_e = theme.scrollStyle) || void 0 === _e ? void 0 : _e.horizontalPadding, verticalPadding = null === (_f = theme.scrollStyle) || void 0 === _f ? void 0 : _f.verticalPadding;
let sliderStyle;
sliderStyle = isValid(scrollSliderCornerRadius) ? {
cornerRadius: scrollSliderCornerRadius,
fill: scrollSliderColor
} : {
fill: scrollSliderColor
}, this.hScrollBar.setAttributes({
height: width,
padding: horizontalPadding,
railStyle: {
fill: scrollRailColor
},
sliderStyle: sliderStyle
}), this.vScrollBar.setAttributes({
width: width,
padding: verticalPadding,
railStyle: {
fill: scrollRailColor
},
sliderStyle: sliderStyle
}), this.frozenHScrollBar.setAttributes({
height: width,
padding: horizontalPadding,
railStyle: {
fill: scrollRailColor
},
sliderStyle: sliderStyle
}), this.rightFrozenHScrollBar.setAttributes({
height: width,
padding: horizontalPadding,
railStyle: {
fill: scrollRailColor
},
sliderStyle: sliderStyle
});
const columnResizeColor = null === (_g = theme.columnResize) || void 0 === _g ? void 0 : _g.lineColor, columnResizeWidth = null === (_h = theme.columnResize) || void 0 === _h ? void 0 : _h.lineWidth, columnResizeBgColor = null === (_j = theme.columnResize) || void 0 === _j ? void 0 : _j.bgColor, columnResizeBgWidth = null === (_k = theme.columnResize) || void 0 === _k ? void 0 : _k.width;
this.columnResizeLine.setAttributes({
stroke: columnResizeColor,
lineWidth: columnResizeWidth
}), this.columnResizeBgLine = createLine({
stroke: columnResizeBgColor,
lineWidth: columnResizeBgWidth
});
const labelColor = null === (_l = theme.columnResize) || void 0 === _l ? void 0 : _l.labelColor, labelFontSize = null === (_m = theme.columnResize) || void 0 === _m ? void 0 : _m.labelFontSize, labelFontFamily = null === (_o = theme.columnResize) || void 0 === _o ? void 0 : _o.labelFontFamily, labelBackgroundFill = null === (_p = theme.columnResize) || void 0 === _p ? void 0 : _p.labelBackgroundFill, labelBackgroundCornerRadius = null === (_q = theme.columnResize) || void 0 === _q ? void 0 : _q.labelBackgroundCornerRadius, labelVisible = null === (_s = null === (_r = theme.columnResize) || void 0 === _r ? void 0 : _r.labelVisible) || void 0 === _s || _s;
this.labelVisible = labelVisible, this.columnResizeLabel.lastChild.setAttributes({
fontSize: labelFontSize,
fill: labelColor,
fontFamily: labelFontFamily,
dy: -labelFontSize / 2
}), this.columnResizeLabel.firstChild.setAttributes({
fill: labelBackgroundFill,
width: 5 * labelFontSize * .8,
height: labelFontSize + 8,
cornerRadius: labelBackgroundCornerRadius,
dy: -labelFontSize / 2 - 4
}), this.rowResizeLabel.lastChild.setAttributes({
fontSize: labelFontSize,
fill: labelColor,
fontFamily: labelFontFamily,
dy: -labelFontSize / 2
}), this.rowResizeLabel.firstChild.setAttributes({
fill: labelBackgroundFill,
width: 5 * labelFontSize * .8,
height: labelFontSize + 8,
cornerRadius: labelBackgroundCornerRadius,
dy: -labelFontSize / 2 - 4
});
const shadowWidth = null === (_u = null === (_t = theme.frozenColumnLine) || void 0 === _t ? void 0 : _t.shadow) || void 0 === _u ? void 0 : _u.width, shadowStartColor = null === (_w = null === (_v = theme.frozenColumnLine) || void 0 === _v ? void 0 : _v.shadow) || void 0 === _w ? void 0 : _w.startColor, shadowEndColor = null === (_y = null === (_x = theme.frozenColumnLine) || void 0 === _x ? void 0 : _x.shadow) || void 0 === _y ? void 0 : _y.endColor;
this.frozenShadowLine.setAttributes({
width: shadowWidth,
fill: {
gradient: "linear",
x0: 0,
y0: 0,
x1: 1,
y1: 0,
stops: [ {
color: shadowStartColor,
offset: 0
}, {
color: shadowEndColor,
offset: 1
} ]
}
}), this.rightFrozenShadowLine.setAttributes({
width: shadowWidth,
fill: {
gradient: "linear",
x0: 0,
y0: 0,
x1: 1,
y1: 0,
stops: [ {
color: shadowEndColor,
offset: 0
}, {
color: shadowStartColor,
offset: 1
} ]
}
}), this.cellMover.updateStyle();
}
}
//# sourceMappingURL=table-component.js.map