e-virt-table
Version:
A powerful data table based on canvas. You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc.
268 lines • 8.98 kB
JavaScript
export default class Overlayer {
constructor(ctx) {
Object.defineProperty(this, "ctx", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
this.ctx = ctx;
}
draw() {
const overlayer = this.getContainer();
this.ctx.emit('overlayerChange', overlayer);
}
destroy() {
this.ctx.emit('overlayerChange', {
style: {},
views: [],
});
}
getContainer() {
const header = this.getHeader();
const body = this.getBody();
const footer = this.getFooter();
let views = [];
// 不是固定底部的时候，不用加入footer，因为footer是在body的下面的
const { FOOTER_FIXED, FOOTER_POSITION } = this.ctx.config;
if (!FOOTER_FIXED) {
views = [header, body];
}
else {
if (FOOTER_POSITION === 'top') {
views = [header, footer, body];
}
else {
views = [header, body, footer];
}
}
return {
views,
};
}
getHeader() {
const { fixedLeftWidth, fixedRightWidth: _fixedRightWidth, config: { SCROLLER_TRACK_SIZE, CSS_PREFIX }, } = this.ctx;
const { visibleWidth, visibleHeight, renderCellHeaders } = this.ctx.header;
let centerCells = [];
let leftCells = [];
let rightCells = [];
renderCellHeaders.forEach((cellHeader) => {
if (cellHeader.render) {
if (cellHeader.fixed === 'left') {
leftCells.push(cellHeader);
}
else if (cellHeader.fixed === 'right') {
rightCells.push(cellHeader);
}
else {
centerCells.push(cellHeader);
}
}
});
// 减去滚动条的宽度
const fixedRightWidth = _fixedRightWidth - SCROLLER_TRACK_SIZE;
const left = {
key: 'left',
style: {
position: 'absolute',
top: `${0}px`,
left: `${0}px`,
overflow: 'hidden',
width: `${fixedLeftWidth}px`,
height: `${visibleHeight}px`,
},
cells: leftCells,
};
const center = {
key: 'center',
style: {
position: 'absolute',
top: `${0}px`,
left: `${fixedLeftWidth}px`,
overflow: 'hidden',
width: `${visibleWidth - fixedLeftWidth - fixedRightWidth + 1}px`,
height: `${visibleHeight}px`,
},
cells: centerCells,
};
const right = {
key: 'right',
style: {
position: 'absolute',
top: `${0}px`,
right: `${0}px`,
overflow: 'hidden',
width: `${fixedRightWidth + 1}px`,
height: `${visibleHeight}px`,
},
cells: rightCells,
};
const header = {
type: 'header',
class: `${CSS_PREFIX}-overlayer-header`,
style: {
position: 'relative',
overflow: 'hidden',
width: `${visibleWidth}px`,
height: `${visibleHeight}px`,
},
views: [left, center, right],
};
return header;
}
getBody() {
const centerCells = [];
const leftCells = [];
const rightCells = [];
let renderRows = this.ctx.body.renderRows;
// 合计如果不是固定在底部，就加入到渲染行中
if (!this.ctx.config.FOOTER_FIXED) {
renderRows = renderRows.concat(this.ctx.footer.renderRows);
}
renderRows.forEach((row) => {
row.cells.forEach((cell) => {
if (cell.cellType === 'footer') {
cell.render = cell.renderFooter;
}
if (cell.render) {
if (cell.fixed === 'left') {
leftCells.push(cell);
}
else if (cell.fixed === 'right') {
rightCells.push(cell);
}
else {
centerCells.push(cell);
}
}
});
});
const { fixedLeftWidth, fixedRightWidth: _fixedRightWidth, config: { SCROLLER_TRACK_SIZE, CSS_PREFIX }, } = this.ctx;
const { visibleWidth, visibleHeight } = this.ctx.body;
// 减去滚动条的宽度
const fixedRightWidth = _fixedRightWidth - SCROLLER_TRACK_SIZE;
const left = {
key: 'left',
style: {
position: 'absolute',
top: `${0.5}px`,
left: `${0.5}px`,
overflow: 'hidden',
width: `${fixedLeftWidth}px`,
height: `${visibleHeight}px`,
},
cells: leftCells,
};
const center = {
key: 'center',
style: {
position: 'absolute',
top: `${0.5}px`,
left: `${fixedLeftWidth - 0.5}px`,
overflow: 'hidden',
width: `${visibleWidth - fixedLeftWidth - fixedRightWidth}px`,
height: `${visibleHeight}px`,
},
cells: centerCells,
};
const right = {
key: 'right',
style: {
position: 'absolute',
top: `${0}px`,
right: `${0}px`,
overflow: 'hidden',
width: `${fixedRightWidth}px`,
height: `${visibleHeight}px`,
},
cells: rightCells,
};
const body = {
type: 'body',
class: `${CSS_PREFIX}-overlayer-body`,
style: {
position: 'relative',
overflow: 'hidden',
width: `${visibleWidth}px`,
height: `${visibleHeight}px`,
},
views: [left, center, right],
};
return body;
}
getFooter() {
const centerCells = [];
const leftCells = [];
const rightCells = [];
this.ctx.footer.renderRows.forEach((row) => {
row.cells.forEach((cell) => {
if (cell.cellType === 'footer' && cell.renderFooter) {
// 把转renderFooter成render统一出口
cell.render = cell.renderFooter;
if (cell.fixed === 'left') {
leftCells.push(cell);
}
else if (cell.fixed === 'right') {
rightCells.push(cell);
}
else {
centerCells.push(cell);
}
}
});
});
const { fixedLeftWidth, fixedRightWidth: _fixedRightWidth, config: { SCROLLER_TRACK_SIZE, CSS_PREFIX }, } = this.ctx;
const { visibleWidth, visibleHeight } = this.ctx.footer;
// 减去滚动条的宽度
const fixedRightWidth = _fixedRightWidth - SCROLLER_TRACK_SIZE;
const left = {
key: 'left',
style: {
position: 'absolute',
top: `${0.5}px`,
left: `${0.5}px`,
overflow: 'hidden',
width: `${fixedLeftWidth}px`,
height: `${visibleHeight}px`,
},
cells: leftCells,
};
const center = {
key: 'center',
style: {
position: 'absolute',
top: `${0.5}px`,
left: `${fixedLeftWidth - 0.5}px`,
overflow: 'hidden',
width: `${visibleWidth - fixedLeftWidth - fixedRightWidth}px`,
height: `${visibleHeight}px`,
},
cells: centerCells,
};
const right = {
key: 'right',
style: {
position: 'absolute',
top: `${0.5}px`,
right: `${0.5}px`,
overflow: 'hidden',
width: `${fixedRightWidth}px`,
height: `${visibleHeight}px`,
},
cells: rightCells,
};
const footer = {
type: 'footer',
class: `${CSS_PREFIX}-overlayer-footer`,
style: {
position: 'relative',
overflow: 'hidden',
width: `${visibleWidth}px`,
height: `${visibleHeight}px`,
},
views: [left, center, right],
};
return footer;
}
}
//# sourceMappingURL=Overlayer.js.map