diff --git a/M02_MasterTemplete/DataFlow/M02_DF_Diagram.ts b/M02_MasterTemplete/DataFlow/M02_DF_Diagram.ts index ae84fe5e1..26dff53d5 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_Diagram.ts +++ b/M02_MasterTemplete/DataFlow/M02_DF_Diagram.ts @@ -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(`.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 ? [] : [ diff --git a/M02_MasterTemplete/DataFlow/M02_DF_Diagram_Parts.ts b/M02_MasterTemplete/DataFlow/M02_DF_Diagram_Parts.ts index 49052241f..a81da8fbc 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_Diagram_Parts.ts +++ b/M02_MasterTemplete/DataFlow/M02_DF_Diagram_Parts.ts @@ -124,6 +124,8 @@ export interface DiagramOpts { fitKey?: number; /** 저절로 맞출 때 가장 작은 확대 — 없으면 FIT_MIN(좁은 패널은 더 작게) */ fitMin?: number; + /** 「한눈에」 단추로 맞출 때 가장 작은 확대 — 없으면 fitMin */ + fitAllMin?: number; } /* ── 알약 · 자리 ────────────────────────────────────────────────────── */ diff --git a/M02_MasterTemplete/DataFlow/M02_DF_Panel.ts b/M02_MasterTemplete/DataFlow/M02_DF_Panel.ts index de5d49f87..173a32cd0 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_Panel.ts +++ b/M02_MasterTemplete/DataFlow/M02_DF_Panel.ts @@ -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)); diff --git a/M02_MasterTemplete/DataFlow/M02_DF_Paper.ts b/M02_MasterTemplete/DataFlow/M02_DF_Paper.ts index 85146e7f4..228f3debf 100644 --- a/M02_MasterTemplete/DataFlow/M02_DF_Paper.ts +++ b/M02_MasterTemplete/DataFlow/M02_DF_Paper.ts @@ -55,6 +55,8 @@ export interface PaperOpts { logics?(key: string): Promise; /** 저절로 맞출 때 가장 작은 확대 — 부를 때마다 물음(패널 · 크게 보기가 다름) */ 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 }); diff --git a/resources/tester/test_m02_df_diagram_parts.py b/resources/tester/test_m02_df_diagram_parts.py index ae8248233..00e7301e8 100644 --- a/resources/tester/test_m02_df_diagram_parts.py +++ b/resources/tester/test_m02_df_diagram_parts.py @@ -43,7 +43,7 @@ const out = jobs.map((job) => { if (job.op === "deps") return m.depLines(job.lg).map((d) => ({ id: d.id, from: d.from, to: d.to })); if (job.op === "inTrace") return m.depLines(job.lg).map((d) => m.depInTrace(d, job.steps)); if (job.op === "rest") return job.breaks.map((b) => m.isRest(b)); - if (job.op === "fit") return m.fitView(job.rects, job.view); + if (job.op === "fit") return m.fitView(job.rects, job.view, 40, job.min); if (job.op === "value") return job.values.map((v) => m.showValue(v)); if (job.op === "end") return m.depEnd(job.a, job.tag); if (job.op === "restParts") { @@ -404,3 +404,18 @@ def test_지반_토사_쉼_흐림은_브레이커로_깨기_하나(): assert got["boxes"] == ["brk"] assert got["links"] == ["l2", "l6"] assert got["pills"] == ["brk|굴착량", "sum|브레이커 경비"] + + +def test_패널_처음_배율은_읽히는_최소_넘치면_왼쪽_위부터(): + rects = [{"x": 40, "y": 40, "w": 200, "h": 120}, {"x": 1500, "y": 600, "w": 200, "h": 120}] + auto, whole = run( + [ + {"op": "fit", "rects": rects, "view": {"w": 500, "h": 400}, "min": 0.6}, + {"op": "fit", "rects": rects, "view": {"w": 500, "h": 400}, "min": 0.25}, + ] + ) + # 처음 — 0.6 아래로 안 내림 · 넘치면 왼쪽 위(첫 상자 - 여백)가 판 왼쪽 위 + assert auto["zoom"] == 0.6 + assert auto["panX"] == 0 and auto["panY"] == 0 + # 한눈에 — 전체가 들어가게 더 작게 + assert whole["zoom"] < 0.6