- 줌 버튼을 셋(줌인·줌아웃·초기화)으로 줄임. 세로 배율·창 이동 버튼 제거 - 배율 1 = 기본값이자 축소 한계 — 한계에 닿은 버튼은 흐리게 죽임 - 세로는 보이는 누가거리 구간의 지반·계획선 범위로 자동(공통 함수 windowElevationRange, B05·B06 종단이 함께 씀). 스크롤이 멈춘 뒤 0.16초에 갱신 - 계획고 편집 버튼을 누르고 있는 동안 Y 축 고정, 손을 떼면 다시 맞춤 - 유토곡선 Y 도 같은 창 기준(전 구간 ±200㎥ 고정 해제) - B06 종단이 쓰던 공통 Y 스케일(calculateYScale) 제거 — 횡단 카드는 원래 안 쓰던 값 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
145 lines
5.8 KiB
TypeScript
145 lines
5.8 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;
|
|
/** 화면에 보이는 누가거리 구간(m) — Y 를 이 구간의 누계 토량으로 잡는다(2026-09-04). */
|
|
viewRange?: { fromM: number; toM: number };
|
|
}
|
|
|
|
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,
|
|
viewRange: input.viewRange,
|
|
},
|
|
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 };
|
|
}
|