feat(spreadsheet): C 격자 — 엑셀 「자동」 색(검정 글 · 검정 선 · 흰 채움)이 테마를 따름
엑셀에서 붙여넣은 칸의 글자색 #000000 · 테두리색 검정이 저장돼 어두운 테마에서 검정 글이 안 보이던 문제. 그릴 때만 「자동」으로 봄(저장 값은 그대로). - 글자색 · 테두리색: #000 · #000000 · #FF000000 · rgb(0,0,0) · black · windowtext · auto → 테마 글자색(--aislo-grid-fg) 을 따름 - 채움: #fff · #ffffff · white · window → 채움 없음(테마 바탕이 비침) - 다른 색(#c00000 · #FFFF00 · #1F3864 등)과 조건부 서식 색은 그대로 - 테두리 기본색을 currentColor 에서 --aislo-grid-fg 로 — 글자색이 빨강이어도 선은 자동색 - 숫자 형식 [Black] 색도 자동으로 봄 ORCA(시험 틀 · localhost:5181 과 100.72.32.27:5181 둘 다) — 밝은: 자동 칸 글 rgb(51,51,51) · 바탕 rgb(255,255,255) · 선 rgb(51,51,51). 어두운: 글 rgb(228,224,240) · 바탕 rgb(37,31,56) · 선 rgb(228,224,240). 지정색 칸(#c00000 글 · #FFFF00 채움 · #0000FF 선 · #1F3864 · #D9E1F2)은 두 테마에서 값 그대로. 붙여넣기 쪽은 안 바꿔도 됨(저장 값 그대로 두고 그릴 때만). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VVM3xZ1aUPcUTuW2WZSnwg
This commit is contained in:
@@ -91,10 +91,35 @@ export function resolveBoxBorders(
|
||||
};
|
||||
}
|
||||
|
||||
/** 색 글을 비교용으로 정리 — 공백 · 대소문자 · `#` 3자리 · ARGB(`#FF000000`) · `rgb(0,0,0)` 를 `#rrggbb` 로. */
|
||||
function normalizeColor(c: string): string {
|
||||
const t = c.trim().toLowerCase().replace(/\s+/g, "");
|
||||
const rgb = /^rgba?\((\d+),(\d+),(\d+)(?:,1(?:\.0+)?)?\)$/.exec(t);
|
||||
if (rgb)
|
||||
return `#${[rgb[1], rgb[2], rgb[3]].map((n) => Number(n).toString(16).padStart(2, "0")).join("")}`;
|
||||
if (/^#[0-9a-f]{3}$/.test(t)) return `#${t[1]}${t[1]}${t[2]}${t[2]}${t[3]}${t[3]}`;
|
||||
if (/^#ff[0-9a-f]{6}$/.test(t)) return `#${t.slice(3)}`;
|
||||
return t;
|
||||
}
|
||||
|
||||
/** 엑셀 「자동」 글자색 · 테두리색 — 검정 · windowtext · auto 는 테마 글자색을 따름(저장 값은 그대로 · 그릴 때만). */
|
||||
export function isAutoInk(c: string | undefined): boolean {
|
||||
if (!c) return true;
|
||||
const n = normalizeColor(c);
|
||||
return n === "#000000" || n === "black" || n === "windowtext" || n === "auto";
|
||||
}
|
||||
|
||||
/** 엑셀 「자동」 채움 — 흰색 · window 는 채움 없음처럼(테마 바탕이 비침). */
|
||||
export function isAutoPaper(c: string | undefined): boolean {
|
||||
if (!c) return true;
|
||||
const n = normalizeColor(c);
|
||||
return n === "#ffffff" || n === "white" || n === "window";
|
||||
}
|
||||
|
||||
/** 빈 글 = 인라인 테두리를 안 그림(css `aislo-grid--gridlines` 눈금선이 비쳐 보임). `scale` = 확대 · 축소 배율(선 굵기도 같이). */
|
||||
function borderCss(side: BorderSide | undefined, scale: number): string {
|
||||
if (!side) return "";
|
||||
const color = side.색 ?? "currentColor";
|
||||
const color = isAutoInk(side.색) ? "var(--aislo-grid-fg)" : (side.색 as string);
|
||||
const w = (px: number): number => Math.max(1, Math.round(px * scale));
|
||||
switch (side.선) {
|
||||
case "hair":
|
||||
@@ -147,8 +172,8 @@ export function applyCellStyle(
|
||||
s.textDecorationLine = [style.밑줄 && "underline", style.취소선 && "line-through"]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
s.color = style.글자색 ?? "";
|
||||
s.backgroundColor = style.채움 ?? "";
|
||||
s.color = isAutoInk(style.글자색) ? "" : (style.글자색 as string);
|
||||
s.backgroundColor = isAutoPaper(style.채움) ? "" : (style.채움 as string);
|
||||
s.borderTop = borderCss(borders.위, scale);
|
||||
s.borderLeft = borderCss(borders.왼, scale);
|
||||
s.borderBottom = borderCss(borders.아래, scale);
|
||||
|
||||
@@ -16,6 +16,7 @@ import { colIndex, colName, parseA1, parseRange, toA1 } from "./spreadsheet_addr
|
||||
import {
|
||||
applyCellStyle,
|
||||
cellStyleAt,
|
||||
isAutoInk,
|
||||
resolveBoxBorders,
|
||||
setCellText,
|
||||
type ResolvedBorders,
|
||||
@@ -460,7 +461,8 @@ export function createGrid(ctx: SpreadsheetContext): GridHandle {
|
||||
const display = cellDisplay(ctx, sheet, r0, c0, style.가로 ?? "general", style.형식);
|
||||
applyCellStyle(cellEl, style, borders, display.hAlign, zoom);
|
||||
// 조건부 서식 글자색이 이기고(엑셀과 같음) · 없으면 숫자 형식([Red] 등)이 정한 색.
|
||||
if (display.color && !condStyle?.글자색) cellEl.style.color = display.color;
|
||||
if (display.color && !condStyle?.글자색 && !isAutoInk(display.color))
|
||||
cellEl.style.color = display.color;
|
||||
const comment = sheet.comments?.[addr];
|
||||
// 수는 칸 폭보다 길면 `#####`(엑셀과 같음) · 글은 지금처럼 줄임표.
|
||||
let text = display.text;
|
||||
|
||||
Reference in New Issue
Block a user