eomsangdonandClaude Sonnet 5.5
58ba4545f2
- 알약: 예상노선 추적 · 영선 노선 · 토공 최소 · 기울기 순한 · 안전 우선 · 계류 횡단 최소 · 공사비 어림 최소 · 비중 계산 — 짧은 노선 · 흙 균형 뺌 · 네 칸 두 줄(좁으면 두 칸 네 줄) - 영선 노선일 때만 「목표 기울기」 칸(criteria.target_grade_pct · 비우면 상한) · 응답에서 쓴 값을 기준값 줄에 보임 - 비교값 두 묶음: 노선 · 기울기(목표 기울기 편차 · 옆경사) / 흙 · 안전 · 비용(위험 구간 통과 · 계류 횡단 · 이격 · 공사비 어림 상대값) - 옛 저장값 short · balance 는 예상노선 추적으로 읽음 · 시험: 새 이름 · 비교값 · 목표 기울기 · 옛 값 · 왕복에 새 넷 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
483 lines
21 KiB
TypeScript
483 lines
21 KiB
TypeScript
/* =============================================================================
|
|
* B05_Profile_UI_RouteEdit_Recommend.ts
|
|
* 계획노선 편집 창의 [노선 추천] 모달(계획서 23-2) — 알약 넷(예상노선 추적 · 토공 최소 ·
|
|
* 기울기 순한 · 비중 계산) · 비중 슬라이더 셋 · 공통 제약 네 칸 · 미리 보기 지도 · 비교값 ·
|
|
* 못 지킨 구간 · [적용] · [닫기].
|
|
*
|
|
* 알약을 누르면 서버가 그 갈래를 셈해 주고(`request`) 지도에 미리 보기로 그린다. 편집 창의 노선은
|
|
* 건드리지 않는다 — [적용]을 눌러야 `onApply` 로 편집값에 실리고(되돌리기 한 걸음), [닫기]는
|
|
* 미리 보기를 버린다. 다시 계산(배수유역부터)은 여기서 안 돈다 — 편집 창 [확인]에서만.
|
|
* 비교값 · 기준값은 서버가 준 것을 보이기만 한다(계산 자리 = 서버 단독).
|
|
* 서버 부르기 · 캐시 · 「현재 추천」은 `_Initial` 몫이고 여기는 화면만 만든다.
|
|
* ========================================================================== */
|
|
|
|
import { openModal } from "@ui/ui_template_modal";
|
|
import { showToast } from "@ui/ui_template_elements";
|
|
import type {
|
|
RouteInitialCriteria,
|
|
RouteInitialLogic,
|
|
RouteInitialWeights,
|
|
} from "./B05_Profile_Api_RouteInitial";
|
|
import {
|
|
choiceLabel,
|
|
criteriaLine,
|
|
CRITERIA_KEYS,
|
|
LOGIC_LABEL,
|
|
metricsLines,
|
|
TARGET_GRADE_KEY,
|
|
canLockWeight,
|
|
derivedWeightKey,
|
|
inputWeight,
|
|
moveWeight,
|
|
relaxedLine,
|
|
SIMILAR_HINT,
|
|
similarLine,
|
|
violationsLine,
|
|
violationText,
|
|
WEIGHT_KEYS,
|
|
type CriteriaKey,
|
|
type InitialChoice,
|
|
type InitialCriteria,
|
|
type MapLayer,
|
|
type WeightLocks,
|
|
type WeightKey,
|
|
} from "./B05_Profile_UI_RouteEdit_Initial_Model";
|
|
import { createRecommendMap, RECOMMEND_MAP_HTML } from "./B05_Profile_UI_RouteEdit_Recommend_Map";
|
|
import "./B05_Profile_UI_Style_RouteRecommend.css";
|
|
|
|
type Vertex = [number, number];
|
|
|
|
const PILLS: RouteInitialLogic[] = [
|
|
"follow",
|
|
"gradeline",
|
|
"earthwork",
|
|
"gentle",
|
|
"safe",
|
|
"crossings",
|
|
"cost",
|
|
"weighted",
|
|
];
|
|
|
|
const PILL_TITLE: Record<RouteInitialLogic, string> = {
|
|
follow: "전처리가 만든 기본 노선 — 예상노선을 따라갑니다",
|
|
earthwork: "절토 · 성토가 가장 적은 노선",
|
|
gentle: "종단기울기가 가장 순한 노선",
|
|
gradeline: "정한 종단기울기로 등고선을 따라가는 등경사선(영선) — 목표 기울기를 넣을 수 있음",
|
|
safe: "급한 옆경사 · 계류 가까운 곳을 피하는 노선",
|
|
crossings: "계류를 건너는 횟수가 가장 적은 노선",
|
|
cost: "토공 + 연장 + 계류 횡단을 섞은 공사비 어림(상대값)이 가장 낮은 노선",
|
|
weighted: "예상 · 토공 · 기울기 비중(합 100)으로 셈한 노선",
|
|
};
|
|
|
|
const WEIGHT_NAME: Record<WeightKey, string> = {
|
|
expected: "예상",
|
|
earthwork: "토공",
|
|
grade: "기울기",
|
|
};
|
|
|
|
/** 고정 단추 그림 — 자물쇠(글자 색을 따라 밝음 · 어두움에서 보인다). */
|
|
const LOCK_ICON = `<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" fill="none"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3.5" y="7" width="9" height="6.5" rx="1.2" /><path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" /></svg>`;
|
|
|
|
/** 공통 제약 칸 — 표시 이름 · 단위 · 서버가 준 값(`InitialCriteria`)에서 그 칸을 꺼내는 법. */
|
|
const CRITERIA_FIELD: Record<
|
|
CriteriaKey,
|
|
{ label: string; unit: string; title: string; of: (c: InitialCriteria) => number | null }
|
|
> = {
|
|
max_grade_pct: {
|
|
label: "종단기울기 상한",
|
|
unit: "%",
|
|
title: "종단기울기 상한(%) — 비우면 프로젝트 기본값(설계속도 · 지형 표값)",
|
|
of: (c) => c.maxGradePct,
|
|
},
|
|
min_radius_m: {
|
|
label: "최소 반지름",
|
|
unit: "m",
|
|
title: "최소 곡선반지름(m) — 비우면 프로젝트 기본값",
|
|
of: (c) => c.minRadiusM,
|
|
},
|
|
stream_offset_m: {
|
|
label: "계류 이격",
|
|
unit: "m",
|
|
title: "계류 이격(m) — 비우면 기본값 100m",
|
|
of: (c) => c.streamOffsetM,
|
|
},
|
|
grade_smooth_m: {
|
|
label: "지반 고름 폭",
|
|
unit: "m",
|
|
title: "기울기 잴 지반 고름 폭(m) — 비우면 기본값 5m",
|
|
of: (c) => c.gradeSmoothM,
|
|
},
|
|
};
|
|
|
|
export interface RecommendParams {
|
|
/** 칸에 처음 채울 제약 겹침(직접 넣은 값만). */
|
|
criteria: RouteInitialCriteria | null;
|
|
/** 칸을 비운 채 처음 물었을 때 서버가 답한 값 — 빈 칸 placeholder. 여기서 채워 간다. */
|
|
defaults: Partial<Record<CriteriaKey, number>>;
|
|
weights: RouteInitialWeights;
|
|
/** 비중 · 고정 상태 — 편집 창이 사는 동안 모달을 닫았다 열어도 남는다. 여기서 고쳐 간다. */
|
|
weightMemory: { weights: RouteInitialWeights | null; locks: WeightLocks };
|
|
planMinRadiusM: number;
|
|
/** 지도 바탕 — 예상노선(원본 점 묶음) · 창을 연 노선(노드). */
|
|
expected: Vertex[];
|
|
current: Vertex[];
|
|
/** 서버에 갈래 하나를 묻고 편집값 한 벌로 펴 돌려준다(던지면 토스트). */
|
|
request: (
|
|
logic: RouteInitialLogic,
|
|
weights: RouteInitialWeights | null,
|
|
criteria: RouteInitialCriteria | null,
|
|
) => Promise<InitialChoice>;
|
|
/** [적용] — 미리 본 노선을 편집 창에 놓는다. */
|
|
onApply: (choice: InitialChoice) => void;
|
|
}
|
|
|
|
export function openRecommendModal(params: RecommendParams): void {
|
|
let logic: RouteInitialLogic = "follow";
|
|
const { locks } = params.weightMemory;
|
|
let weights: RouteInitialWeights = { ...(params.weightMemory.weights ?? params.weights) };
|
|
/** 값 칸에 넣은 숫자가 고정 규칙 아래 합 100 을 못 맞추는 비중 — 빨간 테두리 · 서버에 안 보냄. */
|
|
const invalid = new Set<WeightKey>();
|
|
let preview: InitialChoice | null = null;
|
|
let busy = false;
|
|
/** 마지막 미리 보기 뒤 슬라이더 · 제약 칸을 만졌다 — 미리 본 노선이 칸 값과 다르다. */
|
|
let dirty = false;
|
|
let closed = false;
|
|
let seq = 0;
|
|
|
|
let bodyEl: HTMLElement | null = null;
|
|
let map: ReturnType<typeof createRecommendMap> | null = null;
|
|
openModal({
|
|
title: "노선 추천",
|
|
closeLabel: "✕",
|
|
dialogClass: "b05-routerec",
|
|
// 곡선 라벨 패널(z-index 1001)이 떠 있어도 이 모달과 뒤 막이 그 위에 오게 한다.
|
|
backdropClass: "b05-routerec-backdrop",
|
|
// ✕ · Esc · 바깥 누르기 모두 [닫기]와 같다 — 미리 보기를 버린다.
|
|
beforeClose: () => {
|
|
closed = true;
|
|
map?.dispose();
|
|
return true;
|
|
},
|
|
mount: (body, close) => {
|
|
bodyEl = body;
|
|
body.classList.add("b05-routerec__body");
|
|
body.innerHTML = `
|
|
<div class="b05-routerec__pills" role="radiogroup" aria-label="추천 갈래">
|
|
${PILLS.map(
|
|
(key) => `<button type="button" class="b05-routerec__pill" role="radio"
|
|
data-logic="${key}" title="${PILL_TITLE[key]}">${LOGIC_LABEL[key]}</button>`,
|
|
).join("")}
|
|
</div>
|
|
<div class="b05-routerec__main">
|
|
<div class="b05-routerec__mapbox">
|
|
<div class="b05-routerec__mapwrap" role="img" aria-label="추천 노선 미리 보기">
|
|
${RECOMMEND_MAP_HTML}
|
|
</div>
|
|
<div class="b05-routerec__legend">
|
|
<span><i class="is-expected"></i>예상노선(원본)</span>
|
|
<span><i class="is-current"></i>창을 연 노선</span>
|
|
<span><i class="is-preview"></i>미리 보기</span>
|
|
</div>
|
|
<div class="b05-routerec__maphint">휠 = 확대 · 축소 끌기 = 이동 ↺ ↻ = 회전</div>
|
|
</div>
|
|
<div class="b05-routerec__side">
|
|
<div class="b05-routerec__weights" hidden>
|
|
<div class="b05-routerec__bars">
|
|
${WEIGHT_KEYS.map(
|
|
(key) => `<div class="b05-routerec__bar">
|
|
<input type="number" class="b05-routerec__num" min="0" max="100" step="1"
|
|
inputmode="numeric" data-weight-num="${key}" aria-label="${WEIGHT_NAME[key]} 비중 값" />
|
|
<input type="range" min="0" max="100" step="1" data-weight="${key}"
|
|
aria-label="${WEIGHT_NAME[key]} 비중" />
|
|
<button type="button" class="b05-routerec__lock" data-weight-lock="${key}"
|
|
aria-pressed="false" aria-label="${WEIGHT_NAME[key]} 비중 고정">${LOCK_ICON}</button>
|
|
<span>${WEIGHT_NAME[key]}</span></div>`,
|
|
).join("")}
|
|
</div>
|
|
<span class="b05-routerec__sum" data-weight-sum></span>
|
|
</div>
|
|
<div class="b05-routerec__criteria">
|
|
${CRITERIA_KEYS.map(
|
|
(key) => `<label title="${CRITERIA_FIELD[key].title}">${CRITERIA_FIELD[key].label}
|
|
<input type="number" inputmode="decimal" step="0.1" min="0"
|
|
data-criteria="${key}" placeholder="기본값" />${CRITERIA_FIELD[key].unit}</label>`,
|
|
).join("")}
|
|
</div>
|
|
<label class="b05-routerec__target" data-target-row hidden
|
|
title="영선 노선이 따라갈 종단기울기(%) — 비우면 위 종단기울기 상한">목표 기울기
|
|
<input type="number" inputmode="decimal" step="0.1" min="0" max="100"
|
|
data-criteria="${TARGET_GRADE_KEY}" placeholder="상한" />%</label>
|
|
<button type="button" class="ui-btn ui-btn--glass" data-act="rerun" hidden>다시 셈</button>
|
|
</div>
|
|
</div>
|
|
<div class="b05-routerec__lines">
|
|
<div data-line="metrics"></div>
|
|
<div data-line="metrics-work"></div>
|
|
<div data-line="violations" hidden></div>
|
|
<div class="is-warn" data-line="relaxed" hidden></div>
|
|
<div data-line="similar" hidden></div>
|
|
<div class="is-dim" data-line="similar-hint" hidden></div>
|
|
<div data-line="criteria"></div>
|
|
</div>
|
|
<div class="b05-routerec__foot">
|
|
<span class="b05-routerec__state" data-state></span>
|
|
<button type="button" class="ui-btn ui-btn--filled" data-act="apply" disabled>적용</button>
|
|
<button type="button" class="ui-btn ui-btn--ghost" data-act="close">닫기</button>
|
|
</div>`;
|
|
|
|
const q = <T extends HTMLElement>(sel: string): T => body.querySelector<T>(sel)!;
|
|
map = createRecommendMap(q<HTMLElement>(".b05-routerec__mapwrap"));
|
|
const pills = [...body.querySelectorAll<HTMLButtonElement>("[data-logic]")];
|
|
const weightsBox = q<HTMLElement>(".b05-routerec__weights");
|
|
const rerun = q<HTMLButtonElement>('[data-act="rerun"]');
|
|
const applyButton = q<HTMLButtonElement>('[data-act="apply"]');
|
|
const stateEl = q<HTMLElement>("[data-state]");
|
|
const line = (name: string): HTMLElement => q<HTMLElement>(`[data-line="${name}"]`);
|
|
const criteriaInputs = body.querySelectorAll<HTMLInputElement>("[data-criteria]");
|
|
|
|
criteriaInputs.forEach((input) => {
|
|
const value =
|
|
params.criteria?.[input.dataset.criteria as CriteriaKey | typeof TARGET_GRADE_KEY];
|
|
input.value = value === undefined ? "" : String(value);
|
|
});
|
|
|
|
/** 칸에 지금 든 값만(빈 칸은 안 담김) — 서버에 실어 보낼 겹침. */
|
|
function currentCriteria(): RouteInitialCriteria {
|
|
const out: RouteInitialCriteria = {};
|
|
criteriaInputs.forEach((input) => {
|
|
const key = input.dataset.criteria as CriteriaKey | typeof TARGET_GRADE_KEY;
|
|
// 목표 기울기는 영선 노선을 물을 때만 보낸다.
|
|
if (key === TARGET_GRADE_KEY && logic !== "gradeline") return;
|
|
const raw = input.value.trim();
|
|
if (raw === "") return;
|
|
const value = Number(raw);
|
|
if (Number.isFinite(value)) out[key] = value;
|
|
});
|
|
return out;
|
|
}
|
|
|
|
function drawMap(): void {
|
|
const layers: MapLayer[] = [
|
|
{ kind: "expected", points: params.expected },
|
|
{ kind: "current", points: params.current },
|
|
];
|
|
if (preview) layers.push({ kind: "preview", points: preview.snapshot.planned });
|
|
map?.setLayers(layers);
|
|
}
|
|
|
|
function render(): void {
|
|
pills.forEach((pill) => {
|
|
const on = pill.dataset.logic === logic;
|
|
pill.setAttribute("aria-checked", String(on));
|
|
pill.classList.toggle("is-on", on);
|
|
pill.disabled = busy;
|
|
});
|
|
weightsBox.hidden = logic !== "weighted";
|
|
const derived = derivedWeightKey(locks);
|
|
for (const key of WEIGHT_KEYS) {
|
|
const slider = q<HTMLInputElement>(`[data-weight="${key}"]`);
|
|
const num = q<HTMLInputElement>(`[data-weight-num="${key}"]`);
|
|
const lock = q<HTMLButtonElement>(`[data-weight-lock="${key}"]`);
|
|
// 고정했거나 나머지 둘이 고정돼 저절로 정해진 비중은 잠김 — 움직이지 않는다.
|
|
const shut = locks[key] || derived === key;
|
|
slider.value = String(weights[key]);
|
|
slider.disabled = busy || shut;
|
|
// 넣다 만 틀린 글은 지우지 않는다 — 빨간 테두리로 남겨 고치게 한다.
|
|
if (!invalid.has(key)) num.value = String(weights[key]);
|
|
num.disabled = busy || shut;
|
|
num.classList.toggle("is-invalid", invalid.has(key));
|
|
num.setAttribute("aria-invalid", String(invalid.has(key)));
|
|
lock.setAttribute("aria-pressed", String(shut));
|
|
lock.classList.toggle("is-on", shut);
|
|
lock.classList.toggle("is-auto", derived === key);
|
|
// 셋 다 고정은 막는다 — 마지막 하나는 고정 단추가 꺼지고 잠김으로만 보인다.
|
|
lock.disabled = busy || !canLockWeight(locks, key) || derived === key;
|
|
lock.title =
|
|
derived === key
|
|
? "나머지 둘이 고정돼 저절로 정해집니다"
|
|
: locks[key]
|
|
? "고정 풀기"
|
|
: "이 값 고정 — 다른 비중을 움직여도 안 바뀝니다";
|
|
}
|
|
q<HTMLElement>("[data-weight-sum]").textContent =
|
|
`합 ${weights.expected + weights.earthwork + weights.grade}`;
|
|
criteriaInputs.forEach((input) => {
|
|
const key = input.dataset.criteria as CriteriaKey | typeof TARGET_GRADE_KEY;
|
|
// 목표 기울기를 비우면 종단기울기 상한을 쓴다 — 그 값이 자리표시.
|
|
const known =
|
|
key === TARGET_GRADE_KEY ? params.defaults.max_grade_pct : params.defaults[key];
|
|
input.placeholder =
|
|
known !== undefined ? String(known) : key === TARGET_GRADE_KEY ? "상한" : "기본값";
|
|
input.disabled = busy;
|
|
});
|
|
q<HTMLElement>("[data-target-row]").hidden = logic !== "gradeline";
|
|
rerun.hidden = !dirty;
|
|
rerun.disabled = busy || invalid.size > 0;
|
|
applyButton.disabled = busy || dirty || !preview || invalid.size > 0;
|
|
const shown = metricsLines(preview?.metrics ?? null);
|
|
line("metrics").textContent = preview
|
|
? preview.metrics
|
|
? shown.route
|
|
: "비교값 — 서버 답에 없습니다."
|
|
: "비교값 — 알약을 누르면 서버가 셈해 미리 보여 줍니다.";
|
|
line("metrics-work").textContent = preview ? shown.work : "";
|
|
line("metrics-work").hidden = !line("metrics-work").textContent;
|
|
const violations = violationsLine(preview?.metrics ?? null);
|
|
line("violations").textContent = violations;
|
|
line("violations").title = (preview?.metrics?.violations ?? [])
|
|
.map((item) => `${violationText(item)} — ${item.reason}`)
|
|
.join("\n");
|
|
line("violations").hidden = !violations;
|
|
const relaxed = relaxedLine(preview);
|
|
line("relaxed").textContent = relaxed;
|
|
line("relaxed").hidden = !relaxed;
|
|
const similar = similarLine(preview);
|
|
line("similar").textContent = similar;
|
|
line("similar").hidden = !similar;
|
|
line("similar-hint").textContent = similar ? SIMILAR_HINT : "";
|
|
line("similar-hint").hidden = !similar;
|
|
line("criteria").textContent = preview
|
|
? criteriaLine(preview.criteria, params.planMinRadiusM, preview.logic === "gradeline")
|
|
: "";
|
|
line("criteria").hidden = !preview;
|
|
drawMap();
|
|
}
|
|
|
|
async function run(): Promise<void> {
|
|
if (logic === "weighted" && invalid.size > 0) {
|
|
showToast("비중 값이 합 100 을 못 맞춥니다 — 빨간 칸을 고쳐 주세요.", "error");
|
|
return;
|
|
}
|
|
const mine = ++seq;
|
|
const sentWeights = logic === "weighted" ? { ...weights } : null;
|
|
const criteria = currentCriteria();
|
|
busy = true;
|
|
dirty = false;
|
|
preview = null;
|
|
stateEl.textContent = `${choiceLabel(logic, sentWeights)} 셈하는 중…`;
|
|
render();
|
|
try {
|
|
const choice = await params.request(
|
|
logic,
|
|
sentWeights,
|
|
Object.keys(criteria).length ? criteria : null,
|
|
);
|
|
if (closed || mine !== seq) return;
|
|
// 비운 칸을 물었을 때 서버가 준 값 — 그 칸의 진짜 기본값으로 기억해 둔다.
|
|
for (const key of CRITERIA_KEYS) {
|
|
if (criteria[key] !== undefined) continue;
|
|
const resolved = choice.criteria ? CRITERIA_FIELD[key].of(choice.criteria) : null;
|
|
if (resolved !== null) params.defaults[key] = resolved;
|
|
}
|
|
preview = choice;
|
|
stateEl.textContent = `미리 보기: ${choiceLabel(logic, sentWeights)} — [적용]을 눌러야 편집 창에 놓입니다.`;
|
|
} catch (error) {
|
|
if (closed || mine !== seq) return;
|
|
stateEl.textContent = "셈하지 못했습니다.";
|
|
showToast(
|
|
error instanceof Error ? error.message : "초기노선을 셈하지 못했습니다.",
|
|
"error",
|
|
);
|
|
} finally {
|
|
if (!closed && mine === seq) {
|
|
busy = false;
|
|
render();
|
|
}
|
|
}
|
|
}
|
|
|
|
pills.forEach((pill) => {
|
|
pill.addEventListener("click", () => {
|
|
if (busy) return;
|
|
logic = pill.dataset.logic as RouteInitialLogic;
|
|
void run();
|
|
});
|
|
});
|
|
const remember = (): void => {
|
|
params.weightMemory.weights = { ...weights };
|
|
};
|
|
body.querySelectorAll<HTMLInputElement>("[data-weight]").forEach((input) => {
|
|
input.addEventListener("input", () => {
|
|
weights = moveWeight(
|
|
weights,
|
|
locks,
|
|
input.dataset.weight as WeightKey,
|
|
Number(input.value),
|
|
);
|
|
invalid.clear();
|
|
remember();
|
|
dirty = preview !== null;
|
|
render();
|
|
});
|
|
});
|
|
// 값 칸 — 0~100 정수 · 고정 규칙 아래 합 100 을 못 맞추면 받지 않고 빨간 테두리.
|
|
body.querySelectorAll<HTMLInputElement>("[data-weight-num]").forEach((input) => {
|
|
input.addEventListener("input", () => {
|
|
const key = input.dataset.weightNum as WeightKey;
|
|
const raw = input.value.trim();
|
|
const result = inputWeight(weights, locks, key, raw === "" ? Number.NaN : Number(raw));
|
|
if (result.ok) {
|
|
weights = result.weights;
|
|
invalid.clear();
|
|
remember();
|
|
dirty = preview !== null;
|
|
// 다른 칸의 글도 새 값으로 — 이 칸은 넣은 그대로 둔다.
|
|
body.querySelectorAll<HTMLInputElement>("[data-weight-num]").forEach((other) => {
|
|
if (other !== input)
|
|
other.value = String(weights[other.dataset.weightNum as WeightKey]);
|
|
});
|
|
} else {
|
|
invalid.add(key);
|
|
}
|
|
render();
|
|
});
|
|
// 칸을 떠날 때 맞는 값이면 글을 값으로 다듬는다(예: 070 → 70).
|
|
input.addEventListener("blur", () => {
|
|
if (!invalid.has(input.dataset.weightNum as WeightKey)) render();
|
|
});
|
|
});
|
|
// 고정 단추 — 지금 값을 붙든다. 셋 다 고정은 막혀 있다(단추가 꺼짐).
|
|
body.querySelectorAll<HTMLButtonElement>("[data-weight-lock]").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
const key = button.dataset.weightLock as WeightKey;
|
|
if (!canLockWeight(locks, key)) return;
|
|
locks[key] = !locks[key];
|
|
invalid.clear();
|
|
render();
|
|
});
|
|
});
|
|
criteriaInputs.forEach((input) => {
|
|
input.addEventListener("input", () => {
|
|
dirty = preview !== null;
|
|
render();
|
|
});
|
|
});
|
|
rerun.addEventListener("click", () => void run());
|
|
applyButton.addEventListener("click", () => {
|
|
if (!preview) return;
|
|
params.onApply(preview);
|
|
closed = true;
|
|
close();
|
|
});
|
|
q<HTMLButtonElement>('[data-act="close"]').addEventListener("click", () => {
|
|
closed = true;
|
|
close();
|
|
});
|
|
|
|
render();
|
|
// 처음 고른 상태 = 예상노선 추적 — 열자마자 그 미리 보기를 받는다.
|
|
void run();
|
|
},
|
|
});
|
|
|
|
// 편집 창 단축키(Ctrl+Z 등)가 뒤에서 노선을 되돌리지 않게 막는다. 칸 안의 글자 되돌리기는 그대로.
|
|
(bodyEl as HTMLElement | null)
|
|
?.closest(".ui-modal__backdrop")
|
|
?.addEventListener("keydown", (event) => {
|
|
const key = event as KeyboardEvent;
|
|
if (key.ctrlKey || key.metaKey) key.stopPropagation();
|
|
});
|
|
}
|