feat(CAD): 331-1 각도 고정 <각도 → 길이 · 시퀀스 첫 점 숫자 무시

- 새 input-angle-lock — 다음 한 점만 고정 방향(동쪽 0° 반시계) · 커서 · 클릭은 고정 직선 위로 · 숫자는 그 방향 길이 · 한 점 · Esc · 새 명령이면 풂 · 커서 옆 안내 「각도 30° 고정 — 길이 입력」 - input-patterns — 숫자 음수 · .5 허용 · 각도 고정 꼴 · 점 글 해석 한 곳(parsePointText) - Enter 해석 차례 — 자유 글 단계만 원문 먼저 → 각도 고정 → 점 · 거리 → 단계 선택지 → 명령 이름 - 선 · 시퀀스 미리보기도 고정 방향 · 시퀀스 첫 점의 거리 · 상대 좌표는 무시(도구 멈춤 · 「Error in tool actor」 없앰) - 시험 resources/tester/cad/keyboard-chain.test.ts Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013QyNXY2TUKXCFMwAca2APG
2026-10-15 12:33:28 +09:00
parent b5b6264016
commit 8e96880880
8 changed files with 299 additions and 119 deletions
@@ -2,6 +2,7 @@
 import { toast } from 'react-toastify';
 import { Actor } from 'xstate';
 import { HtmlEvent } from '../App.types';
+import { setAngleLock } from '../inputController/input-angle-lock';
 import { getSelectedEntities, isDrawingReadOnly, notifyWindow, setActiveToolActor } from '../state';
 import type { CadCommand } from './command.types';
 import { getCommandById, isViewOnlyCommand, resolveCommandInput } from './registry';
@@ -38,6 +39,7 @@ export function runCommand(command: CadCommand): string {
 	}

 	lastCommandId = command.id;
+	setAngleLock(null); // 앞 명령의 각도 고정은 새 명령에 넘기지 않음

 	if (command.machine) {
 		setActiveToolActor(new Actor(command.machine));
@@ -1,4 +1,5 @@
 import { type Point, Vector } from '@flatten-js/core';
+import { getAngleLock, pointAtLock, projectOnLock } from '../inputController/input-angle-lock.ts';
 import {
 	type AbsolutePointInputEvent,
 	ActorEvent,
@@ -12,21 +13,26 @@ import {
 /**
 * Various tools need to convert user input into a point
 * This function handles mouse click event, number events and in the future absoluteCoordinates and relativeCoordinate events
+ * 각도 고정(`<30`) 중이면 커서 · 클릭 · 숫자를 기준점에서 고정 방향으로.
 * @param startPoint
 * @param event
 */
 export function getPointFromEvent(startPoint: Point | null, event: PointInputEvent): Point {
+	const locked = startPoint !== null && getAngleLock() !== null;
 	if (event.type === ActorEvent.DRAW) {
-		return (event as DrawEvent).drawController.getWorldMouseLocation();
+		const mouse = (event as DrawEvent).drawController.getWorldMouseLocation();
+		return locked ? projectOnLock(startPoint, mouse) : mouse;
 	}
 	if (event.type === ActorEvent.MOUSE_CLICK) {
-		return (event as MouseClickEvent).worldMouseLocation;
+		const click = (event as MouseClickEvent).worldMouseLocation;
+		return locked ? projectOnLock(startPoint, click) : click;
 	}
 	if (event.type === ActorEvent.NUMBER_INPUT) {
 		if (!startPoint) {
 			throw new Error('Cannot get relative point by distance if no start point is provided');
 		}
 		const distance = (event as NumberInputEvent).value;
+		if (locked) return pointAtLock(startPoint, distance);
 		// Direction indicated by the startPoint and the mouse location
 		const direction = new Vector(
 			event.worldMouseLocation.x - startPoint.x,
@@ -0,0 +1,31 @@
+/**
+ * 각도 고정 `<각도` — 오토캐드 각도 재지정. 다음 한 점만 기준점에서 그 방향(동쪽 0° 반시계 +).
+ * 커서 · 클릭은 고정 방향 직선 위로 내리고 · 숫자는 그 방향 길이. 점 하나 쓰면 · Esc · 새 명령이면 풂.
+ */
+import { Point } from '@flatten-js/core';
+import { polarToPoint } from './input-patterns.ts';
+
+let lockedDegrees: number | null = null;
+
+export const getAngleLock = (): number | null => lockedDegrees;
+
+export const setAngleLock = (degrees: number | null) => {
+	lockedDegrees = degrees;
+};
+
+/** 커서 옆 안내 줄 */
+export const angleLockHint = (): string | null =>
+	lockedDegrees === null ? null : `각도 ${lockedDegrees}° 고정 — 길이 입력`;
+
+/** 기준점에서 고정 방향으로 거리만큼 간 점 */
+export function pointAtLock(base: Point, distance: number): Point {
+	const offset = polarToPoint(distance, lockedDegrees ?? 0);
+	return new Point(base.x + offset.x, base.y + offset.y);
+}
+
+/** 점을 기준점 · 고정 방향 직선 위로 내림(커서 · 클릭) */
+export function projectOnLock(base: Point, point: Point): Point {
+	const unit = polarToPoint(1, lockedDegrees ?? 0);
+	const along = (point.x - base.x) * unit.x + (point.y - base.y) * unit.y;
+	return new Point(base.x + unit.x * along, base.y + unit.y * along);
+}
@@ -44,14 +44,7 @@ import {
 } from '../state.ts';
 import { Tool } from '../tools.ts';
 import { SelectState, selectToolStateMachine } from '../tools/select-tool.ts';
-import {
-	type AbsolutePointInputEvent,
-	ActorEvent,
-	type MouseClickEvent,
-	type NumberInputEvent,
-	type RelativePointInputEvent,
-	type TextInputEvent,
-} from '../tools/tool.types.ts';
+import { ActorEvent, type MouseClickEvent, type TextInputEvent } from '../tools/tool.types.ts';
 import {
 	activeToolAcceptsText,
 	activeToolWantsFreeText,
@@ -63,14 +56,8 @@ import { drawInputField } from './input-field-draw.ts';
 import { ctrlShortcut } from './input-shortcut.ts';
 import { wheelZoom } from './input-wheel.ts';
 import { attachTouch } from './input-touch.ts';
-import {
-	ABSOLUTE_POINT_REGEXP,
-	ABSOLUTE_POLAR_REGEXP,
-	NUMBER_REGEXP,
-	polarToPoint,
-	RELATIVE_POINT_REGEXP,
-	RELATIVE_POLAR_REGEXP,
-} from './input-patterns.ts';
+import { ANGLE_LOCK_REGEXP, parsePointText, type PointTextEvent } from './input-patterns.ts';
+import { angleLockHint, setAngleLock } from './input-angle-lock.ts';

 /** 이만큼 넘게 끌면 클릭이 아니라 드래그로 본다 (화면 픽셀) */
 const DRAG_SELECT_MIN_PX = 4;
@@ -135,6 +122,8 @@ export class InputController {
 			const roundedY = round(drawController.getWorldMouseLocation().y, 2);
 			texts.push(`${roundedX},${roundedY}`);
 		}
+		const lockHint = angleLockHint();
+		if (lockHint) texts.push(lockHint);
 		// 입력 중인 문자로 시작하는 명령 후보. 예: C => CIRCLE (C), COPY (CO)
 		texts.push(...this.getCommandSuggestions());
 		// 입력 글(조합 중인 한글도 함께)
@@ -213,7 +202,7 @@ export class InputController {
 		);
 		const worldMouseLocation = closestSnapPoint ? closestSnapPoint.point : worldMouseLocationTemp;

-		getActiveToolActor()?.send({
+		this.sendPointEvent({
 			type: ActorEvent.MOUSE_CLICK,
 			worldMouseLocation,
 			screenMouseLocation: screenCanvasDrawController.worldToTarget(worldMouseLocation),
@@ -448,6 +437,7 @@ export class InputController {
 	}

 	public handleEscapeKey() {
+		setAngleLock(null);
 		if (getSelectedEntities().length > 0) {
 			// Deselect entities
 			setSelectedEntityIds([]);
@@ -495,17 +485,20 @@ export class InputController {
 			if (wasSelectTool && getActiveToolActor()?.getSnapshot()?.status === 'done') {
 				setActiveToolActor(new Actor(selectToolStateMachine));
 			}
-		} else if (activeToolCanHandleTextInput) {
-			console.log('TEXT_INPUT: ', {
-				text: this.text,
-				activeTool: getActiveToolActor(),
-			});
-			// Send the text to the active tool
-			getActiveToolActor()?.send({
-				type: ActorEvent.TEXT_INPUT,
-				value: this.text,
-			} as TextInputEvent);
+		} else if (activeToolWantsFreeText()) {
+			// 글 단계(TEXT · MTEXT · 표 칸 …)는 친 그대로 — 숫자 · 명령 이름도 글
+			this.sendText();
+		} else if (ANGLE_LOCK_REGEXP.test(this.text)) {
+			// 각도 고정 `<30` — 다음 한 점만 그 방향
+			setAngleLock(Number.parseFloat((ANGLE_LOCK_REGEXP.exec(this.text) as RegExpExecArray)[1]));
 			this.text = '';
+		} else if (this.pointEventFromText()) {
+			// 거리 `100` · `x,y` · `@x,y` · `@d<a` · `d<a`
+			this.sendPointEvent(this.pointEventFromText() as PointTextEvent);
+			this.text = '';
+		} else if (activeToolCanHandleTextInput) {
+			// 지금 단계의 선택지(배열 L/R · 숫자 단계 글)
+			this.sendText();
 		} else if (resolveCommandInput(this.text)) {
 			// 명령 이름 또는 AutoCAD 별칭을 입력했다. 예: L, LINE, REC
 			const command = resolveCommandInput(this.text);
@@ -513,91 +506,37 @@ export class InputController {
 				runCommand(command);
 			}
 			this.text = '';
-		} else if (NUMBER_REGEXP.test(this.text)) {
-			console.log(' NUMBER_INPUT: ', {
-				text: this.text,
-				activeTool: getActiveToolActor(),
-			});
-			// User entered a number. eg: 100
-			getActiveToolActor()?.send({
-				type: ActorEvent.NUMBER_INPUT,
-				value: Number.parseFloat(this.text),
-				worldMouseLocation:
-					getSnapPointOnAngleGuide()?.point ||
-					getSnapPoint()?.point ||
-					getScreenCanvasDrawController().getWorldMouseLocation(),
-			} as NumberInputEvent);
-			this.text = '';
-		} else if (ABSOLUTE_POINT_REGEXP.test(this.text)) {
-			console.log('ABSOLUTE_POINT_INPUT: ', {
-				text: this.text,
-				activeTool: getActiveToolActor(),
-			});
-			// User entered coordinates to an absolute point on the canvas. eg: 100, 200
-			const match = ABSOLUTE_POINT_REGEXP.exec(this.text);
-			if (!match) {
-				return;
-			}
-			const x = Number.parseFloat(match[1]);
-			const y = Number.parseFloat(match[2]);
-			getActiveToolActor()?.send({
-				type: ActorEvent.ABSOLUTE_POINT_INPUT,
-				value: new Point(x, y),
-			} as AbsolutePointInputEvent);
-			this.text = '';
-		} else if (RELATIVE_POINT_REGEXP.test(this.text)) {
-			console.log('RELATIVE_POINT_INPUT: ', {
-				text: this.text,
-				activeTool: getActiveToolActor(),
-			});
-			// User entered coordinates to a relative point on the canvas. eg: @100, 200
-			const match = RELATIVE_POINT_REGEXP.exec(this.text);
-			if (!match) {
-				return;
-			}
-			const x = Number.parseFloat(match[1]);
-			const y = Number.parseFloat(match[2]);
-			getActiveToolActor()?.send({
-				type: ActorEvent.RELATIVE_POINT_INPUT,
-				value: new Point(x, y),
-			} as RelativePointInputEvent);
-			this.text = '';
-		} else if (RELATIVE_POLAR_REGEXP.test(this.text)) {
-			// 직전 점에서 거리·각도로 이동. 예: @100<45
-			const match = RELATIVE_POLAR_REGEXP.exec(this.text);
-			if (!match) {
-				return;
-			}
-			getActiveToolActor()?.send({
-				type: ActorEvent.RELATIVE_POINT_INPUT,
-				value: polarToPoint(Number.parseFloat(match[1]), Number.parseFloat(match[2])),
-			} as RelativePointInputEvent);
-			this.text = '';
-		} else if (ABSOLUTE_POLAR_REGEXP.test(this.text)) {
-			// 원점에서 거리·각도로 지정한 점. 예: 100<45
-			const match = ABSOLUTE_POLAR_REGEXP.exec(this.text);
-			if (!match) {
-				return;
-			}
-			getActiveToolActor()?.send({
-				type: ActorEvent.ABSOLUTE_POINT_INPUT,
-				value: polarToPoint(Number.parseFloat(match[1]), Number.parseFloat(match[2])),
-			} as AbsolutePointInputEvent);
-			this.text = '';
 		} else {
-			console.log('TEXT_INPUT: ', {
-				text: this.text,
-				activeTool: getActiveToolActor(),
-			});
-			// Send the text to the active tool
-			getActiveToolActor()?.send({
-				type: ActorEvent.TEXT_INPUT,
-				value: this.text,
-			} as TextInputEvent);
-			this.text = '';
+			this.sendText();
 		}
 	}

+	private sendText() {
+		console.log('TEXT_INPUT: ', { text: this.text, activeTool: getActiveToolActor() });
+		getActiveToolActor()?.send({
+			type: ActorEvent.TEXT_INPUT,
+			value: this.text,
+		} as TextInputEvent);
+		this.text = '';
+	}
+
+	/** 친 글을 점 · 거리 사건으로 — 거리의 방향 = 스냅 · 가이드 · 커서 */
+	private pointEventFromText(): PointTextEvent | null {
+		return parsePointText(
+			this.text,
+			() =>
+				getSnapPointOnAngleGuide()?.point ||
+				getSnapPoint()?.point ||
+				getScreenCanvasDrawController().getWorldMouseLocation()
+		);
+	}
+
+	/** 점 하나를 도구에 보냄 — 각도 고정은 이 한 점으로 끝 */
+	private sendPointEvent(event: PointTextEvent | MouseClickEvent) {
+		getActiveToolActor()?.send(event);
+		setAngleLock(null);
+	}
+
 	public handleUndo(evt: KeyboardEvent) {
 		evt.preventDefault();
 		undo();
@@ -1,17 +1,65 @@
-/** 명령 입력 해석 — 숫자 · 좌표 · 극좌표 꼴 */
+/** 명령 입력 해석 — 숫자 · 좌표 · 극좌표 · 각도 고정 꼴 */
 import { Point } from '@flatten-js/core';
+import {
+	type AbsolutePointInputEvent,
+	ActorEvent,
+	type NumberInputEvent,
+	type RelativePointInputEvent,
+} from '../tools/tool.types.ts';

-export const NUMBER_REGEXP = /^[0-9]+([.][0-9]+)?$/;
-/** 부호 있는 실수 한 개 (좌표는 음수가 될 수 있다) */
-const SIGNED = '(-?[0-9]+(?:[.][0-9]+)?)';
+/** 부호 있는 실수 한 개 — `-5` · `.5` · `1.5` */
+const SIGNED = '(-?(?:[0-9]+(?:[.][0-9]+)?|[.][0-9]+))';
+export const NUMBER_REGEXP = new RegExp(`^${SIGNED}$`);
 export const ABSOLUTE_POINT_REGEXP = new RegExp(`^${SIGNED}[ ]*,[ ]*${SIGNED}$`);
 export const RELATIVE_POINT_REGEXP = new RegExp(`^@${SIGNED}[ ]*,[ ]*${SIGNED}$`);
 /** 극좌표 — 거리<각도(도). `@`가 붙으면 직전 점 기준 */
 export const ABSOLUTE_POLAR_REGEXP = new RegExp(`^${SIGNED}[ ]*<[ ]*${SIGNED}$`);
 export const RELATIVE_POLAR_REGEXP = new RegExp(`^@${SIGNED}[ ]*<[ ]*${SIGNED}$`);
+/** 각도 고정 — `<30` (다음 한 점만 그 방향) */
+export const ANGLE_LOCK_REGEXP = new RegExp(`^<[ ]*${SIGNED}$`);

-/** 거리·각도(도)를 x·y 변위로 바꾼다 */
+/** 거리·각도(도)를 x·y 변위로 바꾼다 — 각도 = 동쪽 0° 반시계 + */
 export function polarToPoint(distance: number, degrees: number): Point {
 	const radians = (degrees * Math.PI) / 180;
 	return new Point(distance * Math.cos(radians), distance * Math.sin(radians));
 }
+
+export type PointTextEvent = NumberInputEvent | AbsolutePointInputEvent | RelativePointInputEvent;
+
+/** 친 글 → 점 · 거리 사건(숫자 · `x,y` · `@x,y` · `@d<a` · `d<a`) · 아니면 null · 커서는 숫자일 때만 읽음 */
+export function parsePointText(text: string, cursor: () => Point): PointTextEvent | null {
+	const num = (value: string) => Number.parseFloat(value);
+	let match = NUMBER_REGEXP.exec(text);
+	if (match) {
+		return { type: ActorEvent.NUMBER_INPUT, value: num(match[1]), worldMouseLocation: cursor() };
+	}
+	match = ABSOLUTE_POINT_REGEXP.exec(text);
+	if (match) {
+		return {
+			type: ActorEvent.ABSOLUTE_POINT_INPUT,
+			value: new Point(num(match[1]), num(match[2])),
+		};
+	}
+	match = RELATIVE_POINT_REGEXP.exec(text);
+	if (match) {
+		return {
+			type: ActorEvent.RELATIVE_POINT_INPUT,
+			value: new Point(num(match[1]), num(match[2])),
+		};
+	}
+	match = RELATIVE_POLAR_REGEXP.exec(text);
+	if (match) {
+		return {
+			type: ActorEvent.RELATIVE_POINT_INPUT,
+			value: polarToPoint(num(match[1]), num(match[2])),
+		};
+	}
+	match = ABSOLUTE_POLAR_REGEXP.exec(text);
+	if (match) {
+		return {
+			type: ActorEvent.ABSOLUTE_POINT_INPUT,
+			value: polarToPoint(num(match[1]), num(match[2])),
+		};
+	}
+	return null;
+}
@@ -176,7 +176,9 @@ export function createSequenceTool(config: SequenceToolConfig) {

 	const drawPreview = ({ context, event }: { context: SequenceContext; event: StateEvent }) => {
 		if (!config.preview) return;
-		const ghosts = config.preview(makeInput(context.values, cursorPoint(event), context.picks));
+		// 각도 고정(`<30`) 중이면 커서를 고정 방향 위로
+		const cursor = getPointFromEvent(lastPoint(context.values), event as DrawEvent);
+		const ghosts = config.preview(makeInput(context.values, cursor, context.picks));
 		setGhostHelperEntities(ghosts);
 	};

@@ -281,8 +283,10 @@ export function createSequenceTool(config: SequenceToolConfig) {
 			on.DRAW = { actions: drawPreview };
 			on.MOUSE_CLICK = { actions: pushPoint, target };
 			on.ABSOLUTE_POINT_INPUT = { actions: pushPoint, target };
-			on.RELATIVE_POINT_INPUT = { actions: pushPoint, target };
-			on.NUMBER_INPUT = { actions: pushPoint, target };
+			// 거리 · 상대 좌표는 기준점(앞 점)이 있을 때만 — 첫 점이면 무시(도구가 멈추지 않게)
+			const hasBase = ({ context }: { context: SequenceContext }) => !!lastPoint(context.values);
+			on.RELATIVE_POINT_INPUT = { guard: hasBase, actions: pushPoint, target };
+			on.NUMBER_INPUT = { guard: hasBase, actions: pushPoint, target };
 			if (config.repeatLastStep && index === lastIndex) {
 				on.ENTER = { target: COMMIT_STATE };
 			}
@@ -131,7 +131,7 @@ export const lineToolStateMachine = createMachine(
 				const activeLine = new LineEntity(
 					getActiveLayerId(),
 					context.startPoint as Point,
-					(event as DrawEvent).drawController.getWorldMouseLocation()
+					getPointFromEvent(context.startPoint, event as DrawEvent)
 				);
 				activeLine.lineColor = getActiveLineColor();
 				activeLine.lineWidth = getActiveLineWidth();