eomsangdon
a485e22851
원인: 앞선 커밋에서 넣은 '대표 벽 자동 선택'(selectDefaultWall)이 카드를 고를 때마다 벽을 골라 조정창까지 띄웠다(2026-08-29 사용자 보고: 기슭막이(유출) 창이 계속 떠 있음). - selectDefaultWall과 그에 딸린 자동 선택 표시(withAutoAdopt 등)를 걷어냈다. - 카드·목록 선택 리스너에서 남아 있는 벽 선택을 비운다. 벽을 찍어 카드가 딸려 선택된 경우는 건드리지 않는다(isWallSelecting 가드). 부작용: 단 수·옵션 행은 도면에서 벽을 고른 뒤에만 유입구·유출구에 붙는다 (사용자 확인: 측점 선택 시 자동 구조물 선택은 필요 없음). 검증: 목록 선택·카드 선택 시 조정창 0개·강조 없음, 벽 클릭 시 기슭막이(유출) 창 + 유출구 강조 + 단 수·옵션 행 표시.
107 lines
4.7 KiB
TypeScript
107 lines
4.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;
|
|
/** 유입구·유출구 그룹의 이식 자리(2026-08-29 사용자 지시 4). B06 패널이 등록한다. */
|
|
let sideSlots: { inlet: HTMLElement; outlet: HTMLElement } | null = null;
|
|
|
|
/** 단 수·옵션 행을 옮겨 붙일 자리를 등록한다(계곡 통과 시설 폼의 유입구·유출구). */
|
|
export function setAdjustSideSlots(next: { inlet: HTMLElement; outlet: HTMLElement }): void {
|
|
sideSlots = next;
|
|
}
|
|
|
|
/** 이식 자리가 지금 화면에 서 있는지 — 숨겨진 그룹(다른 시설)이면 옮기지 않는다. */
|
|
function slotUsable(target: HTMLElement | undefined): target is HTMLElement {
|
|
if (!target) return false;
|
|
const group = target.closest("fieldset");
|
|
return !!group && !group.hidden;
|
|
}
|
|
|
|
/** 옮겨 놨던 행을 비운다 — 사본이 갈릴 때마다 옛 행을 남기지 않는다. 그룹 강조도 끈다. */
|
|
function clearSideSlots(): void {
|
|
for (const target of [sideSlots?.inlet, sideSlots?.outlet]) {
|
|
target?.replaceChildren();
|
|
target?.closest("fieldset")?.classList.remove("is-active");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 조정창 사본의 단 수·옵션 행을 고른 벽 쪽(유입/유출) 그룹으로 옮긴다. 행 DOM을
|
|
* 그대로 옮기므로 배선·값 동기는 손대지 않는다. 자리가 없으면 사본에 그대로 둔다.
|
|
*/
|
|
function relocateSideRows(panelRoot: HTMLElement): void {
|
|
clearSideSlots();
|
|
const side = panelRoot.dataset.side;
|
|
if (!sideSlots || (side !== "inlet" && side !== "outlet")) return;
|
|
const target = sideSlots[side];
|
|
if (!slotUsable(target)) return;
|
|
const rows = panelRoot.querySelectorAll<HTMLElement>(
|
|
".b06-structure-panel__struct--tier, .b06-structure-panel__struct--options",
|
|
);
|
|
rows.forEach((row) => {
|
|
if (row.classList.contains("is-hidden")) return;
|
|
target.append(row);
|
|
});
|
|
// 고른 구조물이 어느 쪽인지 그룹 테두리로 알린다(2026-08-29 사용자 지시 3).
|
|
target.closest("fieldset")?.classList.add("is-active");
|
|
}
|
|
|
|
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();
|
|
clearSideSlots();
|
|
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;
|
|
relocateSideRows(panelRoot);
|
|
}
|
|
|
|
/** 이 사본이 슬롯에 서 있으면 내린다 — 다른 사본이 이미 대신 서 있으면 손대지 않는다. */
|
|
export function releaseAdjustPanel(panelRoot: HTMLElement): void {
|
|
if (!slot || !slot.contains(panelRoot)) return;
|
|
slot.replaceChildren();
|
|
clearSideSlots();
|
|
placeholder!.hidden = false;
|
|
}
|