eomsangdon
2e28af6e86
B05/B06 인터페이스 일원화 1차 (2026-08-29 사용자 확정 계획): - A00_Common/b_structures_section.ts: B05 구조물 배치 폼·목록 공용 진입점 (재수출 + 스타일 동봉) - B06 좌측 패널에 [구조물 배치] 섹션 + 하단 dock [목록][구분선][저장버튼] (B05 동일 템플릿). 구조물 조작은 세션 pending으로 쌓여 기존 flushPendingStructures([임시저장]·[확정])로 정본 반영 - 선택 연동: 목록·폼 → 최근접 카드 focusStation, 횡단도 벽·세월교·BOX → 좌측 폼에 소유 측점 시설 로드(wireStructureSelection) - [횡단 조정] 하위 컨테이너(Adjust_Dock): 오버레이 조정창을 같은 deps로 사본 인스턴스 생성해 세움 — 로직 이동 0, 카드 재렌더로 자동 동기. 9키·십자 행은 사본에서 숨김(사용자 지시 7), 방향키 이중 입력 방지 - A군 시설 추가·이동·삭제는 B06에서 안내 토스트(배수유역 체인은 B05 몫) 검증: 공용 브라우저 — 구간값 길이 사본 ＋ 10.0→11.0m 양측 동기, 오버레이 － 원복, ✕ 닫기 시 사본 해제. B05 회귀 없음. typecheck 통과.
61 lines
2.7 KiB
TypeScript
61 lines
2.7 KiB
TypeScript
/* =============================================================================
|
|
* B06_Section_UI_Adjust_Dock.ts
|
|
* 좌측 [구조물 배치] 섹션 안 **[횡단 조정] 하위 컨테이너**(2026-08-29 사용자:
|
|
* B05/B06 일원화 — 오버레이 조정창 항목을 좌측에도 보이되, 기존 폼과 구분되게
|
|
* 접이식 하위 컨테이너에 담는다. 9키·십자 위치제어는 오버레이 전용).
|
|
*
|
|
* 카드가 조정창을 만들 때 같은 deps로 **사본 창**을 하나 더 만들어 이 슬롯에
|
|
* 세운다(adopt). 값·동작이 같은 함수라 오버레이·좌측 어느 쪽을 만져도 카드
|
|
* 재렌더에서 두 창이 함께 새 값으로 그려진다 — 별도 동기화 코드가 없다.
|
|
* 카드가 여럿이어도 슬롯은 하나 — 마지막으로 고른 구조물의 사본만 선다.
|
|
* ========================================================================== */
|
|
|
|
let dockRoot: HTMLDetailsElement | null = null;
|
|
let slot: HTMLElement | null = null;
|
|
let placeholder: HTMLElement | null = null;
|
|
|
|
function ensureDock(): void {
|
|
if (dockRoot) return;
|
|
dockRoot = document.createElement("details");
|
|
dockRoot.className = "b06-adjust-dock";
|
|
dockRoot.open = true;
|
|
const summary = document.createElement("summary");
|
|
summary.textContent = "횡단 조정";
|
|
placeholder = document.createElement("p");
|
|
placeholder.className = "b06-adjust-dock__empty";
|
|
placeholder.textContent = "횡단도에서 구조물(벽·구체)을 고르면 조정 항목이 여기에 뜹니다.";
|
|
slot = document.createElement("div");
|
|
slot.className = "b06-adjust-dock__slot";
|
|
dockRoot.append(summary, placeholder, slot);
|
|
}
|
|
|
|
/** 하위 컨테이너 루트 — 페이지가 [구조물 배치] 섹션 본문에 붙인다. */
|
|
export function adjustDockRoot(): HTMLElement {
|
|
ensureDock();
|
|
return dockRoot!;
|
|
}
|
|
|
|
/** 페이지 진입 시 초기 상태(빈 슬롯 + 안내문)로 되돌린다. */
|
|
export function resetAdjustDock(): void {
|
|
ensureDock();
|
|
slot!.replaceChildren();
|
|
placeholder!.hidden = false;
|
|
}
|
|
|
|
/** 조정창 사본을 슬롯에 세운다 — 이미 다른 사본이 있으면 갈아 끼운다. */
|
|
export function adoptAdjustPanel(panelRoot: HTMLElement): void {
|
|
ensureDock();
|
|
panelRoot.classList.add("b06-structure-panel--dock");
|
|
if (slot!.firstChild !== panelRoot || slot!.childNodes.length !== 1) {
|
|
slot!.replaceChildren(panelRoot);
|
|
}
|
|
placeholder!.hidden = true;
|
|
}
|
|
|
|
/** 이 사본이 슬롯에 서 있으면 내린다 — 다른 사본이 이미 대신 서 있으면 손대지 않는다. */
|
|
export function releaseAdjustPanel(panelRoot: HTMLElement): void {
|
|
if (!slot || !slot.contains(panelRoot)) return;
|
|
slot.replaceChildren();
|
|
placeholder!.hidden = false;
|
|
}
|