fix(M02): 흐름도 패널 처음 배율 = 읽히는 최소 0.6(넘치면 왼쪽 위 입력 상자부터) · 「한눈에」 단추는 전체(0.25) · 크게 보기는 그대로 0.9(PLAN 36-3 덧)

- 다이어그램 opts.fitAllMin(단추) · fitMin(저절로) 나눔 · Paper · Panel 이 넘김
- 시험 diagram_parts 8 + panel 2 통과 · DataFlow 전부 검사 초록

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ly2oHAaTDYRjcniAmHR81z
This commit is contained in:
2026-10-01 23:39:21 +09:00
co-authored by Claude Opus 5.5
parent 31cdd84737
commit deabd978c0
5 changed files with 39 additions and 7 deletions
+12 -3
View File
@@ -314,13 +314,22 @@ export function renderDiagram(
applyView();
drawLines();
};
const fit = (): void => {
/** 맞추기 — 저절로(처음 · 다시 맞춤)는 fitMin · 「한눈에」 단추는 fitAllMin(전체가 보이게) */
const fit = (button = false): void => {
const rects = lg.boxes.map((b) => {
const n = world.querySelector<HTMLElement>(`.m02-dfdg__box[data-box="${CSS.escape(b.id)}"]`);
return { x: b.x, y: b.y, w: n?.offsetWidth ?? 180, h: n?.offsetHeight ?? 80 };
});
const r = view.getBoundingClientRect();
Object.assign(st, fitView(rects, { w: r.width, h: r.height }, 40, opts.fitMin));
Object.assign(
st,
fitView(
rects,
{ w: r.width, h: r.height },
40,
button ? (opts.fitAllMin ?? opts.fitMin) : opts.fitMin,
),
);
applyView();
drawLines();
};
@@ -400,7 +409,7 @@ export function renderDiagram(
sm("ZoomOut", () => setZoom(st.zoom / 1.2)),
zoomLabel,
sm("ZoomIn", () => setZoom(st.zoom * 1.2)),
sm("Fit", fit),
sm("Fit", () => fit(true)),
...(ro
? []
: [
@@ -124,6 +124,8 @@ export interface DiagramOpts {
fitKey?: number;
/** 저절로 맞출 때 가장 작은 확대 — 없으면 FIT_MIN(좁은 패널은 더 작게) */
fitMin?: number;
/** 「한눈에」 단추로 맞출 때 가장 작은 확대 — 없으면 fitMin */
fitAllMin?: number;
}
/* ── 알약 · 자리 ────────────────────────────────────────────────────── */
+6 -3
View File
@@ -52,8 +52,10 @@ export interface FlowPanel {
export const PANEL_MIN = 320;
export const STRIP_WIDTH = 40;
/** 좁은 패널에서 저절로 맞출 때 가장 작은 확대 */
export const PANEL_FIT_MIN = 0.25;
/** 패널에서 저절로 맞출 때 가장 작은 확대 — 글이 읽히는 최소 */
export const PANEL_FIT_MIN = 0.6;
/** 패널 「한눈에」 단추 — 전체가 보이게(가장 작은 확대) */
export const PANEL_FIT_ALL_MIN = 0.25;
const WIDTH_KEY = "m02.dfpanel.width";
const FOLD_KEY = "m02.dfpanel.folded";
@@ -94,8 +96,9 @@ export function mountFlowPanel(host: HTMLElement, opts: FlowPanelOpts): FlowPane
readOnly: opts.readOnly,
onChange: opts.onChange,
logics: opts.logics,
// 좁은 패널은 「한눈에」 가 되게 더 작게 · 크게 보기는 글이 읽히게 90% 아래로 안 내림
// 패널 처음 배율 = 글이 읽히는 최소(넘치면 왼쪽 위 입력 상자부터) · 「한눈에」 단추는 전체 · 크게 보기는 90%
fitMin: () => (full ? 0.9 : PANEL_FIT_MIN),
fitAllMin: () => (full ? 0.9 : PANEL_FIT_ALL_MIN),
});
const { diagram, detail, summary, note, undo } = paper.parts;
let width = storedWidth(readStore(WIDTH_KEY));
@@ -55,6 +55,8 @@ export interface PaperOpts {
logics?(key: string): Promise<CfLogic | null>;
/** 저절로 맞출 때 가장 작은 확대 — 부를 때마다 물음(패널 · 크게 보기가 다름) */
fitMin?(): number;
/** 「한눈에」 단추의 가장 작은 확대 — 없으면 fitMin */
fitAllMin?(): number;
}
export interface Paper {
@@ -307,6 +309,7 @@ export function createPaper(opts: PaperOpts): Paper {
readOnly,
fitKey,
fitMin: opts.fitMin?.(),
fitAllMin: opts.fitAllMin?.(),
});
drawPanel();
renderSummary(summaryHost, lg, result, { change: editExample, select: choose }, { values });