eomsangdonandClaude Opus 5.5
90a2cb9a11
- 라우터: 여러 주소 페이지(MountedPage) 길 · 같은 페이지면 셸도 다시 안 그림 · 떠나면 dispose · 늦게 끝난 옛 렌더 버림 - design_page: 보기 약속 DesignPageView(mount 중간 단계 · mountCenter 끝 모습 + shared 한 벌 자리) · host.onShow · onHide · onDispose - 3D 뷰어: setActive(루프 멈춤 · 창 포인터 뗌) · dispose 가 WebGL 문맥까지 놓음 · 보관 지형은 남김 · 코리도 조각을 Viewer_Corridor 로 - 종단도: setActive(창 키 듣기 뗌 · 보일 때 초안 · 판 다시 읽음) - 겹친 알약: 같은 측점이면 누른 알약을 그대로(24-6b) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BU9gbNE3aWFUvE61pS2WGt
699 lines
34 KiB
TypeScript
699 lines
34 KiB
TypeScript
/* =============================================================================
|
|
* A00_Common/design/design_profile.ts
|
|
* 종단도 한 벌(계획서 24-1 · 24-2c) — 종단 보기 · 횡단 보기가 **같은 종단도**를 가운데
|
|
* 아래쪽에 둔다. 도구(▲▼ 고치기 · 되돌리기 · 직선화 · 옮기기 · 확대 · 표 · 유토곡선 · 범례 ·
|
|
* 뱃지)와 막기 규칙(최소 흙덮기 · 기울기 상한)은 보기와 무관하게 하나.
|
|
*
|
|
* 그래프와 도면 테이블이 **하나의 가로 스크롤러** 안에 같은 폭으로 쌓여 X축이 자동으로
|
|
* 맞물린다. 편집은 전부 프론트에서 즉시 계산해 다시 그리고, 영속화는 [저장]·[확정]
|
|
* 시점에 `saveProfileAlignment()`로 편집 델타만 보낸다.
|
|
*
|
|
* 판 자리 약속(side · overlay)은 `design_profile_slots.ts` 에 있고 여기서 다시 내보낸다.
|
|
* ========================================================================== */
|
|
|
|
import { routeSpansFromStructures } from "../../B05_Profile/B05_Profile_UI_Drainage_Spans";
|
|
import { readState, writeState } from "../b_page_state";
|
|
import type { SectionDetailResponse } from "../../B06_Section/B06_Section_Api_Fetch";
|
|
import { createWorkflowPanelHandle } from "@ui/ui_template_overlay";
|
|
import { createMassHaulBadge } from "@util/common_util_mass_haul_badge";
|
|
import { createHaulPlanPrefetch } from "../../B05_Profile/B05_Profile_Api_HaulPlan";
|
|
import type {
|
|
StructureInstance,
|
|
StructureType,
|
|
} from "../../B05_Profile/B05_Profile_Api_Structures";
|
|
import { createProfileTableOverlay } from "../../B05_Profile/B05_Profile_UI_Profile_TableOverlay";
|
|
import {
|
|
hasLegacyAlignment,
|
|
readAlignment,
|
|
toDesignProfile,
|
|
} from "../../B05_Profile/B05_Profile_UI_Profile_Data";
|
|
import { createProgressCircle } from "@ui/ui_template_progress";
|
|
import { showToast } from "@ui/ui_template_elements";
|
|
import { saveProfileAlignment } from "../../B05_Profile/B05_Profile_Api_Fetch";
|
|
import { hasStaleDesigns } from "../../B06_Section/B06_Section_UI_Section_Common";
|
|
import {
|
|
blocksMinCover,
|
|
findMinCoverViolations,
|
|
minCoverPoints,
|
|
type MinCoverPipe,
|
|
type MinCoverPoint,
|
|
} from "../../B05_Profile/B05_Profile_UI_Profile_MinCover";
|
|
import type {
|
|
AlignmentBase,
|
|
AlignmentEdits,
|
|
ProfileAlignment,
|
|
} from "../../B05_Profile/B05_Profile_UI_Profile_Alignment";
|
|
import {
|
|
buildAlignment,
|
|
chainageKey,
|
|
emptyEdits,
|
|
toAlignmentBase,
|
|
} from "../../B05_Profile/B05_Profile_UI_Profile_Alignment";
|
|
import { createProfileEditStore } from "../../B05_Profile/B05_Profile_UI_Profile_Edit";
|
|
import {
|
|
structureGroupMenuItems,
|
|
stationIdAtStructure as stationIdAtStructureOf,
|
|
structureIdAtStation as structureIdAtStationOf,
|
|
} from "../../B05_Profile/B05_Profile_UI_Profile_Structures";
|
|
import { configureBalloonOffsets } from "@util/common_util_mass_haul_balance_view";
|
|
import {
|
|
createRouteMassHaulPanel,
|
|
type MassHaulSummaryValues,
|
|
type RouteMassHaulContext,
|
|
} from "../../B05_Profile/B05_Profile_UI_Profile_MassHaul";
|
|
import { renderBalanceBar } from "../../B05_Profile/B05_Profile_UI_Profile_Balance";
|
|
import { createHeightCascade } from "../../B05_Profile/B05_Profile_UI_Profile_Heights";
|
|
import { renderProfile } from "../../B05_Profile/B05_Profile_UI_Profile_Render";
|
|
import {
|
|
irregularStationId,
|
|
type IrregularStation,
|
|
} from "../../B05_Profile/B05_Profile_UI_IrregularStations";
|
|
import { createCrossPreview } from "../../B05_Profile/B05_Profile_UI_Profile_Preview";
|
|
import { createPanelTools } from "../../B05_Profile/B05_Profile_UI_Profile_Panel_Tools";
|
|
import { createProfileZoom } from "../../B05_Profile/B05_Profile_UI_Profile_Zoom";
|
|
import {
|
|
adoptLegacyProfileKeys,
|
|
bindProfileCollapse,
|
|
createElevationHold,
|
|
createProfileDrag,
|
|
} from "../../B05_Profile/B05_Profile_UI_Profile_Drag";
|
|
import {
|
|
planCurveWarning,
|
|
sampleAt,
|
|
snapToMasterStations,
|
|
} from "../../B05_Profile/B05_Profile_UI_Profile_Guard";
|
|
import type { RouteProfilePanelCallbacks } from "../../B05_Profile/B05_Profile_UI_Profile_Panel_Types";
|
|
import { attachWheelHorizontalScroll } from "../../B05_Profile/B05_Profile_UI_Profile_Wheel";
|
|
import { needsFullRedraw, type ElevationWindowResult } from "@util/common_util_chart_ywindow";
|
|
import type { DesignSideBoard, DesignSideFactory, DesignView } from "./design_profile_slots";
|
|
import "../../B06_Section/B06_Section_UI_Style.css";
|
|
// SVG 차트 색상(.b06-chart__*)의 정의처는 _Style_Cross.css다. 이걸 빼면 B05로 바로 진입했을 때
|
|
// 배경 rect가 브라우저 기본 fill(검정)로 그려진다 — B06을 먼저 방문해야 정상으로 보이던 원인.
|
|
import "../../B06_Section/B06_Section_UI_Style_Cross.css";
|
|
import "../../B06_Section/B06_Section_UI_Style_Cross_Areas.css";
|
|
|
|
export type {
|
|
DesignOverlayBoard,
|
|
DesignSideBoard,
|
|
DesignSideFactory,
|
|
DesignSideHost,
|
|
DesignView,
|
|
} from "./design_profile_slots";
|
|
|
|
/** 종단도를 만들 때 넘기는 것. */
|
|
export interface DesignProfileContext {
|
|
projectId: string;
|
|
/** 처음 보기. */
|
|
view: DesignView;
|
|
/** 오른쪽 판 — 없으면 판 없이 종단 열만. */
|
|
side?: DesignSideFactory;
|
|
/** 오른쪽 판을 켜고 끄는 단추 — 도구줄 오른쪽에 붙는다(판이 있을 때만). */
|
|
sideTool?: (board: DesignSideBoard) => HTMLElement;
|
|
/** 측점 선택 변경 — 같은 측점 재선택·빈 곳 클릭이면 null(해제)로 알린다. */
|
|
onSelectStation: (stationId: string | null) => void;
|
|
/** [초기선 복원] 클릭 시 함께 실행(비정규 측점 등 다른 조작값도 초기화하려고 페이지가 넘긴다). */
|
|
onResetAll?: () => void;
|
|
callbacks?: RouteProfilePanelCallbacks;
|
|
}
|
|
|
|
/** 계획고 편집 후 횡단을 다시 계산하기까지 기다리는 시간(ms).
|
|
* ▲/▼ 길게 누르기(초당 10회)·끌기에서 매 프레임 다시 돌지 않게 마지막 값만 계산한다.
|
|
* 계산이 브라우저 안에서 끝나면서(2026-09-03) 서버 왕복이 사라져 250→60ms 로 줄였다 —
|
|
* 실측 전 측점(128) 재계산 7.5ms 라 손을 떼는 즉시 유토곡선이 따라온다.
|
|
* 60→16ms(2026-09-06) — ▲ 한 번에 라벨이 서기까지 중앙 130ms 를 쟀는데 그중 60ms 가
|
|
* 이 대기였다. 한 프레임(16ms)이면 연속 입력은 여전히 마지막 값만 계산한다. */
|
|
const CROSS_PREVIEW_DEBOUNCE_MS = 16;
|
|
|
|
export function createDesignProfile(ctx: DesignProfileContext) {
|
|
const { projectId, onSelectStation, onResetAll, callbacks } = ctx;
|
|
adoptLegacyProfileKeys();
|
|
const root = document.createElement("section");
|
|
root.className = "b05-route-profile";
|
|
root.dataset.view = ctx.view;
|
|
// 이름표 "종단" — 무엇의 손잡이인지 화살표 옆에 밝힌다(2026-08-04 사용자 지시).
|
|
const panelHandle = createWorkflowPanelHandle("bottom", "down", "종단");
|
|
const balanceBar = document.createElement("div");
|
|
balanceBar.className = "b05-route-profile__balance";
|
|
const body = document.createElement("div");
|
|
body.className = "b05-route-profile__body";
|
|
const empty = document.createElement("p");
|
|
empty.className = "b05-route-profile__empty";
|
|
empty.textContent = "최적 경로를 계산하면 종단면도가 표시됩니다.";
|
|
body.append(empty);
|
|
// 종단면 본문 + 우측 판(배수유역도)을 나란히 놓는 2단 구성.
|
|
// 우측 판이 이 안에 있으므로 하단 패널을 접으면 함께 사라진다(사용자 지시).
|
|
// 그래프 영역 정중앙 로딩 서클 — 종단면 자료가 도착할 때까지 빈 안내만 보인다.
|
|
// body는 그릴 때마다 자식이 통째로 교체되므로 서클은 감싸는 칸에 둔다.
|
|
const progress = createProgressCircle({ overlay: true });
|
|
progress.root.hidden = true;
|
|
const bodyWrap = document.createElement("div");
|
|
bodyWrap.className = "b05-route-profile__body-wrap";
|
|
// 절토·성토 요약 줄은 **종단 쪽 열 안**에 둔다 — 패널 전체 폭에 걸치면 우측 배수유역도
|
|
// 구분선이 그 높이만큼 끊겨 보인다(2026-08-04 사용자 보고).
|
|
bodyWrap.append(balanceBar, body, progress.root);
|
|
// 유토곡선 — 패널 바닥에 붙는 오버레이 서브패널(2026-08-04 사용자 확정).
|
|
// 종단도·테이블 배치는 건드리지 않고 그 위를 덮으며, 위 경계 리사이저로 높이를 조절한다.
|
|
// 서브패널 리사이저를 끄는 동안엔 메인 드래그와 같은 **경량 동기화**만 프레임마다 돌리고
|
|
// (차트 SVG·테이블 재생성은 무거워 덜컹였다 — 2026-08-06 분석 원인 3), 전체 재구성은
|
|
// 손을 뗀 뒤(clearDragFlags) 1회만 한다. 펼침·범례 토글 등 드래그 밖 알림은 전체 draw.
|
|
const subPanelChanged = (): void => {
|
|
if (drag.isSubDragging()) scheduleLightSync();
|
|
else draw();
|
|
};
|
|
/** 유토곡선 총괄값 — **그래프 좌측 상단 배지**가 보인다(2026-09-06 사용자 지시).
|
|
* 유토곡선을 접어도 이 값은 남아야 한다. */
|
|
const massBadge = createMassHaulBadge();
|
|
// 그래프 위에 도구줄(상단줄)이 한 줄 있다 — 그 아래로 내려 겹치지 않게 한다.
|
|
massBadge.root.style.setProperty("--mass-haul-badge-top", "34px");
|
|
bodyWrap.append(massBadge.root);
|
|
let massHaulSummary: MassHaulSummaryValues | null = null;
|
|
// 유토 배분은 **서버가 만든다**(2026-09-06) — 편집이 멈추면 뒤에서 받아 두고, 도착하면
|
|
// 곡선을 다시 그린다. 그 산식이 브라우저 번들에 안 실리는 것이 이 구조의 목적이다.
|
|
const haulPrefetch = createHaulPlanPrefetch(
|
|
projectId,
|
|
() => routeId ?? undefined,
|
|
subPanelChanged,
|
|
);
|
|
const massHaul = createRouteMassHaulPanel(
|
|
subPanelChanged,
|
|
(summary) => {
|
|
const before = massHaulSummary;
|
|
massHaulSummary = summary;
|
|
if (before?.finalM3 !== summary?.finalM3) massBadge.set(summary);
|
|
},
|
|
haulPrefetch,
|
|
);
|
|
bodyWrap.append(massHaul.overlay, massHaul.handle);
|
|
// 오버레이의 가로 스크롤을 종단 스크롤러와 양방향 동기화 — 측점 세로선 정렬 유지.
|
|
massHaul.attachScrollSync(body);
|
|
// 테이블도 유토곡선과 같은 오버레이 서브패널 — 유토곡선 위에 쌓인다(2026-08-05 사용자 지시).
|
|
const tableOverlay = createProfileTableOverlay(subPanelChanged);
|
|
bodyWrap.append(tableOverlay.overlay, tableOverlay.handle);
|
|
tableOverlay.attachScrollSync(body);
|
|
// 유토곡선·테이블 영역에서 브라우저 기본 우클릭 메뉴를 막는다(2026-08-05 사용자 지시).
|
|
// 종단 그래프의 구조물 메뉴는 chartWrap에서 이미 preventDefault 후 자체 메뉴를 띄운다.
|
|
body.addEventListener("contextmenu", (event) => event.preventDefault());
|
|
massHaul.overlay.addEventListener("contextmenu", (event) => event.preventDefault());
|
|
const content = document.createElement("div");
|
|
content.className = "b05-route-profile__content";
|
|
/** 횡단배수 최소 계획고 대상(배수관·BOX암거) — 관 목록이 바뀔 때 갱신한다. */
|
|
let minCoverTargets: MinCoverPoint[] = [];
|
|
/** 최소고를 편집에서 강제할지 — 종단 보기 「페이지 설정」 체크박스를 따라온다(기본 해제).
|
|
* 두 보기가 같은 값을 보도록 세션 한 칸에 비춰 둔다. */
|
|
let enforceMinCover = readState<boolean>("profile-enforce-min-cover", projectId) === true;
|
|
/** 관 목록이 바뀌었다 — 최소 흙덮기 판정 대상을 다시 잡는다(판 · 보기 어느 쪽에서 와도). */
|
|
const takePipes = (pipes: ReadonlyArray<MinCoverPipe>): void => {
|
|
// 횡단배수 최소 계획고(2026-08-23) — 관경·구체높이가 바뀌면 경고도 다시 본다.
|
|
minCoverTargets = minCoverPoints([...pipes]);
|
|
renderBalance();
|
|
};
|
|
// 오른쪽 판(배수유역도) — 판 쪽이 만들어 넘긴다(판 자리 약속 `DesignSideFactory`).
|
|
const drainagePanel: DesignSideBoard | null =
|
|
ctx.side?.({
|
|
projectId,
|
|
view: ctx.view,
|
|
onPipesChanged: (pipes) => {
|
|
takePipes(pipes);
|
|
callbacks?.onPipesChanged?.(pipes);
|
|
},
|
|
onBasinSelected: (chainageM) => callbacks?.onBasinSelected?.(chainageM),
|
|
onPipeSelected: (chainageM) => callbacks?.onPipeSelected?.(chainageM),
|
|
// 배수유역도 우클릭 빈 자리 메뉴 = 종단그래프와 같은 구조물군 → 종류 2단 목록
|
|
// (2026-08-18 일원화). 선택하면 사이드 폼 자동 지정(addAt 경로).
|
|
structureMenuItems: (chainage) =>
|
|
structureGroupMenuItems(structureTypes, (typeId) =>
|
|
callbacks?.onStructureTypeAdd?.(chainage, typeId),
|
|
),
|
|
}) ?? null;
|
|
content.append(bodyWrap);
|
|
if (drainagePanel) content.append(drainagePanel.root);
|
|
const drag = createProfileDrag({
|
|
root,
|
|
body,
|
|
massHaul,
|
|
tableOverlay,
|
|
draw: () => draw(),
|
|
});
|
|
root.append(panelHandle.root, drag.resizerRoot, content);
|
|
drainagePanel?.load(projectId);
|
|
|
|
let detail: SectionDetailResponse | null = null;
|
|
let selectedStationId: string | null = null;
|
|
let stationInterval: number | undefined;
|
|
let routeId: number | null = null;
|
|
let irregularStations: IrregularStation[] = [];
|
|
// 구조물 정본(structures.json) 목록과 타입 레지스트리 — 그래프 서클마크·벌룬에 쓴다.
|
|
let structures: StructureInstance[] = [];
|
|
let structureTypes: StructureType[] = [];
|
|
let selectedStructureId: string | null = null;
|
|
// 이어 공사 시작 기준 — 측점번호·누가거리 표시 오프셋(내부 chainage는 0기준 유지).
|
|
let stationDisplay = { station: 0, cumulative: 0 };
|
|
let base: AlignmentBase | null = null;
|
|
let alignment: ProfileAlignment | null = null;
|
|
let store = createProfileEditStore(null, emptyEdits(), () => rebuild());
|
|
/** 서버 저장분 — 되돌리기 복원이 초안을 다시 읽을 때 기준으로 쓴다. */
|
|
let savedEdits: AlignmentEdits = emptyEdits();
|
|
let redrawPending = false;
|
|
let lastWidth = 0;
|
|
let lastHeight = 0;
|
|
|
|
/** 측점선 ↔ 알약(구조물) 짝짓기는 `_Profile_Structures` 몫(700줄 한계). */
|
|
/** 한 측점에 알약이 여럿(배수관 · 메쌓기)이면 지금 고른 알약을 그대로 둔다 — 첫 알약으로
|
|
* 갈아 끼우면 누른 것과 다른 알약이 켜졌다(계획서 24-6b). */
|
|
const structureIdAtStation = (stationId: string | null): string | null =>
|
|
stationId !== null && stationIdAtStructure(selectedStructureId) === stationId
|
|
? selectedStructureId
|
|
: structureIdAtStationOf(stationId, irregularStations, structures);
|
|
const stationIdAtStructure = (structureId: string | null): string | null =>
|
|
stationIdAtStructureOf(structureId, irregularStations, structures);
|
|
|
|
/**
|
|
* 측점 선택 — 같은 측점 재선택이면 해제한다(2026-08-04 사용자 지시).
|
|
* 그래프(종단·유토곡선) 클릭이 모두 이 경로를 탄다. 해제는 null로 페이지에 알린다.
|
|
* 같은 자리 알약도 함께 켜고 끈다(2026-08-17 사용자 지시 — 둘은 한 구조물이다).
|
|
*/
|
|
function selectStation(stationId: string | null): void {
|
|
const next = stationId !== null && stationId === selectedStationId ? null : stationId;
|
|
selectedStationId = next;
|
|
selectedStructureId = structureIdAtStation(next);
|
|
draw();
|
|
onSelectStation(next);
|
|
}
|
|
|
|
function renderBalance(): void {
|
|
const minCoverViolations = findMinCoverViolations(
|
|
minCoverTargets,
|
|
(chainageM) => sampleAt(alignment, chainageM, "ground_elevation_m"),
|
|
(chainageM) => sampleAt(alignment, chainageM, "elevation_m"),
|
|
);
|
|
renderBalanceBar({
|
|
planCurve: planCurveWarning(alignment, detail),
|
|
minCoverViolations,
|
|
balanceBar,
|
|
tools: tools.render(),
|
|
trailing,
|
|
alignment,
|
|
legacyAlignment: !!detail && hasLegacyAlignment(detail.longitudinal),
|
|
edited: store.edited(),
|
|
hasIrregularStations: irregularStations.length > 0,
|
|
dirty: store.dirty(),
|
|
onResetAll: () => {
|
|
store.resetAll();
|
|
onResetAll?.();
|
|
},
|
|
});
|
|
}
|
|
|
|
/* 줌 조작구(가로 배율) — 상태를 종단도가 들고 있어 편집·재계산으로 다시 그려도 유지된다.
|
|
세로는 보이는 구간에 맞춰 자동이라 사람이 맞출 것이 없다(2026-09-04 사용자 확정). */
|
|
const profileZoom = createProfileZoom(() => draw());
|
|
|
|
/** 세로 창을 **다시 그리지 않고** 옮기는 갱신기 — 그릴 때마다 렌더러가 새로 준다. */
|
|
let updateElevationWindow: (() => ElevationWindowResult | null) | null = null;
|
|
/** 계획고 편집 버튼(▲▼)을 누르고 있는 동안 Y 축을 고정한다(`_Profile_Drag` 몫). */
|
|
const elevationHold = createElevationHold(body, () => draw());
|
|
// 오른쪽 판 켬 · 끔 단추 — 가로 배율 조작구 옆, 두 보기 같은 자리.
|
|
const sideTool = drainagePanel && ctx.sideTool ? ctx.sideTool(drainagePanel) : null;
|
|
const trailing = document.createElement("div");
|
|
trailing.className = "b05-route-profile__trailing";
|
|
trailing.append(profileZoom.bar, ...(sideTool ? [sideTool] : []));
|
|
|
|
/* [직선화]·[쉬프트]·되돌리기·방향키 배선은 `_Panel_Tools` 몫(700줄 한계). */
|
|
const { tools, history, handleToolPick, setListening } = createPanelTools({
|
|
root,
|
|
base: () => base,
|
|
alignment: () => alignment,
|
|
edits: () => store.edits(),
|
|
applyEdits: (next) => applyEdits(next),
|
|
selectedStationId: () => selectedStationId,
|
|
irregularStations: () => irregularStations,
|
|
stationIdOf: (station) => irregularStationId(station.id),
|
|
moveStation: (station, toChainageM) =>
|
|
callbacks?.onStructureMove?.(station.chainage_m, toChainageM, station),
|
|
// 판이 없는 보기는 관 자리를 되돌리기에 태우지 않는다.
|
|
drainage: drainagePanel ?? { pipeChainages: () => [], setPipeChainages: () => undefined },
|
|
restore: () => {
|
|
// 세션이 정본이므로 편집 초안을 다시 읽어 그린다.
|
|
store = createProfileEditStore(routeId, savedEdits, () => rebuild());
|
|
rebuild();
|
|
},
|
|
restoreSaved: () => store.restoreSaved(),
|
|
canRestoreSaved: () => store.canRestoreSaved(),
|
|
refresh: () => renderBalance(),
|
|
});
|
|
|
|
/** 편집을 적용한다. 법정 위반 정책이 block이면 새 위반이 생기는 편집을 막는다. */
|
|
function applyEdits(next: AlignmentEdits): void {
|
|
if (!base || !alignment) return;
|
|
const candidate = buildAlignment(base, next);
|
|
if (
|
|
base.policy.grade_violation_policy === "block" &&
|
|
candidate.violations.length > alignment.violations.length
|
|
) {
|
|
showToast(
|
|
`종단기울기 상한 ${base.policy.max_grade_pct.toFixed(1)}%를 넘어 편집을 적용하지 않았습니다.`,
|
|
"error",
|
|
);
|
|
return;
|
|
}
|
|
// 최소고 가드 — 편집 경로가 전부 여기로 모인다(2026-09-02 직선화·쉬프트·틸팅·방향키 누락 수정).
|
|
if (blocksMinCover(base, alignment, candidate, enforceMinCover, minCoverTargets)) return;
|
|
store.replace(next);
|
|
history.record();
|
|
}
|
|
|
|
/**
|
|
* 편집 후 다시 그린다. 길게 누르기(초당 10회)로 연속 호출되므로 한 프레임에 한 번만
|
|
* 실제 렌더링하도록 모은다.
|
|
*/
|
|
function rebuild(): void {
|
|
if (base) alignment = buildAlignment(base, store.edits());
|
|
// 계획고가 바뀌면 측점별 횡단 단면적도 함께 바뀐다 — 전 측점을 다시 계산해 공유
|
|
// 캐시에 얹는다. 그래야 **횡단 기준** 유토곡선과 횡단 카드가 따라 움직인다
|
|
// (2026-08-03 사용자 보고: B05에서 계획선을 끌어도 횡단 곡선이 그대로였음).
|
|
scheduleCrossPreview();
|
|
if (redrawPending) return;
|
|
redrawPending = true;
|
|
requestAnimationFrame(() => {
|
|
redrawPending = false;
|
|
draw();
|
|
});
|
|
}
|
|
|
|
/** 횡단 설계 프리뷰는 `_Profile_Preview` 몫(700줄 한계). */
|
|
const crossPreview = createCrossPreview({
|
|
projectId,
|
|
detail: () => detail,
|
|
routeId: () => routeId,
|
|
edits: () => store.edits(),
|
|
debounceMs: CROSS_PREVIEW_DEBOUNCE_MS,
|
|
onApplied: (updated) => {
|
|
draw();
|
|
callbacks?.onCrossDesignsUpdated?.(updated);
|
|
},
|
|
});
|
|
const scheduleCrossPreview = (): void => crossPreview.schedule();
|
|
|
|
/**
|
|
* 높이 캐스케이드(2026-08-05 사용자 확정): 자리가 모자라면 ① 종단이 먼저 최소까지
|
|
* 줄고 → ② 테이블·유토곡선이 **같이**(비례) 각자 최소까지 줄고 → ③ 셋 다 최소면
|
|
* 메인 패널 리사이저의 동적 하한이 더 못 내려가게 막는다. 반대로 서브패널을 갑자기
|
|
* 펼쳐 자리가 모자라면 메인 패널 높이를 키운다(deficit 처리).
|
|
*
|
|
* draw()(전체 재구성)와 리사이즈 중 경량 동기화가 **같은 계산**을 쓴다 — 끌 때는
|
|
* 이 함수만 프레임마다 돌리고, 무거운 차트·테이블 재구성은 손을 뗀 뒤 한 번만 한다.
|
|
*/
|
|
const heights = createHeightCascade({
|
|
root,
|
|
body,
|
|
massHaul,
|
|
tableOverlay,
|
|
isMainDragging: drag.isMainDragging,
|
|
isSubDragging: drag.isSubDragging,
|
|
mainDragRef: drag.mainDragRef,
|
|
isMainDragCooldown: drag.isMainDragCooldown,
|
|
hasDetail: () => detail !== null,
|
|
});
|
|
const applyHeightCascade = (allowGrow: boolean): { chartHeight: number } =>
|
|
heights.apply(allowGrow);
|
|
const scheduleLightSync = (): void => heights.scheduleLightSync();
|
|
|
|
function draw(): void {
|
|
renderProfile({
|
|
body,
|
|
callbacks,
|
|
massHaul,
|
|
tableOverlay,
|
|
store,
|
|
detail: () => detail,
|
|
alignment: () => alignment,
|
|
base: () => base,
|
|
stationInterval: () => stationInterval,
|
|
irregularStations: () => irregularStations,
|
|
minCoverTargets: () => minCoverTargets,
|
|
structures: () => structures,
|
|
structureTypes: () => structureTypes,
|
|
selectedStationId: () => selectedStationId,
|
|
setSelectedStationId: (value) => {
|
|
selectedStationId = value;
|
|
},
|
|
selectedStructureId: () => selectedStructureId,
|
|
setSelectedStructureId: (value) => {
|
|
selectedStructureId = value;
|
|
},
|
|
stationDisplay: () => stationDisplay,
|
|
setLastSize: (width, height) => {
|
|
lastWidth = width;
|
|
lastHeight = height;
|
|
},
|
|
renderBalance,
|
|
applyHeightCascade,
|
|
clearMainDragCooldown: drag.clearMainDragCooldown,
|
|
selectStation,
|
|
applyEdits,
|
|
handleToolPick,
|
|
zoom: profileZoom.state,
|
|
holdElevationRange: elevationHold.hold,
|
|
toolActive: () => tools.mode() !== "none",
|
|
selectedRuns: () => tools.selectedRuns(),
|
|
stationIdAtStructure,
|
|
redraw: draw,
|
|
setElevationWindowUpdater: (update) => {
|
|
updateElevationWindow = update;
|
|
},
|
|
});
|
|
}
|
|
|
|
/** 그래프를 통째로 다시 만들 때까지 기다리는 시간(ms) — 눈금 갱신으로도 못 살릴 때만. */
|
|
const SCROLL_SETTLE_MS = 80;
|
|
/** 마지막으로 통째로 다시 만든 가로 위치 — 같은 자리면 다시 그리지 않는다. */
|
|
let settledScrollLeft = 0;
|
|
let scrollSettleTimer = 0;
|
|
// 세로 맞춤은 **그리기가 아니라 변환**이다(2026-09-04 사용자 확정) — 스크롤마다 겹 하나의
|
|
// 변환만 갈아 끼우므로 실시간으로 따라온다. 눈금 간격이 어긋나면 눈금층(요소 20개 안팎)만
|
|
// 새로 만든다. 그래프를 통째로 다시 만드는 34ms 짜리 재구성은 그래도 안 될 때만 남는다.
|
|
body.addEventListener("scroll", () => {
|
|
if (elevationHold.editing()) return;
|
|
const fitted = updateElevationWindow?.() ?? null;
|
|
window.clearTimeout(scrollSettleTimer);
|
|
if (!needsFullRedraw(fitted)) return;
|
|
scrollSettleTimer = window.setTimeout(() => {
|
|
if (elevationHold.editing() || Math.abs(body.scrollLeft - settledScrollLeft) < 1) return;
|
|
settledScrollLeft = body.scrollLeft;
|
|
draw();
|
|
}, SCROLL_SETTLE_MS);
|
|
});
|
|
|
|
// 종단면도는 가로로 매우 길다. 세로 휠을 가로 스크롤로 돌려 스크롤바를 잡지 않고도
|
|
// 노선을 훑을 수 있게 한다 (Shift+휠은 브라우저 기본 가로 스크롤이라 그대로 둔다).
|
|
attachWheelHorizontalScroll(body);
|
|
|
|
const resizeObserver = new ResizeObserver(() => {
|
|
if (
|
|
body.clientWidth <= 0 ||
|
|
body.clientHeight <= 0 ||
|
|
(Math.abs(body.clientWidth - lastWidth) < 1 && Math.abs(body.clientHeight - lastHeight) < 1)
|
|
)
|
|
return;
|
|
// 끌리는 동안엔 프레임당 경량 높이 동기화만 — 무거운 전체 재구성은 손을 뗀 뒤 한 번.
|
|
// (150ms 디바운스만 있던 예전 방식은 중간 프레임이 없어 툭툭 끊겼다. 2026-08-05 사용자 보고)
|
|
scheduleLightSync();
|
|
drag.scheduleDraw();
|
|
});
|
|
resizeObserver.observe(body);
|
|
|
|
// 접기 — 두 보기가 같은 키 하나를 쓴다(`_Profile_Drag` 몫).
|
|
bindProfileCollapse(root, panelHandle, () => requestAnimationFrame(draw));
|
|
|
|
/** 배수유역도(평면)에 **구간형 구조물 띠**를 넘긴다 — 종단 레인과 같은 자료다(계획서 3-6). */
|
|
function syncDrainageSpans(): void {
|
|
drainagePanel?.setIntervalSpans(routeSpansFromStructures(structures, structureTypes));
|
|
}
|
|
|
|
return {
|
|
root,
|
|
/** 보기가 바뀌었다 — 종단도는 그대로 두고 판에만 알린다(다시 만들지 않음). */
|
|
setView(next: DesignView) {
|
|
root.dataset.view = next;
|
|
drainagePanel?.setView?.(next);
|
|
},
|
|
render(nextDetail: SectionDetailResponse, nextStationInterval?: number, nextRouteId?: number) {
|
|
detail = nextDetail;
|
|
stationInterval = nextStationInterval;
|
|
const stored = readAlignment(nextDetail.longitudinal);
|
|
// 재탐색으로 경로(routeId)가 바뀔 때, 사용자가 조작한 편집이 있으면 **새 경로에 이월**한다.
|
|
// 편집은 chainage 키라 새 base에 그대로 재적용된다(범위 밖·미매칭 변화점은 best-effort로 드롭).
|
|
const routeChanged = nextRouteId !== routeId;
|
|
const carried = routeChanged && store.edited() ? store.edits() : null;
|
|
// 서버 저장분을 기준으로 삼되, 남아 있는 세션 초안이 있으면 그쪽을 우선한다.
|
|
if (routeChanged || !store.dirty()) {
|
|
routeId = nextRouteId ?? routeId;
|
|
savedEdits = stored?.edits ?? emptyEdits();
|
|
store = createProfileEditStore(routeId, savedEdits, () => rebuild());
|
|
}
|
|
base = stored ? toAlignmentBase(stored) : null;
|
|
// 이월분은 base 설정 후 미저장 초안으로 커밋한다(확정 시 전송·재탐색 후 새로고침에도 유지).
|
|
if (carried) store.replace(carried);
|
|
alignment = base ? buildAlignment(base, store.edits()) : null;
|
|
// 유토곡선 balloon 위치 캐시 — 두 보기가 **같은 scope**를 써서 같은 자리를 공유한다.
|
|
// 영구저장소 값(detail.balloon_offsets)이 있으면 그것이 이긴다.
|
|
configureBalloonOffsets(
|
|
`${projectId}:${routeId ?? "-"}`,
|
|
nextDetail.balloon_offsets ?? undefined,
|
|
);
|
|
draw();
|
|
requestAnimationFrame(draw);
|
|
// 저장된 횡단 설계가 옛 계획고로 굳어 있으면 진입 즉시 한 번 맞춘다 —
|
|
// 지금까지는 B06에 들어가야만 고쳐져, B05의 횡단 기준 유토곡선과 3D
|
|
// 예상형상이 옛 설계선을 그대로 썼다(2026-08-23 사용자 보고 · 실측 확인).
|
|
//
|
|
// 비교 대상은 **편집이 반영된 계획선**이다. 저장분끼리 견주면, 세션에 미저장 편집이
|
|
// 남은 채로 새로고침했을 때 「어긋남 없음」으로 나와 재계산이 예약되지 않고, 그리기
|
|
// 쪽은 편집분 기준으로 어긋났다고 보아 유토곡선이 영영 빈 화면이 됐다
|
|
// (2026-09-03 사용자 보고 — 편집 측점 2개가 세션에 남은 상태에서 재현).
|
|
if (
|
|
hasStaleDesigns({
|
|
longitudinal: {
|
|
design_profiles: alignment
|
|
? [toDesignProfile(alignment, nextDetail.longitudinal.design_profiles?.[0])]
|
|
: nextDetail.longitudinal.design_profiles,
|
|
},
|
|
cross_sections: nextDetail.cross_sections,
|
|
})
|
|
) {
|
|
scheduleCrossPreview();
|
|
}
|
|
},
|
|
/** 라이브 계획선 샘플(편집 반영분) — 3D 측점 바·코리도가 이걸 본다(2026-08-23).
|
|
* 편집 전·base 없음이면 null — 호출부는 정본 design_profiles로 폴백한다. */
|
|
alignmentSamples: () => alignment?.samples ?? null,
|
|
/**
|
|
* 계획 유토곡선 계산에 필요한 프로젝트 설정(토량환산계수·운반장비 경계·노반폭).
|
|
* 페이지가 `fetchSectionContext()` 응답에서 뽑아 넘긴다 — 프론트에 사본을 두지 않는다.
|
|
*/
|
|
setEarthworkContext(next: RouteMassHaulContext | null) {
|
|
massHaul.setContext(next);
|
|
draw();
|
|
},
|
|
setSelectedStation(stationId: string | null) {
|
|
selectedStationId = stationId;
|
|
// 3D·리스트·배수유역도에서 온 선택도 같은 자리 알약을 함께 켠다(2026-08-17).
|
|
selectedStructureId = structureIdAtStation(stationId);
|
|
draw();
|
|
},
|
|
/** 횡단배수 최소고를 편집에서 강제할지(사이드 체크박스). 경고 표시는 무관하게 유지된다. */
|
|
setEnforceMinCover(enforce: boolean) {
|
|
enforceMinCover = enforce;
|
|
writeState("profile-enforce-min-cover", enforce, projectId);
|
|
},
|
|
/** 판 없이 관 목록을 넘긴다 — 판이 없는 보기에서 최소 흙덮기를 판정하는 길. */
|
|
setMinCoverPipes(pipes: ReadonlyArray<MinCoverPipe>) {
|
|
takePipes(pipes);
|
|
},
|
|
/** 종단기울기 상한(%)을 즉시 갈아 끼운다 — 페이지 설정의 지형 구분·등급·세부
|
|
* 입력을 바꾼 순간 위반 표시와 편집 차단 기준이 따라와야 한다(2026-08-19
|
|
* 사용자 지시 6). 계획선 자체는 서버 재계산 몫이라 건드리지 않는다. */
|
|
setGradeLimit(maxGradePct: number) {
|
|
if (!base || !Number.isFinite(maxGradePct) || maxGradePct <= 0) return;
|
|
if (Math.abs(base.policy.max_grade_pct - maxGradePct) < 1e-9) return;
|
|
base = { ...base, policy: { ...base.policy, max_grade_pct: maxGradePct } };
|
|
alignment = buildAlignment(base, store.edits());
|
|
draw();
|
|
},
|
|
/** 확정된 노선 평면 선형을 우측 배수유역 지도에 겹친다(사업지 좌표계 m). */
|
|
setRoutePolyline(points: ReadonlyArray<{ x: number; y: number }>) {
|
|
drainagePanel?.setRoute(points);
|
|
},
|
|
/** 비정규 측점 목록을 반영해 그래프(세로선+라벨)·테이블(주석)을 다시 그린다. */
|
|
setIrregularStations(stations: IrregularStation[]) {
|
|
irregularStations = snapToMasterStations(alignment, stations);
|
|
draw();
|
|
},
|
|
/** 구조물 타입 레지스트리를 받아 마크 색·약호·우클릭 메뉴에 쓴다(최초 1회). */
|
|
setStructureTypes(types: StructureType[]) {
|
|
structureTypes = types;
|
|
syncDrainageSpans();
|
|
draw();
|
|
},
|
|
/** 구조물 정본 목록을 반영해 그래프 서클마크를 다시 그린다. */
|
|
setStructures(next: StructureInstance[]) {
|
|
structures = next;
|
|
if (selectedStructureId && !next.some((s) => s.structure_id === selectedStructureId)) {
|
|
selectedStructureId = null;
|
|
}
|
|
syncDrainageSpans();
|
|
draw();
|
|
},
|
|
/** 사이드 목록에서 고른 구조물을 그래프 알약·측점 세로선 선택에 함께 맞춘다. */
|
|
setSelectedStructure(structureId: string | null) {
|
|
selectedStructureId = structureId;
|
|
selectedStationId = stationIdAtStructure(structureId);
|
|
draw();
|
|
},
|
|
/** 이어 공사 시작 기준(측점번호·누가거리 오프셋)을 반영해 측점 라벨·누가거리 표시를 옮긴다. */
|
|
setStationDisplay(next: { station: number; cumulative: number }) {
|
|
stationDisplay = next;
|
|
draw();
|
|
},
|
|
/**
|
|
* 특정 chainage의 계획고 편집(station_offset·curve_radii)을 지운다.
|
|
* 비정규 측점을 옮기거나 지울 때 옛 위치에 남는 편집(유령 변화점)을 청소하는 데 쓴다.
|
|
*/
|
|
resetStationEdit(chainageM: number, moveTo?: number) {
|
|
const key = chainageKey(chainageM);
|
|
const edits = store.edits();
|
|
if (edits.station_offsets[key] === undefined && edits.curve_radii[key] === undefined) return;
|
|
store.resetStation(chainageM, moveTo);
|
|
},
|
|
isDirty: () => store.dirty(),
|
|
/** [확정] 직전에 호출한다. 편집이 없으면 아무 것도 하지 않는다. */
|
|
async save(): Promise<void> {
|
|
if (!routeId || !store.dirty()) return;
|
|
const saved = await saveProfileAlignment(projectId, routeId, store.edits());
|
|
const next = saved.profile_alignment as ProfileAlignment | undefined;
|
|
if (next?.base_pvi?.length) {
|
|
base = toAlignmentBase(next);
|
|
alignment = next;
|
|
if (detail) detail.longitudinal.profile_alignment = next;
|
|
}
|
|
store.markSaved();
|
|
draw();
|
|
},
|
|
clear() {
|
|
detail = null;
|
|
base = null;
|
|
alignment = null;
|
|
selectedStationId = null;
|
|
balanceBar.replaceChildren();
|
|
body.replaceChildren(empty);
|
|
},
|
|
/** 밖에서 바뀐 횡단 면적(카드 갱신)을 유토곡선 · 뱃지에 다시 싣는다. */
|
|
redraw: () => draw(),
|
|
/** 오른쪽 판(배수유역도) — 판 없이 만들었으면 null. */
|
|
side: drainagePanel,
|
|
/** 그래프 영역 로딩 서클. 문구를 주면 켜고 null이면 끈다. */
|
|
setLoading(label: string | null) {
|
|
progress.root.hidden = label === null;
|
|
if (label !== null) progress.set(null, label);
|
|
},
|
|
/** 보기가 숨으면 false — 창 키 듣기를 뗀다. 다시 보이면 잇고, 다른 보기가 고친 계획고 초안
|
|
* (같은 가게) · 관(판)을 다시 읽어 그린다(계획서 24-3a). */
|
|
setActive(active: boolean) {
|
|
setListening(active);
|
|
if (!active) return;
|
|
if (base) alignment = buildAlignment(base, store.edits());
|
|
draw();
|
|
drainagePanel?.load(projectId);
|
|
},
|
|
dispose() {
|
|
setListening(false);
|
|
drag.dispose();
|
|
crossPreview.dispose();
|
|
resizeObserver.disconnect();
|
|
},
|
|
};
|
|
}
|
|
|
|
/** 종단도 한 벌 — `createDesignProfile` 이 돌려주는 것. */
|
|
export type DesignProfile = ReturnType<typeof createDesignProfile>;
|