feat(B07): CAD를 AutoCAD 명령 체계로 재구성한다 (조사표 1·2·3·5절)

저장소 사고로 잃은 4개 커밋(38eb7cd4·b8a11756·281528bf·f60b488d)의 작업물을 하나로 다시 담았다. 내용은 동일하다. ■ 구조 - commands/: 명령 정의(id·AutoCAD 별칭·글리프·도구/즉시실행)를 단일 소스로 두고 리본·명령행·단축키가 모두 이 레지스트리를 읽는다. tools/tool.consts.ts 폐지. - ribbon/: 탭→패널→명령 데이터(ribbon.config.ts)와 범용 렌더러 분리. AutoCAD 배치(홈·삽입·주석·뷰·출력)와 패널 확장(▾)을 따른다. - tools/factories/sequence-tool.ts: 점·숫자·문자·객체·선택 단계를 선언하면 xstate 머신을 만들어 주는 공장. 명령당 170줄 보일러플레이트 제거. - helpers/geometry/: 3점 호·정다각형·타원·스플라인·구름형·평행이동·해치 스캔선· 점렬 샘플링 등 상태 없는 순수 함수. - Toolbar 483줄을 QuickAccessBar/Ribbon/InspectorPanel/StatusBar/CommandLine/ ViewControls/PropertiesEditor/QuickProperties로 분해. ■ 명령 (조사표 기준) - 1절 그리기 21건, 2절 수정 27건, 3절 도면층·특성·그룹·유틸리티 39건 전부 반영. - 5절 주석 34건 중 26건 반영(문자·치수 16종·지시선·표·구름형·주석 축척). - HatchEntity 추가(solid·pattern·cross·gradient) + JSON 왕복, Layer에 색·선가중치· 선종류·동결·투명도 필드 추가, 그리기 루프가 동결·숨김·투명도를 반영. ■ 화면 실측에서 고친 결함 - 명령행 포커스 상태에서 ENTER가 도구로 가지 않던 문제 - 명령행 문자 입력이 접두사가 같은 명령으로 실행되던 문제 - 명령이 끝나도 입력을 계속 먹던 문제(점 입력 명령만 반복, 나머지는 선택 도구 복귀) - 시퀀스 단계 인덱스 오사용 9건 + 단계 값 종류 검사 추가 - 해치 내부를 클릭해도 선택되지 않던 문제 미반영 8건(맞춤법 검사·꺾기 치수·치수 끊기/재연관/검사 치수·기하공차·지시선 수집· 축척 리스트 편집)은 조사표 `반영` 열과 PLAN.md에 사유를 적었다.
2026-08-30 01:34:13 +09:00
parent 60bbe89edb
commit ea9d9685be
88 changed files with 8052 additions and 850 deletions
@@ -0,0 +1,149 @@
+/** 그리기 명령 — 폴리선·호·다각형·타원·스플라인·점 (조사표 1절) */
+import { CircleEntity } from '../../entities/CircleEntity';
+import type { Entity } from '../../entities/Entity';
+import {
+	arcThroughThreePoints,
+	ellipsePoints,
+	regularPolygonPoints,
+	splinePoints,
+} from '../../helpers/geometry/shape-points';
+import { addEntities, getActiveLayerId } from '../../state';
+import { Tool } from '../../tools';
+import { arcEntity, lineEntity, pointEntity, polyLineEntity, styled } from '../factories/entity-factory';
+import { createSequenceTool } from '../factories/sequence-tool';
+
+export const plineToolStateMachine = createSequenceTool({
+	tool: Tool.PLINE,
+	steps: [
+		{ kind: 'point', instructions: '폴리선의 시작점을 지정하십시오.' },
+		{ kind: 'point', instructions: '다음 점을 지정하십시오. ENTER로 종료합니다.' },
+	],
+	repeatLastStep: true,
+	preview: (input) => {
+		const preview = polyLineEntity([...input.points(), input.cursor]);
+		return preview ? [preview] : [];
+	},
+	commit: (input) => {
+		const polyline = polyLineEntity(input.points());
+		if (polyline) addEntities([polyline], true);
+	},
+});
+
+export const arcToolStateMachine = createSequenceTool({
+	tool: Tool.ARC,
+	steps: [
+		{ kind: 'point', instructions: '호의 시작점을 지정하십시오.' },
+		{ kind: 'point', instructions: '호가 지나갈 두 번째 점을 지정하십시오.' },
+		{ kind: 'point', instructions: '호의 끝점을 지정하십시오.' },
+	],
+	preview: (input) => {
+		const points = input.points();
+		if (points.length === 1) return [lineEntity(points[0], input.cursor)];
+		if (points.length === 2) {
+			const definition = arcThroughThreePoints(points[0], points[1], input.cursor);
+			return definition ? [arcEntity(definition)] : [lineEntity(points[0], input.cursor)];
+		}
+		return [];
+	},
+	commit: (input) => {
+		const [start, through, end] = input.points();
+		const definition = arcThroughThreePoints(start, through, end);
+		// 세 점이 일직선이면 호가 성립하지 않으므로 선으로 대체한다
+		addEntities([definition ? arcEntity(definition) : lineEntity(start, end)], true);
+	},
+});
+
+export const polygonToolStateMachine = createSequenceTool({
+	tool: Tool.POLYGON,
+	steps: [
+		{ kind: 'number', instructions: '면의 수를 입력하십시오 <6>.', defaultValue: 6 },
+		{ kind: 'point', instructions: '다각형의 중심을 지정하십시오.' },
+		{ kind: 'point', instructions: '꼭짓점을 지정하십시오 (중심에서의 반지름).' },
+	],
+	preview: (input) => {
+		const points = input.points();
+		if (points.length !== 1) return [];
+		const polygon = polyLineEntity(regularPolygonPoints(points[0], input.cursor, input.number(0)));
+		return polygon ? [polygon] : [];
+	},
+	commit: (input) => {
+		const [center, vertex] = input.points();
+		const polygon = polyLineEntity(regularPolygonPoints(center, vertex, input.number(0)));
+		if (polygon) addEntities([polygon], true);
+	},
+});
+
+export const ellipseToolStateMachine = createSequenceTool({
+	tool: Tool.ELLIPSE,
+	steps: [
+		{ kind: 'point', instructions: '타원의 중심을 지정하십시오.' },
+		{ kind: 'point', instructions: '장축의 끝점을 지정하십시오.' },
+		{ kind: 'point', instructions: '단축 거리를 지정하십시오.' },
+	],
+	preview: (input) => {
+		const points = input.points();
+		if (points.length === 1) return [lineEntity(points[0], input.cursor)];
+		if (points.length === 2) {
+			const minor = points[0].distanceTo(input.cursor)[0];
+			const ellipse = polyLineEntity(ellipsePoints(points[0], points[1], minor));
+			return ellipse ? [ellipse] : [];
+		}
+		return [];
+	},
+	commit: (input) => {
+		const [center, majorPoint, minorPoint] = input.points();
+		const minorRadius = center.distanceTo(minorPoint)[0];
+		const ellipse = polyLineEntity(ellipsePoints(center, majorPoint, minorRadius));
+		if (ellipse) addEntities([ellipse], true);
+	},
+});
+
+export const splineToolStateMachine = createSequenceTool({
+	tool: Tool.SPLINE,
+	steps: [
+		{ kind: 'point', instructions: '스플라인의 첫 점을 지정하십시오.' },
+		{ kind: 'point', instructions: '다음 점을 지정하십시오. ENTER로 종료합니다.' },
+	],
+	repeatLastStep: true,
+	preview: (input) => {
+		const preview = polyLineEntity(splinePoints([...input.points(), input.cursor]));
+		return preview ? [preview] : [];
+	},
+	commit: (input) => {
+		const spline = polyLineEntity(splinePoints(input.points()));
+		if (spline) addEntities([spline], true);
+	},
+});
+
+export const pointToolStateMachine = createSequenceTool({
+	tool: Tool.POINT,
+	steps: [{ kind: 'point', instructions: '점의 위치를 지정하십시오.' }],
+	preview: (input) => [pointEntity(input.cursor)],
+	commit: (input) => {
+		addEntities([pointEntity(input.point(0))], true);
+	},
+});
+
+/** 도넛 — 안쪽·바깥쪽 지름을 받아 동심원 두 개를 놓는다 */
+export const donutToolStateMachine = createSequenceTool({
+	tool: Tool.DONUT,
+	steps: [
+		{ kind: 'number', instructions: '도넛의 내부 지름을 입력하십시오 <1>.', defaultValue: 1 },
+		{ kind: 'number', instructions: '도넛의 외부 지름을 입력하십시오 <2>.', defaultValue: 2 },
+		{ kind: 'point', instructions: '도넛의 중심을 지정하십시오.' },
+	],
+	preview: (input) => donutEntities(input.number(0), input.number(1), input.cursor),
+	commit: (input) => {
+		addEntities(donutEntities(input.number(0), input.number(1), input.point(2)), true);
+	},
+});
+
+function donutEntities(innerDiameter: number, outerDiameter: number, center: Parameters<typeof pointEntity>[0]): Entity[] {
+	const circles: Entity[] = [];
+	for (const diameter of [innerDiameter, outerDiameter]) {
+		if (diameter > 0) {
+			circles.push(styled(new CircleEntity(getActiveLayerId(), center, diameter / 2)));
+		}
+	}
+	return circles;
+}
@@ -0,0 +1,142 @@
+/** 구성선·광선·다중선·와이프아웃 (조사표 1절 후반) */
+import { Point } from '@flatten-js/core';
+import { toast } from 'react-toastify';
+import type { Entity } from '../../entities/Entity';
+import { getMlineElements, getMlineSpacing, setMlineStyle } from '../../commands/draw-settings';
+import { offsetPolylinePoints } from '../../helpers/geometry/shape-points';
+import { addEntities, getScreenCanvasDrawController } from '../../state';
+import { Tool } from '../../tools';
+import { hatchEntity, lineEntity, polyLineEntity } from '../factories/entity-factory';
+import { createSequenceTool } from '../factories/sequence-tool';
+
+/**
+ * 구성선은 원래 무한하지만, 무한 선은 경계상자를 망가뜨려 [범위 줌]을 못 쓰게 만든다.
+ * 현재 화면 대각선의 20배로 그어 화면 안에서는 무한선처럼 보이게 한다.
+ */
+function constructionLength(): number {
+	const controller = getScreenCanvasDrawController();
+	const size = controller.getCanvasSize();
+	const scale = controller.getScreenScale() || 1;
+	return (Math.hypot(size.x, size.y) / scale) * 20;
+}
+
+function extendFrom(base: Point, through: Point, bothWays: boolean): [Point, Point] {
+	const dx = through.x - base.x;
+	const dy = through.y - base.y;
+	const length = Math.hypot(dx, dy) || 1;
+	const reach = constructionLength();
+	const forward = new Point(base.x + (dx / length) * reach, base.y + (dy / length) * reach);
+	const backward = bothWays
+		? new Point(base.x - (dx / length) * reach, base.y - (dy / length) * reach)
+		: base;
+	return [backward, forward];
+}
+
+export const xlineToolStateMachine = createSequenceTool({
+	tool: Tool.XLINE,
+	steps: [
+		{ kind: 'point', instructions: '구성선이 지날 점을 지정하십시오.' },
+		{ kind: 'point', instructions: '방향을 지정하십시오.' },
+	],
+	preview: (input) => {
+		const points = input.points();
+		if (points.length !== 1) return [];
+		const [start, end] = extendFrom(points[0], input.cursor, true);
+		return [lineEntity(start, end)];
+	},
+	commit: (input) => {
+		const [base, through] = input.points();
+		const [start, end] = extendFrom(base, through, true);
+		addEntities([lineEntity(start, end)], true);
+	},
+});
+
+export const rayToolStateMachine = createSequenceTool({
+	tool: Tool.RAY,
+	steps: [
+		{ kind: 'point', instructions: '광선의 시작점을 지정하십시오.' },
+		{ kind: 'point', instructions: '통과점을 지정하십시오.' },
+	],
+	preview: (input) => {
+		const points = input.points();
+		if (points.length !== 1) return [];
+		const [start, end] = extendFrom(points[0], input.cursor, false);
+		return [lineEntity(start, end)];
+	},
+	commit: (input) => {
+		const [base, through] = input.points();
+		const [start, end] = extendFrom(base, through, false);
+		addEntities([lineEntity(start, end)], true);
+	},
+});
+
+/** 다중선 — 중심선을 기준으로 MLSTYLE의 요소 수·간격만큼 평행선을 만든다 */
+function mlineEntities(points: Point[]): Entity[] {
+	if (points.length < 2) return [];
+	const elements = getMlineElements();
+	const spacing = getMlineSpacing();
+	const result: Entity[] = [];
+	for (let index = 0; index < elements; index++) {
+		const offset = (index - (elements - 1) / 2) * spacing;
+		const line = polyLineEntity(offsetPolylinePoints(points, offset));
+		if (line) result.push(line);
+	}
+	return result;
+}
+
+export const mlineToolStateMachine = createSequenceTool({
+	tool: Tool.MLINE,
+	steps: [
+		{ kind: 'point', instructions: '다중선의 시작점을 지정하십시오.' },
+		{ kind: 'point', instructions: '다음 점을 지정하십시오. ENTER로 종료합니다.' },
+	],
+	repeatLastStep: true,
+	preview: (input) => mlineEntities([...input.points(), input.cursor]),
+	commit: (input) => {
+		const entities = mlineEntities(input.points());
+		if (entities.length) addEntities(entities, true);
+	},
+});
+
+export const mlstyleToolStateMachine = createSequenceTool({
+	tool: Tool.MLSTYLE,
+	helpers: false,
+	steps: [
+		{ kind: 'number', instructions: '다중선 요소 수를 입력하십시오 <2>.', defaultValue: 2 },
+		{ kind: 'number', instructions: '요소 간격을 입력하십시오 <1>.', defaultValue: 1 },
+	],
+	commit: (input) => {
+		setMlineStyle(input.number(0), input.number(1));
+		toast.success(`다중선 스타일: ${getMlineElements()}줄, 간격 ${getMlineSpacing()}`);
+	},
+});
+
+/** 캔버스 배경색 — 와이프아웃은 이 색으로 뒤 객체를 가린다 */
+function canvasBackgroundColor(): string {
+	const value = getComputedStyle(document.documentElement).getPropertyValue('--cad-canvas').trim();
+	return value || '#1e1e1e';
+}
+
+export const wipeoutToolStateMachine = createSequenceTool({
+	tool: Tool.WIPEOUT,
+	steps: [
+		{ kind: 'point', instructions: '와이프아웃 경계의 첫 점을 지정하십시오.' },
+		{ kind: 'point', instructions: '다음 점을 지정하십시오. ENTER로 닫습니다.' },
+	],
+	repeatLastStep: true,
+	preview: (input) => {
+		const preview = polyLineEntity([...input.points(), input.cursor]);
+		return preview ? [preview] : [];
+	},
+	commit: (input) => {
+		const points = input.points();
+		if (points.length < 3) return;
+		const mask = hatchEntity([...points, points[0].clone()], {
+			style: 'solid',
+			color: canvasBackgroundColor(),
+		});
+		mask.lineColor = canvasBackgroundColor();
+		// 가리개는 뒤 객체를 덮어야 하므로 가장 나중에 그려지도록 목록 끝에 넣는다
+		addEntities([mask], true);
+	},
+});
@@ -0,0 +1,41 @@
+/** 등분(DIVIDE)·길이분할(MEASURE) — 객체를 자르지 않고 점만 놓는다 */
+import { toast } from 'react-toastify';
+import { dividePoints, measurePoints, sampleEntityPoints } from '../../helpers/geometry/sample-entity';
+import { addEntities } from '../../state';
+import { Tool } from '../../tools';
+import { pointEntity } from '../factories/entity-factory';
+import { createSequenceTool } from '../factories/sequence-tool';
+
+export const divideToolStateMachine = createSequenceTool({
+	tool: Tool.DIVIDE,
+	helpers: false,
+	steps: [
+		{ kind: 'entity', instructions: '등분할 객체를 선택하십시오.' },
+		{ kind: 'number', instructions: '세그먼트 수를 입력하십시오 <4>.', defaultValue: 4 },
+	],
+	commit: (input) => {
+		const points = dividePoints(sampleEntityPoints(input.entity(0)), input.number(1));
+		if (!points.length) {
+			toast.warn('등분할 수 없는 객체입니다.');
+			return;
+		}
+		addEntities(points.map(pointEntity), true);
+	},
+});
+
+export const measureLengthToolStateMachine = createSequenceTool({
+	tool: Tool.MEASURE_LENGTH,
+	helpers: false,
+	steps: [
+		{ kind: 'entity', instructions: '길이로 분할할 객체를 선택하십시오.' },
+		{ kind: 'number', instructions: '세그먼트 길이를 입력하십시오 <10>.', defaultValue: 10 },
+	],
+	commit: (input) => {
+		const points = measurePoints(sampleEntityPoints(input.entity(0)), input.number(1));
+		if (!points.length) {
+			toast.warn('지정한 길이로 나눌 수 없습니다.');
+			return;
+		}
+		addEntities(points.map(pointEntity), true);
+	},
+});
@@ -0,0 +1,113 @@
+/** 해치·그라데이션·경계·영역 — 선택한 객체가 이루는 닫힌 경계를 채우거나 뽑는다 */
+import type { Point } from '@flatten-js/core';
+import { toast } from 'react-toastify';
+import {
+	autoHatchSpacing,
+	getHatchAngle,
+	getHatchSpacing,
+	getHatchStyle,
+} from '../../commands/draw-settings';
+import { entitiesToLoop } from '../../helpers/geometry/entity-loop';
+import { addEntities, getActiveLineColor, setSelectedEntityIds } from '../../state';
+import { Tool } from '../../tools';
+import { hatchEntity, polyLineEntity } from '../factories/entity-factory';
+import { createSequenceTool, type SequenceInput } from '../factories/sequence-tool';
+
+/** 선택 객체에서 닫힌 경계를 얻는다. 못 얻으면 안내 후 빈 배열 */
+function loopFromSelection(input: SequenceInput): Point[] {
+	const loop = entitiesToLoop(input.entities(0));
+	if (loop.length < 3) {
+		toast.warn('닫힌 경계를 만들 객체를 선택하십시오.');
+		return [];
+	}
+	return loop;
+}
+
+function boundingSize(points: Point[]): { width: number; height: number } {
+	const xs = points.map((point) => point.x);
+	const ys = points.map((point) => point.y);
+	return { width: Math.max(...xs) - Math.min(...xs), height: Math.max(...ys) - Math.min(...ys) };
+}
+
+export const hatchToolStateMachine = createSequenceTool({
+	tool: Tool.HATCH,
+	helpers: false,
+	steps: [
+		{ kind: 'selection', instructions: '해치를 채울 경계 객체를 선택한 뒤 ENTER를 누르십시오.' },
+	],
+	commit: (input) => {
+		const loop = loopFromSelection(input);
+		if (!loop.length) return;
+		const { width, height } = boundingSize(loop);
+		addEntities(
+			[
+				hatchEntity(loop, {
+					style: getHatchStyle(),
+					color: getActiveLineColor(),
+					spacing: getHatchSpacing() ?? autoHatchSpacing(width, height),
+					angle: getHatchAngle(),
+				}),
+			],
+			true
+		);
+		setSelectedEntityIds([]);
+	},
+});
+
+export const gradientToolStateMachine = createSequenceTool({
+	tool: Tool.GRADIENT,
+	helpers: false,
+	steps: [
+		{ kind: 'selection', instructions: '그라데이션을 넣을 경계 객체를 선택한 뒤 ENTER.' },
+	],
+	commit: (input) => {
+		const loop = loopFromSelection(input);
+		if (!loop.length) return;
+		addEntities(
+			[
+				hatchEntity(loop, {
+					style: 'gradient',
+					color: getActiveLineColor(),
+					color2: '#000000',
+				}),
+			],
+			true
+		);
+		setSelectedEntityIds([]);
+	},
+});
+
+export const boundaryToolStateMachine = createSequenceTool({
+	tool: Tool.BOUNDARY,
+	helpers: false,
+	steps: [
+		{ kind: 'selection', instructions: '경계를 뽑을 객체를 선택한 뒤 ENTER를 누르십시오.' },
+	],
+	commit: (input) => {
+		const loop = loopFromSelection(input);
+		if (!loop.length) return;
+		const boundary = polyLineEntity(loop);
+		if (boundary) {
+			addEntities([boundary], true);
+			toast.success('닫힌 폴리선 경계를 만들었습니다.');
+		}
+		setSelectedEntityIds([]);
+	},
+});
+
+export const regionToolStateMachine = createSequenceTool({
+	tool: Tool.REGION,
+	helpers: false,
+	steps: [{ kind: 'selection', instructions: '영역으로 만들 객체를 선택한 뒤 ENTER.' }],
+	commit: (input) => {
+		const loop = loopFromSelection(input);
+		if (!loop.length) return;
+		const region = polyLineEntity(loop);
+		if (region) {
+			addEntities([region], true);
+			// 2D 웹 CAD에는 별도 영역 객체가 없다 — 닫힌 폴리선이 같은 역할을 한다
+			toast.info('영역은 닫힌 폴리선으로 작성했습니다.');
+		}
+		setSelectedEntityIds([]);
+	},
+});