eomsangdonandClaude Opus 5
5203191751
사용자 지시(2026-09-04) — 「3D 는 보조라 후순위. 조용히 뒤에서 뜨고 다 되면 팝업으로 알릴 것. 로딩 도넛은 진행률과 무관하게 계속 돌고 숫자만 갱신」, 그리고 「직교/원근 전환 단추는 넣음」. 진입 로딩 - 단계 5 → 4. ④ 종·횡단 자료까지 끝나면 로딩 표시를 걷어 화면을 바로 쓰게 함. - 3D 지형은 finally 뒤 배경 작업으로 돌리고 끝나면 토스트 「3D 지형 준비 완료」. 실패해도 나머지 화면은 그대로 씀. [초기화]는 재진입이라 같은 규칙이 걸림. - 「확정 지표면 없음」 판정을 ③ 뒤로 앞당김. 진행 서클(공용) - 회전 껍데기(`__spin`)를 한 겹 두고 CSS 회전을 거기에만 검. 껍데기는 늘 돌고 안쪽 svg 는 12시 고정이라 호·숫자가 제자리에서 갱신됨. `is-indeterminate` 제거. 직교/원근 전환 - 카메라 두 벌을 `B05_Profile_UI_Viewer_Camera.ts` 가 쥐고 갈아 끼움. 위치·시선· 근평면·먼평면과 보이는 크기를 옮겨 화면이 튀지 않음. - 마커 입력·구조물 클릭·커서 피벗 유틸이 카메라를 함수로 받게 바꿈(공용 유틸은 값도 그대로 받아 B04 호출부는 무변경). 자체검증(공용 브라우저 5173, 용화_LAS) — 진행률 25→50→75%, 회전 애니메이션 running 유지(변환행렬 표본 전부 다름), 로딩 걷힌 순간 그래프선 2·좌측단추 61· 3D 메쉬 2, 1.8초 뒤 메쉬 489 + 토스트. 초기화 재진입도 같음. 전환 단추는 Ortho ↔ Perspective 왕복 후 값 완전 일치, B04 페이지 오류 0건. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
97 lines
3.9 KiB
TypeScript
97 lines
3.9 KiB
TypeScript
import "./ui_template_progress.css";
|
|
|
|
/* =============================================================================
|
|
* ui_template_progress.ts
|
|
* 공통 프로그레스 서클 (원형 진행 표시)
|
|
*
|
|
* 뷰포트 위에 얹어 "지금 무엇을 얼마나 불러왔는지"를 보여 주는 용도.
|
|
* 진행률을 모르는 구간은 set()에 ratio를 주지 않으면 회전 애니메이션으로 표시한다.
|
|
* 색상/치수는 theme.css 변수만 사용한다.
|
|
* ========================================================================== */
|
|
|
|
const SVG_NS = "http://www.w3.org/2000/svg";
|
|
/** viewBox 기준 반지름 — 실제 크기는 CSS(--ui-progress-size)로 정한다. */
|
|
const RADIUS = 42;
|
|
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
|
|
|
|
export interface ProgressCircleOptions {
|
|
/** 지름(px). 기본 72(공통 로딩 스피너와 같은 무게감). */
|
|
size?: number;
|
|
/** 서클 아래 안내 문구. */
|
|
label?: string;
|
|
/** 컨테이너 정중앙에 띄우는 오버레이로 만든다(컨테이너는 position: relative 여야 한다). */
|
|
overlay?: boolean;
|
|
}
|
|
|
|
export interface ProgressCircleHandle {
|
|
root: HTMLDivElement;
|
|
/** 진행률(0~1)과 문구 갱신. ratio가 null이면 진행률 미상(회전 표시). */
|
|
set: (ratio: number | null, label?: string) => void;
|
|
/** 화면에서 제거. */
|
|
remove: () => void;
|
|
}
|
|
|
|
export function createProgressCircle(options: ProgressCircleOptions = {}): ProgressCircleHandle {
|
|
const root = document.createElement("div");
|
|
root.className = "ui-progress-circle" + (options.overlay ? " ui-progress-circle--overlay" : "");
|
|
root.setAttribute("role", "status");
|
|
root.setAttribute("aria-live", "polite");
|
|
if (options.size) root.style.setProperty("--ui-progress-size", `${options.size}px`);
|
|
|
|
const svg = document.createElementNS(SVG_NS, "svg");
|
|
svg.setAttribute("class", "ui-progress-circle__svg");
|
|
svg.setAttribute("viewBox", "0 0 100 100");
|
|
const track = document.createElementNS(SVG_NS, "circle");
|
|
track.setAttribute("class", "ui-progress-circle__track");
|
|
track.setAttribute("cx", "50");
|
|
track.setAttribute("cy", "50");
|
|
track.setAttribute("r", String(RADIUS));
|
|
const bar = document.createElementNS(SVG_NS, "circle");
|
|
bar.setAttribute("class", "ui-progress-circle__bar");
|
|
bar.setAttribute("cx", "50");
|
|
bar.setAttribute("cy", "50");
|
|
bar.setAttribute("r", String(RADIUS));
|
|
bar.setAttribute("stroke-dasharray", String(CIRCUMFERENCE));
|
|
bar.setAttribute("stroke-dashoffset", String(CIRCUMFERENCE));
|
|
svg.append(track, bar);
|
|
|
|
const percent = document.createElement("span");
|
|
percent.className = "ui-progress-circle__percent";
|
|
const label = document.createElement("span");
|
|
label.className = "ui-progress-circle__label";
|
|
label.textContent = options.label ?? "";
|
|
|
|
// 회전은 진행률과 **따로 논다**(2026-09-04 사용자 지시) — 무거운 단계에서 호가
|
|
// 안 늘어도 도넛은 계속 돌아야 "멈춘 것"으로 안 보인다. 바깥 껍데기만 CSS로 돌리고
|
|
// 안쪽 svg는 12시 고정이라, 호·숫자는 제자리에서 갱신된다.
|
|
const spin = document.createElement("div");
|
|
spin.className = "ui-progress-circle__spin";
|
|
spin.append(svg);
|
|
|
|
const dial = document.createElement("div");
|
|
dial.className = "ui-progress-circle__dial";
|
|
dial.append(spin, percent);
|
|
root.append(dial, label);
|
|
|
|
function set(ratio: number | null, nextLabel?: string): void {
|
|
if (nextLabel !== undefined) label.textContent = nextLabel;
|
|
if (ratio === null) {
|
|
// 진행률 미상 — 4분의 1 호만 남긴다(회전은 껍데기가 늘 맡는다).
|
|
bar.setAttribute("stroke-dashoffset", String(CIRCUMFERENCE * 0.75));
|
|
percent.textContent = "";
|
|
return;
|
|
}
|
|
const clamped = Math.min(1, Math.max(0, ratio));
|
|
bar.setAttribute("stroke-dashoffset", String(CIRCUMFERENCE * (1 - clamped)));
|
|
percent.textContent = `${Math.round(clamped * 100)}%`;
|
|
}
|
|
|
|
set(0, options.label);
|
|
|
|
return {
|
|
root,
|
|
set,
|
|
remove: () => root.remove(),
|
|
};
|
|
}
|