eomsangdonandClaude Opus 5
32fd199dbf
- 흐름 강도 색띠 범례를 지도 우측에 세로로 세운다(B04 2D 지도·B05 배수유역도 공용). 색은 화면과 같은 색띠를, 눈금은 같은 로그 정규화를 되돌려 적는다. 제목 "흐름강도". - 배관 누가거리 라벨에 흰 테두리를 깔았다. --map-* 토큰은 다크 테마에서 바뀌지 않아 색만으로는 위성사진·다크 배경에서 묻힌다. - 배수유역 영역 · 종단 그래프 세로선 · 좌측 구조물 폼 · 3D 마커의 선택이 서로를 갱신한다. B05_wf2_Route_UI_Selection.ts로 경로를 한곳에 모으고 isSyncing 가드로 재진입을 막았다. 유역 강조는 origin === "pipe" 항목에만 붙는다. 700줄 규칙 유지를 위한 분리 - B04_wf1_Surface_UI_MapOverlays.ts 신설(유역 채움·번호 배지·분수령·상류 세류망) - reconcilePipes / fetchDrainageLayers / fitViewToRoute → _Drainage_Parts.ts Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
95 lines
3.9 KiB
TypeScript
95 lines
3.9 KiB
TypeScript
/* =============================================================================
|
|
* 측점 선택 동기화 (B05)
|
|
*
|
|
* 같은 측점을 네 곳이 각자 그린다 — 3D 마커 · 종단 그래프 세로선 · 좌측 구조물 폼 ·
|
|
* 배수유역도의 세부유역. 어느 하나에서 고르면 나머지 셋도 같은 것을 가리켜야 한다
|
|
* (2026-08-02 사용자 지시).
|
|
*
|
|
* 서로가 서로를 갱신하므로 `isSyncing` 가드로 재진입을 막는다. 배수유역 강조는 "배관"
|
|
* 구조물(`origin: "pipe"`)일 때만 붙는다 — 다른 구조물에는 대응하는 유역이 없다.
|
|
* ========================================================================== */
|
|
|
|
import { irregularStationId, type IrregularStation } from "./B05_wf2_Route_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;
|
|
}
|
|
|
|
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?.origin === "pipe" ? 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) =>
|
|
entry.origin === "pipe" &&
|
|
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);
|
|
}
|
|
},
|
|
};
|
|
}
|