Files
Aislo/B05_Profile/B05_Profile_UI_Selection.ts
T
eomsangdonandClaude Fable 5 54954a05e5 refactor(B05,B06): B05_wf2_Route -> B05_Profile, B06_wf3_ProfileCross -> B06_Section 동시 개명
- 한몸으로 동작하는 두 페이지라 한 커밋으로 처리 (상호 참조 다수)
- B05 37파일 + B06 20파일 접두사 개명 (git mv, 이력 보존)
- 참조 치환 91파일: import 경로, 라우트 슬러그(b05-profile/b06-section),
  라우트 키(B05_PROFILE/B06_SECTION), B03 자동 체인, storage 상수, pyproject 제외 경로
- 로직 변경 없음. typecheck·백엔드 import 검증 통과

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-08 10:03:11 +09:00

102 lines
4.3 KiB
TypeScript

/* =============================================================================
* 측점 선택 동기화 (B05)
*
* 같은 측점을 네 곳이 각자 그린다 — 3D 마커 · 종단 그래프 세로선 · 좌측 구조물 폼 ·
* 배수유역도의 세부유역. 어느 하나에서 고르면 나머지 셋도 같은 것을 가리켜야 한다
* (2026-08-02 사용자 지시).
*
* 서로가 서로를 갱신하므로 `isSyncing` 가드로 재진입을 막는다. 배수유역 강조는 "배관"
* 구조물(`origin: "pipe"`)일 때만 붙는다 — 다른 구조물에는 대응하는 유역이 없다.
* ========================================================================== */
import {
irregularStationId,
isPipeStation,
type IrregularStation,
} from "./B05_Profile_UI_IrregularStations";
export interface SelectionSyncPorts {
/** 현재 구조물 측점 목록(수동 + 배관 투영분). */
stations: () => ReadonlyArray<IrregularStation>;
isSyncing: () => boolean;
setSyncing: (value: boolean) => void;
/** 3D 뷰어 마커 선택. */
selectMarker: (stationId: string | null) => void;
/** 종단 그래프 세로선 선택. */
selectGraph: (stationId: string | null) => void;
/** 좌측 구조물 폼 선택(누가거리 기준). */
selectSidebar: (chainageM: number | null) => void;
/** 배수유역도 세부유역 강조(누가거리 기준). */
selectBasin: (chainageM: number | null) => void;
/** 배수유역도 계획선 위 측점 마킹(누가거리 기준). 유역 없는 구조물도 위치를 보여 준다. */
markStation?: (chainageM: number | null) => void;
}
export interface SelectionSync {
/** 그래프·3D에서 측점을 골랐을 때 — 좌측 폼과 배수유역도를 맞춘다. */
syncIrregularSelection: (stationId: string | null) => void;
/** 고른 측점이 배관이면 그 유역을 강조한다(아니면 강조 해제). */
syncBasinHighlight: (stationId: string | null) => void;
/** 배수유역도에서 유역을 골랐을 때 — 그래프·3D·좌측 폼을 맞춘다. */
selectStationOfPipe: (chainageM: number | null) => void;
}
/** 같은 누가거리로 볼 여유(m). 관 지점과 구조물 측점은 소수점 둘째 자리까지 같은 값을 쓴다. */
const SAME_CHAINAGE_M = 0.51;
export function createSelectionSync(ports: SelectionSyncPorts): SelectionSync {
const prefix = irregularStationId("");
/** 측점 id로 구조물 측점을 찾는다(비정규 id가 아니면 undefined). */
function irregularOf(stationId: string | null): IrregularStation | undefined {
if (!stationId?.startsWith(prefix)) return undefined;
const id = stationId.slice(prefix.length);
return ports.stations().find((entry) => entry.id === id);
}
function syncBasinHighlight(stationId: string | null): void {
const station = irregularOf(stationId);
ports.selectBasin(station && isPipeStation(station) ? station.chainage_m : null);
// 배수유역도 측점 마킹 — 유역이 없는 구조물(대피로 등)도 위치는 표시한다(2026-08-05).
ports.markStation?.(station ? station.chainage_m : null);
}
return {
syncBasinHighlight,
syncIrregularSelection(stationId) {
if (ports.isSyncing()) return;
syncBasinHighlight(stationId);
// 규칙 측점을 고른 것이면 구조물 폼은 건드리지 않는다(고를 항목이 없다).
if (stationId !== null && !stationId.startsWith(prefix)) return;
const station = irregularOf(stationId);
ports.setSyncing(true);
try {
ports.selectSidebar(station ? station.chainage_m : null);
} finally {
ports.setSyncing(false);
}
},
selectStationOfPipe(chainageM) {
if (ports.isSyncing()) return;
const matched =
chainageM === null
? undefined
: ports
.stations()
.find(
(entry) =>
isPipeStation(entry) && Math.abs(entry.chainage_m - chainageM) < SAME_CHAINAGE_M,
);
const id = matched ? irregularStationId(matched.id) : null;
ports.setSyncing(true);
try {
ports.selectMarker(id);
ports.selectGraph(id);
ports.selectSidebar(matched ? matched.chainage_m : null);
} finally {
ports.setSyncing(false);
}
},
};
}