Merge remote-tracking branch 'origin/dev' into sub_laptop_4 — Api(595 받기 꼴은 dev 쪽 · 임도 상자 중복 칸 하나로) · Style(597 · 599 절 둘 다)

D03_PlanAnalysis/D03_PlanAnalysis_UI_DrawPaint.ts

@@ -113,7 +113,7 @@ export function lineAt(
 }
 
 /** 그은 선 · 측점 · 구간 글 · 꺾임점 · 마크 · 연도 · (extra = 미리보기).
- *  `active` = 그리는 선(굵은 보라). */
+ *  `active` = 그리는 선(굵은 보라) · `dim` = 다시 긋는 구간(599-3 · 흐리게). */
 export function paintNetwork(
   context: CanvasRenderingContext2D,
   map: ScreenMap,
@@ -121,6 +121,7 @@ export function paintNetwork(
   active: number | null,
   z: HeightAt,
   extra: () => void,
+  dim: { line: number; from: number; to: number } | null = null,
 ): void {
   const colors = planColors();
   context.lineCap = "round";
@@ -129,13 +130,22 @@ export function paintNetwork(
     if (line.vertices.length < 2) return;
     context.strokeStyle = index === active ? colors.active : routeColor(index);
     context.lineWidth = line.branch ? 2.5 : 3;
-    context.beginPath();
-    line.vertices.forEach((v, i) => {
-      const [sx, sy] = map.toScreen(v);
-      if (i) context.lineTo(sx, sy);
-      else context.moveTo(sx, sy);
-    });
-    context.stroke();
+    const path = (vertices: ReadonlyArray<Vertex>): void => {
+      context.beginPath();
+      vertices.forEach((v, i) => {
+        const [sx, sy] = map.toScreen(v);
+        if (i) context.lineTo(sx, sy);
+        else context.moveTo(sx, sy);
+      });
+      context.stroke();
+    };
+    if (dim?.line === index) {
+      path(line.vertices.slice(0, dim.from + 1));
+      path(line.vertices.slice(dim.to));
+      context.globalAlpha = 0.3;
+      path(line.vertices.slice(dim.from, dim.to + 1));
+      context.globalAlpha = 1;
+    } else path(line.vertices);
     if (map.stations)
       drawStationTicks(
         context,