eomsangdonandClaude Opus 5.5
2e4316567c
- 새 key_registry.ts — 화면마다 받는 키 · 마우스 동작 한 벌 · keyIs(evt, id) · 바꾼 키만 input-prefs.keys - ☰ [설정] CAD 탭 = 찾기 칸 + 「키 · 마우스」 + 리본 탭 › 패널 접이 묶음(기타 여섯) · 날 input → 부품 입력 - 다른 곳 탭 = 손글 안내 지우고 등록부 표(B05 방향키 · D03 Delete 등 빠진 것 포함) · 찾기 - 키 기록 칸 · 줄마다 [기본값] · [모두 기본값] · 같은 화면 · 모든 화면 겹침 · 브라우저 몫 · CAD 글자 단독은 저장 막음 - 배선: B05 되돌림 · 자유지정 Enter · Backspace · D03 되돌림 · 그리기 · 지움(한글 자판도 자판 자리) · CAD F3 · F7 · F8 · F10 · Ctrl 명령 · Delete - 낡은 글 대조 시험 셋(215-1 · 345-3 · 346-4)은 새 배선 글로 고침 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
552 lines
21 KiB
TypeScript
552 lines
21 KiB
TypeScript
/* =============================================================================
|
|
* D03_PlanAnalysis_UI_Draw.ts
|
|
* D03 손 긋기 겹 · 그리기 칸(PLAN 562-3 · 580 · 요구서 389 3장 8~10 · 440 3~7) — 점을 찍어 직선으로 이음.
|
|
*
|
|
* [긋기] 하나 — 첫 누름 자리로 시작: 시점 = 새 본선 · 종점 = 새 본선(끝낼 때 뒤집어 종점이 선 끝 ·
|
|
* 측점 No.0 = 반대쪽) · 선 꼬리 = 이어 긋기 · 갈래 없는 선 머리 = 뒤집어 이어 긋고 끝낼 때 되돌림 ·
|
|
* 선 위 · 꺾임점 = 갈래. 시점 · 종점 · 다른 선 둘레(SNAP_PX)에 오면 거기 붙고 그 점에서 끝 —
|
|
* 머리가 다른 선 꼬리에 닿으면 한 선으로 잇고 · 꺾임점에 닿으면 그 점의 갈래.
|
|
* 미리보기 = 마지막 점 → 마우스 길이(m) · 가상 종단 기울기(원지반 % · ° · + 오르막) — 제약 칸 넷:
|
|
* 자유 · 길이 고정 · 기울기 고정(기울기 고정 · 길이 자유 · 마우스 방향 첫 자리) · 둘 다(양각기 원 위 후보 중
|
|
* 마우스에 가까운 것) · 제약 기울기 = 오르내림 같은 크기(562-1 짝이 |기울기|로 셈).
|
|
* 긋는 해 = 새 조각 처음 해 · 긋는 중 해를 바꾸면 다음 점부터 그 해(지금 끝 자리에 연도 구분 마크).
|
|
* 연도 구분 = 선 위 누름(마크 · 뒤 조각 고름 → 페이지가 연도 고름을 엶) · 오른쪽 = 지움.
|
|
* 고르기 · 고치기(쉴 때) = `D03_PlanAnalysis_UI_Edit`.
|
|
* 키 = Enter 끝 · Esc 이번 긋기 취소 · Backspace 마지막 점 빼기(설정 창 단축키 표 D03 줄).
|
|
* 셈 = 562-1 짝(`logic/D03_PlanAnalysis_Draw`) · 꼴 다루기 = `logic/D03_PlanAnalysis_Plan` ·
|
|
* 값을 바꾸면 `commit(다음 꼴)` 한 번 = 되돌리기 한 걸음(스택 · 캐시 = 페이지).
|
|
* ========================================================================== */
|
|
|
|
import { createButton, showToast } from "@ui/ui_template_elements";
|
|
import { keyIs } from "../A00_Common/key_registry";
|
|
import { createInputField } from "@ui/ui_template_input";
|
|
import { createSegment } from "@ui/ui_template_segment";
|
|
import { createText } from "@ui/ui_template_text";
|
|
import {
|
|
compassCandidates,
|
|
compassPoint,
|
|
fixedLengthPoint,
|
|
fixedSlopePoint,
|
|
groundSlopePct,
|
|
lineLength,
|
|
segmentLength,
|
|
} from "./logic/D03_PlanAnalysis_Draw";
|
|
import {
|
|
addBranch,
|
|
appendVertex,
|
|
attachHead,
|
|
dropLastVertex,
|
|
insertVertex,
|
|
newLine,
|
|
normalizePieces,
|
|
removeLine,
|
|
removeMark,
|
|
reverseLine,
|
|
samePoint,
|
|
setPieceYear,
|
|
splitPiece,
|
|
type PlanNetwork,
|
|
type Vertex,
|
|
} from "./logic/D03_PlanAnalysis_Plan";
|
|
import {
|
|
fmt,
|
|
lineAt,
|
|
paintNetwork,
|
|
paintPreview,
|
|
screenGap,
|
|
slopeDeg,
|
|
SNAP_PX,
|
|
} from "./D03_PlanAnalysis_UI_DrawPaint";
|
|
import type { PlanMapLayer, ScreenMap } from "./D03_PlanAnalysis_UI_Map";
|
|
|
|
/** 제약 칸 처음 값 — 길이 = 측점 간격(지식DB 설계제원_총괄) · 기울기 = 간선 20 km/h 일반지형 상한(종단선형). */
|
|
export const DRAW_DEFAULT_LENGTH_M = 20;
|
|
export const DRAW_DEFAULT_SLOPE_PCT = 9;
|
|
|
|
export type DrawConstraint = "free" | "length" | "slope" | "both";
|
|
export type DrawMode = "idle" | "draw" | "mark";
|
|
|
|
export interface DrawPreview {
|
|
point: Vertex;
|
|
lengthM: number;
|
|
slopePct: number | null;
|
|
/** 붙음 · 자리 없음 안내(있으면 점을 못 찍음 = `blocked`). */
|
|
note: string | null;
|
|
blocked: boolean;
|
|
snapped: boolean;
|
|
/** 다른 선 위(꺾임점 아님)에 붙음 — 점을 찍을 때 그 선에 꺾임점을 끼움. */
|
|
onLine: { line: number; segment: number } | null;
|
|
}
|
|
|
|
export interface PlanDrawParams {
|
|
base: () => { starts: Vertex[]; ends: Vertex[] };
|
|
network: () => PlanNetwork;
|
|
heightAt: () => (x: number, y: number) => number;
|
|
commit: (next: PlanNetwork) => void;
|
|
/** 긋는 해 — 새 조각 처음 해 · 긋는 중 바꾸면 다음 점부터. */
|
|
year: () => number;
|
|
/** 모드 · 그리는 선이 바뀜 — 페이지가 단추 · 안내를 다시. */
|
|
onMode: () => void;
|
|
/** 연도 구분 마크를 놓음 — 뒤 조각(id) 고름 · 연도 고름. */
|
|
onMark: (piece: string) => void;
|
|
}
|
|
|
|
export interface PlanDraw {
|
|
layer: PlanMapLayer;
|
|
/** 좌측 「그리기」 칸 몸(모드 단추 · 제약 칸 · 안내). */
|
|
panel: HTMLElement;
|
|
mode: () => DrawMode;
|
|
setMode: (mode: DrawMode) => void;
|
|
setEditable: (editable: boolean) => void;
|
|
/** 키 — 받았으면 참(Enter · Esc · Backspace). */
|
|
key: (event: KeyboardEvent) => boolean;
|
|
/** 되돌리기 뒤 — 그리던 선이 사라졌으면 그리기를 멈춤. */
|
|
sync: () => void;
|
|
/** 검증 창구 — 지금 미리보기 · 제약 · 그리는 선(차례 · 끝에서 긋는 중). */
|
|
preview: () => DrawPreview | null;
|
|
stroke: () => { line: number; flip: boolean } | null;
|
|
constraint: () => { kind: DrawConstraint; lengthM: number; slopePct: number };
|
|
setConstraint: (kind: DrawConstraint, lengthM?: number, slopePct?: number) => void;
|
|
}
|
|
|
|
export function createPlanDraw(params: PlanDrawParams): PlanDraw {
|
|
let mode: DrawMode = "idle";
|
|
let editable = false;
|
|
let active: number | null = null; // 그리는 선 차례(첫 누름 전 = null)
|
|
let flip = false; // 끝에서 긋는 중 — 끝낼 때 뒤집음
|
|
let strokeStart: PlanNetwork | null = null; // Esc 로 돌아갈 꼴
|
|
let preview: DrawPreview | null = null;
|
|
let candidates: Vertex[] = [];
|
|
let kind: DrawConstraint = "free";
|
|
let lengthM = DRAW_DEFAULT_LENGTH_M;
|
|
let slopePct = DRAW_DEFAULT_SLOPE_PCT;
|
|
|
|
// ── 좌측 칸 ─────────────────────────────────────────────
|
|
const drawButton = createButton({
|
|
label: "긋기",
|
|
variant: "filled",
|
|
size: 28,
|
|
onClick: () => setMode(mode === "draw" ? "idle" : "draw"),
|
|
});
|
|
const markButton = createButton({
|
|
label: "연도 구분",
|
|
variant: "ghost",
|
|
size: 28,
|
|
onClick: () => setMode(mode === "mark" ? "idle" : "mark"),
|
|
});
|
|
const modeRow = document.createElement("div");
|
|
modeRow.className = "d03-plan__row";
|
|
modeRow.append(drawButton, markButton);
|
|
const kindSegment = createSegment({
|
|
options: [
|
|
{ value: "free", label: "자유" },
|
|
{ value: "length", label: "길이 고정" },
|
|
{ value: "slope", label: "기울기 고정" },
|
|
{ value: "both", label: "둘 다" },
|
|
],
|
|
value: kind,
|
|
size: 24,
|
|
ariaLabel: "긋기 제약",
|
|
onChange: (value) => {
|
|
kind = value as DrawConstraint;
|
|
fieldsState();
|
|
},
|
|
});
|
|
kindSegment.root.dataset.role = "draw-constraint";
|
|
const lengthField = createInputField({
|
|
label: "길이",
|
|
type: "number",
|
|
value: String(lengthM),
|
|
min: 1,
|
|
unit: "m",
|
|
size: 24,
|
|
onInput: (value) => {
|
|
const next = Number(value);
|
|
if (next > 0) lengthM = next;
|
|
lengthField.setError(next > 0 ? undefined : "0 보다 큰 수");
|
|
},
|
|
});
|
|
lengthField.input.dataset.role = "draw-length";
|
|
const slopeField = createInputField({
|
|
label: "기울기(± 같음)",
|
|
type: "number",
|
|
value: String(slopePct),
|
|
unit: "%",
|
|
size: 24,
|
|
onInput: (value) => {
|
|
const next = Number(value);
|
|
const ok = value.trim() !== "" && Number.isFinite(next);
|
|
if (ok) slopePct = next;
|
|
slopeField.setError(ok ? undefined : "숫자");
|
|
degText();
|
|
},
|
|
});
|
|
slopeField.input.dataset.role = "draw-slope";
|
|
const slopeDegText = createText("", "muted");
|
|
slopeDegText.dataset.role = "draw-slope-deg";
|
|
const degText = (): void => {
|
|
slopeDegText.textContent = `≈ ${fmt(slopeDeg(Math.abs(slopePct)))}°`;
|
|
};
|
|
degText();
|
|
const fieldRow = document.createElement("div");
|
|
fieldRow.className = "d03-plan__row";
|
|
fieldRow.append(lengthField.root, slopeField.root, slopeDegText);
|
|
const hint = createText("", "muted");
|
|
hint.classList.add("d03-plan__hint");
|
|
const panel = document.createElement("div");
|
|
panel.className = "d03-plan__draw";
|
|
panel.append(modeRow, kindSegment.root, fieldRow, hint);
|
|
|
|
function fieldsState(): void {
|
|
lengthField.input.disabled = kind === "free" || kind === "slope";
|
|
slopeField.input.disabled = kind === "free" || kind === "length";
|
|
}
|
|
|
|
function panelState(): void {
|
|
const network = params.network();
|
|
drawButton.querySelector(".ui-btn__label")!.textContent = mode === "draw" ? "긋기 끝" : "긋기";
|
|
drawButton.disabled = !editable;
|
|
markButton.disabled = !editable || !network.lines.some((line) => lineLength(line.vertices) > 0);
|
|
drawButton.setAttribute("aria-pressed", String(mode === "draw"));
|
|
markButton.setAttribute("aria-pressed", String(mode === "mark"));
|
|
panel.dataset.mode = mode;
|
|
hint.textContent = !editable
|
|
? "보기만 — 산림청 계정에서 긋습니다."
|
|
: mode === "draw"
|
|
? active === null
|
|
? "시점 · 종점 · 선 끝 · 선 위를 눌러 시작합니다."
|
|
: "누름 = 점 · Enter 끝 · Esc 취소 · Backspace 마지막 점 빼기"
|
|
: mode === "mark"
|
|
? "선 위를 눌러 연도를 나눕니다 · 오른쪽 누름 = 마크 지움"
|
|
: "[긋기]로 시점 · 종점 · 선에서 긋습니다 · 선을 누르면 고릅니다.";
|
|
}
|
|
fieldsState();
|
|
|
|
// ── 셈 ──────────────────────────────────────────────────
|
|
const lastOf = (line: number): Vertex | null => {
|
|
const vertices = params.network().lines[line]?.vertices ?? [];
|
|
return vertices[vertices.length - 1] ?? null;
|
|
};
|
|
|
|
/** 붙을 자리 — 앞에서 = 종점 · 끝에서 = 시점 · 다른 선 꺾임점 · 다른 선 위(그리는 선 빼고). */
|
|
function snapAt(
|
|
px: number,
|
|
py: number,
|
|
map: ScreenMap,
|
|
): { point: Vertex; note: string; onLine: DrawPreview["onLine"] } | null {
|
|
const { starts, ends } = params.base();
|
|
const network = params.network();
|
|
const offers = (flip ? starts : ends).map((point) => ({
|
|
point,
|
|
note: flip ? "시점에 붙음" : "종점에 붙음",
|
|
}));
|
|
network.lines.forEach((line, i) => {
|
|
if (i !== active)
|
|
for (const point of line.vertices) offers.push({ point, note: "선 꺾임점에 붙음" });
|
|
});
|
|
const best = offers
|
|
.map((offer) => ({ ...offer, gap: screenGap(map, offer.point, px, py) }))
|
|
.filter((offer) => offer.gap <= SNAP_PX)
|
|
.sort((a, b) => a.gap - b.gap)[0];
|
|
if (best) return { point: best.point, note: best.note, onLine: null };
|
|
const hit = lineAt(network, px, py, map, active);
|
|
return hit
|
|
? { point: hit.point, note: "선 위에 붙음", onLine: { line: hit.line, segment: hit.segment } }
|
|
: null;
|
|
}
|
|
|
|
/** 마우스 자리 → 찍을 점 · 값 — 붙기가 제약보다 먼저. */
|
|
function previewAt(px: number, py: number, map: ScreenMap): DrawPreview | null {
|
|
if (active === null) return null;
|
|
const from = lastOf(active);
|
|
if (!from) return null;
|
|
const z = params.heightAt();
|
|
const cursor = map.toMetric(px, py);
|
|
candidates = kind === "both" ? compassCandidates(from, lengthM, slopePct, z) : [];
|
|
const snap = snapAt(px, py, map);
|
|
let point: Vertex | null = cursor;
|
|
let note: string | null = null;
|
|
if (snap) {
|
|
[point, note] = [snap.point, snap.note];
|
|
} else if (kind === "length") {
|
|
point = fixedLengthPoint(from, cursor, lengthM);
|
|
} else if (kind === "slope") {
|
|
point = fixedSlopePoint(from, cursor, slopePct, z);
|
|
if (!point) note = `이 방향엔 ±${fmt(Math.abs(slopePct))} % 자리 없음`;
|
|
} else if (kind === "both") {
|
|
point = compassPoint(from, cursor, lengthM, slopePct, z);
|
|
if (!point) note = `반지름 ${fmt(lengthM)} m 원 위에 ±${fmt(Math.abs(slopePct))} % 자리 없음`;
|
|
}
|
|
const at = point ?? cursor;
|
|
const length = segmentLength(from, at);
|
|
return {
|
|
point: at,
|
|
lengthM: length,
|
|
slopePct: groundSlopePct(from, at, z),
|
|
note,
|
|
blocked: !point || length <= 0,
|
|
snapped: !!snap,
|
|
onLine: snap?.onLine ?? null,
|
|
};
|
|
}
|
|
|
|
// ── 모드 ────────────────────────────────────────────────
|
|
/** 이번 긋기 마침 — 점 하나뿐인 선 버림 · 끝에서 그은 선은 뒤집고 머리 잇기 · 꼬리가 다른 선 머리면 잇기. */
|
|
function stop(): void {
|
|
let network = params.network();
|
|
const line = active;
|
|
const entry = line === null ? null : network.lines[line];
|
|
if (line !== null && entry) {
|
|
if (entry.vertices.length < 2) {
|
|
const dropped = removeLine(network, line);
|
|
if (typeof dropped !== "string") network = dropped;
|
|
} else if (flip) {
|
|
const turned = reverseLine(network, line);
|
|
if (typeof turned !== "string") network = attachHead(turned, line);
|
|
} else {
|
|
const tail = entry.vertices[entry.vertices.length - 1];
|
|
const next = network.lines.findIndex(
|
|
(other, i) =>
|
|
i !== line &&
|
|
!other.branch &&
|
|
other.vertices.length > 1 &&
|
|
samePoint(other.vertices[0], tail),
|
|
);
|
|
if (next >= 0) network = attachHead(network, next);
|
|
}
|
|
if (network !== params.network()) params.commit(network);
|
|
}
|
|
active = null;
|
|
flip = false;
|
|
strokeStart = null;
|
|
preview = null;
|
|
candidates = [];
|
|
}
|
|
|
|
function setMode(next: DrawMode): void {
|
|
if (mode === "draw") stop();
|
|
mode = editable ? next : "idle";
|
|
panelState();
|
|
params.onMode();
|
|
}
|
|
|
|
/** [긋기] 첫 누름 — 선 끝 이어 긋기 · 종점(뒤집어 긋기) · 시점 · 선 위 갈래. 참 = 시작함. */
|
|
function begin(px: number, py: number, map: ScreenMap): boolean {
|
|
const network = params.network();
|
|
const { starts, ends } = params.base();
|
|
const gap = (point: Vertex): number => screenGap(map, point, px, py);
|
|
const nearest = <T extends { gap: number }>(items: T[]): T | undefined =>
|
|
items.filter((item) => item.gap <= SNAP_PX).sort((a, b) => a.gap - b.gap)[0];
|
|
const onBase = (list: Vertex[], point: Vertex): boolean =>
|
|
list.some((p) => samePoint(p, point));
|
|
strokeStart = network;
|
|
// 1) 선 끝 — 꼬리(종점에 닿은 꼬리 빼고) · 갈래 없는 선 머리(시점에 놓인 머리 빼고)
|
|
const tips: Array<{ line: number; head: boolean; gap: number }> = [];
|
|
network.lines.forEach((line, i) => {
|
|
const tail = line.vertices[line.vertices.length - 1];
|
|
const head = line.vertices[0];
|
|
if (tail && !onBase(ends, tail)) tips.push({ line: i, head: false, gap: gap(tail) });
|
|
if (line.vertices.length > 1 && !line.branch && !onBase(starts, head))
|
|
tips.push({ line: i, head: true, gap: gap(head) });
|
|
});
|
|
const tip = nearest(tips);
|
|
if (tip) {
|
|
if (tip.head) {
|
|
const turned = reverseLine(network, tip.line);
|
|
if (typeof turned === "string") {
|
|
showToast(turned, "info");
|
|
return false;
|
|
}
|
|
params.commit(turned);
|
|
}
|
|
[active, flip] = [tip.line, tip.head];
|
|
return true;
|
|
}
|
|
// 2) 시점 · 종점
|
|
const base = nearest([
|
|
...starts.map((point) => ({ point, fromEnd: false, gap: gap(point) })),
|
|
...ends.map((point) => ({ point, fromEnd: true, gap: gap(point) })),
|
|
]);
|
|
if (base) {
|
|
const { point, fromEnd } = base;
|
|
const owner = fromEnd
|
|
? -1
|
|
: network.lines.findIndex((line) => line.vertices.some((v) => samePoint(v, point)));
|
|
if (owner >= 0) {
|
|
// 이미 선이 놓인 시점 = 그 점의 갈래
|
|
const vertex = network.lines[owner].vertices.findIndex((v) => samePoint(v, point));
|
|
params.commit(addBranch(network, owner, vertex));
|
|
} else params.commit(newLine(network, point));
|
|
[active, flip] = [params.network().lines.length - 1, fromEnd];
|
|
return true;
|
|
}
|
|
// 3) 선 위 · 꺾임점 = 갈래
|
|
const hit = lineAt(network, px, py, map);
|
|
if (hit) {
|
|
let next = network;
|
|
let vertex = hit.vertex;
|
|
if (vertex === null) {
|
|
next = insertVertex(next, hit.line, hit.segment, hit.point);
|
|
vertex = hit.segment + 1;
|
|
}
|
|
params.commit(addBranch(next, hit.line, vertex));
|
|
[active, flip] = [params.network().lines.length - 1, false];
|
|
return true;
|
|
}
|
|
strokeStart = null;
|
|
showToast("시점 · 종점 · 선 끝 · 선 위를 눌러 시작합니다.", "info");
|
|
return false;
|
|
}
|
|
|
|
/** 긋는 해가 끝 조각 해와 다르면 `fromM`(이번 점 앞 길이)에서 나눠 새 조각 = 긋는 해. */
|
|
function yearSplit(network: PlanNetwork, line: number, fromM: number): PlanNetwork {
|
|
const year = params.year();
|
|
if (!(fromM > 0)) return network;
|
|
let next = normalizePieces(network, year);
|
|
const id = next.lines[line].id;
|
|
const tail = next.pieces.filter((piece) => piece.line === id).at(-1);
|
|
if (!tail || tail.year === year) return next;
|
|
next = splitPiece(next, id, fromM);
|
|
const index = next.pieces.findIndex(
|
|
(piece) => piece.line === id && Math.abs(piece.from_m - fromM) < 1e-3,
|
|
);
|
|
return index >= 0 ? setPieceYear(next, index, year) : next;
|
|
}
|
|
|
|
function addPoint(): boolean {
|
|
if (active === null || !preview) return false;
|
|
if (preview.blocked) {
|
|
showToast(preview.note ?? "여기에는 점을 찍을 수 없습니다.", "info");
|
|
return false;
|
|
}
|
|
const line = active;
|
|
const ended = preview.snapped;
|
|
let next = params.network();
|
|
const before = Math.round(lineLength(next.lines[line].vertices) * 1000) / 1000;
|
|
if (preview.onLine)
|
|
next = insertVertex(next, preview.onLine.line, preview.onLine.segment, preview.point);
|
|
next = yearSplit(appendVertex(next, line, preview.point), line, before);
|
|
params.commit(next);
|
|
if (ended) {
|
|
showToast(`${preview.note ?? "붙음"} — 긋기 끝`, "success");
|
|
setMode("idle");
|
|
}
|
|
return true;
|
|
}
|
|
|
|
const layer: PlanMapLayer = {
|
|
draw(context, map) {
|
|
const network = params.network();
|
|
paintNetwork(context, map, network, params.base(), active, params.heightAt(), () => {
|
|
const from = active === null ? null : lastOf(active);
|
|
if (from && preview)
|
|
paintPreview(
|
|
context,
|
|
map,
|
|
from,
|
|
preview,
|
|
kind === "both" ? { lengthM, candidates } : null,
|
|
);
|
|
});
|
|
},
|
|
press(px, py, map, button) {
|
|
if (!editable) return false;
|
|
if (mode === "draw" && button === 0) {
|
|
if (active === null) {
|
|
const started = begin(px, py, map);
|
|
panelState();
|
|
params.onMode();
|
|
return started;
|
|
}
|
|
preview = previewAt(px, py, map);
|
|
return addPoint();
|
|
}
|
|
if (mode === "mark") {
|
|
const network = params.network();
|
|
const hit = lineAt(network, px, py, map);
|
|
if (!hit) return false;
|
|
const id = network.lines[hit.line].id;
|
|
const next =
|
|
button === 2
|
|
? removeMark(network, id, hit.atM, SNAP_PX / map.pxPerMeter)
|
|
: splitPiece(network, id, hit.atM);
|
|
if (next === network) return true;
|
|
const added = next.pieces.find((piece) => !network.pieces.some((p) => p.id === piece.id));
|
|
params.commit(next);
|
|
if (added) params.onMark(added.id);
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
hover(px, py, map) {
|
|
preview = mode === "draw" ? previewAt(px, py, map) : null;
|
|
},
|
|
leave() {
|
|
preview = null;
|
|
},
|
|
};
|
|
|
|
panelState();
|
|
|
|
return {
|
|
layer,
|
|
panel,
|
|
mode: () => mode,
|
|
setMode,
|
|
setEditable(next) {
|
|
editable = next;
|
|
if (!editable) setMode("idle");
|
|
panelState();
|
|
},
|
|
key(event) {
|
|
if (mode === "draw" && keyIs(event, "plan.drawFinish")) {
|
|
setMode("idle");
|
|
return true;
|
|
}
|
|
if (mode !== "idle" && event.key === "Escape") {
|
|
if (mode === "draw" && strokeStart && strokeStart !== params.network())
|
|
params.commit(strokeStart);
|
|
active = null; // 되돌린 꼴이라 stop 의 버림 · 뒤집기는 안 함
|
|
setMode("idle");
|
|
return true;
|
|
}
|
|
if (mode === "draw" && active !== null && keyIs(event, "plan.drawBack")) {
|
|
const network = params.network();
|
|
const step =
|
|
network.lines[active].vertices.length < 2
|
|
? removeLine(network, active)
|
|
: dropLastVertex(network, active);
|
|
if (typeof step === "string") showToast(step, "info");
|
|
else if (step !== network) params.commit(step);
|
|
if (active >= params.network().lines.length) {
|
|
active = null;
|
|
setMode("idle");
|
|
}
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
sync() {
|
|
if (active !== null && active >= params.network().lines.length) {
|
|
active = null;
|
|
flip = false;
|
|
mode = "idle";
|
|
}
|
|
panelState();
|
|
},
|
|
preview: () => preview,
|
|
stroke: () => (active === null ? null : { line: active, flip }),
|
|
constraint: () => ({ kind, lengthM, slopePct }),
|
|
setConstraint(next, length, slope) {
|
|
kind = next;
|
|
kindSegment.set(next);
|
|
if (length !== undefined) [lengthM, lengthField.input.value] = [length, String(length)];
|
|
if (slope !== undefined) {
|
|
[slopePct, slopeField.input.value] = [slope, String(slope)];
|
|
degText();
|
|
}
|
|
fieldsState();
|
|
},
|
|
};
|
|
}
|