Files
Aislo/B06_Section/B06_Section_UI_Section_View_MassHaul.ts
T
eomsangdonandClaude Opus 5 a35c8ff356 feat(B05,B06): 계획선 편집 중 횡단 재계산을 브라우저에서 수행 — 서버 왕복 제거
사용자 조작 중의 계산은 브라우저 안에서 끝나야 함(2026-09-03 사용자 확정). 계획고가
바뀔 때마다 전 측점 횡단 계산이 `POST …/cross-design/preview` 로 나가 왕복이 조작
속도를 지배했음.

- `refreshCrossDesigns` 를 로컬 계산으로 교체. 계획고는 저장 선형(`base_pvi`)에 편집
  델타를 얹어 TS `buildAlignment` 로 여기서 풂 — 호출부(B05·B06) 시그니처는 그대로라
  단일 창구가 유지됨. 서버 프리뷰는 선형 저장분이 없는 옛 데이터 폴백으로만 남음.
- 표준단면 config 기본값·암 경계 기본 오프셋을 `sections/context` 응답에서 세션에 기억
  (`rememberStandardDefaults`·`rememberRockBoundaryDefault`). 프론트에 config 수치를
  복제하지 않으면서 패널 없는 B05 도 같은 값으로 계산함.
- 디바운스 250 → 60ms — 왕복이 사라져 손을 떼는 즉시 유토곡선이 따라옴.
- 낡음 판정을 `hasStaleDesigns` 로 바꿔 첫 건에서 중단하고, 계획선 유효 샘플을
  샘플 배열당 한 번만 걸러 이진탐색(그리기 프레임당 2.33ms → 0.07ms 실측).
- 파이썬 엔진 2파일·프리뷰 라우터에 「TS 짝 파일과 한 벌」 경고 블록 추가.

검증: `tmp/tests/test_b06_cross_design_mirror.py` 10건 — 토사/암 2단계/L형 측구/포장/
세월교 하강/사면 미닫힘 등에서 파이썬과 TS 결과가 면적·설계선까지 일치. 전체 183건 통과.
`tsc --noEmit` 통과. 실측: route 127(측점 128) 전 측점 로컬 재계산 7.5ms.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-03 19:58:09 +09:00

142 lines
5.6 KiB
TypeScript

/* =============================================================================
* B06_Section_UI_Section_View_MassHaul.ts
* B06 상단 패널의 **유토곡선 몫**만 떼어 낸 조립기 (2026-09-03 · 700줄 제한).
*
* 뷰 컨트롤러(`_UI_Section_View`)가 종단면도와 카드 그리드를 맡고, 곡선 계산 → 차트 →
* 범례 → 요약줄까지의 한 덩어리는 여기서 만든다. 계산·판정은 전부 공용 모듈
* (`common_util_mass_haul*`)이 하고 여기서는 **어디에 무엇을 붙일지**만 정한다.
*
* 낡음 판정(`hasStaleDesigns`)은 B05와 같은 규칙 하나를 쓴다 — 저장된 횡단이 지금
* 계획선과 어긋나면 곡선을 그리지 않고 안내만 띄운다(2026-09-03 사용자 확정:
* 「새 값만 보여주기」). 옛 계획고로 만든 면적을 잠깐 보여 주고 정본으로 갈아 끼우면
* 사용자가 옛 그림을 본다.
* ========================================================================== */
import type { EarthworkConversion, HaulEquipmentLimit } from "./B06_Section_Api_Fetch";
import type { SectionDetailResponse } from "./B06_Section_Api_Fetch";
import {
computeMassHaulSeries,
MASS_HAUL_BALANCE_KEY,
type MassHaulSeries,
} from "@util/common_util_mass_haul";
import { computeHaulPlan } from "@util/common_util_mass_haul_balance";
import { resetBalloonOffsets } from "@util/common_util_mass_haul_balance_view";
import {
createMassHaulChart,
createMassHaulLegend,
createMassHaulSummary,
} from "@util/common_util_mass_haul_view";
import {
L,
longitudinalMaxChainage,
LONG_PAD,
hasStaleDesigns,
} from "./B06_Section_UI_Section_Common";
/** 유토곡선 Y축 눈금 — 가로 스크롤 고정 오버레이가 그대로 받는다. */
export interface MassHaulAxisTicks {
padLeft: number;
ticks: Array<{ y: number; label: string }>;
}
export interface MassHaulPanelInput {
detail: SectionDetailResponse;
conversion: EarthworkConversion | undefined;
haulLimits: HaulEquipmentLimit[] | undefined;
naturalSpoilSlope: number | undefined;
visibleSeries: Set<string>;
selectedStationId: string | null;
stationInterval: number;
chartWidth: number;
minWidth: number;
/** 유토곡선 몫 높이(px)와 그 위 종단면도 높이(px) — 범례·Y축 자리를 잡는 값. */
massHeight: number;
longHeight: number;
selectStation: (stationId: string) => void;
toggleSeries: (key: string) => void;
/** 범례에서 도형 위치를 초기화한 뒤 패널을 다시 그린다. */
redraw: () => void;
}
export interface MassHaulPanelResult {
/** 차트 SVG — 곡선이 없으면 null(그 자리는 비운다). */
chart: Element | null;
axis: MassHaulAxisTicks | null;
/** 범례·요약줄 — 패널 본문에 붙일 순서대로. */
overlays: HTMLElement[];
/** 곡선을 못 그린 이유(있으면 상태줄에 그대로 적는다). 그릴 수 있으면 빈 문자열. */
statusText: string;
}
/**
* 유토곡선 차트·범례·요약줄을 만든다. DOM 에 붙이는 것은 호출한 쪽 몫이다 —
* 차트는 종단면도와 **같은 부모의 형제**여야 하고(감싸는 상자가 하나라도 끼면 스크롤
* 컨테이너 폭 계산이 어긋나 측점 세로선이 밀린다) 범례는 스크롤 컨테이너 **밖**이라
* 붙일 자리가 서로 다르기 때문이다.
*/
export function buildMassHaulPanel(input: MassHaulPanelInput): MassHaulPanelResult {
const { detail, visibleSeries } = input;
const pendingRecalc = hasStaleDesigns(detail);
const series: MassHaulSeries[] =
input.conversion && !pendingRecalc
? computeMassHaulSeries(
detail.longitudinal,
detail.cross_sections,
input.conversion,
input.naturalSpoilSlope,
)
: [];
// 토량 분배는 **면을 깐 곡선 하나**(= 켜 둔 첫 곡선)에만 얹는다 — 곡선마다 평형선을
// 그리면 계단이 서로 엇갈려 어느 쪽 배분인지 읽히지 않는다.
const bandedSeries = series.find((entry) => visibleSeries.has(entry.key));
const haulPlan =
bandedSeries && visibleSeries.has(MASS_HAUL_BALANCE_KEY)
? computeHaulPlan(bandedSeries.result, input.haulLimits)
: null;
let axis: MassHaulAxisTicks | null = null;
const chart = series.length
? createMassHaulChart(
series,
visibleSeries,
detail.longitudinal,
{
maxChainageM: longitudinalMaxChainage(detail.longitudinal),
padLeft: LONG_PAD.left,
padRight: LONG_PAD.right,
},
input.selectedStationId,
input.stationInterval,
input.chartWidth,
input.massHeight,
input.minWidth,
input.selectStation,
haulPlan,
(next) => {
axis = next;
},
)
: null;
const overlays: HTMLElement[] = [];
if (series.length) {
// 범례는 유토곡선 우측 상단에 겹쳐 놓는다(2026-08-02 사용자 지시). 세로 자리는
// 종단면도 높이로 잡는다.
const legend = createMassHaulLegend(series, visibleSeries, input.toggleSeries, () => {
resetBalloonOffsets();
input.redraw();
});
legend.style.top = `${input.longHeight + 6}px`;
overlays.push(legend);
}
// 요약 수치는 켜 둔 곡선 중 첫 번째 것 — 곡선이 여러 개라 어느 것인지 요약 끝에 밝힌다.
if (bandedSeries) {
overlays.push(createMassHaulSummary(bandedSeries, haulPlan));
return { chart, axis, overlays, statusText: "" };
}
const statusText = pendingRecalc
? L("B06_MassHaul_Recalculating")
: L(series.length ? "B06_MassHaul_AllHidden" : "B06_MassHaul_Empty");
return { chart, axis, overlays, statusText };
}