From 6d8abe685d8c7f96a21e7b8d8e9ed42f5e2cdbd0 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Mon, 26 Oct 2026 22:40:30 +0900 Subject: [PATCH] =?UTF-8?q?refactor(E03=C2=B7E04=C2=B7E07):=20=EC=A7=80?= =?UTF-8?q?=EB=8F=84=20=EA=B0=92=20=ED=92=8D=EC=84=A0=EC=9D=84=20=ED=88=B4?= =?UTF-8?q?=ED=8C=81=20=EB=B6=80=ED=92=88=EC=9C=BC=EB=A1=9C=20(PLAN=20553-?= =?UTF-8?q?4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Sonnet 5.5 --- E03_StabSection/E03_StabSection_UI_Section.ts | 4 +++- E03_StabSection/E03_StabSection_UI_Style.css | 12 +++--------- E04_Stab3D/E04_Stab3D_UI_Map.ts | 4 +++- E04_Stab3D/E04_Stab3D_UI_Style.css | 11 ++--------- E07_StabArea/E07_StabArea_UI_Map.ts | 4 +++- E07_StabArea/E07_StabArea_UI_Style.css | 11 ++--------- resources/tester/test_553_4_de_parts.py | 19 +++++++++++++++++++ 7 files changed, 35 insertions(+), 30 deletions(-) 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