Add in-app help, formula reference outlines, underline and auto-closing
- Help dialog (?, F1, Datei > Hilfe): user topics, all shortcuts and the formula functions with one search over everything. Topics and shortcuts are plain data in data/help.ts; the function list comes from codeReference.ts so new built-ins appear by themselves. - While a formula is edited, the grid outlines each referenced cell/range in the colour of its position in the text, and the outline can be dragged to move or resize the reference, as in Excel. Point-mode picks (click, drag, arrow keys) are outlined too, so keyboard picking is no longer blind. - Underline as a cell format, plus Mod+Shift+B/I/U toggles that switch on unless every selected cell already has the format. - A formula committed with open parentheses or an open text literal gets the missing closers appended; anything that still doesn't parse is left alone so the usual error shows instead of a guess. - Cells and tables with a fill but no text colour get dark or light text by WCAG contrast instead of the theme colour (no black on black).
This commit is contained in:
@@ -165,3 +165,35 @@ export function rawString(v: CellValue): string {
|
||||
export function isNumeric(v: CellValue): boolean {
|
||||
return typeof v === 'number' && Number.isFinite(v);
|
||||
}
|
||||
|
||||
// ---- readable text on a fill ---------------------------------------------
|
||||
|
||||
const DARK_TEXT = '#1d1d1f';
|
||||
const LIGHT_TEXT = '#f5f5f7';
|
||||
|
||||
/** sRGB channel (0–255) → linear light, per WCAG 2.x */
|
||||
const linear = (c: number) => {
|
||||
const s = c / 255;
|
||||
return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
|
||||
};
|
||||
|
||||
/**
|
||||
* Text colour that stays readable on the fill `bg` (#rgb, #rgba, #rrggbb,
|
||||
* #rrggbbaa): dark or light, whichever contrasts more (WCAG luminance).
|
||||
* Used when a cell or table has a fill but no text colour of its own -- the
|
||||
* theme's text colour would otherwise land on it regardless (black text on
|
||||
* a black fill). `null` when `bg` can't be read or is mostly transparent
|
||||
* (the theme's surface shows through, its text colour already fits).
|
||||
*/
|
||||
export function readableTextOn(bg: string | undefined | null): string | null {
|
||||
const m = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec((bg ?? '').trim());
|
||||
if (!m) return null;
|
||||
let hex = m[1];
|
||||
if (hex.length <= 4) hex = [...hex].map((ch) => ch + ch).join('');
|
||||
const [r, g, b] = [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16));
|
||||
const alpha = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1;
|
||||
if (alpha < 0.5) return null;
|
||||
const lum = 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
|
||||
// contrast with black vs. with white: (L + 0.05) / 0.05 vs 1.05 / (L + 0.05)
|
||||
return (lum + 0.05) / 0.05 >= 1.05 / (lum + 0.05) ? DARK_TEXT : LIGHT_TEXT;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user