chore(계획): 요구 421 분석 — 종단 쉬프트 고름 강조 늦음 · 스크롤 안 따라감 원인

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/raw/요구_1025/_분석_421_종단_고름_강조.md

@@ -0,0 +1,68 @@
+# 요구 421 · PLAN 456-2 ① — 종단 [쉬프트] 고름 붉은 강조 늦음 · 스크롤 안 따라감
+
+분석 = 코드 읽기만(서버 · 브라우저 안 띄움 · 화면 실측 없음). 근거 = 옛 PLAN 461 절(「쉬프트 고름 직후 강조가 다음 다시 그림 때 뜨는 것은 옛 그대로」로 남겨 둔 흠) · `resources/tester/test_271_straighten_pick.py`(붉은 강조는 `selectedRuns()` 개수만 봄 · 그림 시험 없음).
+
+## 1. 고른 직후 강조가 안 뜸 — 원인
+
+흐름(빈 곳 = 직선 위 누름):
+
+1. 그래프 누름(잡는 단계) → 도구 모드면 `handleToolPick` — `B05_Profile/B05_Profile_UI_Profile_Render.ts:317-337`.
+2. 쉬프트 = `detectStraightRun` → `tools.handleRunPick` — `B05_Profile/B05_Profile_UI_Profile_Panel_Tools.ts:209-211`.
+3. `runs.push` → `callbacks.onChanged()` — `B05_Profile/B05_Profile_UI_Profile_Tools.ts:163-179`.
+4. `onChanged` = `bandView.redraw()`(직선화 보라 띠만) + `ctx.refresh()` — `Panel_Tools.ts:193`.
+5. `refresh` = `renderBalance()` = **위쪽 요약줄(도구 단추줄)만** 다시 그림 — `A00_Common/design/design_profile.ts:270` · `212-235`(도구 묶음 `tools.render()` 222).
+
+붉은 강조를 그리는 자리:
+
+- `createRunHighlight` 는 **전체 그림 `renderProfile` 안에서만** 불림 — `Render.ts:472-483` · 그림 = 그래프 래퍼에 붙는 따로 된 SVG 덮개(`.b05-profile-runmark` · `B05_Profile/B05_Profile_UI_Profile_RunHighlight.ts:74-111`).
+- 고름은 전체 그림을 부르지 않음 → 다음 전체 그림(`draw()`)이 올 때 비로소 뜸. 옛 메모(위쪽 줄만 다시 그림)와 같음.
+
+덧:
+
+- 측점선 위를 누르면 바로 뜸 — 잡는 단계 처리 뒤 `return` 만 하고 전파를 안 막아(`Render.ts:326` · `336`) 측점선 자기 클릭 `onSelectStation` → `selectStation` → `draw()` 가 돎(`B06_Section/B06_Section_UI_Longitudinal.ts:441` · `design_profile.ts:203-209`). 이때 측점 고름도 같이 켜고 꺼짐(곁 흠 · 이번 범위 밖).
+- 「마우스를 움직인 뒤」 무엇이 다시 그리게 하는지 = 확인 못 함 — 쉬프트 모드 이동 듣개(`mountCrossHint` 는 도구 중 막힘 · `B05_Profile_UI_Profile_CrossModal.ts:126-127`) 중 전체 그림을 부르는 것 없음. 실제로는 스크롤 정착 재구성 · 뒤 계산 도착(`drawSoon`) · 측점선 누름 · 크기 바뀜 같은 다른 일이 다시 그리는 것으로 봄.
+
+## 2. 스크롤하면 강조가 안 따라감 — 원인
+
+- 강조 덮개 좌표: 가로 = 그래프와 같은 `x` · 세로 = **그릴 때의 축 눈금으로 굳힌 표고 → y**(`RunHighlight.ts:44-57`). 덮개는 그래프 래퍼(`position: relative` · `B05_Profile/B05_Profile_UI_Style.css:116-120`) 안 `position: absolute; inset: 0`(`B05_Profile/B05_Profile_UI_Style_Table.css:321-326`) — 가로 스크롤 · 끌어 옮기기(팬)는 같은 스크롤러라 **가로는 따라감**.
+- 가로 스크롤 때 세로 창(보이는 구간 자동 맞춤)은 **다시 그리지 않고 변환만** 갈아 끼움:
+  - 스크롤 듣개 → `fitElevation` — `A00_Common/design/design_profile_viewport.ts:38-49`(전체 다시 그림은 눈금이 모자랄 때만 · 80 ms 뒤).
+  - 갱신기 → `applyElevationWindow(chartWrap, …)` — `Render.ts:450-461`.
+  - 변환은 **그래프 SVG 안 `.b06-chart__ywindow` 겹에만** 걸림 — `common_util/common_util_chart_ywindow.ts:174-177`(겹 = `B06_Section_UI_Longitudinal.ts:39` · 계획선 겹 `496-497`).
+- 붉은 강조는 그 겹 밖(따로 된 SVG)이라 변환을 못 받음 · 스크롤에 다시 그리는 길도 없음 → 계획선은 위아래로 옮겨 가는데 **붉은 선은 그릴 때 세로 자리에 그대로 남음**. 눈금이 모자라 전체 재구성이 돌 때(`common_util_chart_ywindow.ts:203-205`)만 맞게 다시 섬.
+- 가로 확대 · ▲▼ 길게 누르기 · 크기 바뀜 = 전체 `draw()`(`design_profile.ts:238` · `243` · viewport `55-67`) → 이때는 맞음. 어긋남은 가벼운 스크롤 · 팬 길에서만.
+- 「화면 그 자리에 남음」은 세로 자리 그대로라서 그리 보이는 것으로 판단 · 화면 실측 = 확인 못 함.
+
+같은 판 다른 덮개 견줌:
+
+| 덮개 | 세로 의존 | 스크롤 때 | 따라감 |
+|---|---|---|---|
+| 계획선 · 지반선 · 눈금 | 표고 | `.b06-chart__ywindow` 변환 | 따라감 |
+| 측점선 · ▲▼ 단추 | 없음(위아래 고정) | 같은 스크롤러 | 따라감 |
+| [직선화] 보라 띠(`design_profile_range_band.ts`) | 없음(전체 높이 · `59-60`) | scroll 듣기(`142`) | 따라감 |
+| [자유지정] 점선 · 점(`design_profile_free_view.ts`) | 표고 | 그릴 때마다 **지금 걸린 변환**을 읽음(`readWindow` `52-69`) · scroll 듣기로 다시 그림(`194`) | 따라감 |
+| 임시 횡단 십자선(`CrossModal.ts`) | — | 스크롤에 숨김(`136`) | 숨김 |
+| **[쉬프트] 붉은 강조** | 표고 | **변환 못 받음 · 다시 그림 없음** | **안 따라감** |
+
+## 3. B05 · B06 · 팝아웃 = 같은 코드
+
+- 종단도는 페이지에 **한 벌**: `sharedProfile` → `createDesignProfile` — `A00_Common/design/design_shared.ts:204-207`. B05 보기 `B05_Profile/B05_Profile_UI_Profile_Panel.ts:29-30` · B06 보기 `B06_Section/B06_Section_UI_Section_View_Profile.ts:238` 가 같은 것을 받음.
+- 팝아웃 = 화면 조각(`profile.root`)만 새 창으로 옮김 · 같은 함수가 그림 — `A00_Common/design/design_profile_popout.ts:1-8` · `129-134`.
+- → 한 번 고치면 B05 · B06 종단 판 · 팝아웃 모두 고쳐짐. 팝아웃 화면 확인 = 확인 못 함(코드상 같음).
+
+## 4. 고칠 자리 · 방향
+
+가장 작은 고침(두 곳):
+
+- ① 고름 즉시 — `design_profile.ts:270` `refresh` 를 쉬프트 모드면 `drawSoon()`(다음 틀 전체 그림 한 번 · 아니면 지금처럼 `renderBalance`). 한 줄 · 684 줄 그대로.
+- ② 스크롤 따라감 — 붉은 선(폴리라인)을 따로 된 SVG 대신 **그래프 SVG 의 계획선 세로 창 겹**(`B06_Section_UI_Longitudinal.ts:496-497` 의 `g[clip-path] > .b06-chart__ywindow`) 안에 넣음(`Render.ts:482` 붙이는 자리 · `RunHighlight.ts` 가 선 · 끝 점선을 따로 돌려줌). 공용 `applyElevationWindow` 가 계획선과 같은 변환을 걸어 줌 · 굵기는 이미 `B06_Section/B06_Section_UI_Style_Cross_Chart.css:8-10` non-scaling-stroke · 플롯 밖 잘림도 같이 받음. 끝 세로 점선(전체 높이 · 가로만)은 지금 덮개 그대로 둠.
+
+다른 길(전체 그림 없이):
+
+- 붉은 강조를 [자유지정] 처럼 `Panel_Tools` 의 덮개 보기로 — `mountViews`(`Panel_Tools.ts:132-137`)에서 쉬프트일 때 붙이고 · `onChanged`(`193`) · 스크롤러 scroll 때 다시 그림 · 세로는 `design_profile_free_view.ts` `readWindow`(내보내기 필요) + `chartYAtElevation`(`A00_Common/design/logic/design_profile_free.ts:78-80`) · `Render.ts:472-483` 지움. 고름마다 전체 그림(약 34 ms)이 없는 대신 손댈 파일 넷.
+
+## 5. 값(계산 · 저장) 영향
+
+- 없음 — 붉은 강조는 그림만. 고른 구간 상태(`runs` · `Tools.ts:94`)와 ▲▼ 쉬프트 계산(`Panel_Tools.ts:168-172`)은 그대로.
+- ① 의 전체 그림 한 번 = 같은 입력으로 파생값을 다시 셈(낡음 열쇠가 같으면 횡단 다시 셈 예약 없음 · `Render.ts:145-150`) · 세션 · 저장 쓰기 없음.
+- 시험 영향: `test_271_straighten_pick.py` 는 도구 상태 · `Panel_Tools.ts` 글줄만 봄 → 두 길 모두 깨지지 않음. 붉은 강조 그림 · 스크롤 시험은 지금 없음.