v0.2.64

v0.2.64 — 엣지 종류별 패턴 이미지 (EdgeKind 매핑)

변경 사항

• *사용자 요청**: "에셋 이미지 설정 시, 엣지 종류에 따른 이미지를 설정할 수 있게 해줘. 인과관계 엣지는 A 이미지, 임포트 엣지는 B 이미지 등. 상세하게 설정 가능하도록".

v0.2.62 의 한계

• edge-pattern 1 개 kind 만 — 모든 엣지가 같은 sticker 패턴을 공유.
• import / cloud-read / http-post 등 엣지 종류가 시각적으로 구분 안 됨.

v0.2.64 — 엣지 종류별 매핑 (byEdgeKind)

• *viewportAssetStore.ts 확장**:
• 신규 타입 EdgeKindAssetEntry { edgeKind: EdgeKind; url: string; label?: string }.
• 신규 state byEdgeKind: Map<EdgeKind, EdgeKindAssetEntry> — kind / extension 과 독립 영속.
• 신규 actions: upsertEdgeKind, removeEdgeKind.
• 신규 storage key: vw.viewport-assets-edge.v1 (분리 영속 — kind/extension/edgeKind 독립 진화).
• 신규 helper resolveEdgePattern(edgeKind) — 우선순위:

1. byEdgeKind.get(kind) — 사용자가 해당 종류에 별도 이미지 등록한 경우.
2. byKind.get('edge-pattern') — 글로벌 fallback.
3. null — 매핑 없음, sticker 안 그림.

• clear() 가 byEdgeKind 도 함께 초기화.
• 신규 그룹 메타 EDGE_KIND_GROUPS — UI 카테고리 분할 (코드 참조 / 구조 / HTTP / 데이터 입출력 / 클라우드·DB·함수 / 웹 마크업·도메인 / 문서·외부 / 에이전트·저장소).
• 신규 fallback 라벨 매핑 EDGE_KIND_FALLBACK_LABELS — i18n 누락 시 영문 표시 보장.
• *SettingsModal.tsx AssetsTab 신규 섹션 "엣지 종류별 패턴 이미지"**:
• 그룹별 접힘/펼침 (collapsible) — 8 카테고리 × 평균 3~7 kinds. 기본 모두 접힘 (UI 길이 절약).
• 그룹 헤더에 n/m 등록됨 카운트 표시.
• 각 엣지 kind 행: 이미지 미리보기 + 스타일 시각화 (color line + dash) + i18n 라벨 + kind 모노스페이스 + 업로드 / 삭제 버튼.
• 글로벌 "엣지 패턴 (반복 배열) — 전체 fallback" 라벨로 명확화 (기존 'edge-pattern' kind).
• "엣지 종류 이미지 모두 초기화" 버튼 — 엣지 종류만 일괄 제거 (확장자/kind 보존).
• *Graph2D.tsx EdgePatternOverlay 업그레이드**:
• props 타입 확장 — edges: Array<{ source, target, id, data?: { kind?: EdgeKind } }>.
• resolveViewportAsset('edge-pattern') 단일 URL → 각 엣지마다 resolveEdgePattern(e.data?.kind) 호출.
• items 배열에 url 필드 포함 — 종류 별로 다른 sticker 한 SVG 안에서 공존.
• 매핑 없는 엣지(글로벌 fallback 도 없음)는 sticker 안 그림 (continue).
• 전체 items 가 비어있으면 SVG 자체 mount 안 함 (성능).

변경 파일

• src/store/viewportAssetStore.ts — byEdgeKind, actions, storage, resolveEdgePattern, EDGE_KIND_GROUPS, EDGE_KIND_FALLBACK_LABELS.
• src/components/Layout/SettingsModal.tsx — AssetsTab 에 엣지 종류별 섹션 추가 (collapsible groups + edge style preview).
• src/components/Visualizer2D/Graph2D.tsx — EdgePatternOverlay 가 종류별 URL resolve. resolveEdgePattern 추가 import.
• package.json 0.2.63 → 0.2.64.

검증

• npx tsc --noEmit exit=0.
• npm run build 성공 — renderer 9.43s, 번들 3,503.63 kB.

사용 시나리오

• 설정 → 에셋 → "엣지 종류별 패턴 이미지" → 그룹 펼치기 → "import" 에 화살표 이미지 업로드.
• 다른 그룹 "HTTP 호출" → "http-post" 에 다른 이미지 업로드.
• 뷰포트에 import 엣지에는 화살표 sticker, POST 엣지에는 별도 sticker — 종류별로 다른 시각.
• 어느 종류든 미등록 → 글로벌 "edge-pattern" (전체 fallback) 사용. 글로벌도 없으면 sticker 없음 (엣지 라인만 표시).

핸드오프 메모

• 엣지 종류는 총 ~30 개 (shared/types.ts EdgeKind). 8 카테고리 그룹으로 분할 — UI 가 너무 길어지지 않도록.
• WebGL 2D 엔진 (WebGLGraph2D.tsx) 은 아직 EdgePatternOverlay 미적용 — 별도 iteration 에서 InstancedMesh 텍스처 atlas 로 구현 가능.
• 3D 엔진의 BezierConnections 는 색/굵기/dash 만 사용 — 향후 sprite 또는 Path Texture 로 종류별 패턴 확장 검토.
• --

📦 GitHub 릴리스 노트: v0.2.64