feat(CAD): 331-4 동적 입력 — 커서 옆 길이 · 각도 두 칸 · Tab 잠금

- 기준점 있는 점 단계에서만 Tab 가로챔(그 밖은 브라우저 초점 이동) · 숫자 넣고 Tab = 그 칸 잠금 + 다음 칸 · 빈 Tab = 칸만 바꿈
- 각도 칸 잠금 = 각도 고정 · 길이 잠근 채 Enter = 그 길이 · `100` Tab `30` Enter → (86.603, 50)
- 커서 옆 줄 `▸[길이 100 🔒] [각도 30_]` — 잠금 🔒 · 지금 칸 ▸ · 나머지는 기준점→커서 실측
- 한 점 · Esc · 새 명령이면 각도 고정 · 길이 잠금 모두 풂(releaseOnePoint)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013QyNXY2TUKXCFMwAca2APG

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));

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}° 고정 — 길이 입력`;

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);
 	}
 

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)}`;
+}

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);
+  });
+});