feat(B07): 그립으로 고치고, 음수·극좌표를 받고, 편집분을 잃지 않는다

조사표 8~13절 검토에서 "기본 기능"으로 고른 것을 반영한다. - 좌표 입력: 절대·상대 좌표가 양수만 받아 `@-100,50`을 거부했다. 부호를 허용하고 극좌표 `@거리<각도`·`거리<각도`를 더했다. `-`·`+`가 확대·축소 단축키로 먼저 잡혀 음수의 첫 글자를 먹고 있어 그 두 단축키를 뺐다(줌은 휠·뷰 막대·명령). - 그립 편집: 선택 객체에 그립을 그리고 집어서 옮긴다. 선 끝점·중점, 폴리선 정점, 사각형 모서리, 원 중심·반지름, 문자·점 기준점. 폴리선은 세그먼트 중점을 끌면 정점이 늘고 정점 위 Ctrl+클릭이면 준다. 형상 필드가 private이라 공개 생성자로 다시 만들어 바꿔 끼우고 id·도면층·색·그룹을 물려받는다. - 자동 백업·복구: 5초 디바운스로 복구 전용 키에 저장하고, 시작할 때 백업이 있으면 눌러서 되살리는 안내를 띄운다. 저장(QSAVE)에 성공하면 백업을 지운다. - 선택 순환: 같은 자리를 다시 클릭하면 겹친 후보를 차례로 돌린다. - 상태막대: `극좌표 추적` 버튼이 `직교`와 같은 onClick이라 같은 일을 하고 있었다. 각각 45°·90°를 켜고 끄도록 고치고, 스냅 추적 토글과 F3·F7·F8·F10을 붙였다. - 문자 굵게·기울임을 캔버스·SVG·JSON·스타일 패널에 연결했다. - 조사표: 이미 되어 있던 5건의 표기를 정정하고, 출력·내보내기(9절)는 결재창 이후 PDF·DXF·DWG로 반영할 것이라 보류(P)로 구분해 사유를 남겼다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-30 14:43:46 +09:00
parent 3fccf8278b
commit e599884888
22 changed files with 779 additions and 149 deletions
@@ -0,0 +1,115 @@
+/**
+ * 그립 편집 도구 — 선택 도구에서 그립을 집으면 켜진다.
+ * 클릭 한 번으로 그 그립을 옮긴다 (AutoCAD처럼 끌지 않고 집어서 놓는 방식).
+ */
+import type { Point } from '@flatten-js/core';
+import { Actor, assign, createMachine } from 'xstate';
+import type { Entity } from '../entities/Entity';
+import { getPointFromEvent } from '../helpers/get-point-from-event';
+import { type Grip, applyGrip } from '../helpers/grips';
+import {
+	getEntities,
+	setActiveToolActor,
+	setAngleGuideOriginPoint,
+	setEntities,
+	setGhostHelperEntities,
+	setShouldDrawHelpers,
+} from '../state';
+import { Tool } from '../tools';
+import { selectToolStateMachine } from './select-tool';
+import { ActorEvent, type PointInputEvent, type StateEvent, type ToolContext } from './tool.types';
+
+let editedEntity: Entity | null = null;
+let editedGrip: Grip | null = null;
+
+/** 선택 도구가 그립을 집었을 때 부른다 */
+export function startGripEdit(entity: Entity, grip: Grip): void {
+	editedEntity = entity;
+	editedGrip = grip;
+	setActiveToolActor(new Actor(gripEditToolStateMachine));
+}
+
+/** 편집 중인 객체 — 그립을 그릴 때 원본 대신 미리보기를 보여주려고 읽는다 */
+export const getGripEditTargetId = (): string | null => editedEntity?.id ?? null;
+
+function previewAt(point: Point): Entity | null {
+	if (!editedEntity || !editedGrip) return null;
+	return applyGrip(editedEntity, editedGrip, point);
+}
+
+export enum GripEditState {
+	INIT = 'INIT',
+	WAITING_FOR_TARGET_POINT = 'WAITING_FOR_TARGET_POINT',
+}
+
+export enum GripEditAction {
+	INIT_GRIP_EDIT_TOOL = 'INIT_GRIP_EDIT_TOOL',
+	DRAW_TEMP_GRIP_EDIT = 'DRAW_TEMP_GRIP_EDIT',
+	APPLY_GRIP_EDIT = 'APPLY_GRIP_EDIT',
+	SWITCH_TO_SELECT_TOOL = 'SWITCH_TO_SELECT_TOOL',
+}
+
+export const gripEditToolStateMachine = createMachine(
+	{
+		types: {} as { context: ToolContext; events: StateEvent },
+		context: { type: Tool.GRIP_EDIT },
+		initial: GripEditState.INIT,
+		states: {
+			[GripEditState.INIT]: {
+				always: {
+					actions: GripEditAction.INIT_GRIP_EDIT_TOOL,
+					target: GripEditState.WAITING_FOR_TARGET_POINT,
+				},
+			},
+			[GripEditState.WAITING_FOR_TARGET_POINT]: {
+				description: '그립을 옮길 위치를 지정한다',
+				meta: { instructions: '그립을 옮길 위치를 지정하십시오' },
+				on: {
+					[ActorEvent.DRAW]: { actions: GripEditAction.DRAW_TEMP_GRIP_EDIT },
+					[ActorEvent.MOUSE_CLICK]: {
+						actions: [GripEditAction.APPLY_GRIP_EDIT, GripEditAction.SWITCH_TO_SELECT_TOOL],
+					},
+					[ActorEvent.ABSOLUTE_POINT_INPUT]: {
+						actions: [GripEditAction.APPLY_GRIP_EDIT, GripEditAction.SWITCH_TO_SELECT_TOOL],
+					},
+					[ActorEvent.RELATIVE_POINT_INPUT]: {
+						actions: [GripEditAction.APPLY_GRIP_EDIT, GripEditAction.SWITCH_TO_SELECT_TOOL],
+					},
+					[ActorEvent.ESC]: { actions: GripEditAction.SWITCH_TO_SELECT_TOOL },
+				},
+			},
+		},
+	},
+	{
+		actions: {
+			[GripEditAction.INIT_GRIP_EDIT_TOOL]: assign(() => {
+				setShouldDrawHelpers(true);
+				setGhostHelperEntities([]);
+				setAngleGuideOriginPoint(editedGrip?.point ?? null);
+				return {};
+			}),
+			[GripEditAction.DRAW_TEMP_GRIP_EDIT]: ({ event }) => {
+				const point = getPointFromEvent(editedGrip?.point ?? null, event as PointInputEvent);
+				const preview = previewAt(point);
+				setGhostHelperEntities(preview ? [preview] : []);
+			},
+			[GripEditAction.APPLY_GRIP_EDIT]: ({ event }) => {
+				const point = getPointFromEvent(editedGrip?.point ?? null, event as PointInputEvent);
+				const edited = previewAt(point);
+				if (!edited || !editedEntity) return;
+				const targetId = editedEntity.id;
+				setEntities(
+					getEntities().map((entity) => (entity.id === targetId ? edited : entity)),
+					true
+				);
+			},
+			[GripEditAction.SWITCH_TO_SELECT_TOOL]: () => {
+				editedEntity = null;
+				editedGrip = null;
+				setGhostHelperEntities([]);
+				setAngleGuideOriginPoint(null);
+				setActiveToolActor(new Actor(selectToolStateMachine));
+			},
+		},
+	}
+);
@@ -1,5 +1,6 @@
-import type {Box, Point, Polygon} from '@flatten-js/core';
-import {compact} from 'es-toolkit';
+import type { Box, Point, Polygon } from '@flatten-js/core';
+import { compact } from 'es-toolkit';
+import { toast } from 'react-toastify';
 import {
 	EPSILON,
 	HIGHLIGHT_ENTITY_DISTANCE,
@@ -8,32 +9,81 @@ import {
 	SELECTION_RECTANGLE_STYLE,
 	SELECTION_RECTANGLE_WIDTH,
 } from '../App.consts';
-import {RectangleEntity} from '../entities/RectangleEntity';
-import {toast} from 'react-toastify';
-import {findClosestEntity} from '../helpers/find-closest-entity';
+import type { Entity } from '../entities/Entity';
+import { RectangleEntity } from '../entities/RectangleEntity';
+import { pointDistance } from '../helpers/distance-between-points';
+import { expandSelectionWithGroups } from '../helpers/entity-groups';
+import { findEntitiesWithinDistance } from '../helpers/find-closest-entity';
+import { findGripAt, removePolylineVertex } from '../helpers/grips';
 import {
 	getActiveLayerId,
 	getEntities,
 	getLayers,
+	getSelectedEntities,
 	getSelectedEntityIds,
 	isEntitySelected,
+	setEntities,
 	setGhostHelperEntities,
 	setSelectedEntityIds,
 } from '../state';
-import type {SelectContext} from './select-tool';
-import type {MouseClickEvent} from './tool.types';
-import {expandSelectionWithGroups} from '../helpers/entity-groups';
+import { startGripEdit } from './grip-edit-tool';
+import type { SelectContext } from './select-tool';
+import type { MouseClickEvent } from './tool.types';
+
+/** 선택 순환 — 같은 자리를 다시 클릭하면 겹친 후보를 차례로 돌린다 */
+let lastPickPoint: Point | null = null;
+let pickCycleIndex = 0;
+
+function pickEntityAt(worldPoint: Point): Entity | null {
+	const candidates = findEntitiesWithinDistance(
+		worldPoint,
+		getEntities(),
+		HIGHLIGHT_ENTITY_DISTANCE
+	);
+	if (!candidates.length) {
+		lastPickPoint = null;
+		return null;
+	}
+	const samePlace =
+		!!lastPickPoint && pointDistance(lastPickPoint, worldPoint) < HIGHLIGHT_ENTITY_DISTANCE;
+	pickCycleIndex = samePlace ? (pickCycleIndex + 1) % candidates.length : 0;
+	lastPickPoint = worldPoint;
+	return candidates[pickCycleIndex];
+}

 export function handleFirstSelectionPoint(
 	context: SelectContext,
 	event: MouseClickEvent
 ): SelectContext {
-	const closestEntityInfo = findClosestEntity(event.worldMouseLocation, getEntities());
+	// 선택된 객체의 그립이 먼저다 — 집으면 그립 편집으로 넘어간다
+	const gripHit = findGripAt(
+		getSelectedEntities(),
+		event.worldMouseLocation,
+		HIGHLIGHT_ENTITY_DISTANCE
+	);
+	if (gripHit) {
+		if (event.holdingCtrl) {
+			// Ctrl+클릭 => 폴리선 정점 제거 (다기능 그립)
+			const trimmed = removePolylineVertex(gripHit.entity, gripHit.grip);
+			if (trimmed) {
+				setEntities(
+					getEntities().map((entity) => (entity.id === trimmed.id ? trimmed : entity)),
+					true
+				);
+				return { ...context, startPoint: null };
+			}
+		} else {
+			startGripEdit(gripHit.entity, gripHit.grip);
+			return { ...context, startPoint: null };
+		}
+	}
+
+	const pickedEntity = pickEntityAt(event.worldMouseLocation);

 	// Mouse is close to entity and is not dragging a rectangle
-	if (closestEntityInfo && closestEntityInfo.distance < HIGHLIGHT_ENTITY_DISTANCE) {
+	if (pickedEntity) {
 		// Select the entity close to the mouse
-		const closestEntity = closestEntityInfo.entity;
+		const closestEntity = pickedEntity;
 		if (!event.holdingCtrl && !event.holdingShift) {
 			// 그룹으로 묶인 객체는 하나만 집어도 함께 선택된다 (GROUP)
 			setSelectedEntityIds(expandSelectionWithGroups([closestEntity.id]));