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
@@ -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();
+150
View File
@@ -0,0 +1,150 @@
/**
* CAD 키보드 연속 명령(PLAN 331 · 요구 224-7) — 오토캐드 방식.
* 각도 고정 `<30` → 길이 · 시퀀스 첫 점 숫자 · 이동 · 복사 · 회전 키보드 값 · 선 중 C · U · 한 번 스냅 · 동적 입력 Tab.
* 시험 쪽 flatten-js 는 다른 사본(「Illegal Parameters」) — 점은 앱 코드로만 만들고 숫자로 판정.
* 실행: cd B07_DesignDetail/openwebcad && npx vitest run --dir ../../resources/tester/cad keyboard-chain
*/
import { beforeEach, describe, expect, it, vi } from "vitest";
vi.mock("react-toastify", () => ({
toast: Object.assign(vi.fn(), { error: vi.fn(), info: vi.fn(), warn: vi.fn(), success: vi.fn() }),
}));
import { toast } from "react-toastify";
import { InputController } from "../../../B07_DesignDetail/openwebcad/src/inputController/input-controller";
import { getAngleLock } from "../../../B07_DesignDetail/openwebcad/src/inputController/input-angle-lock";
import {
getActiveToolActor,
getEntities,
setEntities,
setSelectedEntityIds,
} from "../../../B07_DesignDetail/openwebcad/src/state";
import { runCommandInput } from "../../../B07_DesignDetail/openwebcad/src/commands/run-command";
import { initApplication } from "../../../B07_DesignDetail/openwebcad/test/helpers/init-application";
import { CANVAS_HEIGHT } from "../../../B07_DesignDetail/openwebcad/test/helpers/tests.consts";
type Xy = { x: number; y: number };
type Seg = { start: Xy; end: Xy };
const key = (controller: InputController, k: string) =>
controller.handleKeyStroke({
key: k,
code: "",
keyCode: 0,
isComposing: false,
shiftKey: false,
ctrlKey: false,
altKey: false,
metaKey: false,
repeat: false,
target: null,
preventDefault: vi.fn(),
stopPropagation: vi.fn(),
} as unknown as KeyboardEvent);
/** 글자를 치고 Space(= Enter) */
const type = (controller: InputController, text: string) => {
for (const ch of text) key(controller, ch);
key(controller, " ");
};
/** 세계 좌표 (x, y) 로 커서 이동 — 시험 캔버스는 축척 1 · y 위 + */
const move = (controller: InputController, x: number, y: number) =>
controller.handleMouseMove({ clientX: x, clientY: CANVAS_HEIGHT - y } as MouseEvent);
const clickAt = (controller: InputController, x: number, y: number) => {
move(controller, x, y);
controller.handleMouseUp({
button: 0,
clientX: x,
clientY: CANVAS_HEIGHT - y,
target: null,
preventDefault: () => {},
stopPropagation: () => {},
} as unknown as MouseEvent);
};
const lines = () =>
getEntities()
.filter((entity) => entity.getType() === "Line")
.map((entity) => (entity as unknown as { segment: Seg }).segment);
const expectXy = (point: Xy, x: number, y: number) => {
expect(point.x).toBeCloseTo(x, 3);
expect(point.y).toBeCloseTo(y, 3);
};
let controller: InputController;
beforeEach(() => {
vi.mocked(toast.error).mockClear();
controller = initApplication();
setEntities([], true);
setSelectedEntityIds([]);
});
describe("331-1 각도 고정 → 길이", () => {
it("L · 0,0 · <30 · 100 → (86.603, 50) · <90 · 50 → (86.603, 100)", () => {
type(controller, "l");
type(controller, "0,0");
move(controller, 500, 500); // 커서 방향과 무관하게 고정 각도로
type(controller, "<30");
expect(getAngleLock()).toBe(30);
type(controller, "100");
expect(getAngleLock()).toBeNull(); // 한 점만
type(controller, "<90");
type(controller, "50");
const drawn = lines();
expect(drawn).toHaveLength(2);
expectXy(drawn[0].start, 0, 0);
expectXy(drawn[0].end, 86.603, 50);
expectXy(drawn[1].end, 86.603, 100);
});
it("고정 없이 숫자 = 마우스 방향", () => {
type(controller, "l");
type(controller, "0,0");
move(controller, 0, 300);
type(controller, "100");
expectXy(lines()[0].end, 0, 100);
});
it("고정 중 클릭 = 고정 방향 위로 내림 · Esc · 새 명령이면 풂", () => {
type(controller, "l");
type(controller, "0,0");
type(controller, "<0");
clickAt(controller, 60, 25); // 가이드에서 먼 자리(스냅 안 붙게)
expectXy(lines()[0].end, 60, 0);
type(controller, "<45");
key(controller, "Escape");
expect(getAngleLock()).toBeNull();
type(controller, "<45");
runCommandInput("CIRCLE");
expect(getAngleLock()).toBeNull();
});
it("음수 · .5 숫자 · 음수 각도", () => {
type(controller, "l");
type(controller, "0,0");
type(controller, "<-90");
type(controller, ".5");
expectXy(lines()[0].end, 0, -0.5);
type(controller, "<0");
type(controller, "-10");
expectXy(lines()[1].end, -10, -0.5);
});
it("PLINE 첫 점에 숫자 · @x,y → 무시 · 도구 살아 있음 · 알림 0", () => {
type(controller, "pline");
type(controller, "100");
type(controller, "@10,0");
const snapshot = getActiveToolActor()?.getSnapshot();
expect(snapshot?.status).toBe("active");
expect(snapshot?.value).toBe("STEP_0");
expect(toast.error).not.toHaveBeenCalled();
type(controller, "0,0");
type(controller, "<0");
type(controller, "100");
expect(getActiveToolActor()?.getSnapshot()?.context.values).toHaveLength(2);
});
});