diff --git a/B07_DesignDetail/openwebcad/src/commands/run-command.ts b/B07_DesignDetail/openwebcad/src/commands/run-command.ts index 0e405565e..f8dae7a06 100644 --- a/B07_DesignDetail/openwebcad/src/commands/run-command.ts +++ b/B07_DesignDetail/openwebcad/src/commands/run-command.ts @@ -2,7 +2,7 @@ import { toast } from 'react-toastify'; import { Actor } from 'xstate'; import { HtmlEvent } from '../App.types'; -import { setAngleLock } from '../inputController/input-angle-lock'; +import { releaseOnePoint } from '../inputController/input-angle-lock'; import { getSelectedEntities, isDrawingReadOnly, notifyWindow, setActiveToolActor } from '../state'; import type { CadCommand } from './command.types'; import { getCommandById, isViewOnlyCommand, resolveCommandInput } from './registry'; @@ -39,7 +39,7 @@ export function runCommand(command: CadCommand): string { } lastCommandId = command.id; - setAngleLock(null); // 앞 명령의 각도 고정은 새 명령에 넘기지 않음 + releaseOnePoint(); // 앞 명령의 각도 고정 · 동적 입력 잠금은 새 명령에 넘기지 않음 if (command.machine) { setActiveToolActor(new Actor(command.machine)); diff --git a/B07_DesignDetail/openwebcad/src/inputController/input-angle-lock.ts b/B07_DesignDetail/openwebcad/src/inputController/input-angle-lock.ts index bee46aac9..509ea4a4c 100644 --- a/B07_DesignDetail/openwebcad/src/inputController/input-angle-lock.ts +++ b/B07_DesignDetail/openwebcad/src/inputController/input-angle-lock.ts @@ -1,11 +1,15 @@ /** * 각도 고정 `<각도` — 오토캐드 각도 재지정. 다음 한 점만 기준점에서 그 방향(동쪽 0° 반시계 +). * 커서 · 클릭은 고정 방향 직선 위로 내리고 · 숫자는 그 방향 길이. 점 하나 쓰면 · Esc · 새 명령이면 풂. + * 동적 입력(커서 옆 길이 · 각도 두 칸) — 값 넣고 Tab = 그 칸 잠금 + 다음 칸 · 각도 칸 잠금 = 각도 고정. */ import { Point } from '@flatten-js/core'; import { polarToPoint } from './input-patterns.ts'; let lockedDegrees: number | null = null; +/** 동적 입력 — 지금 칸 · 잠근 길이 */ +let dynamicField: 'length' | 'angle' = 'length'; +let lockedLength: number | null = null; export const getAngleLock = (): number | null => lockedDegrees; @@ -13,6 +17,23 @@ export const setAngleLock = (degrees: number | null) => { lockedDegrees = degrees; }; +export const getDynamicField = () => dynamicField; +export const getLockedLength = () => lockedLength; + +/** 한 점을 쓴 뒤 · Esc · 새 명령 — 각도 고정 · 동적 입력 잠금을 모두 풂 */ +export function releaseOnePoint() { + lockedDegrees = null; + lockedLength = null; + dynamicField = 'length'; +} + +/** Tab — 친 숫자를 지금 칸에 잠그고 다음 칸으로(빈 Tab 은 칸만 바꿈) · 숫자 아니면 그대로 둠 */ +export function tabDynamicInput(value: number | null) { + if (value !== null && dynamicField === 'length') lockedLength = value; + if (value !== null && dynamicField === 'angle') lockedDegrees = value; + dynamicField = dynamicField === 'length' ? 'angle' : 'length'; +} + /** 커서 옆 안내 줄 */ export const angleLockHint = (): string | null => lockedDegrees === null ? null : `각도 ${lockedDegrees}° 고정 — 길이 입력`; diff --git a/B07_DesignDetail/openwebcad/src/inputController/input-controller.ts b/B07_DesignDetail/openwebcad/src/inputController/input-controller.ts index 5c257cfc6..896c616d1 100644 --- a/B07_DesignDetail/openwebcad/src/inputController/input-controller.ts +++ b/B07_DesignDetail/openwebcad/src/inputController/input-controller.ts @@ -55,12 +55,25 @@ import { isImeKey, isPlainSpace, } from './ime-sink.ts'; -import { drawInputField } from './input-field-draw.ts'; +import { drawInputField, dynamicInputLine } from './input-field-draw.ts'; import { ctrlShortcut } from './input-shortcut.ts'; import { wheelZoom } from './input-wheel.ts'; import { attachTouch } from './input-touch.ts'; -import { ANGLE_LOCK_REGEXP, parsePointText, type PointTextEvent } from './input-patterns.ts'; -import { angleLockHint, setAngleLock } from './input-angle-lock.ts'; +import { + ANGLE_LOCK_REGEXP, + NUMBER_REGEXP, + parsePointText, + type PointTextEvent, +} from './input-patterns.ts'; +import { + angleLockHint, + getAngleLock, + getDynamicField, + getLockedLength, + releaseOnePoint, + setAngleLock, + tabDynamicInput, +} from './input-angle-lock.ts'; import { getSnapOverride, isSnapName, @@ -132,6 +145,19 @@ export class InputController { const roundedY = round(drawController.getWorldMouseLocation().y, 2); texts.push(`${roundedX},${roundedY}`); } + const base = getAngleGuideOriginPoint(); + if (base && this.dynamicInputApplies()) { + texts.push( + dynamicInputLine( + base, + drawController.getWorldMouseLocation(), + getDynamicField(), + this.text, + getLockedLength(), + getAngleLock() + ) + ); + } texts.push(...compact([angleLockHint(), snapOverrideHint()])); // 입력 중인 문자로 시작하는 명령 후보. 예: C => CIRCLE (C), COPY (CO) texts.push(...this.getCommandSuggestions()); @@ -385,7 +411,13 @@ export class InputController { return; } if (evt.key === 'Tab') { - // Tab => move keyboard focus + // 점 단계(기준점 있음) = 동적 입력 칸 넘김 · 그 밖 = 브라우저 초점 이동 + if (!this.dynamicInputApplies()) return; + evt.preventDefault(); + const isNumber = NUMBER_REGEXP.test(this.text); + if (this.text && !isNumber) return; // 숫자 아닌 글(@x,y 등)은 그대로 둠 + tabDynamicInput(isNumber ? Number.parseFloat(this.text) : null); + this.text = ''; return; } if (evt.ctrlKey && evt.code === 'KeyV') { @@ -451,7 +483,7 @@ export class InputController { } public handleEscapeKey() { - setAngleLock(null); + releaseOnePoint(); setSnapOverride(null); if (getSelectedEntities().length > 0) { // Deselect entities @@ -479,7 +511,11 @@ export class InputController { public handleEnterKey(repeatIfIdle = false) { // submit the text as input to the active tool and clear the input field - if (this.text === '') { + const lockedLength = getLockedLength(); + if (this.text === '' && lockedLength !== null && this.dynamicInputApplies()) { + // 동적 입력 길이를 잠근 채 Enter — 그 길이(방향 = 각도 고정 · 아니면 커서) + this.sendPointEvent(this.distanceEvent(lockedLength)); + } else if (this.text === '') { console.log('ENTER: ', { text: this.text, activeTool: getActiveToolActor(), @@ -502,6 +538,15 @@ export class InputController { } else if (activeToolWantsFreeText()) { // 글 단계(TEXT · MTEXT · 표 칸 …)는 친 그대로 — 숫자 · 명령 이름도 글 this.sendText(); + } else if ( + getDynamicField() === 'angle' && + NUMBER_REGEXP.test(this.text) && + this.dynamicInputApplies() + ) { + // 동적 입력 각도 칸 — 각도 고정 · 길이를 잠갔으면 바로 그 점 + setAngleLock(Number.parseFloat(this.text)); + this.text = ''; + if (lockedLength !== null) this.sendPointEvent(this.distanceEvent(lockedLength)); } else if (ANGLE_LOCK_REGEXP.test(this.text)) { // 각도 고정 `<30` — 다음 한 점만 그 방향 setAngleLock(Number.parseFloat((ANGLE_LOCK_REGEXP.exec(this.text) as RegExpExecArray)[1])); @@ -538,21 +583,33 @@ export class InputController { this.text = ''; } - /** 친 글을 점 · 거리 사건으로 — 거리의 방향 = 스냅 · 가이드 · 커서 */ - private pointEventFromText(): PointTextEvent | null { - return parsePointText( - this.text, - () => - getSnapPointOnAngleGuide()?.point || - getSnapPoint()?.point || - getScreenCanvasDrawController().getWorldMouseLocation() + /** 거리의 방향 = 스냅 · 가이드 · 커서 */ + private distanceCursor() { + return ( + getSnapPointOnAngleGuide()?.point || + getSnapPoint()?.point || + getScreenCanvasDrawController().getWorldMouseLocation() ); } + private distanceEvent(value: number): PointTextEvent { + return { type: ActorEvent.NUMBER_INPUT, value, worldMouseLocation: this.distanceCursor() }; + } + + /** 친 글을 점 · 거리 사건으로 */ + private pointEventFromText(): PointTextEvent | null { + return parsePointText(this.text, () => this.distanceCursor()); + } + + /** 동적 입력(길이 · 각도 칸 · Tab) — 기준점이 있는 점 단계에서만 */ + private dynamicInputApplies(): boolean { + return activeToolWantsPoint() && !!getAngleGuideOriginPoint(); + } + /** 점 하나를 도구에 보냄 — 각도 고정 · 한 번 스냅은 이 한 점으로 끝 */ private sendPointEvent(event: PointTextEvent | MouseClickEvent) { getActiveToolActor()?.send(event); - setAngleLock(null); + releaseOnePoint(); setSnapOverride(null); } diff --git a/B07_DesignDetail/openwebcad/src/inputController/input-field-draw.ts b/B07_DesignDetail/openwebcad/src/inputController/input-field-draw.ts index ab2d70848..051f42ac2 100644 --- a/B07_DesignDetail/openwebcad/src/inputController/input-field-draw.ts +++ b/B07_DesignDetail/openwebcad/src/inputController/input-field-draw.ts @@ -84,3 +84,27 @@ export function drawInputField( ); }); } + +/** + * 동적 입력 두 칸 — `[길이 100 🔒] ▸[각도 30_]`. 잠근 칸은 🔒 · 지금 칸은 ▸ + 친 글 · + * 나머지는 기준점→커서 실측(각도 = 동쪽 0° 반시계 +). + */ +export function dynamicInputLine( + base: Point, + mouse: Point, + field: 'length' | 'angle', + typing: string, + lockedLength: number | null, + lockedDegrees: number | null +): string { + const live = { + length: Math.hypot(mouse.x - base.x, mouse.y - base.y), + angle: ((Math.atan2(mouse.y - base.y, mouse.x - base.x) * 180) / Math.PI + 360) % 360, + }; + const cell = (name: 'length' | 'angle', label: string, locked: number | null) => { + const active = field === name; + const value = active && typing ? `${typing}_` : (locked ?? Number(live[name].toFixed(2))); + return `${active ? '▸' : ' '}[${label} ${value}${locked !== null ? ' 🔒' : ''}]`; + }; + return `${cell('length', '길이', lockedLength)} ${cell('angle', '각도', lockedDegrees)}`; +} diff --git a/resources/tester/cad/keyboard-chain.test.ts b/resources/tester/cad/keyboard-chain.test.ts index a10e808fc..4f0004e26 100644 --- a/resources/tester/cad/keyboard-chain.test.ts +++ b/resources/tester/cad/keyboard-chain.test.ts @@ -279,3 +279,61 @@ describe("331-3 선 중 C · U · 한 번 스냅 · 한글 안내", () => { expect(getSnapOverride()).toBeNull(); }); }); + +describe("331-4 동적 입력 길이 Tab 각도", () => { + const tab = () => key(controller, "Tab"); + const enter = () => key(controller, "Enter"); + const typed = (text: string) => { + for (const ch of text) key(controller, ch); + }; + + it("100 Tab 30 ⏎ → (86.603, 50)", () => { + type(controller, "l"); + type(controller, "0,0"); + move(controller, 0, 300); + typed("100"); + tab(); + typed("30"); + enter(); + const drawn = lines(); + expect(drawn).toHaveLength(1); + expectXy(drawn[0].end, 86.603, 50); + expect(getAngleLock()).toBeNull(); + }); + + it("빈 Tab → 각도 칸 · 30 Tab(잠금) · 100 ⏎ → (86.603, 50)", () => { + type(controller, "l"); + type(controller, "0,0"); + move(controller, 0, 300); + tab(); + typed("30"); + tab(); + expect(getAngleLock()).toBe(30); + typed("100"); + enter(); + expectXy(lines()[0].end, 86.603, 50); + }); + + it("길이만 잠그고 빈 ⏎ = 커서 방향 그 길이", () => { + type(controller, "l"); + type(controller, "0,0"); + move(controller, 0, 300); + typed("40"); + tab(); + enter(); + expectXy(lines()[0].end, 0, 40); + }); + + it("기준점 없는 단계 · 숫자 아닌 글이면 Tab 은 손대지 않음", () => { + type(controller, "l"); + typed("12"); + tab(); + expect((controller as unknown as { text: string }).text).toBe("12"); + key(controller, "Escape"); // 친 글만 지움 + type(controller, "0,0"); + typed("@5,0"); + tab(); + enter(); + expectXy(lines()[0].end, 5, 0); + }); +});