- 한몸으로 동작하는 두 페이지라 한 커밋으로 처리 (상호 참조 다수) - 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>
102 lines
4.3 KiB
TypeScript
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);
|
|
}
|
|
},
|
|
};
|
|
}
|