fix(M01): 47-3 로직 상세 오른쪽 = 공용 접는 패널 둘(흐름도 · 원문) — 위아래 접기 카드 걷어냄
- 흐름도 · 원문 = 따로 패널 · 접힌 패널 = 세로 글 띠 · 하나만 열림 · 모두 접힘 됨 · 폭 공유(경계 끌기 · 화살표 키) - 열린 패널 · 폭 = 취향 키 m01-logic-side · 흐름도 패널 자체 접기 단추 · 끌기 경계는 숨김 - 옛 두 칸 비율 막대(buildSplit) 제거 · 부품 칸 숨김([hidden]) 규칙 덧붙임 - 화면 시나리오 ui_checks/47-3_로직상세_오른쪽패널.js Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NPJGtfXo6GMbcpiboQC4uK
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
/* =============================================================================
|
||||
* M01_MasterData_UI_LogicLab_Flow.ts
|
||||
* 로직 상세 두 칸 — 왼쪽 지금 내용(보기) · 가운데 끌기 막대 · 오른쪽 흐름도 패널
|
||||
* 너비 — 패널이 없으면 두 칸 비율(끌기 막대 · localStorage) · 패널이 있으면 패널이 알린 너비(px · 패널 가장자리 끌기)
|
||||
* 로직 상세 오른쪽 흐름도 — 칸 · 폭은 오른쪽 접는 패널(LogicLab_Side) 몫
|
||||
* 잇기(mountLogicFlow) — 패널(M02_DF_Panel) · 왼쪽 보기(LogicLab_FlowView) · 입력 값 · 다른 로직 흐름 받기
|
||||
* DataFlow 파일은 import() 로 늦게(엔진이 M01 첫 묶음에 안 들어가게). 정함 `docs/raw/M01_쉬운단가/흐름도_적용_정함.md` 2 · 5 · 6 · 7
|
||||
* ========================================================================== */
|
||||
@@ -14,7 +13,6 @@ 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"],
|
||||
New: ["신규 로직", "New logic"],
|
||||
Waiting: ["흐름도 불러오는 중", "Loading the flow diagram"],
|
||||
Converted: [
|
||||
@@ -27,93 +25,13 @@ const TEXT = {
|
||||
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;
|
||||
const MAX = 0.75;
|
||||
|
||||
const clamp = (r: number): number => Math.min(MAX, Math.max(MIN, r));
|
||||
|
||||
function readRatio(): number {
|
||||
try {
|
||||
const r = Number(localStorage.getItem(STORE));
|
||||
return r ? clamp(r) : 0.5;
|
||||
} catch {
|
||||
return 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
export interface SplitHandle {
|
||||
root: HTMLElement;
|
||||
/** 오른쪽 칸 — 흐름도 패널을 붙이는 곳 */
|
||||
right: HTMLElement;
|
||||
/** 패널이 정한 너비(px) — 끌기 막대는 숨김(패널 가장자리로 조절) · null = 비율로 돌아감 */
|
||||
/** 패널이 알린 너비(px) · null = 패널 내림 */
|
||||
setRight(px: number | null): void;
|
||||
}
|
||||
|
||||
/** 두 칸 만들기 — left 는 지금 화면 그대로 왼쪽에 둠 */
|
||||
export function buildSplit(left: HTMLElement): SplitHandle {
|
||||
const right = el("div", { className: "m01lab-flow__right" });
|
||||
const bar = el("div", {
|
||||
className: "m01lab-flow__bar",
|
||||
attrs: {
|
||||
role: "separator",
|
||||
"aria-orientation": "vertical",
|
||||
"aria-label": tf("Resize"),
|
||||
title: tf("Resize"),
|
||||
tabindex: "0",
|
||||
},
|
||||
});
|
||||
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 =
|
||||
panelPx === null
|
||||
? `minmax(0, ${ratio}fr) auto minmax(0, ${1 - ratio}fr)`
|
||||
: `minmax(0, 1fr) ${panelPx}px`;
|
||||
};
|
||||
const keep = (): void => {
|
||||
try {
|
||||
localStorage.setItem(STORE, String(ratio));
|
||||
} catch {
|
||||
/* 기억 못 해도 지금 화면은 그대로 */
|
||||
}
|
||||
};
|
||||
bar.addEventListener("pointerdown", (ev) => {
|
||||
if (ev.button !== 0) return;
|
||||
ev.preventDefault();
|
||||
const box = root.getBoundingClientRect();
|
||||
const move = (m: PointerEvent): void => {
|
||||
ratio = clamp((m.clientX - box.left) / box.width);
|
||||
apply();
|
||||
};
|
||||
const up = (): void => {
|
||||
window.removeEventListener("pointermove", move);
|
||||
window.removeEventListener("pointerup", up);
|
||||
keep();
|
||||
};
|
||||
window.addEventListener("pointermove", move);
|
||||
window.addEventListener("pointerup", up);
|
||||
});
|
||||
// 키보드 — 왼쪽 · 오른쪽 화살표로 조금씩
|
||||
bar.addEventListener("keydown", (ev) => {
|
||||
const step = ev.key === "ArrowLeft" ? -0.05 : ev.key === "ArrowRight" ? 0.05 : 0;
|
||||
if (!step) return;
|
||||
ev.preventDefault();
|
||||
ratio = clamp(ratio + step);
|
||||
apply();
|
||||
keep();
|
||||
});
|
||||
const setRight = (px: number | null): void => {
|
||||
panelPx = px;
|
||||
bar.hidden = px !== null;
|
||||
apply();
|
||||
};
|
||||
apply();
|
||||
return { root, right, setRight };
|
||||
}
|
||||
|
||||
/* ── 흐름 받기 · 잇기 ─────────────────────────────────────────────────── */
|
||||
|
||||
export interface FlowAnswer {
|
||||
|
||||
Reference in New Issue
Block a user