stellavault 0.2.0 → 0.2.1

package/packages/graph/src/components/Graph3D.tsx

@@ -1,230 +0,0 @@
-// R3F Canvas — 클릭 = mousedown/up 거리 판정 (R3F 이벤트 회피)
-
-import { Canvas, useFrame } from '@react-three/fiber';
-import { OrbitControls } from '@react-three/drei';
-import { useRef, useEffect, useState, useCallback } from 'react';
-import * as THREE from 'three';
-import { GraphNodes } from './GraphNodes.js';
-import { GraphEdges } from './GraphEdges.js';
-import { StarField } from './StarField.js';
-import { Tooltip } from './Tooltip.js';
-import { PulseAnimator } from './PulseParticle.js';
-import { ConstellationView } from './ConstellationView.js';
-import { useGraphStore } from '../stores/graph-store.js';
-import { useLayout } from '../hooks/useLayout.js';
-import { usePulse } from '../hooks/usePulse.js';
-import { useDecay } from '../hooks/useDecay.js';
-import { useKeyboardNav } from '../hooks/useKeyboardNav.js';
-
-function Scene() {
-  useLayout();
-  useDecay(); // 감쇠 데이터 로딩
-  useKeyboardNav(); // 키보드 그래프 탐색
-  const { startPulse, stopPulse } = usePulse();
-  const hoveredNodeId = useGraphStore((s) => s.hoveredNodeId);
-  const selectedNodeId = useGraphStore((s) => s.selectedNodeId);
-  const highlightedNodeIds = useGraphStore((s) => s.highlightedNodeIds);
-  const theme = useGraphStore((s) => s.theme);
-  const isLight = theme === 'light';
-  const controlsRef = useRef<any>(null);
-
-  const shouldSpin = !hoveredNodeId && !selectedNodeId && highlightedNodeIds.size === 0;
-
-  useFrame(() => {
-    const c = controlsRef.current;
-    if (!c) return;
-    // 녹화 중 자동 회전 (빠르게) 또는 기본 idle 회전
-    const autoRotate = (window as any).__sv_autoRotate;
-    if (autoRotate) {
-      c.setAzimuthalAngle(c.getAzimuthalAngle() + 0.008);
-      c.update();
-    } else if (shouldSpin) {
-      c.setAzimuthalAngle(c.getAzimuthalAngle() + 0.001);
-      c.update();
-    }
-  });
-
-  (window as any).__sv_pulse = startPulse;
-  (window as any).__sv_stopPulse = stopPulse;
-  (window as any).__sv_controls = controlsRef;
-
-  return (
-    <>
-      <StarField />
-      <GraphEdges />
-      <GraphNodes />
-      <ConstellationView />
-      <PulseAnimator />
-      <Tooltip />
-      <ambientLight intensity={isLight ? 0.8 : 0.4} />
-      <pointLight position={[400, 300, 400]} intensity={isLight ? 0.3 : 0.6} color={isLight ? '#4466cc' : '#6688ff'} />
-      <pointLight position={[-300, -200, 300]} intensity={isLight ? 0.2 : 0.4} color={isLight ? '#cc4466' : '#ff6688'} />
-      <OrbitControls
-        ref={controlsRef}
-        enableDamping
-        dampingFactor={0.08}
-        minDistance={50}
-        maxDistance={2000}
-        rotateSpeed={0.5}
-      />
-    </>
-  );
-}
-
-export function Graph3D() {
-  const downPos = useRef<{ x: number; y: number } | null>(null);
-
-  useEffect(() => {
-    function onDown(e: MouseEvent) {
-      // 캔버스 위에서만 동작 (사이드패널 클릭 무시)
-      const canvas = document.querySelector('canvas');
-      if (!canvas?.contains(e.target as Node)) return;
-      downPos.current = { x: e.clientX, y: e.clientY };
-    }
-
-    function onUp(e: MouseEvent) {
-      if (!downPos.current) return;
-      const dx = e.clientX - downPos.current.x;
-      const dy = e.clientY - downPos.current.y;
-      const dist = Math.sqrt(dx * dx + dy * dy);
-      downPos.current = null;
-
-      if (dist > 5) return;
-
-      const state = useGraphStore.getState();
-      // 클릭 시 항상 pulse 중단
-      (window as any).__sv_stopPulse?.();
-
-      if (state.hoveredNodeId) {
-        if (state.selectedNodeId === state.hoveredNodeId) {
-          state.selectNode(null);
-        } else {
-          state.selectNode(state.hoveredNodeId);
-        }
-      } else {
-        // 빈 곳 클릭 → 전부 해제 + 카메라 원점
-        state.selectNode(null);
-        if (state.highlightedNodeIds.size > 0) {
-          state.setHighlightedNodes([]);
-          (window as any).__sv_resetCamera?.();
-        }
-      }
-    }
-
-    function resetCamera() {
-      const controls = (window as any).__sv_controls?.current;
-      if (!controls) return;
-      const startTarget = controls.target.clone();
-      const startPos = controls.object.position.clone();
-      const endTarget = new THREE.Vector3(0, 0, 0);
-      const endPos = new THREE.Vector3(0, 100, 600);
-      let t = 0;
-      function animate() {
-        t += 0.03;
-        if (t > 1) t = 1;
-        const ease = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
-        controls.target.lerpVectors(startTarget, endTarget, ease);
-        controls.object.position.lerpVectors(startPos, endPos, ease);
-        controls.update();
-        if (t < 1) requestAnimationFrame(animate);
-      }
-      requestAnimationFrame(animate);
-    }
-    (window as any).__sv_resetCamera = resetCamera;
-
-    function onKeyDown(e: KeyboardEvent) {
-      const target = e.target as HTMLElement;
-      const isInput = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
-
-      if (e.key === 'Escape') {
-        const s = useGraphStore.getState();
-        s.selectNode(null);
-        s.setHighlightedNodes([]);
-        s.setSearchQuery('');
-        s.setPulseParticlePos(null);
-        (window as any).__sv_stopPulse?.();
-        resetCamera();
-        // 검색창 blur
-        (document.querySelector('input') as HTMLElement)?.blur();
-        return;
-      }
-
-      if (isInput) return; // 입력 중에는 단축키 무시
-
-      // / → 검색 포커스
-      if (e.key === '/') {
-        e.preventDefault();
-        const input = document.querySelector('input[placeholder*="Search"]') as HTMLElement;
-        input?.focus();
-        return;
-      }
-
-      // Space → 선택된 노드 Explore
-      if (e.key === ' ') {
-        e.preventDefault();
-        const s = useGraphStore.getState();
-        if (s.selectedNodeId) {
-          s.selectNode(null);
-          setTimeout(() => (window as any).__sv_pulse?.(s.selectedNodeId), 100);
-        }
-        return;
-      }
-
-      // Tab → 다음 하이라이트 노드로 이동 (순환)
-      if (e.key === 'Tab') {
-        e.preventDefault();
-        const s = useGraphStore.getState();
-        const highlighted = [...s.highlightedNodeIds];
-        if (highlighted.length === 0) return;
-
-        const currentIdx = s.selectedNodeId ? highlighted.indexOf(s.selectedNodeId) : -1;
-        const nextIdx = (currentIdx + 1) % highlighted.length;
-        const nextId = highlighted[nextIdx];
-        s.selectNode(nextId);
-
-        // 카메라 이동
-        const node = s.nodes.find(n => n.id === nextId);
-        if (node?.position) {
-          const controls = (window as any).__sv_controls?.current;
-          if (controls) {
-            const tgt = new THREE.Vector3(...node.position);
-            controls.target.copy(tgt);
-            controls.update();
-          }
-        }
-        return;
-      }
-
-      // T → 테마 토글
-      if (e.key === 't' || e.key === 'T') {
-        useGraphStore.getState().toggleTheme();
-        return;
-      }
-    }
-
-    window.addEventListener('mousedown', onDown);
-    window.addEventListener('mouseup', onUp);
-    window.addEventListener('keydown', onKeyDown);
-    return () => {
-      window.removeEventListener('mousedown', onDown);
-      window.removeEventListener('mouseup', onUp);
-      window.removeEventListener('keydown', onKeyDown);
-    };
-  }, []);
-
-  const theme = useGraphStore((s) => s.theme);
-  const bgStyle = theme === 'dark'
-    ? 'radial-gradient(ellipse at center, #0d1028 0%, #080c1a 40%, #040610 100%)'
-    : 'radial-gradient(ellipse at center, #ffffff 0%, #f4f4f6 50%, #ebebef 100%)';
-
-  return (
-    <Canvas
-      camera={{ position: [0, 100, 600], fov: 55, near: 1, far: 5000 }}
-      raycaster={{ params: { Points: { threshold: 8 } } } as any}
-      style={{ background: bgStyle }}
-      gl={{ antialias: true, alpha: true, preserveDrawingBuffer: true }}
-    >
-      <Scene />
-    </Canvas>
-  );
-}

package/packages/graph/src/components/GraphEdges.tsx

@@ -1,100 +0,0 @@
-// 시냅스 엣지 — hover 강조 + pulse + 줌아웃 시 페이드
-
-import { useMemo, useRef } from 'react';
-import { useFrame } from '@react-three/fiber';
-import * as THREE from 'three';
-import { useGraphStore } from '../stores/graph-store.js';
-
-export function GraphEdges() {
-  const nodes = useGraphStore((s) => s.nodes);
-  const edges = useGraphStore((s) => s.edges);
-  const hoveredNodeId = useGraphStore((s) => s.hoveredNodeId);
-  const selectedNodeId = useGraphStore((s) => s.selectedNodeId);
-  const highlightedNodeIds = useGraphStore((s) => s.highlightedNodeIds);
-
-  const theme = useGraphStore((s) => s.theme);
-  const isLight = theme === 'light';
-  const activeId = hoveredNodeId || selectedNodeId;
-  const hasPulse = highlightedNodeIds.size > 0;
-
-  const dimMatRef = useRef<THREE.LineBasicMaterial>(null);
-
-  const { litGeo, dimGeo } = useMemo(() => {
-    if (edges.length === 0 || nodes.length === 0) return { litGeo: null, dimGeo: null };
-
-    const nodeMap = new Map(nodes.map((n) => [n.id, n.position ?? [0, 0, 0]]));
-    const litPos: number[] = [];
-    const dimPos: number[] = [];
-
-    for (const edge of edges) {
-      const src = nodeMap.get(edge.source);
-      const tgt = nodeMap.get(edge.target);
-      if (!src || !tgt) continue;
-
-      let isLit = false;
-      if (hasPulse) {
-        // 하이라이트: 양쪽 다 하이라이트된 엣지만 밝게
-        isLit = highlightedNodeIds.has(edge.source) && highlightedNodeIds.has(edge.target);
-      } else if (activeId) {
-        isLit = edge.source === activeId || edge.target === activeId;
-      }
-
-      const arr = isLit ? litPos : dimPos;
-      arr.push(src[0], src[1], src[2], tgt[0], tgt[1], tgt[2]);
-    }
-
-    const make = (p: number[]) => {
-      if (p.length === 0) return null;
-      const g = new THREE.BufferGeometry();
-      g.setAttribute('position', new THREE.Float32BufferAttribute(p, 3));
-      return g;
-    };
-
-    return { litGeo: make(litPos), dimGeo: make(dimPos) };
-  }, [nodes, edges, activeId, hasPulse, highlightedNodeIds]);
-
-  const hasInteraction = hasPulse || !!activeId;
-
-  // 줌아웃 시 엣지 페이드아웃 (별자리 뷰와 충돌 방지)
-  useFrame(({ camera }) => {
-    if (!dimMatRef.current) return;
-    const dist = camera.position.length();
-    let fade = 1;
-    if (dist > 500) fade = 0;
-    else if (dist > 300) fade = 1 - (dist - 300) / 200;
-
-    const baseOpacity = isLight
-      ? (hasInteraction ? 0.03 : 0.35)
-      : (hasInteraction ? 0.005 : 0.1);
-    dimMatRef.current.opacity = baseOpacity * fade;
-  });
-
-  return (
-    <group>
-      {dimGeo && (
-        <lineSegments geometry={dimGeo}>
-          <lineBasicMaterial
-            ref={dimMatRef}
-            color={isLight ? '#8890a0' : '#4466aa'}
-            transparent
-            opacity={isLight ? 0.3 : 0.1}
-            depthWrite={false}
-            blending={isLight ? THREE.NormalBlending : THREE.AdditiveBlending}
-          />
-        </lineSegments>
-      )}
-
-      {litGeo && (
-        <lineSegments geometry={litGeo}>
-          <lineBasicMaterial
-            color={isLight ? (hasPulse ? '#4466cc' : '#3355aa') : (hasPulse ? '#66ddff' : '#6699cc')}
-            transparent
-            opacity={isLight ? (hasPulse ? 0.5 : 0.6) : (hasPulse ? 0.08 : 0.2)}
-            depthWrite={false}
-            blending={isLight ? THREE.NormalBlending : THREE.AdditiveBlending}
-          />
-        </lineSegments>
-      )}
-    </group>
-  );
-}