Stage 2 완료 — 도면 편집기 OmniGraffle급 고도화 (1단계)

개요

v3 마스터 플랜 Stage 2 첫 단계 완료. 기본 SVG 드로잉만 있던 도면편집기에 OmniGraffle의 핵심 3대 기능(연결선·정렬·스마트가이드)을 이식. 1195줄 → 1911줄 (60% 증가).

추가된 기능

1. 연결선(Connector) 도구 — 단축키 C

• 도형 1 클릭 → 도형 2 클릭으로 자동 라우팅 연결선 생성
• 종류: 직선 / 꺾은선(맨해튼) / 곡선(S자 베지어) — 속성 패널에서 변경
• 화살표 끝점: none / end / start / both
• 도형 이동·리사이즈 시 연결선 자동 추적 (시작도형/끝도형 좌표 갱신)
• 호버 시 N/S/E/W 포트 점 표시
• 첫 클릭 후 임시 점선 미리보기 (마우스 따라감)
• 라벨 텍스트 (연결선 중앙)
• 도형 삭제 시 관련 연결선 자동 정리

2. 정렬·분배

좌측 도구 패널에 6 정렬 + 2 분배 버튼

왼쪽 / 중앙 / 오른쪽 (수평 정렬)

위 / 중앙 / 아래 (수직 정렬)

수평 분배 / 수직 분배 (3개 이상 선택 시)

Shift+클릭 다중 선택 / Shift+A 전체 선택

3. 스마트 가이드 + 오브젝트 스냅

• 드래그 중 6px 이내 정렬선 탐지 → 빨간 점선 가이드 표시
• 오브젝트 스냅: 8px 이내 다른 도형 가장자리/중앙에 자동 흡착
• 마우스 업 시 가이드 즉시 제거

데이터 모델

교회LED평면도.json 등의 데이터 스키마에 연결 배열 추가 (CDF v2 스펙 DiagramConnector 인터페이스 준수):

json"연결": [{
  "id": "conn-1",
  "시작도형id": "led-1", "끝도형id": "scaffold-1",
  "시작포트": "n", "끝포트": "s",
  "종류": "직선",
  "화살표": "end",
  "선색": "#3a6ee8", "선두께": 2,
  "라벨": "지지"
}]

검증

항목	결과
줄수	1195 → 1911 (+716, +60%)
외부 의존성	0건 (CDN/웹폰트 X)
/도면 라우트	HTTP 200
/도면/도면편집기.html	HTTP 200, 75 KB
connector 등장	59회 (도구/이벤트/속성 패널)
정렬·분배 함수	20회
스마트 가이드	2회 (gen + render)
Shift 다중선택	5회
기존 기능 보존	도형 추가/이동/리사이즈/속성패널/BOM/견적서변환/키보드 모두 유지

알려진 한계 (다음 사이클)

• 베지어 컨트롤 핸들 편집 미구현 (현재 S자 자동 곡선만)
• 맨해튼 꺾은선 라우팅 수평 우선 고정 (장애물 회피 없음)
• 다중 선택 드래그 시 스마트 가이드는 기준 도형 1개만 추적
• 도형 라이브러리(UML/네트워크/ER) 미추가 — 사각/선/원/텍스트만
• 그룹/언그룹/회전/미러 미구현
• 레이어 시스템 미구현 (z-order만 있고 가시성 토글 없음)

다음 (Stage 2 후속)

• 도형 라이브러리 확장 (화살표·플로우·UML 박스·DB 심볼 50+개)
• 레이어 패널 (가시성/잠금)
• 그룹/언그룹 + 회전·미러
• 베지어 핸들 편집
• SVG/PNG 내보내기 (현재 SVG 다운로드만)

이후 Stage 3 어댑터(트랙1·2 통합)로 진행.

관련 파일

• 도면/도면편집기.html (1911줄, +716)
• lib/cdf-v2-spec.md DiagramConnector 스펙 (Stage 0)
• src/core/synapse.ts connector 시냅스 (Stage 0)

영속화

• INVENTORY.md Stage 2 진행→완료(1단계) 갱신 필요
• 다음 세션에 Stage 2 후속 작업 + Stage 3 시작