diff --git a/E03_StabSection/E03_StabSection_UI_Section.ts b/E03_StabSection/E03_StabSection_UI_Section.ts index a1bc668e5..4844b3694 100644 --- a/E03_StabSection/E03_StabSection_UI_Section.ts +++ b/E03_StabSection/E03_StabSection_UI_Section.ts @@ -11,6 +11,7 @@ import "./E03_StabSection_UI_Walls.css"; import "./E03_StabSection_UI_Support.css"; import { t } from "@ui/ui_template_locale"; import { el } from "@ui/ui_template_elements"; +import { tooltipBox } from "@ui/ui_template_hover_info"; import { legend, muted } from "./E03_StabSection_UI_Parts"; import { attachSvgZoomPan, type ZoomPanState } from "../A00_Common/b_svg_zoom_pan"; import { @@ -113,7 +114,8 @@ export interface SectionCanvas { export function createSectionCanvas(onPick: (index: number | null) => void): SectionCanvas { const root = el("div", { className: "e03-section" }); - const tip = el("div", { className: "e03-tip" }); + const tip = tooltipBox(""); + tip.classList.add("e03-tip"); let last: SectionDraw | null = null; let zoom: ZoomPanState | undefined; let zoomKey = ""; diff --git a/E03_StabSection/E03_StabSection_UI_Style.css b/E03_StabSection/E03_StabSection_UI_Style.css index 3c3d76134..f0de0ff7b 100644 --- a/E03_StabSection/E03_StabSection_UI_Style.css +++ b/E03_StabSection/E03_StabSection_UI_Style.css @@ -350,17 +350,11 @@ font-size: 11px; } -.e03-tip { +/* 값 풍선 모양은 툴팁 부품 — 자리만 */ +.e03-section .e03-tip { position: absolute; - pointer-events: none; - padding: 2px 6px; - border-radius: var(--radius-sm); - background: var(--color-surface); - border: 1px solid var(--color-border); - color: var(--color-text); - font-size: var(--text-body-sm); - white-space: nowrap; display: none; + white-space: nowrap; } /* ---- 우측 결과 ---- */ diff --git a/E04_Stab3D/E04_Stab3D_UI_Map.ts b/E04_Stab3D/E04_Stab3D_UI_Map.ts index 407511ee3..43c0d8435 100644 --- a/E04_Stab3D/E04_Stab3D_UI_Map.ts +++ b/E04_Stab3D/E04_Stab3D_UI_Map.ts @@ -6,6 +6,7 @@ * ========================================================================== */ import { el } from "@ui/ui_template_elements"; +import { tooltipBox } from "@ui/ui_template_hover_info"; import { t } from "@ui/ui_template_locale"; import { cutCells, footprintCenter } from "./logic/E04_Stab3D_Mesh"; import { @@ -50,7 +51,8 @@ const css = (name: string, fallback: string): string => export function createPlanMap(): PlanMap { const root = el("div", { className: "e04-map" }); const canvas = el("canvas", { className: "e04-map__canvas" }); - const tip = el("div", { className: "e04-map__tip" }); + const tip = tooltipBox(""); + tip.classList.add("e04-map__tip"); const empty = el("p", { className: "e04-map__empty", text: t("E04_Map_Empty") }); tip.hidden = true; root.append(canvas, tip, empty); diff --git a/E04_Stab3D/E04_Stab3D_UI_Style.css b/E04_Stab3D/E04_Stab3D_UI_Style.css index 3b1a7e7bd..6c9d8f6c1 100644 --- a/E04_Stab3D/E04_Stab3D_UI_Style.css +++ b/E04_Stab3D/E04_Stab3D_UI_Style.css @@ -61,16 +61,9 @@ cursor: grab; } -.e04-map__tip { +/* 값 풍선 모양은 툴팁 부품 — 자리만 */ +.e04-map .e04-map__tip { position: absolute; - padding: var(--spacing-4) var(--spacing-8); - border-radius: var(--radius-sm); - background: var(--color-surface); - color: var(--color-text); - border: 1px solid var(--color-border); - font-size: 12px; - white-space: pre; - pointer-events: none; } .e04-map__empty { diff --git a/E07_StabArea/E07_StabArea_UI_Map.ts b/E07_StabArea/E07_StabArea_UI_Map.ts index b2a77b581..196b02ff4 100644 --- a/E07_StabArea/E07_StabArea_UI_Map.ts +++ b/E07_StabArea/E07_StabArea_UI_Map.ts @@ -5,6 +5,7 @@ * ========================================================================== */ import { el } from "@ui/ui_template_elements"; +import { tooltipBox } from "@ui/ui_template_hover_info"; import { t, type LocaleKey } from "@ui/ui_template_locale"; import { CLASS_KEYS, cellIndex, rasterRgba, type Decoded } from "./logic/E07_StabArea_Raster"; @@ -41,7 +42,8 @@ const css = (name: string, fallback: string): string => export function createAreaMap(): AreaMap { const root = el("div", { className: "e07-map" }); const canvas = el("canvas", { className: "e07-map__canvas" }); - const tip = el("div", { className: "e07-map__tip" }); + const tip = tooltipBox(""); + tip.classList.add("e07-map__tip"); const empty = el("p", { className: "e07-map__empty", text: t("E07_Map_Empty") }); tip.hidden = true; root.append(canvas, tip, empty); diff --git a/E07_StabArea/E07_StabArea_UI_Style.css b/E07_StabArea/E07_StabArea_UI_Style.css index 3ff7f6039..84c26eb97 100644 --- a/E07_StabArea/E07_StabArea_UI_Style.css +++ b/E07_StabArea/E07_StabArea_UI_Style.css @@ -45,16 +45,9 @@ cursor: grab; } -.e07-map__tip { +/* 값 풍선 모양은 툴팁 부품 — 자리만 */ +.e07-map .e07-map__tip { position: absolute; - padding: var(--spacing-4) var(--spacing-8); - border-radius: var(--radius-sm); - background: var(--color-surface); - color: var(--color-text); - border: 1px solid var(--color-border); - font-size: 12px; - white-space: pre; - pointer-events: none; } .e07-map__empty { diff --git a/resources/tester/test_553_4_de_parts.py b/resources/tester/test_553_4_de_parts.py index 059c95f01..46ba4c217 100644 --- a/resources/tester/test_553_4_de_parts.py +++ b/resources/tester/test_553_4_de_parts.py @@ -202,3 +202,22 @@ def test_e07_parts(): ".e07-progress {", ): assert dead not in css, dead + + +def test_map_tips_use_tooltip_part(): + for path, hook in ( + ("E03_StabSection/E03_StabSection_UI_Section.ts", "e03-tip"), + ("E04_Stab3D/E04_Stab3D_UI_Map.ts", "e04-map__tip"), + ("E07_StabArea/E07_StabArea_UI_Map.ts", "e07-map__tip"), + ): + ts = _src(path) + assert 'tooltipBox("")' in ts and f'classList.add("{hook}")' in ts, path + for path, dead in ( + ( + "E03_StabSection/E03_StabSection_UI_Style.css", + "background: var(--color-surface);\n border:", + ), + ("E04_Stab3D/E04_Stab3D_UI_Style.css", "white-space: pre;"), + ("E07_StabArea/E07_StabArea_UI_Style.css", "white-space: pre;"), + ): + assert dead not in _src(path).replace("\r\n", "\n"), path