/* ============================================================================= * 3D 자료 브라우저 보관함 (IndexedDB) * * 지표면 3D 파일과 등고선은 한 번 만들면 잘 바뀌지 않는데 용량이 크다. 매번 새로 받으면 * 페이지를 열 때마다 기다려야 하므로, 받은 것을 브라우저에 저장해 두고 다음부터는 그것을 * 곧바로 화면에 올린다. 저장본을 쓰는 동시에 뒤에서 서버에 "바뀐 것 있나"만 물어보고, * 바뀌었으면 새로 받아 갱신한다(서버의 ETag 사용). * * 프로젝트가 바뀌면 이전 프로젝트 자료는 지운다 — 다른 프로젝트 데이터가 섞이면 안 된다. * ========================================================================== */ import { API_BASE_URL } from "@config/config_frontend"; import { fetchConfirmedSurface } from "../B04_PreProcess/B04_PreProcess_Api_Fetch"; const DB_NAME = "aislo-asset-cache"; // 담아 둔 자료의 형식이나 내용이 바뀌면 이 번호를 올린다 — 올리면 기존 보관분을 통째로 버린다. // v2: 도엽 표시용 사본(잘라낸 자료)을 철회했다. 그 사본을 담고 있던 브라우저는 비워야 한다. const DB_VERSION = 2; const STORE = "assets"; export interface CachedAsset { /** `${projectId}|${url}` */ key: string; projectId: string; url: string; etag: string | null; savedAt: number; body: ArrayBuffer; } let dbPromise: Promise | null = null; function openDatabase(): Promise { if (dbPromise) return dbPromise; dbPromise = new Promise((resolve) => { if (!("indexedDB" in window)) { resolve(null); return; } const request = window.indexedDB.open(DB_NAME, DB_VERSION); request.onupgradeneeded = () => { const db = request.result; // 번호가 올라가면 옛 보관분은 형식이나 내용이 다를 수 있으므로 통째로 버리고 새로 만든다. if (db.objectStoreNames.contains(STORE)) db.deleteObjectStore(STORE); const store = db.createObjectStore(STORE, { keyPath: "key" }); store.createIndex("projectId", "projectId", { unique: false }); }; request.onsuccess = () => resolve(request.result); // 사생활 보호 모드 등으로 열리지 않으면 보관함 없이 동작한다(항상 새로 받는다). request.onerror = () => resolve(null); }); return dbPromise; } function runTransaction( mode: IDBTransactionMode, work: (store: IDBObjectStore) => IDBRequest, ): Promise { return openDatabase().then( (db) => new Promise((resolve) => { if (!db) { resolve(null); return; } try { const transaction = db.transaction(STORE, mode); const request = work(transaction.objectStore(STORE)); request.onsuccess = () => resolve(request.result ?? null); request.onerror = () => resolve(null); } catch { resolve(null); } }), ); } const cacheKey = (projectId: string, url: string): string => `${projectId}|${url}`; async function readAsset(projectId: string, url: string): Promise { return (await runTransaction("readonly", (store) => store.get(cacheKey(projectId, url)), )) as CachedAsset | null; } async function writeAsset(asset: CachedAsset): Promise { await runTransaction("readwrite", (store) => store.put(asset) as IDBRequest); } /** 다른 프로젝트 자료를 모두 지운다. B그룹 페이지에 들어올 때 호출한다. */ export async function purgeOtherProjects(projectId: string): Promise { const db = await openDatabase(); if (!db) return; await new Promise((resolve) => { try { const transaction = db.transaction(STORE, "readwrite"); const store = transaction.objectStore(STORE); const cursorRequest = store.openCursor(); cursorRequest.onsuccess = () => { const cursor = cursorRequest.result; if (!cursor) return; const value = cursor.value as CachedAsset; if (value.projectId !== projectId) cursor.delete(); cursor.continue(); }; transaction.oncomplete = () => resolve(); transaction.onerror = () => resolve(); } catch { resolve(); } }); } /** 보관함에서 바이트만 꺼낸다 — 네트워크를 타지 않는다. 없으면 null. * 주소에 열쇠가 박히는 자료(3D 코리도)는 이걸로 **먼저 보고** 없을 때만 받는다. */ export async function readCachedBytes(projectId: string, url: string): Promise { try { const cached = await readAsset(projectId, url); return cached?.body ?? null; } catch { return null; } } /** 받아 둔 바이트를 보관함에 담는다. 실패해도 화면은 그대로 간다(용량 초과 등). */ export async function writeCachedBytes( projectId: string, url: string, body: ArrayBuffer, ): Promise { try { await writeAsset({ key: cacheKey(projectId, url), projectId, url, etag: null, savedAt: Date.now(), body, }); } catch { // 담지 못해도 다음에 다시 받으면 된다 — 막지 않는다. } } /** * 한 프로젝트 안에서 **주소 앞머리가 같은 옛 보관본**을 지운다. * * 3D 코리도처럼 주소에 열쇠(해시)가 박히는 자료는 정본이 바뀔 때마다 새 주소가 되어 * 옛 보관본이 그대로 쌓인다. 하나가 17MB 대라 두어 벌만 남아도 브라우저 보관함을 크게 * 먹는다. 새것을 담기 **전에** 같은 앞머리를 치운다(2026-09-06). */ export async function purgeAssetsWithPrefix(projectId: string, prefix: string): Promise { const db = await openDatabase(); if (!db) return; await new Promise((resolve) => { try { const transaction = db.transaction(STORE, "readwrite"); const store = transaction.objectStore(STORE); const cursorRequest = store.openCursor(); cursorRequest.onsuccess = () => { const cursor = cursorRequest.result; if (!cursor) return; const value = cursor.value as CachedAsset; if (value.projectId === projectId && value.url.startsWith(prefix)) cursor.delete(); cursor.continue(); }; transaction.oncomplete = () => resolve(); transaction.onerror = () => resolve(); } catch { resolve(); } }); } export interface CachedFetchOptions { /** 내려받는 동안 진행률(0~1, 모르면 null)을 알려준다. 저장본을 쓰면 호출되지 않는다. */ onProgress?: (ratio: number | null) => void; } /** 네트워크에서 받아 보관함에 저장한다. */ async function downloadAndStore( projectId: string, url: string, options: CachedFetchOptions, ): Promise { const response = await fetch(url, { credentials: "include" }); if (!response.ok) throw new Error(`요청 실패: ${response.status}`); const total = Number(response.headers.get("content-length") ?? 0); const etag = response.headers.get("etag"); let body: ArrayBuffer; if (response.body && options.onProgress) { // 진행률을 보여 주기 위해 조각으로 읽는다. const reader = response.body.getReader(); const chunks: Uint8Array[] = []; let received = 0; for (;;) { const { done, value } = await reader.read(); if (done) break; chunks.push(value); received += value.length; options.onProgress(total > 0 ? received / total : null); } const merged = new Uint8Array(received); let offset = 0; chunks.forEach((chunk) => { merged.set(chunk, offset); offset += chunk.length; }); body = merged.buffer; } else { body = await response.arrayBuffer(); } await writeAsset({ key: cacheKey(projectId, url), projectId, url, etag, savedAt: Date.now(), body, }); return body; } /** 저장본이 최신인지 뒤에서 확인하고, 바뀌었으면 새로 받아 저장한다. */ function revalidateInBackground(projectId: string, url: string, etag: string | null): void { if (!etag) return; void fetch(url, { credentials: "include", headers: { "If-None-Match": etag } }) .then(async (response) => { if (response.status === 304 || !response.ok) return; const body = await response.arrayBuffer(); await writeAsset({ key: cacheKey(projectId, url), projectId, url, etag: response.headers.get("etag"), savedAt: Date.now(), body, }); }) .catch(() => { /* 오프라인 등으로 확인하지 못해도 저장본을 계속 쓴다. */ }); } /** 저장본이 있으면 즉시 돌려주고 뒤에서 갱신 확인, 없으면 받아서 저장한 뒤 돌려준다. */ export async function fetchCachedBytes( projectId: string, url: string, options: CachedFetchOptions = {}, ): Promise { const cached = await readAsset(projectId, url); if (cached?.body) { revalidateInBackground(projectId, url, cached.etag); return cached.body; } return downloadAndStore(projectId, url, options); } /** JSON 자료용. 저장본을 쓰면 파싱만 하고 네트워크를 타지 않는다. */ export async function fetchCachedJson( projectId: string, url: string, options: CachedFetchOptions = {}, ): Promise { const bytes = await fetchCachedBytes(projectId, url, options); return JSON.parse(new TextDecoder().decode(bytes)) as T; } /** 배수유역도 배경으로 쓰는 도엽 레이어(유일한 정의처 — 준비화면과 B05 패널이 함께 쓴다). */ export const DRAINAGE_SHEET_LAYERS = ["도엽_등고선", "도엽_하천중심선"] as const; /** 도엽 레이어(GeoJSON)를 보관함에서 먼저 찾는다. * * 서버는 프로젝트 주변만 잘라 좌표 자릿수를 줄인 표시용 사본을 ETag와 함께 내보낸다. * 분석용 원본과는 별개 파일이므로, 담아 두었다가 그대로 다시 써도 화면이 어긋나지 않는다. */ export async function fetchCachedSheetLayer(projectId: string, layer: string): Promise { return fetchCachedJson( projectId, `${API_BASE_URL}/projects/${projectId}/geojson?layer=${encodeURIComponent(layer)}`, ); } /* ── 준비 화면 연동 ──────────────────────────────────────────────────────── * 무엇을 이미 준비했는지, 준비가 끝나면 어느 화면으로 보낼지를 탭 단위로 기억한다. * 대시보드로 나갔다가 같은 프로젝트로 돌아오면 준비 화면을 건너뛴다(2026-08-01 사용자 지시). * * 표식은 프로젝트 번호가 아니라 **확정 구성(signature)** 이다. 관리자가 B04에서 다른 * 필터·표현으로 다시 확정하면 표식이 달라져 준비 화면이 한 번 더 돌고 새 자료를 담는다. * 프로젝트 번호만 봤다면 옛 자료를 계속 쓰게 된다(2026-08-01 사용자 지시). */ const PRELOADED_SIGNATURE_KEY = "frd_preloaded_signature"; const PRELOAD_TARGET_KEY = "frd_preload_target"; const preloadStamp = (projectId: string, signature: string): string => `${projectId}|${signature}`; export function isProjectPreloaded(projectId: string, signature: string): boolean { try { return ( window.sessionStorage.getItem(PRELOADED_SIGNATURE_KEY) === preloadStamp(projectId, signature) ); } catch { return false; } } export function markProjectPreloaded(projectId: string, signature: string): void { try { window.sessionStorage.setItem(PRELOADED_SIGNATURE_KEY, preloadStamp(projectId, signature)); } catch { /* 세션 저장 실패는 준비 화면이 한 번 더 뜨는 정도의 영향뿐이다. */ } } /** 담아 둔 표식을 지운다 — 확정이 바뀌어 자료를 다시 담아야 할 때 호출한다. */ export function clearPreloadMark(): void { try { window.sessionStorage.removeItem(PRELOADED_SIGNATURE_KEY); } catch { /* 지우지 못해도 다음 표식 비교에서 불일치로 걸러진다. */ } } export function setPreloadTarget(route: string): void { try { window.sessionStorage.setItem(PRELOAD_TARGET_KEY, route); } catch { /* 저장 실패 시 준비 화면이 기본 화면으로 보낸다. */ } } export function readPreloadTarget(): string | null { try { return window.sessionStorage.getItem(PRELOAD_TARGET_KEY); } catch { return null; } } /** 준비 화면이 표시할 단계 안내. ratio가 null이면 진행률을 모른다는 뜻이다. */ export type PreloadReporter = (label: string, ratio: number | null) => void; /** * 아직 확정된 지표면이 없다는 뜻의 오류 표식. * * 고장이 아니라 "분석·확정이 아직 안 끝난 정상 상태"다. 준비 화면이 이 표식을 보고 * 장애 안내 대신 다음에 할 일(파일 입력)을 안내한다. */ export const PRELOAD_NO_SURFACE = "PRELOAD_NO_SURFACE"; /** 확정된 지표면의 3D 파일과 그 등고선을 보관함에 채운다(준비 화면에서 호출). * * 사용자가 실제로 보는 것은 이 둘이라 이것만 챙긴다 — 포인트클라우드·배수유역은 제외 * (2026-08-01 사용자 지시). 이미 보관돼 있으면 거의 즉시 끝난다. * 평활 여부·등고선 간격은 짐작하지 않고 확정 저장값을 그대로 쓴다 — 짐작하면 B04·B05가 * 서로 다른 파일을 받아 같은 지형을 두 번 내려받게 된다. * 확정 지표면을 찾지 못하면 오류를 던져 준비 화면이 안내 문구를 띄우게 한다. * 반환값은 담아 둔 구성의 signature — 호출측이 준비 표식으로 저장한다. */ export async function preloadSurfaceAssets( projectId: string, report: PreloadReporter = () => {}, ): Promise { report("확정된 지표면을 확인하는 중…", null); const confirmed = await fetchConfirmedSurface(projectId); if (!confirmed.model_id) throw new Error(PRELOAD_NO_SURFACE); const smooth = confirmed.smooth ?? false; const interval = confirmed.contour_interval_m ?? 1.0; const base = `${API_BASE_URL}/projects/${projectId}/surface/models/${confirmed.model_id}`; report("3D 지표면을 준비하는 중…", 0); await fetchCachedBytes(projectId, `${base}/preview?smooth=${smooth}`, { onProgress: (ratio) => report("3D 지표면을 준비하는 중…", ratio), }); report("등고선을 준비하는 중…", null); await fetchCachedBytes( projectId, `${base}/contour?interval=${interval}&smooth=${smooth}&recalculate=false`, { onProgress: (ratio) => report("등고선을 준비하는 중…", ratio) }, ); // 배수유역도 배경(도엽 표시본·위성사진)도 함께 담는다 — 없으면 B05가 진입할 때마다 받는다. // 이 자료가 없어도 화면은 뜨므로 실패해도 준비를 멈추지 않는다. report("배경 지도를 준비하는 중…", null); await Promise.all( DRAINAGE_SHEET_LAYERS.map((layer) => fetchCachedSheetLayer(projectId, layer).catch(() => null)), ); // 위성사진은 로 표시하므로 보관함이 아니라 브라우저 자체 캐시를 데워 둔다. await fetch(`${API_BASE_URL}/projects/${projectId}/vworld-map?layer_name=satellite`, { credentials: "include", }).catch(() => null); report("준비 완료", 1); return confirmed.signature; }