eomsangdonandClaude Opus 5.5
4a55092bf8
- 새 logic/B05_Profile_RouteEdit_Visible(덮인 높이 · 보이는 영역 맞춤 — 덮인 높이 0 이면 computeRouteView 와 같음) - 새 _RouteEdit_Cover(칸 · 판 ResizeObserver → --b05-routeedit-cover) · fitCanvas 가 편집 평면 칸만 붙임 - 보던 화면 되살림도 판 밑 노드는 안 보인 것으로 - 시험: test_345_5b_plan_visible_area 2 · 관련 68 통과 · typecheck 0 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Se7ytqbohmBQnfYpwYFnYf
52 lines
2.1 KiB
TypeScript
52 lines
2.1 KiB
TypeScript
/* =============================================================================
|
|
* B05_Profile_UI_RouteEdit_Cover.ts
|
|
* 노선 편집 평면 아래를 **뜬 종단 판**이 덮은 높이를 잰다(345-5 덧).
|
|
*
|
|
* 칸 · 판 크기가 바뀔 때마다(창 · 판 높이 끌기 · 접기 · 새 창 떼기) 다시 재서
|
|
* 칸에 `--b05-routeedit-cover`(px)를 적는다 — 상태 · 범례 · 잰 값 글판이 판 바로 위로 오름.
|
|
* 맞춤(`_View.openingView`)은 `coveredPx()` 를 읽는다. 셈은 `logic/_RouteEdit_Visible`.
|
|
* ========================================================================== */
|
|
|
|
import { coveredBottomPx } from "./logic/B05_Profile_RouteEdit_Visible";
|
|
|
|
// ponytail: 편집기는 페이지에 하나 — 덮인 높이 한 값 · 둘이 되면 칸마다 값으로.
|
|
let covered = 0;
|
|
const watching = new WeakSet<HTMLElement>();
|
|
|
|
/** 지금 평면 아래 덮인 높이(px). */
|
|
export function coveredPx(): number {
|
|
return covered;
|
|
}
|
|
|
|
/** 같은 가운데 칸의 종단 판 — 새 창으로 떼면 없음. */
|
|
function panelOf(wrap: HTMLElement): HTMLElement | null {
|
|
return (
|
|
wrap.closest(".design-page__main")?.querySelector<HTMLElement>(".b05-route-profile") ?? null
|
|
);
|
|
}
|
|
|
|
function span(element: HTMLElement): { top: number; bottom: number } {
|
|
const rect = element.getBoundingClientRect();
|
|
return { top: rect.top, bottom: rect.bottom };
|
|
}
|
|
|
|
function measure(wrap: HTMLElement, panel: HTMLElement | null): void {
|
|
covered = coveredBottomPx(span(wrap), panel ? span(panel) : null);
|
|
wrap.style.setProperty("--b05-routeedit-cover", `${covered}px`);
|
|
}
|
|
|
|
/** 칸을 지켜본다(여러 번 불러도 한 번만 붙음) · 부를 때마다 한 번 잰다. */
|
|
export function watchCover(wrap: HTMLElement): void {
|
|
if (watching.has(wrap)) return measure(wrap, panelOf(wrap));
|
|
watching.add(wrap);
|
|
let observed: HTMLElement | null = null;
|
|
const watch = new ResizeObserver(() => {
|
|
if (!wrap.isConnected) return watch.disconnect(); // 떠남
|
|
const panel = panelOf(wrap);
|
|
if (panel && panel !== observed) watch.observe((observed = panel));
|
|
measure(wrap, panel);
|
|
});
|
|
watch.observe(wrap);
|
|
measure(wrap, panelOf(wrap));
|
|
}
|