feat(종단도): 354-1 유토곡선 자기 판 — 종단 열 아래 칸 · 자기 리사이저 높이 · 접으면 머리줄([창 분할] · 손잡이) · 높이 나눔 · 표 쌓기에서 빠짐 · 종단 [창 분할]에도 함께 · B05 · B06 공용

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QfHKQs7J3hQELKMWQMUJEy
2026-10-16 20:50:03 +09:00
parent 5417cde435
commit bf3aaaa41f
15 changed files with 279 additions and 240 deletions
@@ -55,20 +55,13 @@
  font-size: var(--btn-bar-font-size);
 }

-/* 유토곡선 · 배수유역 판 [창 분할](계획서 325-3) — 종단 [창 분할]과 같은 양식 · 유토는 판 좌상단에 띄움. */
+/* 유토곡선 · 배수유역 판 [창 분할](계획서 325-3) — 종단 [창 분할]과 같은 양식 · 두 판 머리줄 맨 앞. */
 .b05-subpanel__popout {
  flex: none;
  padding: var(--btn-bar-padding);
  font-size: var(--btn-bar-font-size);
 }

-.b05-profile__masshaul-overlay > .b05-subpanel__popout {
-  position: absolute;
-  top: 4px;
-  left: var(--spacing-8);
-  z-index: 4;
-}
-
 /* 새 창으로 뗀 유토곡선 · 배수유역 판 — 창 전체를 채움 · 높이 · 폭 끌기와 접기 손잡이는 감춤. */
 .b05-profile__masshaul-overlay.is-popout,
 .b05-drainage.is-popout {
@@ -79,6 +72,7 @@
 }

 .b05-profile__masshaul-overlay.is-popout > .ui-resizer,
+.b05-profile__masshaul-overlay.is-popout .b05-profile__masshaul-handle,
 .b05-drainage.is-popout > .ui-resizer,
 .b05-drainage.is-popout > .ui-workflow-overlay__handle {
  display: none;
@@ -145,8 +145,8 @@ export function createDesignProfile(ctx: DesignProfileContext) {
  // 절토·성토 요약 줄은 **종단 쪽 열 안**에 둔다 — 패널 전체 폭에 걸치면 우측 배수유역도
  // 구분선이 그 높이만큼 끊겨 보인다(2026-08-04 사용자 보고).
  bodyWrap.append(balanceBar, body, progress.root);
-  // 유토곡선 — 패널 바닥에 붙는 오버레이 서브패널(2026-08-04 사용자 확정).
-  // 종단도·테이블 배치는 건드리지 않고 그 위를 덮으며, 위 경계 리사이저로 높이를 조절한다.
+  // 유토곡선 — 종단 칸 아래 자기 판(354-1) · 테이블 — 종단 칸 바닥 겹침 판.
+  // 둘 다 위 경계 리사이저로 높이를 조절한다.
  // 서브패널 리사이저를 끄는 동안엔 메인 드래그와 같은 **경량 동기화**만 프레임마다 돌리고
  // (차트 SVG·테이블 재생성은 무거워 덜컹였다 — 2026-08-06 분석 원인 3), 전체 재구성은
  // 손을 뗀 뒤(clearDragFlags) 1회만 한다. 펼침·범례 토글 등 드래그 밖 알림은 전체 draw.
@@ -155,7 +155,7 @@ export function createDesignProfile(ctx: DesignProfileContext) {
    else draw();
  };
  // 유토곡선 · 테이블 오버레이 · 유토 배지는 `design_profile_overlays` 몫(700줄 한계).
-  const { massHaul, tableOverlay } = createProfileOverlays({
+  const { massHaul, tableOverlay, column } = createProfileOverlays({
    projectId,
    routeId: () => routeId,
    bodyWrap,
@@ -192,7 +192,7 @@ export function createDesignProfile(ctx: DesignProfileContext) {
          callbacks?.onStructureTypeAdd?.(chainage, typeId),
        ),
    }) ?? null;
-  content.append(bodyWrap);
+  content.append(column);
  if (drainagePanel) content.append(drainagePanel.root);
  const drag = createProfileDrag({
    root,
@@ -385,7 +385,7 @@ export function createDesignProfile(ctx: DesignProfileContext) {

  /**
   * 높이 캐스케이드(2026-08-05 사용자 확정): 자리가 모자라면 ① 종단이 먼저 최소까지
-   * 줄고 → ② 테이블·유토곡선이 **같이**(비례) 각자 최소까지 줄고 → ③ 셋 다 최소면
+   * 줄고 → ② 테이블이 최소까지 줄고(유토곡선은 자기 판 · 354-1) → ③ 둘 다 최소면
   * 메인 패널 리사이저의 동적 하한이 더 못 내려가게 막는다. 반대로 서브패널을 갑자기
   * 펼쳐 자리가 모자라면 메인 패널 높이를 키운다(deficit 처리).
   *
@@ -395,7 +395,6 @@ export function createDesignProfile(ctx: DesignProfileContext) {
  const heights = createHeightCascade({
    root,
    body,
-    massHaul,
    tableOverlay,
    isMainDragging: drag.isMainDragging,
    isSubDragging: drag.isSubDragging,
@@ -1,7 +1,8 @@
 /* =============================================================================
 * design_profile_overlays.ts
- * 종단도 바닥 오버레이 서브패널 — 유토곡선 · 테이블 · 유토 총괄 배지(213-3 · 700줄 한계로 뗌).
- * 만들어 `bodyWrap` 에 붙이고 종단 스크롤과 잇는 데까지 — 그리기 · 높이는 종단도 몫.
+ * 종단도 겹침 판(테이블) · 종단 열 아래 유토곡선 판 · 유토 총괄 배지(213-3 · 700줄 한계로 뗌).
+ * 만들어 붙이고 종단 스크롤과 잇는 데까지 — 그리기 · 높이는 종단도 몫.
+ * 종단 열(`column`) = [종단 칸(`bodyWrap`), 유토곡선 판](354-1) — 종단도가 content 왼쪽에 붙인다.
 * ========================================================================== */

 import { attachMassHaulBadgeDrag, createMassHaulBadge } from "@util/common_util_mass_haul_badge";
@@ -16,7 +17,7 @@ import {
 export interface ProfileOverlaysDeps {
  projectId: string;
  routeId: () => number | null;
-  /** 종단 열(요약 줄 · 본문 · 서클을 담은 칸) — 오버레이가 그 위를 덮는다. */
+  /** 종단 칸(요약 줄 · 본문 · 서클을 담은 칸) — 표 겹침 판이 그 위를 덮는다. */
  bodyWrap: HTMLElement;
  /** 종단 스크롤러 — 오버레이 가로 스크롤을 이것과 맞춘다. */
  body: HTMLElement;
@@ -54,10 +55,13 @@ export function createProfileOverlays(deps: ProfileOverlaysDeps) {
    },
    haulPrefetch,
  );
-  bodyWrap.append(massHaul.overlay, massHaul.handle);
-  // 오버레이의 가로 스크롤을 종단 스크롤러와 양방향 동기화 — 측점 세로선 정렬 유지.
+  // 유토곡선 = 종단 칸 아래 자기 판(354-1 · 배수유역도처럼) — 종단 [창 분할]에도 함께 감(content 안).
+  const column = document.createElement("div");
+  column.className = "b05-route-profile__column";
+  column.append(bodyWrap, massHaul.overlay);
+  // 판의 가로 스크롤을 종단 스크롤러와 양방향 동기화 — 측점 세로선 정렬 유지.
  massHaul.attachScrollSync(body);
-  // 테이블도 유토곡선과 같은 오버레이 서브패널 — 유토곡선 위에 쌓인다(2026-08-05 사용자 지시).
+  // 테이블은 종단 칸 바닥 겹침 판(2026-08-05 사용자 지시).
  const tableOverlay = createProfileTableOverlay(onChange);
  bodyWrap.append(tableOverlay.overlay, tableOverlay.handle);
  tableOverlay.attachScrollSync(body);
@@ -65,5 +69,5 @@ export function createProfileOverlays(deps: ProfileOverlaysDeps) {
  // 종단 그래프의 구조물 메뉴는 chartWrap에서 이미 preventDefault 후 자체 메뉴를 띄운다.
  body.addEventListener("contextmenu", (event) => event.preventDefault());
  massHaul.overlay.addEventListener("contextmenu", (event) => event.preventDefault());
-  return { massHaul, tableOverlay };
+  return { massHaul, tableOverlay, column };
 }
@@ -131,7 +131,7 @@ export function attachProfilePopout(
  });
 }

-/** 유토곡선 · 배수유역 판에 [창 분할] 단추를 단다 — 유토 판 좌상단 · 배수 머리줄 맨 앞(계획서 325-3). */
+/** 유토곡선 · 배수유역 판에 [창 분할] 단추를 단다 — 두 판 머리줄 맨 앞(계획서 325-3 · 354-1). */
 export function attachSubPanelPopouts(profile: DesignProfile): void {
  const subButton = (title: string): HTMLButtonElement => {
    const button = document.createElement("button");
@@ -141,23 +141,20 @@ export function attachSubPanelPopouts(profile: DesignProfile): void {
  };

  const massOverlay = profile.root.querySelector<HTMLElement>(".b05-profile__masshaul-overlay");
-  const massHandle = profile.root.querySelector<HTMLElement>(".b05-profile__masshaul-handle");
-  if (massOverlay && massHandle) {
+  const massHead = massOverlay?.querySelector<HTMLElement>(".b05-profile__masshaul-head");
+  if (massOverlay && massHead) {
    const button = subButton("유토곡선 창 분할");
-    massOverlay.append(button);
+    // 판 머리줄 맨 앞 — 접어도 남아 닿는다(354-1).
+    massHead.prepend(button);
+    const column = massOverlay.parentElement;
    attachPopout(profile, {
      piece: massOverlay,
      button,
      name: "aislo-masshaul-popout",
      features: "popup,width=1400,height=420",
      docTitle: "유토곡선 — Aislo",
-      // 제자리 = 유토 손잡이 바로 앞(종단 본문 바닥 겹침 판).
-      home: () => massHandle.before(massOverlay),
-      onMove: (popped) => {
-        // 뗀 동안 메인 손잡이는 숨김 · 같이 줄이기 인라인 높이는 비움(새 창은 창 높이를 다 씀).
-        massHandle.hidden = popped;
-        massOverlay.style.height = "";
-      },
+      // 제자리 = 종단 열 끝(종단 칸 아래 자기 판).
+      home: () => column?.append(massOverlay),
    });
  }