도면 편집기 v2 — 연결선 / 정렬·분배 / 스마트 가이드

개요

CrownyDoc v3 Stage 2의 첫 단계. /Users/ef/CrownyDoc/도면/도면편집기.html (기존 1195줄)를 OmniGraffle 수준으로 고도화. 1911줄로 확장.

작업 내용

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

• 도구 패널에 "연결선 (C)" 버튼 추가
• 도형 클릭 → 도형 클릭으로 연결선 자동 생성
• 도형 호버 시 N/S/E/W 포트 점 표시, 가장 가까운 포트에 연결
• 연결선 종류: 직선 / 꺾은선(맨해튼) / 곡선(베지어 S자) / 베지어 — 속성 패널에서 선택
• 화살표: none / end / start / both — SVG marker-end/start 사용
• 도형 이동/리사이즈 시 연결선 자동 추적 (시작·끝 도형 좌표 실시간 계산)
• 연결선 중앙 라벨, 선색·선두께·점선(dasharray) 속성
• 연결선 클릭 선택, 속성 패널에서 편집, 삭제 가능
• 도형 삭제 시 관련 연결선 자동 정리
• 연결 도구 임시선: 첫 클릭 후 마우스 이동시 점선 미리보기

2. 정렬 / 분배 (Shift+A 전체선택)

• 좌측 패널에 정렬 버튼 그룹 (3×2 그리드): 왼쪽/수평중앙/오른쪽 + 위/수직중앙/아래
• 수평분배 / 수직분배 (3개 이상 선택 시)
• Shift+클릭으로 다중 선택, Shift+A로 전체 선택
• 다중선택 상태에서 정렬 실행 → 좌표 계산 후 배치
• 분배: 총 범위에서 각 도형 크기 빼고 균등 간격 배분

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

• 드래그 중 다른 도형의 가장자리/중앙과 6px 이내 근접 시 빨간 점선 가이드 표시
• 가이드 기준선: 왼쪽/오른쪽/중앙(X) + 위/아래/중앙(Y) + 교차 정렬 5가지
• 마우스 업 시 가이드 즉시 제거
• 오브젝트 스냅: 8px 이내 다른 도형 가장자리/중앙에 자동 붙음
• 스마트 가이드 / 오브젝트 스냅 토글 체크박스 추가

4. 기타 개선

• --ink, --line, --soft, --fill, --fill2 CSS 변수 추가 (견적서·제안서 통일)
• 실행취소(Ctrl+Z) 스택에 연결선도 포함
• 도형 목록 패널에 연결선 항목 표시 (→ 아이콘)
• 다중선택 시 선택 핸들 레이어에 파란 점선 외곽선 표시
• SVG defs에 arrow-end / arrow-start 마커 정의

관련 파일

• /Users/ef/CrownyDoc/도면/도면편집기.html — 메인 파일 (1911줄)
• /Users/ef/CrownyDoc/도면/data/교회LED평면도.json — 기존 데이터 (연결 배열 없으면 빈 배열로 처리)
• /Users/ef/CrownyDoc/lib/cdf-v2-spec.md — DiagramConnector 스키마 기준

검증 결과

• 파일 로드: OK
• 외부 의존성: 0건 (w3.org xmlns 제외)
• 줄수: 1195 → 1911

알려진 한계

• 베지어 컨트롤 핸들 편집 미구현 (현재는 자동 S자 2점 베지어)
• 연결선 꺾은선(맨해튼) 라우팅은 수평 우선 고정 (수직 우선 선택 미구현)
• 포트 좌표는 5개 고정 (N/S/E/W/center), 커스텀 포트 위치 미지원
• 다중 선택 드래그 이동 시 스마트 가이드는 첫 번째 선택 도형 기준

잔여 이슈

• 베지어 컨트롤 핸들 드래그 (Stage 2 다음 단계)
• 연결선 라우팅 옵션 (수직 우선 등)
• 도면 출력(도면출력.html)에서 연결선 렌더링 연동