Added selection highlight with alpha

src/components/sheet.ts

@@ -1,4 +1,4 @@
-import Spreadsheet, { CSS_PREFIX } from "../main";
+import Spreadsheet, { CSS_PREFIX, RenderBox } from "../main";
 import { Position } from "../modules/cell";
 
 /**
@@ -52,12 +52,58 @@ export class Sheet {
     this.root.data[row][column].render(this.root);
   }
 
+  getSelectionRange() {
+    const { selectedCell, selectedRange } = this.root.selection
+
+    if (!selectedCell && !selectedRange) return;
+    if (selectedRange) {
+
+      const startRow = Math.min(selectedRange.from.row, selectedRange.to.row)
+      const startCol = Math.min(selectedRange.from.column, selectedRange.to.column)
+      const lastRow = Math.max(selectedRange.from.row, selectedRange.to.row)
+      const lastCol = Math.max(selectedRange.from.column, selectedRange.to.column)
+
+      const startCellBox = new RenderBox(this.root.config, {row: startRow, column: startCol})
+
+      let width = 0
+      for (let col = startCol; col <= lastCol; col++) {
+        width += this.root.config.columns[col].width
+      }
+
+      let height = 0
+      for (let row = startRow; row <= lastRow; row++) {
+        height += this.root.config.rows[row].height
+      }
+
+      const x = startCellBox.x - this.root.viewport.left
+      const y = startCellBox.y - this.root.viewport.top
+
+      return { x, y, height, width }
+    }
+    if (!selectedRange && selectedCell) {
+      return new RenderBox(this.root.config, selectedCell)
+    }
+  }
+
+  renderSelectionRange(x: number, y: number, width: number, height: number) {
+
+    this.ctx.save()
+    this.ctx.strokeStyle = '#47d1ff'
+    this.ctx.lineWidth = 3
+    this.ctx.strokeRect(x, y, width, height)
+    this.ctx.fillStyle = '#7da8ff50'
+    this.ctx.fillRect(x, y, width, height)
+    this.ctx.restore()
+
+  }
+
   renderSheet() {
     const firstRowIdx = this.root.viewport.firstRow;
     const lastColIdx = this.root.viewport.lastCol + 3;
     const lastRowIdx = this.root.viewport.lastRow + 3;
     const firstColIdx = this.root.viewport.firstCol;
 
+
     for (let row = firstRowIdx; row <= lastRowIdx; row++) {
       for (let col = firstColIdx; col <= lastColIdx; col++) {
         if (!this.root.config.columns[col] || !this.root.config.rows[row])
@@ -66,5 +112,10 @@ export class Sheet {
         this.renderCell({ column: col, row });
       }
     }
+
+    const box = this.getSelectionRange()
+    if (!box) return;
+    const {height, width, x, y} = box
+    this.renderSelectionRange(x, y, width, height)
   }
 }

src/modules/cell.ts

@@ -118,28 +118,22 @@ export class Cell {
     const { height, width } = renderBox;
     const { ctx } = root;
 
-    const isCellSelected =
-      root.selection.selectedCell?.row === this.position.row &&
-      root.selection.selectedCell.column === this.position.column;
-    const isCellInRange = this.isCellInRange(root);
+    // const isCellSelected =
+    //   root.selection.selectedCell?.row === this.position.row &&
+    //   root.selection.selectedCell.column === this.position.column;
+    // const isCellInRange = this.isCellInRange(root);
     y -= root.viewport.top;
     x -= root.viewport.left;
 
     const styles = this.style ?? root.styles.cells;
 
     ctx.clearRect(x, y, width, height);
-    ctx.fillStyle =
-      isCellSelected || isCellInRange
-        ? styles.selectedBackground
-        : styles.background;
+    ctx.fillStyle = styles.background;
     ctx.strokeStyle = "black";
     ctx.fillRect(x, y, width - 1, height - 1);
     ctx.strokeRect(x, y, width, height);
 
-    ctx.fillStyle =
-      isCellSelected || isCellInRange
-        ? styles.selectedFontColor
-        : styles.fontColor;
+    ctx.fillStyle = styles.fontColor;
     ctx.textAlign = "left";
     ctx.font = `${styles.fontSize}px Arial`;
     ctx.textBaseline = "middle";