eomsangdonandClaude Opus 5.5
21afc379e4
- 공용 부품 ui_template_gl_map(지도 세우기 · 자료 · 켬끔 · 색 다시 · 카메라) — D03 GL 껍데기를 올림 · D03 은 겹 꼴만(바뀜 없음) - TM 주인 따라가기(B04_PreProcess_UI_MapGl · logic/_MapGl_Frame) — 화면 가운데 1차 맞춤 닮음꼴 카메라 + 남는 늘림(웹 메르카토르 가로세로 0.43 %)은 지도 칸 CSS 행렬 · 칸 둘레 여유 8 px - B04 하단 지도 — 위성 조각(줌인 선명) · 백지도 · 혼합 · 도엽 · 지적 · 행정 · 등고선 겹 GL · 등고 글 · 배수유역 · 계획선 · 관 = 위 캔버스 - B05 배수유역도 — 위성 · 세부유역 채움(짝홀 다각형) · 분수령 · 도엽 GL · 번호 · 상류 세류 · 관 · 강도 = 위 캔버스 - B05 평면 노선 편집 — 바탕칠 · LAS · 도엽 등고선(간격 거름 · 1 m 선) · 하천(LAS 상자 자름) GL · 노선 둘레 띠 = 지도 칸 clip-path · 고른 등고선 · 글 · 노선 · 꼭짓점 = 위 캔버스 - 켬끔 칸(GPU · 세 화면 한 취향 aislo:pref:map.canvas) · WebGL 못 씀 · 잃음 = 옛 캔버스 + 알림 · 누름 · 끌기 판정 손 안 댐 - B04 층 단추 글 = MapLayers gisLayerLabel(지도 본체 700 줄) - 지킴 시험 test_589_2_gl_frame(카메라 대 캔버스 0.5 px · 칸 행렬 늘이기만 · 되돌림 1 mm · 상자 자르기 · 짝홀 다각형) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
/* =============================================================================
|
|
* B05_Profile_UI_Drainage_Show.ts
|
|
* 배수유역 판 표시 토글 상태 — 위성 · 도엽 · 화살표 · 강도 · 집중점 · 상류 세류
|
|
* (`B05_Profile_UI_Drainage_Panel.ts` 에서 나눔 · 472-5 · 동작 같음).
|
|
* ========================================================================== */
|
|
|
|
import { mountDrainageToggles, type DrainageLayer } from "./B05_Profile_UI_Drainage_Parts";
|
|
|
|
/** 지금 켜진 표시 — 그리기가 읽음(토글이 고침). */
|
|
export interface DrainageShow {
|
|
/** 위성 — 기본 꺼짐(그림 숨김은 그리기 때 · GL 이면 GL 위성). */
|
|
satellite: boolean;
|
|
arrows: boolean;
|
|
/** 유입 강도 색칠 — B04 지도와 같은 색띠·같은 값(2026-08-01 사용자 지시). */
|
|
strength: boolean;
|
|
/** 유입 집중점 — 기본 꺼짐(마커가 관 마커와 겹쳐 읽기 어렵다). */
|
|
hotspots: boolean;
|
|
/** 유역 안쪽 상류 세류망 — B04 기준선 강조. */
|
|
upstream: boolean;
|
|
}
|
|
|
|
/** 토글 줄을 붙이고 상태를 돌려줌 — 위성사진은 기본 꺼짐(2026-08-18 사용자 지시). */
|
|
export function mountDrainageShow(
|
|
layerButtons: HTMLElement,
|
|
deps: {
|
|
backgroundImage: HTMLImageElement;
|
|
activeLayers: Set<DrainageLayer>;
|
|
onStrength: (show: boolean) => void;
|
|
redraw: () => void;
|
|
},
|
|
): DrainageShow {
|
|
const show: DrainageShow = {
|
|
satellite: false,
|
|
arrows: true,
|
|
strength: true,
|
|
hotspots: false,
|
|
upstream: true,
|
|
};
|
|
deps.backgroundImage.hidden = true;
|
|
mountDrainageToggles(layerButtons, {
|
|
initial: show,
|
|
onSatellite: (next) => {
|
|
show.satellite = next;
|
|
deps.backgroundImage.hidden = !next;
|
|
deps.redraw();
|
|
},
|
|
onSheetLayer: (layer, next) => {
|
|
if (next) deps.activeLayers.add(layer);
|
|
else deps.activeLayers.delete(layer);
|
|
deps.redraw();
|
|
},
|
|
onArrows: (next) => {
|
|
show.arrows = next;
|
|
deps.redraw();
|
|
},
|
|
onStrength: (next) => {
|
|
show.strength = next;
|
|
deps.onStrength(next);
|
|
deps.redraw();
|
|
},
|
|
onHotspots: (next) => {
|
|
show.hotspots = next;
|
|
deps.redraw();
|
|
},
|
|
onUpstream: (next) => {
|
|
show.upstream = next;
|
|
deps.redraw();
|
|
},
|
|
});
|
|
return show;
|
|
}
|