update: use different header styling for full column or row selection

webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts

@@ -1,5 +1,6 @@
 import type { CellStyle, Model } from "@ironcalc/wasm";
 import { columnNameFromNumber } from "@ironcalc/wasm";
+import { theme } from "../../theme";
 import { getColor } from "../Editor/util";
 import type { Cell } from "../types";
 import type { WorkbookState } from "../workbookState";
@@ -721,7 +722,7 @@ export default class WorksheetCanvas {
     const style = this.model.getCellStyle(selectedSheet, row, column);
 
     // first the background
-    let backgroundColor = "#FFFFFF";
+    let backgroundColor = theme.palette.common.white;
     if (style.fill.fg_color) {
       backgroundColor = style.fill.fg_color;
     }
@@ -1036,14 +1037,21 @@ export default class WorksheetCanvas {
     width: number,
     div: HTMLDivElement,
     selected: boolean,
+    isFullColumnSelected: boolean,
   ): void {
     div.style.boxSizing = "border-box";
     div.style.width = `${width}px`;
     div.style.height = `${headerRowHeight}px`;
     div.style.backgroundColor = selected
-      ? headerSelectedBackground
+      ? isFullColumnSelected
+        ? theme.palette.primary.main
+        : headerSelectedBackground
       : headerBackground;
-    div.style.color = selected ? headerSelectedColor : headerTextColor;
+    div.style.color = selected
+      ? isFullColumnSelected
+        ? theme.palette.common.white
+        : headerSelectedColor
+      : headerTextColor;
     div.style.fontWeight = "bold";
     div.style.borderLeft = `1px solid ${headerBorderColor}`;
     div.style.borderTop = `1px solid ${headerBorderColor}`;
@@ -1071,9 +1079,15 @@ export default class WorksheetCanvas {
     const { sheet: selectedSheet, range } = this.model.getSelectedView();
     let rowStart = range[0];
     let rowEnd = range[2];
+    let columnStart = range[1];
+    let columnEnd = range[3];
     if (rowStart > rowEnd) {
       [rowStart, rowEnd] = [rowEnd, rowStart];
     }
+    if (columnStart > columnEnd) {
+      [columnStart, columnEnd] = [columnEnd, columnStart];
+    }
+    const isFullRowSelected = columnStart === 1 && columnEnd === LAST_COLUMN;
     const context = this.ctx;
 
     let topLeftCornerY = headerRowHeight + 0.5;
@@ -1085,7 +1099,9 @@ export default class WorksheetCanvas {
       context.fillStyle = headerBorderColor;
       context.fillRect(0.5, topLeftCornerY, headerColumnWidth, rowHeight);
       context.fillStyle = selected
-        ? headerSelectedBackground
+        ? isFullRowSelected
+          ? theme.palette.primary.main
+          : headerSelectedBackground
         : headerBackground;
       context.fillRect(
         0.5,
@@ -1097,7 +1113,11 @@ export default class WorksheetCanvas {
         context.fillStyle = outlineColor;
         context.fillRect(headerColumnWidth - 1, topLeftCornerY, 1, rowHeight);
       }
-      context.fillStyle = selected ? headerSelectedColor : headerTextColor;
+      context.fillStyle = selected
+        ? isFullRowSelected
+          ? theme.palette.common.white
+          : headerSelectedColor
+        : headerTextColor;
       context.font = `bold 12px ${defaultCellFontFamily}`;
       context.fillText(
         `${row}`,
@@ -1122,11 +1142,17 @@ export default class WorksheetCanvas {
     const { columnHeaders } = this;
     let deltaX = 0;
     const { range } = this.model.getSelectedView();
+    let rowStart = range[0];
+    let rowEnd = range[2];
     let columnStart = range[1];
     let columnEnd = range[3];
     if (columnStart > columnEnd) {
       [columnStart, columnEnd] = [columnEnd, columnStart];
     }
+    if (rowStart > rowEnd) {
+      [rowStart, rowEnd] = [rowEnd, rowStart];
+    }
+    const isFullColumnSelected = rowStart === 1 && rowEnd === LAST_ROW;
     for (const header of columnHeaders.querySelectorAll(".column-header"))
       header.remove();
     for (const handle of columnHeaders.querySelectorAll(
@@ -1146,7 +1172,12 @@ export default class WorksheetCanvas {
     // Frozen headers
     for (let column = 1; column <= frozenColumns; column += 1) {
       const selected = column >= columnStart && column <= columnEnd;
-      deltaX += this.addColumnHeader(deltaX, column, selected);
+      deltaX += this.addColumnHeader(
+        deltaX,
+        column,
+        selected,
+        isFullColumnSelected,
+      );
     }
 
     if (frozenColumns !== 0) {
@@ -1162,7 +1193,12 @@ export default class WorksheetCanvas {
 
     for (let column = firstColumn; column <= lastColumn; column += 1) {
       const selected = column >= columnStart && column <= columnEnd;
-      deltaX += this.addColumnHeader(deltaX, column, selected);
+      deltaX += this.addColumnHeader(
+        deltaX,
+        column,
+        selected,
+        isFullColumnSelected,
+      );
     }
 
     columnHeaders.style.width = `${deltaX}px`;
@@ -1172,6 +1208,7 @@ export default class WorksheetCanvas {
     deltaX: number,
     column: number,
     selected: boolean,
+    isFullColumnSelected: boolean,
   ): number {
     const columnWidth = this.getColumnWidth(
       this.model.getSelectedSheet(),
@@ -1182,7 +1219,7 @@ export default class WorksheetCanvas {
     div.textContent = columnNameFromNumber(column);
     this.columnHeaders.insertBefore(div, null);
 
-    this.styleColumnHeader(columnWidth, div, selected);
+    this.styleColumnHeader(columnWidth, div, selected, isFullColumnSelected);
     this.addColumnResizeHandle(deltaX + columnWidth, column, columnWidth);
     return columnWidth;
   }

webapp/app.ironcalc.com/frontend/package-lock.json

@@ -91,6 +91,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -570,6 +571,7 @@
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
       "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -613,6 +615,7 @@
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
       "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -2026,6 +2029,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.4.tgz",
       "integrity": "sha512-tBFxBp9Nfyy5rsmefN+WXc1JeW/j2BpBHFdLZbEVfs9wn3E3NRFxwV0pJg8M1qQAexFpvz73hJXFofV0ZAu92A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -2122,6 +2126,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -2691,6 +2696,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2758,6 +2764,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2767,6 +2774,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -2978,6 +2986,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3023,6 +3032,7 @@
       "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -3113,21 +3123,6 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true,
       "license": "ISC"
-    },
-    "node_modules/yaml": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
-      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
-      "dev": true,
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
     }
   }
 }