diff --git a/A00_Common/b_svg_zoom_pan.ts b/A00_Common/b_svg_zoom_pan.ts index ea40f76d9..256cbe96b 100644 --- a/A00_Common/b_svg_zoom_pan.ts +++ b/A00_Common/b_svg_zoom_pan.ts @@ -10,6 +10,7 @@ * · **휠은 화면마다 다르다** — 카드가 수십 장 깔리는 B06 은 휠을 줌에 묶지 않는다 * (묶으면 목록을 훑을 수가 없다, 2026-08-02 사용자 확정). 판이 둘뿐인 B05 계획노선 * 횡단은 휠 = 줌이다(2026-09-12 사용자 지시 ③). `wheelZoom` 한 칸으로 가른다. + * B06 카드는 Ctrl+휠(트랙패드 핀치 포함)만 줌 — `wheelZoom: "ctrl"`(요구 245 · PLAN 397). * * 그리는 일은 안 한다 — 넘겨받은 `layer` 에 `transform` 만 적는다. * ========================================================================== */ @@ -71,8 +72,9 @@ export interface SvgZoomPanOptions { onChange?: (state: ZoomPanState) => void; /** 도형이 실제로 그려진 범위. 확대 상태에서 팬 한계가 여기까지 늘어난다. */ content?: ContentBounds; - /** 휠을 줌에 묶을지(기본 안 묶음). 묶으면 **커서 아래 지점**을 붙잡고 확대한다. */ - wheelZoom?: boolean; + /** 휠을 줌에 묶을지(기본 안 묶음). 묶으면 **커서 아래 지점**을 붙잡고 확대한다. + * `"ctrl"` = Ctrl+휠만 줌 · 맨 휠은 페이지 스크롤에 둠. */ + wheelZoom?: boolean | "ctrl"; /** 팬을 시작할 누름인지 — 안 주면 가운데 버튼만. 고르기가 없는 빈 곳 왼쪽 끌기를 더할 때 쓴다. */ panStart?: (event: PointerEvent) => boolean; } @@ -210,7 +212,8 @@ export function attachSvgZoomPan(options: SvgZoomPanOptions): ZoomPanHandle { svg.addEventListener( "wheel", (event) => { - event.preventDefault(); + if (options.wheelZoom === "ctrl" && !event.ctrlKey) return; + event.preventDefault(); // Ctrl+휠이면 브라우저 확대도 막음(그림 위만) // 커서 아래 지점이 제자리에 남게 **그 자리**를 붙잡는다. const rect = svg.getBoundingClientRect(); const cx = ((event.clientX - rect.left) / Math.max(rect.width, 1)) * widthPx; @@ -224,7 +227,7 @@ export function attachSvgZoomPan(options: SvgZoomPanOptions): ZoomPanHandle { // 손가락 둘 = 벌려 확대 · 같이 끌어 이동(기기대응 3-2) — 한 손가락은 그 화면의 고르기 · 목록 밀기 몫. // 휠 줌 화면은 그림 면이 손가락을 다 받음 · 아니면(B06 카드 목록) 한 손가락 밀기는 브라우저에 둠. svg.setAttribute?.("data-touch-own", "pinch"); // ?. = 노드 시험의 흉내 SVG - svg.style?.setProperty("touch-action", options.wheelZoom ? "none" : "pan-x pan-y"); + svg.style?.setProperty("touch-action", options.wheelZoom === true ? "none" : "pan-x pan-y"); const touches = new Map(); const touchPair = (): { x: number; y: number; dist: number } => { const [a, b] = [...touches.values()]; diff --git a/B06_Section/B06_Section_UI_Cross_View_Zoom.ts b/B06_Section/B06_Section_UI_Cross_View_Zoom.ts index be95c5b3c..bd5f24044 100644 --- a/B06_Section/B06_Section_UI_Cross_View_Zoom.ts +++ b/B06_Section/B06_Section_UI_Cross_View_Zoom.ts @@ -5,7 +5,7 @@ * ⚠ 줌·팬 **본문은 공용 조각**(`A00_Common/b_svg_zoom_pan.ts`)으로 옮겼다 * (2026-09-12 사용자 지시 「공용화해줘」) — 계획노선 편집 횡단이 같은 코드를 쓴다. * 여기에는 **B06 것**만 남는다: 카드 여백(`CROSS_PAD`)을 씌운 감싸개, 측점별 배율 기억, - * 우측 상단 버튼 묶음. 동작 규칙(휠은 줌이 아님)은 그대로다 — 카드가 수십 장 깔리는 + * 우측 상단 버튼 묶음. 맨 휠은 줌이 아님(Ctrl+휠만 줌 · PLAN 397) — 카드가 수십 장 깔리는 * 화면에서 휠을 줌에 묶으면 목록을 훑을 수가 없다(2026-08-02 사용자 확정). * ========================================================================== */ @@ -57,8 +57,8 @@ export function attachZoomPan( initial, onChange, content, - // 휠은 카드 목록을 훑는 몫이다 — 줌에 안 묶는다. - wheelZoom: false, + // 맨 휠은 카드 목록을 훑는 몫 · Ctrl+휠만 마우스 자리 줌(요구 245 · PLAN 397). + wheelZoom: "ctrl", }); } diff --git a/resources/tester/helper_397_cross_ctrl_wheel.cjs b/resources/tester/helper_397_cross_ctrl_wheel.cjs new file mode 100644 index 000000000..0760f949d --- /dev/null +++ b/resources/tester/helper_397_cross_ctrl_wheel.cjs @@ -0,0 +1,104 @@ +/* PLAN 397 단위검증 헬퍼 — B06 횡단 카드 Ctrl+휠 줌. + * 실제 TS(`B06_Section_UI_Cross_View_Zoom.attachZoomPan` → 공용 `b_svg_zoom_pan`)를 Node 로 돌림. + * 결과 = 표준출력 JSON 한 벌. 짝 = `test_397_cross_ctrl_wheel.py`. + */ +const fs = require("fs"); +const path = require("path"); +const ts = require(path.join(__dirname, "..", "..", "config", "node_modules", "typescript")); + +const ROOT = path.join(__dirname, "..", ".."); +const common = fs.readFileSync( + path.join(ROOT, "B06_Section", "B06_Section_UI_Section_Common.ts"), + "utf8", +); +const CROSS_PAD = Function(`return ${/export const CROSS_PAD = (\{[^}]*\})/.exec(common)[1]}`)(); +const STUBS = { "./B06_Section_UI_Section_Common": { CROSS_PAD, L: (k) => k } }; +function loadTs(full) { + const js = ts.transpileModule(fs.readFileSync(full, "utf8"), { + compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2020 }, + }).outputText; + const box = { exports: {} }; + const localRequire = (request) => STUBS[request] ?? {}; + new Function("exports", "module", "require", js)(box.exports, box, localRequire); + return box.exports; +} +globalThis.localStorage = { getItem: () => null }; // 휠 방향 기본(밂 = 확대) +STUBS["./input_prefs"] = loadTs(path.join(ROOT, "A00_Common", "input_prefs.ts")); +STUBS["../A00_Common/b_svg_zoom_pan"] = loadTs(path.join(ROOT, "A00_Common", "b_svg_zoom_pan.ts")); +const zoomMod = loadTs(path.join(ROOT, "B06_Section", "B06_Section_UI_Cross_View_Zoom.ts")); + +const W = 600; +const H = 300; +function fakeSvg() { + const listeners = {}; + const style = {}; + return { + style: { setProperty: (k, v) => (style[k] = v) }, + styles: style, + setAttribute() {}, + classList: { add() {}, remove() {} }, + addEventListener: (type, fn) => (listeners[type] ??= []).push(fn), + /** 사건을 쏘고 preventDefault 가 불렸는지 돌려줌. */ + fire: (type, event) => { + let prevented = false; + (listeners[type] ?? []).forEach((fn) => + fn({ + preventDefault: () => (prevented = true), + stopPropagation() {}, + pointerId: 1, + ctrlKey: false, + ...event, + }), + ); + return prevented; + }, + setPointerCapture() {}, + releasePointerCapture() {}, + getBoundingClientRect: () => ({ left: 0, top: 0, width: W, height: H }), + }; +} + +const round = (v) => Math.round(v * 1e6) / 1e6; +const svg = fakeSvg(); +let state = { scale: 1, tx: 0, ty: 0 }; +const handle = zoomMod.attachZoomPan(svg, fakeSvg(), W, H, undefined, (s) => (state = s)); +/** 화면 (x, y) 아래 도형 층 좌표 — 마우스 중심 판정. */ +const under = (x, y) => [round((x - state.tx) / state.scale), round((y - state.ty) / state.scale)]; +const out = { touchAction: svg.styles["touch-action"] }; + +const at = [400, 120]; +out.plain = { prevented: svg.fire("wheel", { clientX: 400, clientY: 120, deltaY: -100 }) }; +out.plain.scale = state.scale; +const before = under(...at); +out.ctrl = { + prevented: svg.fire("wheel", { clientX: 400, clientY: 120, deltaY: -100, ctrlKey: true }), +}; +out.ctrl.scale = round(state.scale); +out.ctrl.anchorKept = JSON.stringify(under(...at)) === JSON.stringify(before); +svg.fire("wheel", { clientX: 400, clientY: 120, deltaY: 100, ctrlKey: true }); +out.ctrlOut = round(state.scale); +svg.fire("wheel", { clientX: 200, clientY: 150, deltaY: -8, ctrlKey: true }); // 트랙패드 핀치 벌림 +out.pinch = round(state.scale); +handle.zoom(1 / 0.85); // [+] 단추 — 같은 상태에 이어 붙음 +out.button = round(state.scale); +for (let i = 0; i < 40; i++) + svg.fire("wheel", { clientX: 1, clientY: 1, deltaY: -100, ctrlKey: true }); +out.max = round(state.scale); +handle.reset(); // [⤢] +out.fit = state; + +// 휠 = 줌 화면(B06 상세 · B05 판 · B08)은 그대로 — 맨 휠 줌 +const plainSvg = fakeSvg(); +let plainState = null; +STUBS["../A00_Common/b_svg_zoom_pan"].attachSvgZoomPan({ + svg: plainSvg, + layer: fakeSvg(), + widthPx: W, + heightPx: H, + pad: CROSS_PAD, + wheelZoom: true, + onChange: (s) => (plainState = s), +}); +plainSvg.fire("wheel", { clientX: 300, clientY: 150, deltaY: -100 }); +out.wheelTrue = { scale: round(plainState.scale), touchAction: plainSvg.styles["touch-action"] }; +console.log(JSON.stringify(out)); diff --git a/resources/tester/test_397_cross_ctrl_wheel.py b/resources/tester/test_397_cross_ctrl_wheel.py new file mode 100644 index 000000000..e7556ec8b --- /dev/null +++ b/resources/tester/test_397_cross_ctrl_wheel.py @@ -0,0 +1,52 @@ +"""397 B06 횡단 카드 Ctrl+휠 확대 · 축소(요구 245). + +Node 헬퍼(`helper_397_cross_ctrl_wheel.cjs`)가 실제 TS 를 트랜스파일해 가짜 SVG 로 돌림. +./venv/Scripts/python.exe -m pytest resources/tester/test_397_cross_ctrl_wheel.py -q +""" + +import json +import subprocess +from pathlib import Path + +import pytest + +HERE = Path(__file__).resolve().parent + + +@pytest.fixture(scope="module") +def r(): + proc = subprocess.run( + ["node", str(HERE / "helper_397_cross_ctrl_wheel.cjs")], + capture_output=True, + text=True, + timeout=60, + ) + assert proc.returncode == 0, proc.stderr + return json.loads(proc.stdout) + + +def test_맨_휠은_스크롤(r): + # 줌 안 바뀜 · 기본 동작(카드 목록 스크롤) 안 막음 + assert r["plain"] == {"prevented": False, "scale": 1} + assert r["touchAction"] == "pan-x pan-y" # 한 손가락 목록 밀기 그대로 + + +def test_Ctrl_휠은_마우스_자리_줌(r): + assert r["ctrl"]["prevented"] is True # 브라우저 확대 막음 + assert r["ctrl"]["scale"] == 1.15 + assert r["ctrl"]["anchorKept"] is True + assert r["ctrlOut"] == round(1.15 * 0.87, 6) + + +def test_트랙패드_핀치도_확대(r): + assert r["pinch"] == round(1.15 * 0.87 * 1.15, 6) + + +def test_단추와_같은_상태_같은_한도(r): + assert r["button"] == round(1.15 * 0.87 * 1.15 / 0.85, 6) + assert r["max"] == 8 + assert r["fit"] == {"scale": 1, "tx": 0, "ty": 0} # ⤢ 원배율 + + +def test_휠_줌_화면은_그대로(r): + assert r["wheelTrue"] == {"scale": 1.15, "touchAction": "none"}