125 lines
3.4 KiB
TypeScript
125 lines
3.4 KiB
TypeScript
import Spreadsheet, { RenderBox } from "../main";
|
|
|
|
export class ColumnsBar {
|
|
public element: HTMLCanvasElement;
|
|
private root: Spreadsheet;
|
|
public height: number = 32;
|
|
public width: number;
|
|
// private resizerWidth = 1;
|
|
ctx: CanvasRenderingContext2D;
|
|
|
|
constructor(root: Spreadsheet) {
|
|
this.root = root;
|
|
this.element = this.createElement();
|
|
const ctx = this.element.getContext("2d");
|
|
if (!ctx) throw new Error("Enable hardware acceleration");
|
|
this.ctx = ctx;
|
|
|
|
this.width = this.root.viewProps.width;
|
|
}
|
|
|
|
private createElement(): HTMLCanvasElement {
|
|
const element = document.createElement("canvas");
|
|
element.style.position = "absolute";
|
|
element.style.height = this.height + "px";
|
|
element.style.width = this.root.viewProps.width + "px";
|
|
element.style.display = "block";
|
|
element.style.borderLeft = "1px solid black";
|
|
// element.style.boxSizing = 'border-box'
|
|
|
|
element.width = this.root.viewProps.width;
|
|
element.height = this.height;
|
|
return element;
|
|
}
|
|
|
|
public setElementPosition(top: number, left: number) {
|
|
this.element.style.top = top + "px";
|
|
this.element.style.left = left + "px";
|
|
}
|
|
|
|
private isColumnSelected(column: number): boolean {
|
|
const { selectedCell, selectedRange } = this.root.selection;
|
|
if (selectedCell && selectedCell.column === column) return true;
|
|
if (selectedRange) {
|
|
const inRange =
|
|
column >=
|
|
Math.min(selectedRange.from.column, selectedRange.to.column) &&
|
|
column <= Math.max(selectedRange.from.column, selectedRange.to.column);
|
|
|
|
return inRange;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
// private getYCoordWithOffset(renderBox: RenderBox): number {
|
|
// const {y} = renderBox
|
|
|
|
// return y + this.root.toolbarHeight
|
|
// }
|
|
|
|
// private getXCoordWithOffset(renderBox: RenderBox): number {
|
|
// const {x} = renderBox
|
|
|
|
// return x
|
|
// }
|
|
|
|
private renderText(column: number, renderBox: RenderBox) {
|
|
const { width, x } = renderBox;
|
|
|
|
this.ctx.fillStyle = "black";
|
|
this.ctx.textAlign = "center";
|
|
this.ctx.textBaseline = "middle";
|
|
this.ctx.font = "16px Arial";
|
|
this.ctx.fillText(
|
|
this.root.config.columns[column].title,
|
|
x + width / 2 - this.root.viewport.left,
|
|
0 + this.height / 2,
|
|
);
|
|
}
|
|
|
|
private renderRect(column: number, renderBox: RenderBox) {
|
|
const { width, x } = renderBox;
|
|
|
|
const isColSelected = this.isColumnSelected(column);
|
|
|
|
this.ctx.fillStyle = isColSelected
|
|
? this.root.styles.cells.selectedBackground
|
|
: "white";
|
|
this.ctx.strokeStyle = "black";
|
|
this.ctx.lineWidth = 1;
|
|
|
|
const specialX = x - this.root.viewport.left;
|
|
|
|
this.ctx.fillRect(specialX - 1, 0, width, this.height);
|
|
this.ctx.strokeRect(specialX - 1, 0, width, this.height);
|
|
}
|
|
|
|
private renderSingleColumn(column: number) {
|
|
const renderBox = new RenderBox(this.root.config, {
|
|
row: 0,
|
|
column: column,
|
|
});
|
|
|
|
this.renderRect(column, renderBox);
|
|
this.renderText(column, renderBox);
|
|
}
|
|
|
|
public renderBar() {
|
|
const lastColIdx = this.root.viewport.lastCol + 3;
|
|
const firstColIdx = this.root.viewport.firstCol;
|
|
|
|
this.ctx.beginPath();
|
|
this.ctx.strokeStyle = "black";
|
|
this.ctx.lineWidth = 1;
|
|
this.ctx.moveTo(0, 0);
|
|
this.ctx.lineTo(0, this.height);
|
|
this.ctx.closePath();
|
|
this.ctx.stroke();
|
|
|
|
for (let col = firstColIdx; col <= lastColIdx; col++) {
|
|
if (!this.root.config.columns[col]) break;
|
|
this.renderSingleColumn(col);
|
|
}
|
|
}
|
|
}
|