Files
Aislo/B07_DesignDetail/B07_DesignDetail_UI_FrameEdit.ts
T
eomsangdonandClaude Opus 5 65d6fd261f fix(B07): 도각 편집 띠 사이드바 이관·깨진 그림에 렌더 루프 정지 해소
- 편집 띠를 CAD 위 절대배치에서 도면 목록 하단 액션 칸으로 옮김 —
  1행 편집 띠, 2행 [도각 편집]·[현재 도면 확정] (리본과 겹쳐 문구·버튼이 찌그러지던 문제)
- `drawImage` 가 'broken' 상태 그림에서 던지던 예외로 렌더 루프가 끊겨
  이후 모든 도면이 백지로 남던 결함 해소 — 못 읽은 그림은 건너뜀
- `ImageEntity` 가 자리표시자(`{{회사로고}}`)를 절대 URL 로 굳히던 저장 경로 수정 —
  원본 주소를 보관해 그대로 돌려주고, 자리표시자는 요청조차 하지 않음
- 버튼 줌(ZOOMIN·ZOOMOUT)이 배율만 바꿔 도면이 화면 밖으로 밀리던 것을
  화면 중심 고정으로 수정

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-02 18:12:28 +09:00

144 lines
5.0 KiB
TypeScript

/**
* B07 도각 편집 모드 — 캐드 화면에서 도각(양식)만 따로 열어 고치고 [완료]로 한 번에 반영한다.
*
* 정본(`resources/template_2dDrawing/00_template_A1.json`)은 프로그램 기본 도각이라
* 건드리지 않는다. 고친 도각은 **회사 도각**(`storage/{회사}/templates/`)으로 저장되고,
* 이후 그리는 도면이 그것을 쓴다 (2026-09-01 사용자 확정).
*
* 이미 확정한 도면은 저장본을 그대로 쓰므로 옛 도각을 유지한다 — 확정을 풀면 다시 그려진다.
*/
import { createButton, showToast } from "@ui/ui_template_elements";
import {
type CadDrawing,
fetchFrameTemplate,
resetFrameTemplate,
saveFrameTemplate,
} from "./B07_DesignDetail_Api_Fetch";
export interface FrameTemplateEditor {
/** 도면 목록 아래에 놓는 「도각 편집」 버튼. */
button: HTMLButtonElement;
/** 편집 중임을 알리는 띠 — 도면 목록 하단 액션 칸의 1행 (평소엔 숨김). */
banner: HTMLElement;
/** 편집 중인가 — 도면 변경 알림(확정 해제)을 이 동안 막는 데 쓴다. */
isEditing: () => boolean;
}
interface Options {
projectId: string;
/** CAD에 도면을 싣는다 (meta null이면 수량 패널을 숨긴다). */
sendLoad: (drawing: CadDrawing, meta: null) => void;
/** CAD에서 현재 편집본을 받아온다. */
requestCadDrawing: () => Promise<CadDrawing>;
/** 편집을 마친 뒤 보던 도면으로 돌아간다. */
restoreDrawing: () => void;
/** 도각이 바뀌었으니 받아 둔 도면 캐시를 버린다 — 안 버리면 옛 도각이 그대로 보인다. */
onSaved: () => void;
}
export function createFrameTemplateEditor(options: Options): FrameTemplateEditor {
let editing = false;
const banner = document.createElement("div");
banner.className = "b07-frame-edit";
banner.hidden = true;
const label = document.createElement("span");
label.className = "b07-frame-edit__label";
banner.append(label);
const finishButton = createButton({
label: "완료",
variant: "filled",
onClick: () => void finish(),
});
/**
* 회사 도각을 지우고 프로그램 기본 도각으로 되돌린다 (2026-09-01 신설).
* 되돌릴 길이 없으면 도각을 한 번 잘못 저장한 것만으로 도면이 열리지 않는다.
*/
const resetButton = createButton({
label: "기본 도각으로",
variant: "ghost",
onClick: () => void resetToDefault(),
});
const cancelButton = createButton({
label: "취소",
variant: "ghost",
onClick: () => leave(),
});
const bannerButtons = document.createElement("div");
bannerButtons.className = "b07-frame-edit__buttons";
bannerButtons.append(finishButton, resetButton, cancelButton);
banner.append(bannerButtons);
const button = createButton({
label: "도각 편집",
variant: "ghost",
onClick: () => void enter(),
});
const leave = (): void => {
editing = false;
banner.hidden = true;
button.disabled = false;
options.restoreDrawing();
};
async function enter(): Promise<void> {
try {
const response = await fetchFrameTemplate(options.projectId);
editing = true;
button.disabled = true;
banner.hidden = false;
label.textContent = response.customized
? "도각 편집 중 — 회사 도각을 고치고 있습니다."
: "도각 편집 중 — 기본 도각을 고치면 회사 도각으로 저장됩니다.";
options.sendLoad(response.drawing, null);
} catch (error) {
showToast(error instanceof Error ? error.message : "도각을 불러오지 못했습니다.", "error");
}
}
async function resetToDefault(): Promise<void> {
if (
!window.confirm(
"회사 도각을 지우고 프로그램 기본 도각으로 되돌립니다.\n" +
"확정하지 않은 도면부터 기본 도각으로 나옵니다. 계속할까요?",
)
)
return;
resetButton.disabled = true;
try {
await resetFrameTemplate(options.projectId);
options.onSaved();
showToast("기본 도각으로 되돌렸습니다.", "success");
leave();
} catch (error) {
showToast(
error instanceof Error ? error.message : "기본 도각으로 되돌리지 못했습니다.",
"error",
);
} finally {
resetButton.disabled = false;
}
}
async function finish(): Promise<void> {
if (!editing) return;
finishButton.disabled = true;
try {
const drawing = await options.requestCadDrawing();
await saveFrameTemplate(options.projectId, drawing);
options.onSaved();
showToast("도각을 저장했습니다. 확정하지 않은 도면부터 새 도각으로 나옵니다.", "success");
leave();
} catch (error) {
showToast(error instanceof Error ? error.message : "도각을 저장하지 못했습니다.", "error");
} finally {
finishButton.disabled = false;
}
}
return { button, banner, isEditing: () => editing };
}