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
This commit is contained in:
2026-10-15 12:33:28 +09:00
co-authored by Claude Opus 5.5
parent b5b6264016
commit 8e96880880
8 changed files with 299 additions and 119 deletions
@@ -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;
}