eomsangdonandClaude Opus 5
c141ad4ef8
- 테이블에 얹던 구조물 세로선을 걷어냈다. 위치는 그래프 측점선이 이미 보여 주므로 같은 것을 두 번 그리는 셈이었다. 테이블에는 우클릭 메뉴만 남는다 (가까운 구조물이 있으면 삭제, 없으면 배관 추가). - 드래그는 종단 그래프의 구조물 측점선에서 한다. createLongitudinalProfile에 onDragStation을 추가하고 kind === "irregular" 측점선에만 붙였다(좌클릭 전용). - 좌측 구조물 폼에서 "배관" 항목을 고치거나 지우면 그래프와 배수유역도가 함께 갱신된다. DrainagePanel.setPipeChainages() 신설. reconcilePipes()가 목록이 같으면 null을 돌려 관↔구조물 순환을 끊는다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
701 lines
28 KiB
TypeScript
701 lines
28 KiB
TypeScript
import { createWorkflowPanelHandle } from "@ui/ui_template_overlay";
|
|
import { createPanelResizer } from "@ui/ui_template_resizer";
|
|
import { themeColor } from "@ui/ui_template_palette";
|
|
import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
|
|
import { fetchCachedSheetLayer } from "../A00_Common/b_asset_cache";
|
|
import {
|
|
computeDetailBasins,
|
|
fetchDetailPipePoints,
|
|
fetchVWorldMeta,
|
|
getVWorldMapUrl,
|
|
saveDetailPipePoints,
|
|
type DetailBasin,
|
|
type DetailBasinResponse,
|
|
type PipeSource,
|
|
type VWorldMeta,
|
|
} from "../B04_wf1_Surface/B04_wf1_Surface_Api_Fetch";
|
|
import {
|
|
computeMapRect,
|
|
computeRouteView,
|
|
createNormalizer,
|
|
lonLatToScreen,
|
|
prepareLayer,
|
|
prepareMetricPolyline,
|
|
type GeoJsonCollection,
|
|
type MapRect,
|
|
type Normalizer,
|
|
type PreparedLayer,
|
|
type ViewState,
|
|
} from "../B04_wf1_Surface/B04_wf1_Surface_UI_MapRender";
|
|
import { type RoutePoint } from "./B05_wf2_Route_Api_Fetch";
|
|
import type { FlowArrow } from "../B04_wf1_Surface/B04_wf1_Surface_UI_FlowArrows";
|
|
import { buildStrengthArray } from "../B04_wf1_Surface/B04_wf1_Surface_UI_FlowRamp";
|
|
import { resampleRoute } from "../B04_wf1_Surface/B04_wf1_Surface_UI_RouteSamples";
|
|
import { createPipeEditor } from "./B05_wf2_Route_UI_Drainage_Pipes";
|
|
import { createProgressCircle } from "@ui/ui_template_progress";
|
|
import { createMapContextMenu } from "@ui/ui_template_context_menu";
|
|
import { drawDrainageScene } from "./B05_wf2_Route_UI_Drainage_Render";
|
|
import {
|
|
mountDrainageToggles,
|
|
basinColor,
|
|
DRAINAGE_LAYERS,
|
|
bindPipeContextMenu,
|
|
COLLAPSED_KEY,
|
|
MAX_PANEL_WIDTH_RATIO,
|
|
MIN_PANEL_WIDTH,
|
|
renderBasinRows,
|
|
pointInRing,
|
|
reconcilePipes,
|
|
WIDTH_KEY,
|
|
type DrainageLayer,
|
|
} from "./B05_wf2_Route_UI_Drainage_Parts";
|
|
|
|
/** 이만큼(px) 이하로 움직였다 뗐으면 클릭으로 본다 — 손떨림으로 선택이 안 되는 일을 막는다. */
|
|
const CLICK_SLOP_PX = 4;
|
|
|
|
// 배수유역도 패널 — 하단 종단 패널 안쪽 우측에 도킹되는 2단 사이드 패널.
|
|
// 하단 패널이 닫히면 이 패널도 함께 화면에서 사라진다(부모 안에 들어 있으므로 자동).
|
|
// 지도는 B04에서 분리한 렌더 엔진(B04_wf1_Surface_UI_MapRender)을 그대로 재사용해
|
|
// 사전 투영·LOD·뷰포트 컬링·커서 중심 줌 동작을 동일하게 얻는다.
|
|
|
|
function L(key: keyof typeof ui_locales): string {
|
|
return ui_locales[key][currentLanguageIndex];
|
|
}
|
|
|
|
export interface DrainagePanel {
|
|
root: HTMLElement;
|
|
/** 프로젝트가 정해지면 배경지도·도엽 레이어를 불러온다. */
|
|
load: (projectId: string) => void;
|
|
/** 확정된 노선 평면 선형(사업지 좌표계 m)을 지도 위에 겹친다. */
|
|
setRoute: (points: ReadonlyArray<RoutePoint>) => void;
|
|
/** 현재 관 매설 누가거리 목록(종단 테이블의 "배관" 구조물 라인과 맞추는 데 쓴다). */
|
|
pipeChainages: () => number[];
|
|
/** 종단 테이블에서 배관 라인을 끌었을 때 — 그 자리로 옮기고 세부유역을 다시 나눈다. */
|
|
movePipe: (fromChainage: number, toChainage: number) => void;
|
|
/** 관 목록을 통째로 맞춘다(사이드바 구조물 폼 편집 등 밖에서 바뀐 경우).
|
|
* 현재 목록과 같으면 아무 일도 하지 않는다 — 되먹임 고리를 끊는 지점이다. */
|
|
setPipeChainages: (chainages: ReadonlyArray<number>) => void;
|
|
/** 종단 테이블 우클릭으로 배관을 넣거나 지울 때. */
|
|
addPipe: (chainageM: number) => void;
|
|
removePipe: (chainageM: number) => void;
|
|
/** 경로 확정 시 관 매설 지점을 영구저장한다(B04 "모델 확정"과 같은 저장소). */
|
|
savePipes: () => Promise<number>;
|
|
dispose: () => void;
|
|
}
|
|
|
|
export interface DrainagePanelCallbacks {
|
|
/** 관 목록이 바뀔 때마다 누가거리 목록을 넘긴다 — 종단 테이블 구조물 라인 동기화용. */
|
|
onPipesChanged?: (chainages: number[]) => void;
|
|
}
|
|
|
|
export function createDrainagePanel(callbacks: DrainagePanelCallbacks = {}): DrainagePanel {
|
|
const root = document.createElement("aside");
|
|
root.className = "b05-drainage";
|
|
const panelHandle = createWorkflowPanelHandle("side");
|
|
|
|
const header = document.createElement("div");
|
|
header.className = "b05-drainage__header";
|
|
const title = document.createElement("h3");
|
|
title.textContent = L("B05_Drainage_Title");
|
|
const layerButtons = document.createElement("div");
|
|
layerButtons.className = "b05-drainage__layers";
|
|
header.append(title, layerButtons);
|
|
|
|
// 세부유역 산정 — B04가 미리 분석해 둔 결과를 읽어 관을 보충하고 세부유역만 나눈다.
|
|
// 격자 해석은 하지 않으므로 즉시 끝난다.
|
|
const analyzeButton = document.createElement("button");
|
|
analyzeButton.type = "button";
|
|
analyzeButton.className = "b05-drainage__analyze";
|
|
analyzeButton.textContent = L("B05_Drainage_Btn_Analyze");
|
|
analyzeButton.title = L("B05_Drainage_Btn_Analyze_Tip");
|
|
// 선택된 배관 삭제 — 편집 모드에서 마커를 선택해야 활성화된다.
|
|
const deleteButton = document.createElement("button");
|
|
deleteButton.type = "button";
|
|
deleteButton.className = "b05-drainage__analyze b05-drainage__tool";
|
|
deleteButton.textContent = L("B05_Drainage_Btn_DeleteSelected");
|
|
deleteButton.disabled = true;
|
|
// 자동 제안으로 되돌리기 — 편집한 배관 배치를 버리고 백엔드 자동 제안으로 재산정.
|
|
const autoButton = document.createElement("button");
|
|
autoButton.type = "button";
|
|
autoButton.className = "b05-drainage__analyze b05-drainage__tool";
|
|
autoButton.textContent = L("B05_Drainage_Btn_Auto");
|
|
autoButton.title = L("B05_Drainage_Btn_Auto_Tip");
|
|
header.append(analyzeButton, deleteButton, autoButton);
|
|
|
|
const viewport = document.createElement("div");
|
|
viewport.className = "b05-drainage__viewport";
|
|
const backgroundImage = document.createElement("img");
|
|
backgroundImage.className = "b05-drainage__image";
|
|
backgroundImage.alt = L("B05_Drainage_ImageAlt");
|
|
backgroundImage.draggable = false;
|
|
const canvas = document.createElement("canvas");
|
|
canvas.className = "b05-drainage__canvas";
|
|
const status = document.createElement("span");
|
|
status.className = "b05-drainage__status";
|
|
status.textContent = L("B05_Drainage_Status_NeedRoute");
|
|
// 지도 정중앙 로딩 서클 — 배경도·도엽 레이어·유역 산정이 끝날 때까지 화면이 비어 보인다.
|
|
const progress = createProgressCircle({ overlay: true });
|
|
progress.root.hidden = true;
|
|
// 배관 추가·삭제 우클릭 메뉴 — 편집 토글을 없앤 대신 이쪽으로 옮겼다(B04 지도와 같은 조작).
|
|
const contextMenu = createMapContextMenu("b05-drainage");
|
|
viewport.append(backgroundImage, canvas, status, progress.root, contextMenu.element);
|
|
|
|
/** 진행률(0~1, 모르면 null)과 문구. label이 null이면 서클을 감춘다. */
|
|
function showProgress(ratio: number | null, label: string | null): void {
|
|
progress.root.hidden = label === null;
|
|
if (label !== null) progress.set(ratio, label);
|
|
}
|
|
// 유역 제원 목록(면적·표고·유하거리·관경). 관경 수식 미확정이라 당분간 "미정"으로 나온다.
|
|
// 관 개수·세부유역 수·종단 Z 출처 — 세부유역이 갈리는 근거라 목록 위에 한 줄로 남긴다.
|
|
const summary = document.createElement("div");
|
|
summary.className = "b05-drainage__summary";
|
|
summary.hidden = true;
|
|
const basinList = document.createElement("div");
|
|
basinList.className = "b05-drainage__basins";
|
|
basinList.hidden = true;
|
|
// 왼쪽 경계를 끌어 폭을 조절한다. 상한은 하단 패널 폭의 70%,
|
|
// 세로는 하단 패널에 그대로 딸려 간다(따로 조절하지 않는다 — 사용자 지시).
|
|
const widthResizer = createPanelResizer({
|
|
axis: "horizontal",
|
|
target: root,
|
|
cssVar: "--b05-drainage-width",
|
|
direction: -1,
|
|
min: MIN_PANEL_WIDTH,
|
|
max: () => (root.parentElement?.clientWidth ?? window.innerWidth) * MAX_PANEL_WIDTH_RATIO,
|
|
storageKey: WIDTH_KEY,
|
|
});
|
|
root.append(panelHandle.root, widthResizer.root, header, viewport, summary, basinList);
|
|
|
|
let projectId: string | null = null;
|
|
let meta: VWorldMeta | null = null;
|
|
const preparedLayers = new Map<DrainageLayer, PreparedLayer>();
|
|
const activeLayers = new Set<DrainageLayer>(DRAINAGE_LAYERS);
|
|
let routeLayer: PreparedLayer | null = null;
|
|
let routePoints: ReadonlyArray<RoutePoint> = [];
|
|
let normalizer: Normalizer | null = null;
|
|
let basins: DetailBasin[] = [];
|
|
let selectedBasin: number | null = null;
|
|
// 배관 편집기 — 마커 선택/추가/이동/삭제 시 재그리기와 버튼 상태만 갱신한다.
|
|
const pipeEditor = createPipeEditor(
|
|
() => {
|
|
syncPipeSelection();
|
|
scheduleDraw();
|
|
},
|
|
// 배치가 실제로 바뀐 순간(추가·삭제·이동 완료)에만 세부유역을 다시 나눈다.
|
|
() => void analyze(),
|
|
);
|
|
// 2차 전체 배수유역 외곽선 = 분수령. 별도 "능선" 레이어를 두지 않고 이 선 하나로 표시한다
|
|
// (전체 유역 외곽선과 능선이 같은 선이므로 — 2026-07-31 사용자 지시).
|
|
let mainBoundary: Array<[number, number]> = [];
|
|
// 평균 흐름 화살표 — B04가 계산해 둔 것을 그대로 받아 그린다(여기서 계산하지 않는다).
|
|
let flowArrows: FlowArrow[] = [];
|
|
let arrowSpacingM = 0;
|
|
let showArrows = true;
|
|
// 유입 집중점 — 관 자리를 판단하는 근거. 기본 꺼짐(마커가 관 마커와 겹쳐 읽기 어렵다).
|
|
let hotspots: Array<{ chainage: number; area: number }> = [];
|
|
let maxHotspotArea = 0;
|
|
let showHotspots = false;
|
|
/** 종단 Z 출처 — 세부유역이 갈리는 근거라 화면에서 확인 가능해야 한다. */
|
|
let zSource = "";
|
|
// 유역 안쪽 상류 세류망 — B04가 채택한 기준선을 그대로 받아 강조만 한다.
|
|
let upstreamLines: Array<Array<[number, number]>> = [];
|
|
let showUpstream = true;
|
|
// 계획선 위 유입 강도 색칠 — B04 지도와 같은 색띠·같은 값(2026-08-01 사용자 지시).
|
|
let strengthSamples: RoutePoint[] = [];
|
|
let strength: Float64Array<ArrayBuffer> = new Float64Array(0);
|
|
let maxStrength = 0;
|
|
let showStrength = true;
|
|
let scale = 1;
|
|
let offsetX = 0;
|
|
let offsetY = 0;
|
|
let dragStart: { x: number; y: number; offsetX: number; offsetY: number } | null = null;
|
|
/** 좌클릭을 시작한 자리 — 끌지 않고 뗐을 때만 유역 고르기로 본다. */
|
|
let basinClickStart: { x: number; y: number } | null = null;
|
|
/** 마커를 잡은 좌클릭 — 이 경우 유역 고르기로 넘기지 않는다. */
|
|
let pipeClickStart: { x: number; y: number } | null = null;
|
|
let frameHandle = 0;
|
|
let loadSequence = 0;
|
|
let canvasWidth = 0;
|
|
let canvasHeight = 0;
|
|
let canvasDpr = 0;
|
|
|
|
mountDrainageToggles(layerButtons, {
|
|
initial: {
|
|
arrows: showArrows,
|
|
strength: showStrength,
|
|
hotspots: showHotspots,
|
|
upstream: showUpstream,
|
|
},
|
|
onSatellite: (next) => {
|
|
backgroundImage.hidden = !next;
|
|
scheduleDraw();
|
|
},
|
|
onSheetLayer: (layer, next) => {
|
|
if (next) activeLayers.add(layer);
|
|
else activeLayers.delete(layer);
|
|
scheduleDraw();
|
|
},
|
|
onArrows: (next) => {
|
|
showArrows = next;
|
|
scheduleDraw();
|
|
},
|
|
onStrength: (next) => {
|
|
showStrength = next;
|
|
scheduleDraw();
|
|
},
|
|
onHotspots: (next) => {
|
|
showHotspots = next;
|
|
scheduleDraw();
|
|
},
|
|
onUpstream: (next) => {
|
|
showUpstream = next;
|
|
scheduleDraw();
|
|
},
|
|
});
|
|
|
|
function updateImageTransform(): void {
|
|
backgroundImage.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
|
|
}
|
|
|
|
function draw(): void {
|
|
const rect = viewport.getBoundingClientRect();
|
|
const width = Math.max(1, Math.floor(rect.width));
|
|
const height = Math.max(1, Math.floor(rect.height));
|
|
const dpr = window.devicePixelRatio || 1;
|
|
if (width !== canvasWidth || height !== canvasHeight || dpr !== canvasDpr) {
|
|
canvasWidth = width;
|
|
canvasHeight = height;
|
|
canvasDpr = dpr;
|
|
canvas.width = Math.floor(width * dpr);
|
|
canvas.height = Math.floor(height * dpr);
|
|
canvas.style.width = `${width}px`;
|
|
canvas.style.height = `${height}px`;
|
|
}
|
|
const context = canvas.getContext("2d");
|
|
if (!context) return;
|
|
context.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
context.clearRect(0, 0, width, height);
|
|
const mapRect: MapRect = computeMapRect(meta, width, height);
|
|
const view: ViewState = { width, height, scale, offsetX, offsetY, mapRect };
|
|
drawDrainageScene(context, view, {
|
|
meta,
|
|
normalizer,
|
|
basins,
|
|
selectedBasin,
|
|
mainBoundary,
|
|
preparedLayers,
|
|
activeLayers,
|
|
routeLayer,
|
|
upstreamLines,
|
|
showUpstream,
|
|
strengthSamples,
|
|
strength,
|
|
maxStrength,
|
|
showStrength,
|
|
flowArrows,
|
|
arrowSpacingM,
|
|
showArrows,
|
|
hotspots,
|
|
maxHotspotArea,
|
|
showHotspots,
|
|
pipeEditor,
|
|
pipeColor,
|
|
});
|
|
updateImageTransform();
|
|
}
|
|
|
|
/** 현재 프레임 뷰 상태 (draw()와 동일 계산 — 배관 마커 포인터 히트 판정용). */
|
|
function currentView(): ViewState {
|
|
const rect = viewport.getBoundingClientRect();
|
|
const width = Math.max(1, Math.floor(rect.width));
|
|
const height = Math.max(1, Math.floor(rect.height));
|
|
return { width, height, scale, offsetX, offsetY, mapRect: computeMapRect(meta, width, height) };
|
|
}
|
|
|
|
/** 배관 마커 색 — 같은 누가거리 유역의 파스텔색(불투명). 유역이 없으면 회색. */
|
|
function pipeColor(chainage: number): string {
|
|
const basin = basins.find((item) => Math.abs(item.chainage_m - chainage) < 0.51);
|
|
if (!basin) return themeColor("--map-pipe-orphan", "#e5e7eb");
|
|
return basinColor(basin.index).replace(/0\.45\)$/, "1)");
|
|
}
|
|
|
|
/** 마커 선택 ↔ 유역 목록 선택 동기화 + 삭제 버튼 활성화. */
|
|
function syncPipeSelection(): void {
|
|
const index = pipeEditor.selected();
|
|
deleteButton.disabled = index === null;
|
|
const pipe = index === null ? null : pipeEditor.pipes()[index];
|
|
const basin = pipe
|
|
? basins.find((item) => Math.abs(item.chainage_m - pipe.chainage_m) < 0.51)
|
|
: null;
|
|
selectedBasin = basin ? basin.index : null;
|
|
renderBasinList();
|
|
}
|
|
|
|
function scheduleDraw(): void {
|
|
if (frameHandle) return;
|
|
frameHandle = window.requestAnimationFrame(() => {
|
|
frameHandle = 0;
|
|
draw();
|
|
});
|
|
}
|
|
|
|
/** 유역 제원 목록을 다시 그린다. 항목을 누르면 해당 유역만 진하게 강조한다. */
|
|
/** 유역 제원 목록을 다시 그린다. 항목을 누르면 그 유역만 진하게 강조한다. */
|
|
function renderBasinList(): void {
|
|
renderBasinRows(basinList, basins, selectedBasin, (index) => {
|
|
selectedBasin = selectedBasin === index ? null : index;
|
|
renderBasinList();
|
|
scheduleDraw();
|
|
});
|
|
}
|
|
|
|
/** 응답을 화면 상태로 옮긴다. B04 지도와 **같은 엔드포인트·같은 응답**을 쓴다
|
|
* — 두 화면이 다른 결과를 보이면 안 되기 때문이다(2026-08-01 일원화). */
|
|
function apply(response: DetailBasinResponse): void {
|
|
basins = response.basins;
|
|
mainBoundary = response.main_polygon_lonlat ?? [];
|
|
upstreamLines = (response.upstream_lonlat ?? []) as Array<Array<[number, number]>>;
|
|
flowArrows = (response.flow_arrows ?? []) as FlowArrow[];
|
|
arrowSpacingM = response.arrow_spacing_m ?? 0;
|
|
hotspots = (response.inflow_hotspots ?? []).map(([chainage, area]) => ({ chainage, area }));
|
|
zSource = response.z_source ?? "";
|
|
const built = buildStrengthArray(
|
|
(response.strength_profile ?? []) as ReadonlyArray<readonly [number, number]>,
|
|
);
|
|
strength = built.strength;
|
|
maxStrength = built.maximum;
|
|
maxHotspotArea = hotspots.reduce((max, spot) => (spot.area > max ? spot.area : max), 0);
|
|
// 실제 사용된 배관 목록으로 마커를 동기화한다(유역 없는 관 포함).
|
|
pipeEditor.setPipes(
|
|
response.pipe_points.map((pipe) => ({
|
|
chainage_m: pipe.chainage_m,
|
|
reason: pipe.source,
|
|
})),
|
|
);
|
|
selectedBasin = null;
|
|
renderBasinList();
|
|
syncPipeSelection();
|
|
summary.textContent = L("B05_Drainage_Summary")
|
|
.replace("{pipes}", String(pipeEditor.pipes().length))
|
|
.replace("{basins}", String(basins.length))
|
|
.replace("{source}", zSource || "-");
|
|
summary.hidden = basins.length === 0;
|
|
callbacks.onPipesChanged?.(pipeEditor.chainages());
|
|
}
|
|
|
|
/** 저장된 관 지점(없으면 자동 배치)을 불러온다. 화면에 들어올 때 1회. */
|
|
async function loadSaved(): Promise<void> {
|
|
if (!projectId) return;
|
|
status.hidden = false;
|
|
status.textContent = L("B05_Drainage_Status_Analyzing");
|
|
showProgress(null, L("B05_Drainage_Status_Analyzing"));
|
|
try {
|
|
apply(await fetchDetailPipePoints(projectId));
|
|
status.hidden = basins.length > 0;
|
|
if (basins.length === 0) status.textContent = L("B05_Drainage_Status_NoBasin");
|
|
scheduleDraw();
|
|
} catch (error) {
|
|
status.hidden = false;
|
|
status.textContent =
|
|
error instanceof Error ? error.message : L("B05_Drainage_Status_AnalyzeFailed");
|
|
} finally {
|
|
showProgress(null, null);
|
|
}
|
|
}
|
|
|
|
/** 세부유역을 다시 나눈다. `auto=true`면 편집분을 버리고 자동 배치로 되돌린다.
|
|
* 격자 해석은 하지 않으므로 즉시 끝난다. */
|
|
async function analyze(auto = false): Promise<void> {
|
|
if (!projectId) return;
|
|
analyzeButton.disabled = true;
|
|
status.hidden = false;
|
|
status.textContent = L("B05_Drainage_Status_Analyzing");
|
|
showProgress(null, L("B05_Drainage_Status_Analyzing"));
|
|
try {
|
|
const points =
|
|
!auto && pipeEditor.pipes().length > 0
|
|
? pipeEditor.pipes().map((pipe) => ({
|
|
chainage_m: pipe.chainage_m,
|
|
source: (pipe.reason || "user") as PipeSource,
|
|
}))
|
|
: [];
|
|
apply(await computeDetailBasins(projectId, points));
|
|
status.hidden = basins.length > 0;
|
|
if (basins.length === 0) status.textContent = L("B05_Drainage_Status_NoBasin");
|
|
scheduleDraw();
|
|
} catch (error) {
|
|
status.hidden = false;
|
|
status.textContent =
|
|
error instanceof Error ? error.message : L("B05_Drainage_Status_AnalyzeFailed");
|
|
} finally {
|
|
analyzeButton.disabled = false;
|
|
showProgress(null, null);
|
|
}
|
|
}
|
|
|
|
analyzeButton.addEventListener("click", () => void analyze());
|
|
deleteButton.addEventListener("click", () => void pipeEditor.deleteSelected());
|
|
autoButton.addEventListener("click", () => {
|
|
pipeEditor.setPipes([]);
|
|
void analyze(true);
|
|
});
|
|
|
|
/** 노선 전체가 보이도록 배율·중심을 맞춘다(초기 보기 = 도로 기준 줌인).
|
|
*
|
|
* B05는 노선 주변 배수유역을 보는 화면이라 도로에 맞춰 확대한 상태로 연다
|
|
* (2026-08-01 사용자 지시). 배경 전체를 보려면 휠로 축소하면 된다.
|
|
* 노선이 없으면 배경 전체를 그대로 보여준다. */
|
|
function fitToRoute(): void {
|
|
scale = 1;
|
|
offsetX = 0;
|
|
offsetY = 0;
|
|
if (!meta || routePoints.length < 2) return;
|
|
let minX = Infinity;
|
|
let minY = Infinity;
|
|
let maxX = -Infinity;
|
|
let maxY = -Infinity;
|
|
routePoints.forEach((point) => {
|
|
if (point.x < minX) minX = point.x;
|
|
if (point.x > maxX) maxX = point.x;
|
|
if (point.y < minY) minY = point.y;
|
|
if (point.y > maxY) maxY = point.y;
|
|
});
|
|
const rect = viewport.getBoundingClientRect();
|
|
const view = computeRouteView(
|
|
meta,
|
|
{ x_min: minX, x_max: maxX, y_min: minY, y_max: maxY },
|
|
Math.max(rect.width, 1),
|
|
Math.max(rect.height, 1),
|
|
);
|
|
scale = view.scale;
|
|
offsetX = view.offsetX;
|
|
offsetY = view.offsetY;
|
|
}
|
|
|
|
async function loadLayers(): Promise<void> {
|
|
if (!projectId) return;
|
|
const activeProjectId = projectId;
|
|
const sequence = ++loadSequence;
|
|
meta = null;
|
|
preparedLayers.clear();
|
|
backgroundImage.removeAttribute("src");
|
|
status.hidden = false;
|
|
status.textContent = L("B05_Drainage_Status_LoadingBase");
|
|
showProgress(0, L("B05_Drainage_Status_LoadingBase"));
|
|
try {
|
|
const nextMeta = await fetchVWorldMeta(activeProjectId, "satellite");
|
|
showProgress(1 / 3, L("B05_Drainage_Status_LoadingSheets"));
|
|
const loaded = await Promise.all(
|
|
DRAINAGE_LAYERS.map(async (layer) => {
|
|
try {
|
|
// 도엽 레이어는 표시용 사본이라 보관함에 담아 두고 새로고침 때 그대로 쓴다.
|
|
const data = await fetchCachedSheetLayer<GeoJsonCollection>(activeProjectId, layer);
|
|
return [layer, data] as const;
|
|
} catch {
|
|
return [layer, null] as const;
|
|
}
|
|
}),
|
|
);
|
|
if (sequence !== loadSequence) return;
|
|
meta = nextMeta;
|
|
normalizer = createNormalizer(nextMeta);
|
|
let featureCount = 0;
|
|
loaded.forEach(([layer, data]) => {
|
|
if (!data) return;
|
|
featureCount += data.features?.length ?? 0;
|
|
preparedLayers.set(layer, prepareLayer(data, normalizer!));
|
|
});
|
|
// 주소에 시각을 붙이면 브라우저가 매번 다시 받는다. 서버가 ETag를 주므로 그대로 쓴다.
|
|
backgroundImage.src = getVWorldMapUrl(activeProjectId, "satellite");
|
|
if (routePoints.length > 1) routeLayer = prepareMetricPolyline(routePoints, nextMeta);
|
|
pipeEditor.setContext(nextMeta, routePoints);
|
|
status.hidden = featureCount > 0;
|
|
if (featureCount === 0) status.textContent = L("B05_Drainage_Status_NoSheets");
|
|
fitToRoute();
|
|
scheduleDraw();
|
|
showProgress(2 / 3, L("B05_Drainage_Status_Analyzing"));
|
|
// B04가 확정해 둔 관 지점을 그대로 불러온다 — 저장분이 없으면 백엔드가 자동 배치를 준다.
|
|
// 두 화면이 같은 파일을 보므로 B04에서 옮긴 관이 여기서도 같은 자리에 있다.
|
|
void loadSaved();
|
|
} catch (error) {
|
|
if (sequence !== loadSequence) return;
|
|
status.hidden = false;
|
|
status.textContent =
|
|
error instanceof Error ? error.message : L("B05_Drainage_Status_LoadFailed");
|
|
showProgress(null, null);
|
|
}
|
|
}
|
|
|
|
viewport.addEventListener(
|
|
"wheel",
|
|
(event) => {
|
|
event.preventDefault();
|
|
const prevScale = scale;
|
|
scale = Math.min(16, Math.max(0.5, scale * (event.deltaY < 0 ? 1.15 : 0.87)));
|
|
// 커서 아래 지점을 고정한 채 확대/축소 (B04 지도와 동일 동작).
|
|
const ratio = scale / prevScale;
|
|
const rect = viewport.getBoundingClientRect();
|
|
const cursorX = event.clientX - rect.left - rect.width / 2;
|
|
const cursorY = event.clientY - rect.top - rect.height / 2;
|
|
offsetX = cursorX * (1 - ratio) + offsetX * ratio;
|
|
offsetY = cursorY * (1 - ratio) + offsetY * ratio;
|
|
scheduleDraw();
|
|
},
|
|
{ passive: false },
|
|
);
|
|
bindPipeContextMenu(viewport, contextMenu, pipeEditor, currentView);
|
|
|
|
viewport.addEventListener("pointerdown", (event) => {
|
|
if (contextMenu.contains(event.target)) return;
|
|
contextMenu.close();
|
|
// 중간 버튼 기본 동작(페이지 자동 스크롤)이 지도 팬과 겹치지 않게 막는다.
|
|
if (event.button === 1) event.preventDefault();
|
|
const rect = viewport.getBoundingClientRect();
|
|
// 배관 마커 클릭/추가가 처리되면 지도 팬은 시작하지 않는다.
|
|
if (pipeEditor.handleDown(currentView(), event.clientX - rect.left, event.clientY - rect.top)) {
|
|
viewport.setPointerCapture(event.pointerId);
|
|
return;
|
|
}
|
|
// 팬은 가운데(휠) 버튼 전용이다. 좌버튼은 유역선 핸들·배관 마커를 고르고 끄는 데만 쓴다
|
|
// (좌버튼이 팬까지 겸하면 마커를 집으려다 지도가 딸려 움직인다 — 2026-08-01 사용자 지시).
|
|
// 가운데 버튼이 없는 터치·펜은 그대로 끌어서 팬 할 수 있게 둔다.
|
|
if (event.pointerType === "mouse" && event.button !== 1) return;
|
|
dragStart = { x: event.clientX, y: event.clientY, offsetX, offsetY };
|
|
viewport.style.cursor = "grabbing";
|
|
viewport.setPointerCapture(event.pointerId);
|
|
});
|
|
viewport.addEventListener("pointermove", (event) => {
|
|
const rect = viewport.getBoundingClientRect();
|
|
// 배관 드래그 중이면 마커 이동(계획선 스냅)만 처리한다.
|
|
if (pipeEditor.handleMove(currentView(), event.clientX - rect.left, event.clientY - rect.top))
|
|
return;
|
|
if (!dragStart) return;
|
|
offsetX = dragStart.offsetX + event.clientX - dragStart.x;
|
|
offsetY = dragStart.offsetY + event.clientY - dragStart.y;
|
|
scheduleDraw();
|
|
});
|
|
/** 유역 폴리곤을 눌러 고른다. 유역 밖을 누르면 강조를 푼다. */
|
|
function pickBasinAt(x: number, y: number): void {
|
|
if (!normalizer) return;
|
|
const view = currentView();
|
|
let hit: number | null = null;
|
|
let smallest = Number.POSITIVE_INFINITY;
|
|
basins.forEach((basin) => {
|
|
if (basin.polygon_lonlat.length < 3) return;
|
|
const ring = basin.polygon_lonlat.map(([lon, lat]) =>
|
|
lonLatToScreen(normalizer as Normalizer, view, lon, lat),
|
|
);
|
|
if (!pointInRing(ring, x, y)) return;
|
|
// 겹치면 면적이 작은 쪽을 고른다(안쪽 조각 우선).
|
|
if (basin.area_m2 < smallest) {
|
|
smallest = basin.area_m2;
|
|
hit = basin.index;
|
|
}
|
|
});
|
|
if (hit === null && selectedBasin === null) return;
|
|
selectedBasin = hit === selectedBasin ? null : hit;
|
|
renderBasinList();
|
|
scheduleDraw();
|
|
}
|
|
|
|
const stopDragging = (): void => {
|
|
pipeEditor.handleUp();
|
|
dragStart = null;
|
|
viewport.style.removeProperty("cursor");
|
|
};
|
|
viewport.addEventListener("pointerup", (event) => {
|
|
const start = basinClickStart;
|
|
basinClickStart = null;
|
|
const dragged = pipeClickStart !== null;
|
|
pipeClickStart = null;
|
|
if (!dragged && start && event.button === 0) {
|
|
const rect = viewport.getBoundingClientRect();
|
|
// 끌었으면 지도 조작이지 고르기가 아니다.
|
|
if (Math.hypot(event.clientX - start.x, event.clientY - start.y) <= CLICK_SLOP_PX) {
|
|
pickBasinAt(event.clientX - rect.left, event.clientY - rect.top);
|
|
}
|
|
}
|
|
stopDragging();
|
|
});
|
|
viewport.addEventListener("pointercancel", stopDragging);
|
|
|
|
const resizeObserver = new ResizeObserver(scheduleDraw);
|
|
resizeObserver.observe(viewport);
|
|
|
|
function setCollapsed(collapsed: boolean): void {
|
|
root.classList.toggle("is-collapsed", collapsed);
|
|
panelHandle.setOpen(!collapsed);
|
|
sessionStorage.setItem(COLLAPSED_KEY, String(collapsed));
|
|
if (!collapsed) scheduleDraw();
|
|
}
|
|
panelHandle.root.addEventListener("click", () =>
|
|
setCollapsed(!root.classList.contains("is-collapsed")),
|
|
);
|
|
setCollapsed(sessionStorage.getItem(COLLAPSED_KEY) !== "false");
|
|
|
|
return {
|
|
root,
|
|
load(nextProjectId: string) {
|
|
if (projectId === nextProjectId && meta) return;
|
|
projectId = nextProjectId;
|
|
void loadLayers();
|
|
},
|
|
pipeChainages: () => pipeEditor.chainages(),
|
|
movePipe(fromChainage, toChainage) {
|
|
const index = pipeEditor
|
|
.pipes()
|
|
.findIndex((pipe) => Math.abs(pipe.chainage_m - fromChainage) < 0.51);
|
|
if (index < 0) return;
|
|
pipeEditor.moveTo(index, toChainage);
|
|
},
|
|
setPipeChainages(chainages) {
|
|
const next = reconcilePipes(pipeEditor.pipes(), chainages);
|
|
if (!next) return; // 같은 목록 — 되돌아온 것이므로 여기서 끊는다
|
|
pipeEditor.setPipes(next);
|
|
void analyze();
|
|
},
|
|
addPipe(chainageM) {
|
|
pipeEditor.addAtChainage(chainageM);
|
|
},
|
|
removePipe(chainageM) {
|
|
const index = pipeEditor
|
|
.pipes()
|
|
.findIndex((pipe) => Math.abs(pipe.chainage_m - chainageM) < 0.51);
|
|
if (index < 0) return;
|
|
pipeEditor.select(index);
|
|
pipeEditor.deleteSelected();
|
|
},
|
|
async savePipes() {
|
|
if (!projectId) return 0;
|
|
const response = await saveDetailPipePoints(
|
|
projectId,
|
|
pipeEditor.pipes().map((pipe) => ({
|
|
chainage_m: pipe.chainage_m,
|
|
source: (pipe.reason || "user") as PipeSource,
|
|
})),
|
|
);
|
|
apply(response);
|
|
scheduleDraw();
|
|
return response.pipe_count;
|
|
},
|
|
setRoute(points) {
|
|
routePoints = points;
|
|
routeLayer = meta && points.length > 1 ? prepareMetricPolyline(points, meta) : null;
|
|
// 강도 색칠은 백엔드가 준 1m 구간 값과 인덱스를 맞춰야 하므로 같은 규칙으로 다시 찍는다.
|
|
strengthSamples = resampleRoute(points);
|
|
pipeEditor.setContext(meta, points);
|
|
if (routeLayer) fitToRoute();
|
|
scheduleDraw();
|
|
},
|
|
dispose() {
|
|
loadSequence += 1;
|
|
if (frameHandle) {
|
|
window.cancelAnimationFrame(frameHandle);
|
|
frameHandle = 0;
|
|
}
|
|
resizeObserver.disconnect();
|
|
widthResizer.dispose();
|
|
},
|
|
};
|
|
}
|