Fixed view of col&row bars

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 {
+    // private getYCoordWithOffset(renderBox: RenderBox): number {
-        const {y} = renderBox
+    //     const {y} = renderBox
 
-        return y + this.root.toolbarHeight
+    //     return y + this.root.toolbarHeight
-    }
+    // }
 
-    private getXCoordWithOffset(renderBox: RenderBox): number {
+    // private getXCoordWithOffset(renderBox: RenderBox): number {
-        const {x} = renderBox
+    //     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.lineWidth = 1
-        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)
+        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)
         }
     }

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";

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.ctx.beginPath();
-            this.renderSingleRow(col)
+        this.ctx.moveTo(0, 0);
-            console.log(123)
+        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)
         }
     }
 

src/index.ts

@@ -21,30 +21,3 @@ 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)