diff --git a/src/components/columnsBar.ts b/src/components/columnsBar.ts index d45424e..f65956a 100644 --- a/src/components/columnsBar.ts +++ b/src/components/columnsBar.ts @@ -24,6 +24,8 @@ export class ColumnsBar { 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 @@ -49,17 +51,17 @@ export class ColumnsBar { return false } - private getYCoordWithOffset(renderBox: RenderBox): number { - const {y} = renderBox + // private getYCoordWithOffset(renderBox: RenderBox): number { + // const {y} = renderBox - return y + this.root.toolbarHeight - } + // return y + this.root.toolbarHeight + // } - private getXCoordWithOffset(renderBox: RenderBox): number { - const {x} = renderBox + // private getXCoordWithOffset(renderBox: RenderBox): number { + // const {x} = renderBox - return x - } + // return x + // } private renderText(column: number, renderBox: RenderBox) { const { width, x } = renderBox @@ -74,17 +76,16 @@ export class ColumnsBar { private renderRect(column: number, renderBox: RenderBox) { const { width, x } = renderBox - const { selectedCell } = this.root.selection - const isColSelected = this.isColumnSelected(column) - console.log(selectedCell) - this.ctx.fillStyle = isColSelected ? this.root.styles.cells.selectedBackground : 'white' this.ctx.strokeStyle = 'black' - this.ctx.lineWidth = this.resizerWidth - this.ctx.fillRect(x - this.root.viewport.left + 1, 1, width - 1, this.height - 1) - this.ctx.strokeRect(x - this.root.viewport.left, 0, width, this.height) + 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) { @@ -101,7 +102,16 @@ export class ColumnsBar { 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) } } diff --git a/src/components/editor.ts b/src/components/editor.ts index 9c4cb9d..41b790c 100644 --- a/src/components/editor.ts +++ b/src/components/editor.ts @@ -29,7 +29,7 @@ export class Editor { this.element.classList.remove("hide"); this.element.style.top = y - this.root.viewport.top + this.root.columnsBarHeight + "px"; - this.element.style.left = x - this.root.viewport.left + "px"; + this.element.style.left = x - this.root.viewport.left + this.root.rowsBarWidth + "px"; this.element.style.width = width + "px"; this.element.style.height = height + "px"; this.element.style.display = "block"; diff --git a/src/components/rowsBar.ts b/src/components/rowsBar.ts index 362bc0f..7777fef 100644 --- a/src/components/rowsBar.ts +++ b/src/components/rowsBar.ts @@ -24,6 +24,8 @@ export class RowsBar { element.style.height = this.root.viewProps.height + 'px' element.style.width = this.width + 'px' element.style.display = 'block' + element.style.borderTop = '1px solid black' + // element.style.boxSizing = 'border-box' element.width = this.width @@ -51,13 +53,13 @@ export class RowsBar { private renderText(row: number, renderBox: RenderBox) { - const { y, height } = renderBox + const { y, height } = renderBox this.ctx.fillStyle = 'black' - this.ctx.textAlign = 'left' + this.ctx.textAlign = 'center' this.ctx.textBaseline = 'middle' this.ctx.font = '16px Arial' - this.ctx.fillText(this.root.config.rows[row].title, 0 + 2, y - this.root.viewport.top + height / 2) + this.ctx.fillText(this.root.config.rows[row].title, this.width / 2, y - this.root.viewport.top + height / 2) } private renderRect(column: number, renderBox: RenderBox) { @@ -69,8 +71,11 @@ export class RowsBar { this.ctx.fillStyle = isRowSeleted ? this.root.styles.cells.selectedBackground : 'white' this.ctx.strokeStyle = 'black' this.ctx.lineWidth = this.resizerHeight - this.ctx.fillRect(0 + 1, y - this.root.viewport.top, this.width + 1, height) - this.ctx.strokeRect(0, y - this.root.viewport.top, this.width - 1, height) + + const specialY = y - this.root.viewport.top + + this.ctx.fillRect(0, specialY - 1, this.width, height ) + this.ctx.strokeRect(0, specialY - 1, this.width, height ) } private renderSingleRow(row: number) { @@ -87,9 +92,17 @@ export class RowsBar { const lastRowIdx = this.root.viewport.lastRow + 3; const firstRowIdx = this.root.viewport.firstRow; - for (let col = firstRowIdx; col <= lastRowIdx; col++) { - this.renderSingleRow(col) - console.log(123) + this.ctx.beginPath(); + this.ctx.moveTo(0, 0); + this.ctx.strokeStyle = 'black'; + this.ctx.lineWidth = 16; + this.ctx.lineTo(35, 0); + this.ctx.closePath(); + this.ctx.stroke(); + + for (let row = firstRowIdx; row <= lastRowIdx; row++) { + if(!this.root.config.rows[row]) break; + this.renderSingleRow(row) } } diff --git a/src/index.ts b/src/index.ts index 9d6bf4b..8425254 100644 --- a/src/index.ts +++ b/src/index.ts @@ -20,31 +20,4 @@ function loadDataFromLS() { } saveButton.addEventListener("click", saveDataToLS); -loadButton.addEventListener("click", loadDataFromLS); -sheet.changeCellStyles( - { column: 1, row: 1 }, - { - background: "black", - borderColor: "white", - fontColor: "white", - fontSize: 20, - selectedBackground: "green", - selectedFontColor: "black", - }, -); - - -setTimeout(() => { - const text = 'Test123' - - const cellPosition = { - column: 1, - row: 1 - } - - sheet.changeCellValues(cellPosition, { - displayValue: text, - resultValue: text, - value: text - }) -}, 4000) \ No newline at end of file +loadButton.addEventListener("click", loadDataFromLS); \ No newline at end of file