도면편집기 v2.1 — Stage 2 기능 추가

개요

CrownyDoc 도면 모듈 Stage 2. OmniGraffle급 기능 5종을 도면편집기에 추가했다.

무엇을 했는지

1. 도형 라이브러리 (도면/도형라이브러리.js 신규, 594줄)

- 81개 인라인 SVG 도형, 7개 카테고리 - 기본(18) / 화살표(9) / 플로우차트(14) / UML(10) / 네트워크(11) / ER(7) / 건축(12) - 카테고리 필터 + 텍스트 검색 + 클릭 추가 (우측 슬라이드 패널) - 각 도형: {id, name, category, svg, defaultWidth, defaultHeight} 형식

1. 레이어 시스템 (우측 패널 "레이어" 섹션)

- 추가/삭제/이름변경 가능 - 👁 가시성 토글 → SVG display:none 처리 - 🔒 잠금 토글 → 클릭/이동/리사이즈 불가 (cursor:not-allowed) - DiagramLayer {이름, 가시, 잠금} 객체 배열로 저장 - 이전 string[] 레이어 데이터 역호환 로드 처리

1. 그룹/언그룹 (Ctrl+G / Ctrl+Shift+G)

- 다중 선택 → 그룹 생성 (종류:'group', 자식들:[id...]) - 그룹 선택 후 Ctrl+Shift+G → 자식 ID 다중선택으로 복원 - bbox는 자식 도형 전체를 포함하는 최소 직사각형으로 자동 계산

1. 회전·미러 (속성 패널)

- 회전 슬라이더 (0~360°) + 숫자 입력 연동 - 미러 X / 미러 Y 버튼 (토글) - SVG transform="rotate(N cx cy) scale(±1, ±1)" 방식

1. SVG / PNG 내보내기

- 편집기: 헤더 "SVG" / "PNG" 버튼 - 출력 페이지: "PNG 저장" 버튼 추가 - PNG: XMLSerializer → Blob → Image.onload → Canvas → toBlob 순수 브라우저 API - 선택 핸들·가이드선은 내보내기 시 임시 제거 후 복원

관련 파일 경로

• /Users/ef/CrownyDoc/도면/도면편집기.html — 2424줄 (기존 1911줄 → +513)
• /Users/ef/CrownyDoc/도면/도형라이브러리.js — 신규 594줄
• /Users/ef/CrownyDoc/도면/도면출력.html — 430줄 (기존 397줄 → +33)
• /Users/ef/CrownyDoc/lib/cdf-v2-spec.md — DiagramShape/DiagramLayer 스키마 갱신

스키마 변경 (cdf-v2-spec.md)

• DiagramShape.종류 — "svg라이브러리", "group" 추가
• DiagramShape — 회전?, 미러X?, 미러Y?, 자식들?, 라이브러리ID? 필드 추가
• 레이어목록: DiagramLayer[] — string[] → {이름,가시,잠금}[] (역호환 포함)

알려진 한계

• 그룹은 bbox 표시만 함 — 자식 도형은 개별 SVG요소로 그대로 유지 (중첩 그룹 없음)
• 미러 + 회전 동시 적용 시 SVG transform 순서에 따른 미러 기준 이동 있음
• 베지어 컨트롤 핸들 (선택사항 항목)은 미구현
• PNG 내보내기: SVG 내부 foreignObject (범례) 는 일부 브라우저에서 렌더링 안 됨