diff --git a/B06_Section/B06_Section_UI_Cross_Culvert.ts b/B06_Section/B06_Section_UI_Cross_Culvert.ts index c6bcb169..96045660 100644 --- a/B06_Section/B06_Section_UI_Cross_Culvert.ts +++ b/B06_Section/B06_Section_UI_Cross_Culvert.ts @@ -117,13 +117,7 @@ export function appendCulvertOverlay( ` · 근입 ${REVET_EMBED_DEPTH_M.toFixed(2)}m(실무 기초콘크리트 H=0.5 — 법정 규정 없음)` + (wall.lengthM ? ` · 연장 ${wall.lengthM.toFixed(1)}m` : ""), ); - if (onSelectRevet) { - revetShape.classList.add("is-selectable"); - revetShape.addEventListener("click", (event) => { - event.stopPropagation(); - onSelectRevet(wall.role); - }); - } + if (onSelectRevet) revetShape.classList.add("is-selectable"); revetShapes.set(wall.role, revetShape); layer.append(revetShape); // 평행사변형 띠와 사다리꼴 사이 대각 이음선(내부 경계 — 사용자 스케치의 가운데 선): @@ -285,6 +279,25 @@ export function appendCulvertOverlay( } drawPitching(); + // 클릭 판정용 투명 겹면 — **맨 마지막에** 얹는다. 관·보호공이 벽 위를 지나가 그리기 + // 순서상 벽 가운데를 덮으므로, 벽 폴리곤에 직접 핸들러를 달면 가운데를 눌러도 관이 + // 먼저 먹는다(2026-08-21 화면 확인). 그리기 순서(벽 → 관 → 보호공)는 그대로 두고 + // 판정면만 위로 올린다. 관 자체의 툴팁은 벽 밖 구간에서 그대로 뜬다. + if (onSelectRevet) { + for (const wall of wallsInOrder) { + const hit = polygon( + wall.points.map((p) => [x(p.offset), toDisplayY(p.elevation)] as [number, number]), + "b06-chart__culvert-revet-hit", + `${roleLabel(wall.role)} 기슭막이 선택 — 카드 하단 ◀/▶로 자리 조절`, + ); + hit.addEventListener("click", (event) => { + event.stopPropagation(); + onSelectRevet(wall.role); + }); + layer.append(hit); + } + } + // 강조는 클래스만 갈아 끼운다 — 카드를 다시 그리면 휠 줌·팬이 초기화된다. return (key) => { for (const [role, shape] of revetShapes) shape.classList.toggle("is-active", role === key); diff --git a/B06_Section/B06_Section_UI_Style_Cross.css b/B06_Section/B06_Section_UI_Style_Cross.css index b900345a..c45c3193 100644 --- a/B06_Section/B06_Section_UI_Style_Cross.css +++ b/B06_Section/B06_Section_UI_Style_Cross.css @@ -597,15 +597,3 @@ color: var(--color-text); background: var(--color-surface); } - -/* 기슭막이 선택 — 구조물 선택이 절·성토 면적 강조보다 우선한다(2026-08-21 사용자 ①). - 색은 토큰만 쓰고 하드코딩하지 않는다. */ -.b06-chart__culvert-revet.is-selectable { - cursor: pointer; -} - -.b06-chart__culvert-revet.is-active { - stroke: var(--color-accent, currentColor); - stroke-width: 2; - filter: brightness(1.15); -} diff --git a/B06_Section/B06_Section_UI_Style_Cross_Areas.css b/B06_Section/B06_Section_UI_Style_Cross_Areas.css index e156ea3c..2f2b9e08 100644 --- a/B06_Section/B06_Section_UI_Style_Cross_Areas.css +++ b/B06_Section/B06_Section_UI_Style_Cross_Areas.css @@ -186,6 +186,25 @@ stroke-linejoin: round; } +/* 기슭막이 선택(2026-08-21) — 구조물 선택이 절·성토 면적 강조보다 우선한다. + 강조 색은 면적 밴드와 같은 규칙으로 토큰만 쓴다. */ +.b06-chart__culvert-revet.is-selectable { + cursor: pointer; +} + +.b06-chart__culvert-revet.is-active { + fill: color-mix(in srgb, var(--color-royal-amethyst) 45%, transparent); + stroke: var(--color-royal-amethyst); + stroke-width: 2.2; +} + +/* 클릭 판정용 투명 겹면 — 관·보호공보다 위에 얹혀 벽 가운데도 눌린다. */ +.b06-chart__culvert-revet-hit { + fill: transparent; + stroke: none; + cursor: pointer; +} + .b06-chart__culvert-apron { fill: color-mix(in srgb, var(--color-text-secondary) 22%, transparent); stroke: var(--color-text-secondary);