57 lines
2.4 KiB
TypeScript
57 lines
2.4 KiB
TypeScript
/* =============================================================================
|
|
* map_route_preview.ts
|
|
* 공용 「추천노선」 미리보기(PLAN 626-1 → 636-2 공용 · 요구 530 · 546) — B05 평면 · 예정노선(D03)이 같이 씀.
|
|
* 메뉴 = 도구줄 아이콘 하나(compass · 호버 「추천노선」) + 아래 판(항목 하나만 · 맨 끝 「끔」 · 부품 `createPickMenu`).
|
|
* 그리기 = 지도 위 선(노랑 `--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(값)` · 「끔」 = `onPick(null)`. */
|
|
export function createRoutePreviewMenu(opts: {
|
|
items: PickMenuItem[];
|
|
onPick: (value: string | null) => void;
|
|
}): PickMenu {
|
|
const menu = createPickMenu({
|
|
icon: "compass",
|
|
title: "추천노선", // 마우스 글 = 공용 표 호버제목(634-2 · `mapToolGroups` 가 맞춤)
|
|
items: opts.items,
|
|
offLabel: "끔",
|
|
onPick: opts.onPick,
|
|
});
|
|
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();
|
|
}
|