- 예정노선 수정 켬에도 추천 선 불투명 그대로(Render) - 스냅 + 스냅 간격 = 고르기 메뉴 하나(측점 No. · 10 m · 끔) · 도구줄 표 snap-step 줄 걷음 - 추천노선 = 여럿 고르기(공용 부품 multi · 줄 색 점 PickMenuItem.color · 끔 줄 없음) · 선 색 --draw-map-rec-1~4 · 예정노선 가이드 선은 켬끔 한 줄 - 켠 동안 등고선 띠 = LAS 는 자르지 않음 · 도엽은 계획선 + 예정노선으로 넓힘(캔버스 · GL · 도엽 다시 받기) - 시험 624_2 · 634_2 · 626_1 · 636_2 · 390_4 · b05_routeedit_initial 을 새 꼴로 고침 · 새 시험 756_1 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
58 lines
2.6 KiB
TypeScript
58 lines
2.6 KiB
TypeScript
/* =============================================================================
|
|
* map_route_preview.ts
|
|
* 공용 「추천노선」 미리보기(PLAN 626-1 → 636-2 공용 · 요구 530 · 546) — B05 평면 · 예정노선(D03)이 같이 씀.
|
|
* 메뉴 = 도구줄 아이콘 하나(compass · 호버 「추천노선」) + 아래 판(여럿 고르기 · 줄마다 색 점 · 「끔」 줄 없음 ·
|
|
* 다 끄면 꺼짐 · 부품 `createPickMenu({ multi })` · 589-12).
|
|
* 그리기 = 지도 위 선(노랑 `--draw-map-sketch` · 검은 테 · 기본 점선) — 위성 · 어두운 바탕 모두 보임.
|
|
* 항목 · 선 셈은 페이지 몫: B05 = 노선 추천 저장본 넷(`B05_Profile_UI_RouteEdit_RecPreview`) ·
|
|
* 예정노선 = 가이드 선(`D03_PlanAnalysis_UI_Guide`).
|
|
* ========================================================================== */
|
|
|
|
import { createPickMenu, type PickMenu, type PickMenuItem } from "@ui/ui_template_context_menu";
|
|
import { themeColor } from "@ui/ui_template_palette";
|
|
|
|
type Vertex = [number, number] | [number, number, number];
|
|
|
|
/** 「추천노선」 메뉴 — 줄 누름 = `onPick(값)`(켬끔 바뀜 · 지금 켠 줄은 `menu.values()`). */
|
|
export function createRoutePreviewMenu(opts: {
|
|
items: PickMenuItem[];
|
|
onPick: (value: string) => void;
|
|
}): PickMenu {
|
|
const menu = createPickMenu({
|
|
multi: true,
|
|
icon: "compass",
|
|
title: "추천노선", // 마우스 글 = 공용 표 호버제목(634-2 · `mapToolGroups` 가 맞춤)
|
|
items: opts.items,
|
|
onPick: (value) => value && opts.onPick(value),
|
|
});
|
|
menu.root.dataset.act = "recommend";
|
|
return menu;
|
|
}
|
|
|
|
/** 미리보기 선 하나 — 검은 테(5 px) 위 색 선(3 px) · 기본 노랑 점선. */
|
|
export function paintRoutePreview(
|
|
context: CanvasRenderingContext2D,
|
|
line: readonly Vertex[],
|
|
toScreen: (vertex: [number, number]) => [number, number],
|
|
style: { dash?: number[]; color?: string } = {},
|
|
): void {
|
|
if (line.length < 2) return;
|
|
context.save();
|
|
context.setLineDash(style.dash ?? [10, 6]);
|
|
context.lineJoin = "round";
|
|
context.beginPath();
|
|
line.forEach((vertex, index) => {
|
|
const [x, y] = toScreen([vertex[0], vertex[1]]);
|
|
if (index) context.lineTo(x, y);
|
|
else context.moveTo(x, y);
|
|
});
|
|
// 지도 위 그림 색(테마 안 따름) + 검은 테 — 위성 · 어두운 바탕 모두 보임
|
|
context.strokeStyle = "rgba(0, 0, 0, 0.6)";
|
|
context.lineWidth = 5;
|
|
context.stroke();
|
|
context.strokeStyle = style.color ?? themeColor("--draw-map-sketch", "#ffe94d");
|
|
context.lineWidth = 3;
|
|
context.stroke();
|
|
context.restore();
|
|
}
|