feat(M01): 로직 상세 오른쪽 흐름도 패널 잇기 · 신규 로직
- 로직을 열면 오른쪽에 흐름도 패널(mountFlowPanel) — 줄의 흐름 · 없으면 흐름 받기(/api/m01/logic/flow) · 없으면 빈 흐름 · 변환 알림 한 줄 - 패널 고침 → 줄의 흐름으로 drafts(캐시) · [저장] 한 번 · [고친 것 버리기] 함께 · 흐름 로직이면 왼쪽 보기(buildFlowView) 다시 - 패널 너비 = 패널이 알린 px(두 칸 끌기 막대는 숨김) - 「신규 로직」 — 기본정보 칸(이름 · 원문번호 · 결과 단위 · 출처) + 빈 흐름 → 로직_자체 새 줄 · 저장 뒤 새 키 열기 - 보기만 = 시스템 관리자가 아니면 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016PSXsvyDxjNmufteN5bqmt
This commit is contained in:
Claude Opus 5.5
@@ -1,19 +1,31 @@
|
||||
/* =============================================================================
|
||||
* M01_MasterData_UI_LogicLab_Flow.ts
|
||||
* 로직 상세 두 칸 — 왼쪽 지금 내용(보기) · 가운데 끌기 막대 · 오른쪽 흐름도 자리(패널은 LogicLab 이 붙임)
|
||||
* 너비 비율은 브라우저에 기억(localStorage · 막히면 기본 반반). 정함 `docs/raw/M01_쉬운단가/흐름도_적용_정함.md` 5 · 10
|
||||
* 로직 상세 두 칸 — 왼쪽 지금 내용(보기) · 가운데 끌기 막대 · 오른쪽 흐름도 패널
|
||||
* 너비 — 패널이 없으면 두 칸 비율(끌기 막대 · localStorage) · 패널이 있으면 패널이 알린 너비(px · 패널 가장자리 끌기)
|
||||
* 잇기(mountLogicFlow) — 패널(M02_DF_Panel) · 왼쪽 보기(LogicLab_FlowView) · 입력 값 · 다른 로직 흐름 받기
|
||||
* DataFlow 파일은 import() 로 늦게(엔진이 M01 첫 묶음에 안 들어가게). 정함 `docs/raw/M01_쉬운단가/흐름도_적용_정함.md` 2 · 5 · 6 · 7
|
||||
* ========================================================================== */
|
||||
|
||||
import { currentLanguageIndex } from "@ui/ui_template_locale";
|
||||
import { el } from "@ui/ui_template_elements";
|
||||
import { API_BASE_URL } from "@config/config_frontend";
|
||||
import type { CfLogic } from "../M02_MasterTemplete/DataFlow/M02_DF_Model";
|
||||
import type { CfValues } from "../M02_MasterTemplete/DataFlow/M02_DF_Eval";
|
||||
import "./M01_MasterData_UI_LogicLab_Flow.css";
|
||||
|
||||
const TEXT = {
|
||||
Resize: ["두 칸 너비 — 끌어서 조절", "Drag to resize the two columns"],
|
||||
Waiting: ["흐름도 자리", "Flow diagram"],
|
||||
New: ["신규 로직", "New logic"],
|
||||
Waiting: ["흐름도 불러오는 중", "Loading the flow diagram"],
|
||||
Converted: [
|
||||
"옛 식을 흐름도로 바꿔 보임 — 저장하면 흐름도가 정본",
|
||||
"Converted from the old formula — saving makes the flow the master",
|
||||
],
|
||||
Failed: ["흐름도를 못 띄움 — {v}", "Couldn't open the flow diagram — {v}"],
|
||||
} as const;
|
||||
|
||||
export const tf = (key: keyof typeof TEXT): string => TEXT[key][currentLanguageIndex === 1 ? 1 : 0];
|
||||
export const tf = (key: keyof typeof TEXT, v = ""): string =>
|
||||
TEXT[key][currentLanguageIndex === 1 ? 1 : 0].replace("{v}", v);
|
||||
|
||||
const STORE = "m01.logic.flowRatio";
|
||||
const MIN = 0.25;
|
||||
@@ -34,14 +46,13 @@ export interface SplitHandle {
|
||||
root: HTMLElement;
|
||||
/** 오른쪽 칸 — 흐름도 패널을 붙이는 곳 */
|
||||
right: HTMLElement;
|
||||
/** 패널이 정한 너비(px) — 끌기 막대는 숨김(패널 가장자리로 조절) · null = 비율로 돌아감 */
|
||||
setRight(px: number | null): void;
|
||||
}
|
||||
|
||||
/** 두 칸 만들기 — left 는 지금 화면 그대로 왼쪽에 둠 */
|
||||
export function buildSplit(left: HTMLElement): SplitHandle {
|
||||
const right = el("div", {
|
||||
className: "m01lab-flow__right",
|
||||
children: [el("p", { className: "m01lab-flow__wait", text: tf("Waiting") })],
|
||||
});
|
||||
const right = el("div", { className: "m01lab-flow__right" });
|
||||
const bar = el("div", {
|
||||
className: "m01lab-flow__bar",
|
||||
attrs: {
|
||||
@@ -55,8 +66,12 @@ export function buildSplit(left: HTMLElement): SplitHandle {
|
||||
const leftCol = el("div", { className: "m01lab-flow__left", children: [left] });
|
||||
const root = el("div", { className: "m01lab-flow", children: [leftCol, bar, right] });
|
||||
let ratio = readRatio();
|
||||
let panelPx: number | null = null;
|
||||
const apply = (): void => {
|
||||
root.style.gridTemplateColumns = `minmax(0, ${ratio}fr) auto minmax(0, ${1 - ratio}fr)`;
|
||||
root.style.gridTemplateColumns =
|
||||
panelPx === null
|
||||
? `minmax(0, ${ratio}fr) auto minmax(0, ${1 - ratio}fr)`
|
||||
: `minmax(0, 1fr) ${panelPx}px`;
|
||||
};
|
||||
const keep = (): void => {
|
||||
try {
|
||||
@@ -90,6 +105,159 @@ export function buildSplit(left: HTMLElement): SplitHandle {
|
||||
apply();
|
||||
keep();
|
||||
});
|
||||
const setRight = (px: number | null): void => {
|
||||
panelPx = px;
|
||||
bar.hidden = px !== null;
|
||||
apply();
|
||||
};
|
||||
apply();
|
||||
return { root, right };
|
||||
return { root, right, setRight };
|
||||
}
|
||||
|
||||
/* ── 흐름 받기 · 잇기 ─────────────────────────────────────────────────── */
|
||||
|
||||
export interface FlowAnswer {
|
||||
flow: CfLogic;
|
||||
converted: boolean;
|
||||
notes: string[];
|
||||
}
|
||||
|
||||
/** 마스터 로직의 흐름 — 줄에 흐름이 있으면 그대로 · 없으면 서버가 옛 식을 바꿔 줌 · 길이 없거나 못 받으면 null */
|
||||
export async function fetchFlow(key: string, file = ""): Promise<FlowAnswer | null> {
|
||||
try {
|
||||
const q = new URLSearchParams({ key, ...(file ? { file } : {}) });
|
||||
const r = await fetch(`${API_BASE_URL}/m01/logic/flow?${q}`, { credentials: "include" });
|
||||
if (!r.ok) return null;
|
||||
const got = (await r.json()) as Partial<FlowAnswer>;
|
||||
return got.flow ? { flow: got.flow, converted: !!got.converted, notes: got.notes ?? [] } : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
const loadFlowMods = () =>
|
||||
Promise.all([
|
||||
import("../M02_MasterTemplete/DataFlow/M02_DF_Panel"),
|
||||
import("./M01_MasterData_UI_LogicLab_FlowView"),
|
||||
import("../M02_MasterTemplete/DataFlow/M02_DF_Model"),
|
||||
import("../M02_MasterTemplete/DataFlow/M02_DF_Eval"),
|
||||
import("../M02_MasterTemplete/DataFlow/M02_DF_Api"),
|
||||
import("../M02_MasterTemplete/DataFlow/M02_DF_Entry_Detail"),
|
||||
]).then(([panel, view, model, ev, api, detail]) => ({ panel, view, model, ev, api, detail }));
|
||||
|
||||
/** 빈 흐름 — 신규 로직 · 흐름을 못 받은 로직 */
|
||||
export async function emptyFlow(name: string, unit: string): Promise<CfLogic> {
|
||||
return (await import("../M02_MasterTemplete/DataFlow/M02_DF_Model")).newLogic(name, unit);
|
||||
}
|
||||
|
||||
export interface LogicFlowOpts {
|
||||
split: SplitHandle;
|
||||
flow: CfLogic;
|
||||
title: string;
|
||||
readOnly: boolean;
|
||||
/** 변환 알림 — 패널 위 한 줄 */
|
||||
notes: string[];
|
||||
converted: boolean;
|
||||
/** 흐름 로직이면 왼쪽 「지금 내용」 자리(LogicLab_Detail 의 flowHost) */
|
||||
leftHost(): HTMLElement | null;
|
||||
onChange(lg: CfLogic): void;
|
||||
}
|
||||
|
||||
export interface LogicFlow {
|
||||
/** 밖에서 바꿈(고친 것 버리기) — 패널 · 왼쪽 함께 */
|
||||
set(lg: CfLogic): void;
|
||||
/** 왼쪽만 다시(왼쪽 화면을 새로 그린 뒤) */
|
||||
redrawLeft(): void;
|
||||
destroy(): void;
|
||||
}
|
||||
|
||||
/** 오른쪽 패널을 띄우고 왼쪽 보기 · 입력 값 · 다른 로직을 이음 */
|
||||
export async function mountLogicFlow(opts: LogicFlowOpts): Promise<LogicFlow> {
|
||||
const M = await loadFlowMods();
|
||||
const host = el("div", { className: "m01lab-flow__panel" });
|
||||
const note = el("p", { className: "m01lab-flow__note" });
|
||||
const notes = [...(opts.converted ? [tf("Converted")] : []), ...opts.notes];
|
||||
note.textContent = notes.join(" · ");
|
||||
note.hidden = !notes.length;
|
||||
opts.split.right.replaceChildren(note, host);
|
||||
let lg = opts.flow;
|
||||
let values: CfValues = {};
|
||||
let valueSig = "";
|
||||
let logics: Record<string, CfLogic> = {};
|
||||
let logicSig = "";
|
||||
let gone = false;
|
||||
|
||||
/** 다른 로직 — 흐름도 저장본(DF-) · 마스터 로직(흐름 받기) */
|
||||
const getLogic = async (key: string): Promise<CfLogic | null> =>
|
||||
key.startsWith("DF-") ? M.api.cfGet(key) : ((await fetchFlow(key))?.flow ?? null);
|
||||
|
||||
const left = (): void => {
|
||||
const at = opts.leftHost();
|
||||
if (!at || gone) return;
|
||||
M.view.buildFlowView(at, lg, values, { logics });
|
||||
};
|
||||
/** 입력 값 · 다른 로직 — 물음이 바뀐 때만 다시 받음 · 받으면 왼쪽 다시 */
|
||||
const refresh = (): void => {
|
||||
let ports: Record<string, Record<string, unknown>> = {};
|
||||
try {
|
||||
ports = M.ev.evalLogic(lg, values, { logics }).ports;
|
||||
} catch {
|
||||
/* 셈이 막혀도 물음은 보냄 */
|
||||
}
|
||||
const pill = (p: { box: string; name: string }): unknown => ports[p.box]?.[p.name] ?? null;
|
||||
const asks = M.detail.queriesOf(lg, pill, M.model.elementPort);
|
||||
const sig = JSON.stringify(asks.map((a) => a.q));
|
||||
if (sig !== valueSig) {
|
||||
valueSig = sig;
|
||||
void M.detail.fetchValues(M.api.cfValues, lg, pill, M.model.elementPort).then(
|
||||
(got) => {
|
||||
if (sig !== valueSig || gone) return;
|
||||
values = got.values;
|
||||
left();
|
||||
refresh(); // 받은 값으로 조건 찾기 값이 바뀌면 한 번 더
|
||||
},
|
||||
() => undefined,
|
||||
);
|
||||
}
|
||||
const keys = JSON.stringify(lg.boxes.map((b) => b.input?.logic?.key ?? ""));
|
||||
if (keys !== logicSig) {
|
||||
logicSig = keys;
|
||||
void M.detail.loadLogics(lg, getLogic).then((got) => {
|
||||
if (keys !== logicSig || gone) return;
|
||||
logics = got.logics;
|
||||
left();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const panel = M.panel.mountFlowPanel(host, {
|
||||
logic: lg,
|
||||
title: opts.title,
|
||||
readOnly: opts.readOnly,
|
||||
logics: getLogic,
|
||||
onResize: (px) => opts.split.setRight(px),
|
||||
onChange: (next) => {
|
||||
lg = next;
|
||||
opts.onChange(next);
|
||||
left();
|
||||
refresh();
|
||||
},
|
||||
});
|
||||
left();
|
||||
refresh();
|
||||
return {
|
||||
set: (next) => {
|
||||
lg = next;
|
||||
panel.set(next);
|
||||
left();
|
||||
refresh();
|
||||
},
|
||||
redrawLeft: left,
|
||||
destroy: () => {
|
||||
gone = true;
|
||||
panel.destroy();
|
||||
opts.split.setRight(null);
|
||||
opts.split.right.replaceChildren();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user