diff --git a/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts b/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts index bf4fa60..9fdafee 100644 --- a/webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts +++ b/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; } diff --git a/webapp/app.ironcalc.com/frontend/package-lock.json b/webapp/app.ironcalc.com/frontend/package-lock.json index 5a000f6..e99183f 100644 --- a/webapp/app.ironcalc.com/frontend/package-lock.json +++ b/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" - } } } }