fix(D03 긋기): 놓인 노드 +/− 색 보이게 — 선보다 굵은 부호 색 점 + 검은 테 · 고른 선은 노랑 강조 위에 점 다시 · 손잡이 = 빈 네모 (PLAN 625-3 · 요구 535-2)

까닭 — 놓인 점 반지름 3 px · 테 없음 = − 하늘(#29e0ff)이 노선 민트 선(#3df5c4)에 묻힘 · 고른 선은 흰 네모 손잡이와 노랑 강조(8 px)가 점을 덮음.
- DrawPaint `paintNodes` 떼어 냄(점 5 px · fillCased) · Edit 가 고른 선만 강조 위에 다시 그림(heightAt 인자 덧)
- 시험 test_625_draw 놓인 노드 지킴 하나 덧

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

D03_PlanAnalysis/D03_PlanAnalysis_UI_DrawPaint.ts

@@ -36,6 +36,8 @@ import type { DrawPreview } from "./D03_PlanAnalysis_UI_Draw";
 export const SNAP_PX = 12;
 /** 선 위 누름으로 볼 반경(px). */
 export const LINE_HIT_PX = 8;
+/** 놓인 꺾임점 점 반지름(px) — 선 테(3 + 4 px)보다 굵게 · 고른 선 손잡이는 이 점을 감싸는 빈 네모. */
+export const NODE_DOT_PX = 5;
 /** 구간 길이 라벨을 보일 화면 길이(px). */
 const LABEL_MIN_PX = 70;
 
@@ -213,24 +215,33 @@ export function paintNetwork(
       );
     if (map.slopes) segmentLabels(context, map, line.vertices, z);
   });
-  // 꺾임점 = 들어온 구간 기울기 부호 색(625-2 B4) · 기록과 어긋난 노드(옮김) = 경고 고리(599-2)
-  context.strokeStyle = colors.warn;
-  context.lineWidth = 2;
-  for (const line of network.lines)
+  paintNodes(context, map, network.lines, z);
+  drawPieces(context, map, network);
+  extra();
+}
+
+/** 꺾임점 = 들어온 구간 기울기 부호 색(625-2 B4) · 선보다 굵은 점 + 검은 테 = 선 색 · 위성 위에서도 가름(625-3) ·
+ *  기록과 어긋난 노드(옮김) = 경고 고리(599-2) · 고른 선은 고름 강조 위에 다시 그림(`D03_PlanAnalysis_UI_Edit`). */
+export function paintNodes(
+  context: CanvasRenderingContext2D,
+  map: Pick<ScreenMap, "toScreen">,
+  lines: ReadonlyArray<PlanNetwork["lines"][number]>,
+  z: HeightAt,
+): void {
+  for (const line of lines)
     line.vertices.forEach((v, i) => {
       if (!i) return;
       const [sx, sy] = map.toScreen(v);
       context.beginPath();
-      context.arc(sx, sy, 3, 0, Math.PI * 2);
-      context.fillStyle = slopeColor(groundSlopePct(line.vertices[i - 1], v, z));
-      context.fill();
+      context.arc(sx, sy, NODE_DOT_PX, 0, Math.PI * 2);
+      fillCased(context, slopeColor(groundSlopePct(line.vertices[i - 1], v, z)));
       if (!nodeOff(line, i, z)) return;
       context.beginPath();
-      context.arc(sx, sy, 7, 0, Math.PI * 2);
+      context.arc(sx, sy, NODE_DOT_PX + 4, 0, Math.PI * 2);
+      context.lineWidth = 2;
+      context.strokeStyle = planColors().warn;
       context.stroke();
     });
-  drawPieces(context, map, network);
-  extra();
 }
 
 /** 지점 핀 겹(585-1) — 꼭지 = 지점 · 둥근 머리 · 「지점 N」 · 화면 px 고정 크기 · 돌린 지도에서도 섬. */

D03_PlanAnalysis/D03_PlanAnalysis_UI_Edit.ts

@@ -20,7 +20,7 @@
 import { showToast } from "@ui/ui_template_elements";
 import { themeColor } from "@ui/ui_template_palette";
 import { keyIs } from "../A00_Common/key_registry";
-import { distanceAlong, pointAtDistance } from "./logic/D03_PlanAnalysis_Draw";
+import { distanceAlong, pointAtDistance, type HeightAt } from "./logic/D03_PlanAnalysis_Draw";
 import {
   insertVertex,
   moveMark,
@@ -46,7 +46,9 @@ import {
 } from "./logic/D03_PlanAnalysis_Select";
 import {
   lineAt,
+  NODE_DOT_PX,
   paintMark,
+  paintNodes,
   planLabel,
   screenGap,
   SNAP_PX,
@@ -70,6 +72,8 @@ export interface PlanEditParams {
   /** 지점(긋기에 붙는 점 · 591-2). */
   base: () => Vertex[];
   commit: (next: PlanNetwork) => void;
+  /** 원지반 높이(고른 선 꺾임점 부호 색 · 625-3). */
+  heightAt: () => HeightAt;
   /** 끌기 중 — 화면만 바꿈(되돌리기 · 캐시 없음). */
   show: (next: PlanNetwork) => void;
   /** 지점 자리 노드를 끎 — 지점 · 노선 한 걸음 · 화면만. */
@@ -329,18 +333,18 @@ export function createPlanEdit(params: PlanEditParams): PlanEdit {
         context.stroke();
         strokeCased(context, colors.active, PICK_LINE_PX);
       }
-      // 꺾임점 손잡이(고른 것이 든 선)
+      // 꺾임점 손잡이(고른 것이 든 선) = 부호 색 점(고름 강조 위에 다시) + 감싸는 빈 네모(625-3)
       const lines = pickedLines(network);
-      context.lineWidth = 2;
-      context.fillStyle = "#ffffff";
-      for (const line of network.lines) {
-        if (!lines.has(line.id)) continue;
+      const handled = network.lines.filter((line) => lines.has(line.id));
+      paintNodes(context, map, handled, params.heightAt());
+      const half = NODE_DOT_PX + 3;
+      for (const line of handled)
         for (const point of line.vertices) {
           const [sx, sy] = map.toScreen(point);
-          context.fillRect(sx - 4, sy - 4, 8, 8);
-          context.strokeRect(sx - 4, sy - 4, 8, 8);
+          context.beginPath();
+          context.rect(sx - half, sy - half, half * 2, half * 2);
+          strokeCased(context, colors.active, 2);
         }
-      }
       // 고른 노드 · 마크 테
       const node = picked?.kind === "node" ? picked.node : null;
       const nodePoint = node

D03_PlanAnalysis/D03_PlanAnalysis_UI_Page.ts

@@ -146,6 +146,7 @@ export async function renderD03PlanAnalysis(root: HTMLElement): Promise<void> {
     network: () => network,
     base: () => points,
     commit,
+    heightAt: () => z,
     show: (next) => {
       network = normalizePieces(next, yearStart);
       map.redraw();

resources/tester/test_625_draw.py

@@ -159,3 +159,19 @@ def test_가파른_땅_지형_밖_고를_자리_없음(r):
     for key in ("steep", "offTerrain"):
         f = r[key]
         assert not f["flat"] and not f["nodes"] and not f["arcs"]
+
+
+def test_놓인_노드_부호_색_선_위_고름_위에도_보임():
+    """625-3 — 놓인 꺾임점 = 선 테(3 + 4 px)보다 굵은 부호 색 점 + 검은 테 · 고른 선은 노랑 강조 위에 점을 다시 그리고 손잡이 = 빈 네모."""
+    paint = (ROOT / "D03_PlanAnalysis" / "D03_PlanAnalysis_UI_DrawPaint.ts").read_text(
+        encoding="utf-8"
+    )
+    edit = (ROOT / "D03_PlanAnalysis" / "D03_PlanAnalysis_UI_Edit.ts").read_text(encoding="utf-8")
+    assert int(re.search(r"NODE_DOT_PX = (\d+)", paint).group(1)) * 2 > 3 + 4
+    body = paint[paint.index("export function paintNodes") :]
+    body = body[: body.index("\n}\n")]
+    assert "fillCased(context, slopeColor(groundSlopePct(" in body
+    assert "paintNodes(context, map, network.lines, z)" in paint
+    draw = edit[edit.index("draw(context, map) {") :]
+    assert draw.index("sel.paths()") < draw.index("paintNodes(") < draw.index("context.rect(")
+    assert "fillRect" not in draw[: draw.index("고른 노드 · 마크 테")]