From 6d8fd46d87e836b4b9d2ae2d66c5a8dcdbac7a1d Mon Sep 17 00:00:00 2001 From: umsangdon Date: Sun, 30 Aug 2026 13:41:30 +0900 Subject: [PATCH] =?UTF-8?q?fix(B06):=20BOX=EC=95=94=EA=B1=B0=EB=A5=BC=20?= =?UTF-8?q?=EA=B3=A0=EB=A5=B4=EB=A9=B4=20=EA=B7=B8=20=EB=81=9D=EC=9D=B4=20?= =?UTF-8?q?=EA=B0=95=EC=A1=B0=EB=90=98=EA=B2=8C=20=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 좌·우 끝을 골라도 횡단도에 아무 표시가 없었다. 강조 토글(`is-active`)은 이미 클릭 판정용 **투명 겹면**에 걸리고 있었는데, 그 클래스에는 강조 규칙이 없어 그대로 투명했다. 겹면에 `b06-chart__box-hit`를 하나 더 달고 그 클래스에만 강조를 준다 — 기슭막이· 집수정과 같은 색 계열이되 면이 넓어 채도를 낮췄다(danger 16% + 점선 테두리). 구체 부재(저판·상판·내공)는 좌·우가 한 몸이라 그쪽을 칠하면 어느 끝을 고른 것인지 되레 흐려진다. 자체검증(공용 브라우저 5174, 측점 10+0.9 BOX암거): - tsc --noEmit 통과. - 우측 끝 선택 → 그 겹면만 `is-active`, 계산 스타일 fill `color(srgb 0.909804 0.411765 0.352941 / 0.16)` · stroke `rgb(232, 105, 90)`. 수정 전에는 `fill: transparent`라 아무것도 안 보였다. - 스크린샷 `tmp/browser/shots/110_boxhl.png` — 구체 우측 절반이 붉게 칠해진다. Co-Authored-By: Claude Opus 5 (1M context) --- B06_Section/B06_Section_UI_Cross_Box.ts | 5 ++++- B06_Section/B06_Section_UI_Style_Cross_Areas.css | 10 ++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/B06_Section/B06_Section_UI_Cross_Box.ts b/B06_Section/B06_Section_UI_Cross_Box.ts index 95fd3b8b..1fccfe0b 100644 --- a/B06_Section/B06_Section_UI_Cross_Box.ts +++ b/B06_Section/B06_Section_UI_Cross_Box.ts @@ -148,7 +148,10 @@ export function appendBoxOverlay( { offset: outer, elevation: bottom }, { offset: midOffset, elevation: bottom }, ], - "b06-chart__culvert-revet-hit", + // 강조용 클래스를 하나 더 단다 — 고른 끝을 옅게 칠한다(2026-08-30 사용자: + // BOX암거는 선택해도 아무 표시가 없었다). 구체 부재는 좌·우가 한 몸이라 + // 그쪽을 칠하면 어느 끝을 고른 것인지 되레 흐려진다. + "b06-chart__culvert-revet-hit b06-chart__box-hit", "", ); hit.addEventListener("click", (event) => { diff --git a/B06_Section/B06_Section_UI_Style_Cross_Areas.css b/B06_Section/B06_Section_UI_Style_Cross_Areas.css index 798a0e6f..a2c430b5 100644 --- a/B06_Section/B06_Section_UI_Style_Cross_Areas.css +++ b/B06_Section/B06_Section_UI_Style_Cross_Areas.css @@ -250,6 +250,16 @@ cursor: pointer; } +/* BOX암거 끝 선택 강조 — 고른 절반을 옅게 칠하고 테두리를 두른다 + (2026-08-30 사용자: 선택해도 하이라이트가 없었다). 색은 기슭막이·집수정 강조와 + 같은 계열이되, 면이 넓어 채도를 낮춘다. */ +.b06-chart__box-hit.is-active { + fill: color-mix(in srgb, var(--color-danger) 16%, transparent); + stroke: var(--color-danger); + stroke-width: 1.6; + stroke-dasharray: 4 3; +} + .b06-chart__culvert-apron { fill: color-mix(in srgb, var(--color-text-secondary) 22%, transparent); stroke: var(--color-text-secondary);