stellavault 0.2.0 → 0.3.0

package/packages/graph/src/hooks/useKeyboardNav.ts

@@ -1,122 +0,0 @@
-// Keyboard-Only Graph Navigation (F-A18)
-// Tab: cycle nodes, Arrow keys: traverse connections, Enter: select, Esc: deselect
-
-import { useEffect, useCallback } from 'react';
-import { useGraphStore } from '../stores/graph-store.js';
-
-export function useKeyboardNav() {
-  const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    // Don't interfere with input fields
-    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
-
-    const state = useGraphStore.getState();
-    const { nodes, edges, selectedNodeId, selectNode, hoverNode } = state;
-    if (nodes.length === 0) return;
-
-    switch (e.key) {
-      case 'Tab': {
-        e.preventDefault();
-        // Cycle through nodes
-        const currentIdx = selectedNodeId
-          ? nodes.findIndex(n => n.id === selectedNodeId)
-          : -1;
-        const nextIdx = e.shiftKey
-          ? (currentIdx <= 0 ? nodes.length - 1 : currentIdx - 1)
-          : (currentIdx + 1) % nodes.length;
-        selectNode(nodes[nextIdx].id);
-        focusNode(nodes[nextIdx].id);
-        break;
-      }
-
-      case 'ArrowRight':
-      case 'ArrowDown': {
-        e.preventDefault();
-        if (!selectedNodeId) { selectNode(nodes[0].id); focusNode(nodes[0].id); break; }
-        // Navigate to next connected node
-        const neighbors = getNeighbors(selectedNodeId, edges);
-        if (neighbors.length > 0) {
-          const currentNeighborIdx = neighbors.indexOf(selectedNodeId);
-          const nextNeighbor = neighbors[(currentNeighborIdx + 1) % neighbors.length];
-          selectNode(nextNeighbor);
-          focusNode(nextNeighbor);
-        }
-        break;
-      }
-
-      case 'ArrowLeft':
-      case 'ArrowUp': {
-        e.preventDefault();
-        if (!selectedNodeId) break;
-        const neighbors = getNeighbors(selectedNodeId, edges);
-        if (neighbors.length > 0) {
-          const currentNeighborIdx = neighbors.indexOf(selectedNodeId);
-          const prevNeighbor = neighbors[(currentNeighborIdx - 1 + neighbors.length) % neighbors.length];
-          selectNode(prevNeighbor);
-          focusNode(prevNeighbor);
-        }
-        break;
-      }
-
-      case 'Enter': {
-        if (selectedNodeId) {
-          // Trigger node detail view (already handled by selectNode)
-          hoverNode(null);
-        }
-        break;
-      }
-
-      case 'Escape': {
-        selectNode(null);
-        hoverNode(null);
-        (window as any).__sv_resetCamera?.();
-        break;
-      }
-
-      case '/': {
-        e.preventDefault();
-        // Focus search bar
-        const searchInput = document.querySelector('input[placeholder*="Search"]') as HTMLInputElement;
-        searchInput?.focus();
-        break;
-      }
-
-      case '?': {
-        if (!e.shiftKey) break;
-        // Show keyboard shortcuts help
-        console.log('Keyboard shortcuts: Tab=cycle, Arrow=traverse, Enter=select, Esc=reset, /=search');
-        break;
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [handleKeyDown]);
-}
-
-function getNeighbors(nodeId: string, edges: Array<{ source: string; target: string }>): string[] {
-  const neighbors = new Set<string>();
-  for (const e of edges) {
-    if (e.source === nodeId) neighbors.add(e.target);
-    if (e.target === nodeId) neighbors.add(e.source);
-  }
-  return [...neighbors];
-}
-
-function focusNode(nodeId: string) {
-  // Trigger camera focus via the same mechanism as search
-  const state = useGraphStore.getState();
-  const node = state.nodes.find(n => n.id === nodeId);
-  if (!node?.position) return;
-
-  const controls = (window as any).__sv_controls?.current;
-  if (!controls) return;
-
-  const THREE = (window as any).__THREE__;
-  if (!THREE) return;
-
-  const target = new THREE.Vector3(...node.position);
-  controls.target.copy(target);
-  controls.update();
-}

package/packages/graph/src/hooks/useLayout.ts

@@ -1,45 +0,0 @@
-// Force layout — 첫 로드 시 1회만 실행, 모드 전환 시 재실행 안 함
-
-import { useEffect, useRef } from 'react';
-import { useGraphStore } from '../stores/graph-store.js';
-
-export function useLayout() {
-  const ranRef = useRef(false);
-  const nodes = useGraphStore((s) => s.nodes);
-  const edges = useGraphStore((s) => s.edges);
-  const clusters = useGraphStore((s) => s.clusters);
-  const setGraphData = useGraphStore((s) => s.setGraphData);
-
-  useEffect(() => {
-    // 첫 로드에만 실행
-    if (nodes.length === 0 || ranRef.current) return;
-    ranRef.current = true;
-
-    const worker = new Worker(
-      new URL('../lib/layout.worker.ts', import.meta.url),
-      { type: 'module' },
-    );
-
-    worker.onmessage = (e) => {
-      const { type, positions } = e.data;
-      if (type === 'progress' || type === 'done') {
-        // 위치만 업데이트, 현재 클러스터 유지
-        const currentState = useGraphStore.getState();
-        const updated = currentState.nodes.map((n, i) => ({
-          ...n,
-          position: positions[i] as [number, number, number],
-        }));
-        setGraphData(updated, currentState.edges, currentState.clusters);
-      }
-      if (type === 'done') worker.terminate();
-    };
-
-    worker.postMessage({
-      type: 'init',
-      nodes: nodes.map(n => ({ id: n.id, clusterId: n.clusterId, size: n.size })),
-      edges,
-    });
-
-    return () => worker.terminate();
-  }, [nodes.length > 0]);
-}

package/packages/graph/src/hooks/useMotion.ts

@@ -1,120 +0,0 @@
-// Design Ref: §2.3 — 제스처 → OrbitControls 매핑
-
-import { useRef, useCallback, useEffect } from 'react';
-import { createMotionController, type MotionController } from '../lib/motion-controller.js';
-import type { GestureResult } from '../lib/gesture-detector.js';
-import { useGraphStore } from '../stores/graph-store.js';
-
-export interface UseMotionReturn {
-  start: () => Promise<void>;
-  stop: () => void;
-  isActive: boolean;
-  videoRef: React.RefObject<HTMLVideoElement | null>;
-  currentGesture: React.RefObject<string>;
-}
-
-export function useMotion(controlsRef: React.RefObject<any>): UseMotionReturn {
-  const controllerRef = useRef<MotionController | null>(null);
-  const activeRef = useRef(false);
-  const videoRef = useRef<HTMLVideoElement | null>(null);
-  const currentGesture = useRef<string>('none');
-  const initialZoomRef = useRef<number | null>(null);
-  const pinchBaseRef = useRef<number>(0);
-
-  const handleGesture = useCallback((gesture: GestureResult) => {
-    const controls = controlsRef.current;
-    if (!controls) return;
-
-    currentGesture.current = gesture.type;
-    const sensitivity = 3;
-
-    switch (gesture.type) {
-      case 'rotate':
-        // 손 이동 → 회전
-        controls.setAzimuthalAngle(
-          controls.getAzimuthalAngle() - gesture.delta.x * sensitivity
-        );
-        controls.setPolarAngle(
-          Math.max(0.1, Math.min(Math.PI - 0.1,
-            controls.getPolarAngle() + gesture.delta.y * sensitivity
-          ))
-        );
-        controls.update();
-        break;
-
-      case 'pan': {
-        // 주먹 이동 → 패닝
-        const target = controls.target;
-        target.x -= gesture.delta.x * 500;
-        target.y += gesture.delta.y * 500;
-        controls.update();
-        break;
-      }
-
-      case 'zoom': {
-        // 핀치 거리 → 줌
-        if (pinchBaseRef.current === 0) pinchBaseRef.current = gesture.pinchDistance;
-        const zoomDelta = (gesture.pinchDistance - pinchBaseRef.current) * 2000;
-        const cam = controls.object;
-        if (cam) {
-          const dir = cam.position.clone().sub(controls.target).normalize();
-          cam.position.addScaledVector(dir, -zoomDelta);
-          pinchBaseRef.current = gesture.pinchDistance;
-        }
-        controls.update();
-        break;
-      }
-
-      case 'select': {
-        // 검지 포인팅 → 노드 호버 (화면 좌표로 변환)
-        // 간단 구현: 검지 위치를 hoveredNodeId로 매핑 (향후 raycast 개선)
-        break;
-      }
-
-      case 'reset': {
-        // 손 흔들기 → 초기 위치
-        const cam = controls.object;
-        if (cam) {
-          cam.position.set(0, 100, 600);
-          controls.target.set(0, 0, 0);
-          controls.update();
-        }
-        const state = useGraphStore.getState();
-        state.selectNode(null);
-        state.setHighlightedNodes([]);
-        break;
-      }
-    }
-
-    // 핀치 외 제스처에서 pinchBase 리셋
-    if (gesture.type !== 'zoom') pinchBaseRef.current = 0;
-  }, [controlsRef]);
-
-  const start = useCallback(async () => {
-    if (!controllerRef.current) {
-      controllerRef.current = createMotionController();
-    }
-    controllerRef.current.onGesture(handleGesture);
-    await controllerRef.current.start();
-    videoRef.current = controllerRef.current.getVideoElement();
-    activeRef.current = true;
-  }, [handleGesture]);
-
-  const stop = useCallback(() => {
-    controllerRef.current?.stop();
-    activeRef.current = false;
-    videoRef.current = null;
-    currentGesture.current = 'none';
-  }, []);
-
-  // 컴포넌트 언마운트 시 정리
-  useEffect(() => () => { controllerRef.current?.stop(); }, []);
-
-  return {
-    start,
-    stop,
-    get isActive() { return activeRef.current; },
-    videoRef,
-    currentGesture,
-  };
-}

package/packages/graph/src/hooks/usePulse.ts

@@ -1,58 +0,0 @@
-// 빛 입자 탐색 — 방문 순서만 계산, 실제 애니메이션은 PulseAnimator에서
-
-import { useRef, useCallback } from 'react';
-import { useGraphStore } from '../stores/graph-store.js';
-
-export interface PulseData {
-  visitOrder: string[];
-  positions: Map<string, [number, number, number]>;
-  running: boolean;
-}
-
-// Scene 내부 PulseAnimator가 읽을 수 있도록 전역 ref
-export let pulseData: PulseData = { visitOrder: [], positions: new Map(), running: false };
-
-export function usePulse() {
-  const startPulse = useCallback((startId: string) => {
-    const { edges, nodes } = useGraphStore.getState();
-
-    // BFS
-    const adj = new Map<string, string[]>();
-    for (const e of edges) {
-      if (!adj.has(e.source)) adj.set(e.source, []);
-      if (!adj.has(e.target)) adj.set(e.target, []);
-      adj.get(e.source)!.push(e.target);
-      adj.get(e.target)!.push(e.source);
-    }
-
-    const visited = new Set<string>();
-    const visitOrder: string[] = [];
-    const queue = [startId];
-    visited.add(startId);
-    while (queue.length > 0 && visitOrder.length < 50) {
-      const id = queue.shift()!;
-      visitOrder.push(id);
-      for (const nid of (adj.get(id) ?? [])) {
-        if (!visited.has(nid)) { visited.add(nid); queue.push(nid); }
-      }
-    }
-
-    const positions = new Map(nodes.map(n => [n.id, (n.position ?? [0, 0, 0]) as [number, number, number]]));
-
-    pulseData = { visitOrder, positions, running: true };
-
-    // 시작 노드 점등 (기존 하이라이트 유지하지 않고 pulse용으로 리셋)
-    useGraphStore.getState().setHighlightedNodes([startId]);
-    useGraphStore.getState().setPulseParticlePos(positions.get(startId) ?? [0, 0, 0]);
-    // 선택 유지 (노드 라벨이 사라지지 않도록)
-    useGraphStore.getState().selectNode(startId);
-  }, []);
-
-  const stopPulse = useCallback(() => {
-    pulseData = { visitOrder: [], positions: new Map(), running: false };
-    useGraphStore.getState().setHighlightedNodes([]);
-    useGraphStore.getState().setPulseParticlePos(null);
-  }, []);
-
-  return { startPulse, stopPulse };
-}

package/packages/graph/src/hooks/useSearch.ts

@@ -1,71 +0,0 @@
-// 검색 → API → 노드 하이라이트 + 첫 결과로 카메라 이동
-
-import { useCallback, useRef } from 'react';
-import * as THREE from 'three';
-import { fetchSearch } from '../api/client.js';
-import { useGraphStore } from '../stores/graph-store.js';
-
-function focusOnNode(nodeId: string) {
-  const state = useGraphStore.getState();
-  const node = state.nodes.find(n => n.id === nodeId);
-  if (!node?.position) return;
-
-  const controls = (window as any).__sv_controls?.current;
-  if (!controls) return;
-
-  const target = new THREE.Vector3(...node.position);
-  const startTarget = controls.target.clone();
-  const startPos = controls.object.position.clone();
-  const dir = startPos.clone().sub(target).normalize();
-  const endPos = target.clone().add(dir.multiplyScalar(250));
-
-  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, target, ease);
-    controls.object.position.lerpVectors(startPos, endPos, ease);
-    controls.update();
-    if (t < 1) requestAnimationFrame(animate);
-  }
-  requestAnimationFrame(animate);
-}
-
-export function useSearch() {
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const search = useCallback((query: string) => {
-    const { setSearchQuery, setHighlightedNodes } = useGraphStore.getState();
-    setSearchQuery(query);
-
-    if (!query.trim()) {
-      setHighlightedNodes([]);
-      return;
-    }
-
-    if (timerRef.current) clearTimeout(timerRef.current);
-    timerRef.current = setTimeout(async () => {
-      try {
-        const res = await fetchSearch(query, 20);
-        const ids = (res.results ?? []).map((r: any) => r.documentId);
-        useGraphStore.getState().setHighlightedNodes(ids);
-        if (ids.length > 0) useGraphStore.getState().addSearchHistory(query);
-
-        // 첫 번째 결과로 카메라 이동
-        if (ids.length > 0) focusOnNode(ids[0]);
-      } catch {
-        useGraphStore.getState().setHighlightedNodes([]);
-      }
-    }, 300);
-  }, []);
-
-  const clearSearch = useCallback(() => {
-    if (timerRef.current) clearTimeout(timerRef.current);
-    useGraphStore.getState().setSearchQuery('');
-    useGraphStore.getState().setHighlightedNodes([]);
-    (window as any).__sv_resetCamera?.();
-  }, []);
-
-  return { search, clearSearch };
-}

package/packages/graph/src/lib/constellation.ts

@@ -1,107 +0,0 @@
-// Design Ref: §3.1 — MST 별자리 생성
-// Prim's MST: 클러스터 내 노드를 최소 거리로 연결 → 자연스러운 별자리 형태
-
-interface Node {
-  id: string;
-  clusterId: number;
-  position?: [number, number, number];
-}
-
-interface Cluster {
-  id: number;
-  label: string;
-  color: string;
-}
-
-export interface ConstellationLine {
-  from: [number, number, number];
-  to: [number, number, number];
-  clusterId: number;
-}
-
-export interface ConstellationLabel {
-  position: [number, number, number];
-  text: string;
-  color: string;
-  clusterId: number;
-}
-
-export interface ConstellationData {
-  lines: ConstellationLine[];
-  labels: ConstellationLabel[];
-}
-
-export function buildConstellations(nodes: Node[], clusters: Cluster[]): ConstellationData {
-  const lines: ConstellationLine[] = [];
-  const labels: ConstellationLabel[] = [];
-
-  for (const cluster of clusters) {
-    const clusterNodes = nodes.filter(n => n.clusterId === cluster.id && n.position);
-    if (clusterNodes.length < 2) {
-      // 단일 노드 클러스터도 라벨은 표시
-      if (clusterNodes.length === 1 && clusterNodes[0].position) {
-        labels.push({
-          position: clusterNodes[0].position!,
-          text: cluster.label,
-          color: cluster.color,
-          clusterId: cluster.id,
-        });
-      }
-      continue;
-    }
-
-    // Prim's MST
-    const positions = clusterNodes.map(n => n.position!);
-    const n = positions.length;
-    const inMST = new Array(n).fill(false);
-    const minEdge = new Array(n).fill(Infinity);
-    const parent = new Array(n).fill(-1);
-    minEdge[0] = 0;
-
-    for (let iter = 0; iter < n; iter++) {
-      // 최소 비용 노드 선택
-      let u = -1;
-      for (let i = 0; i < n; i++) {
-        if (!inMST[i] && (u === -1 || minEdge[i] < minEdge[u])) u = i;
-      }
-      if (u === -1) break;
-      inMST[u] = true;
-
-      // 엣지 추가
-      if (parent[u] !== -1) {
-        lines.push({
-          from: positions[parent[u]],
-          to: positions[u],
-          clusterId: cluster.id,
-        });
-      }
-
-      // 인접 노드 업데이트
-      for (let v = 0; v < n; v++) {
-        if (inMST[v]) continue;
-        const d = dist3D(positions[u], positions[v]);
-        if (d < minEdge[v]) {
-          minEdge[v] = d;
-          parent[v] = u;
-        }
-      }
-    }
-
-    // 클러스터 중심에 라벨
-    const cx = positions.reduce((s, p) => s + p[0], 0) / n;
-    const cy = positions.reduce((s, p) => s + p[1], 0) / n + 20; // 약간 위
-    const cz = positions.reduce((s, p) => s + p[2], 0) / n;
-    labels.push({
-      position: [cx, cy, cz],
-      text: cluster.label,
-      color: cluster.color,
-      clusterId: cluster.id,
-    });
-  }
-
-  return { lines, labels };
-}
-
-function dist3D(a: [number, number, number], b: [number, number, number]): number {
-  return Math.sqrt((a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2 + (a[2] - b[2]) ** 2);
-}

package/packages/graph/src/lib/export-utils.ts

@@ -1,48 +0,0 @@
-// Design Ref: §6 — PNG/WebM 변환 유틸리티 (순수 함수)
-
-export function generateFilename(type: 'screenshot' | 'recording', extension: string): string {
-  const now = new Date();
-  const ts = now.toISOString().replace(/[:.]/g, '-').slice(0, 19);
-  return `stellavault-${type}-${ts}.${extension}`;
-}
-
-export function downloadBlob(blob: Blob, filename: string): void {
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = filename;
-  link.click();
-  URL.revokeObjectURL(url);
-}
-
-export function addWatermark(
-  canvas: HTMLCanvasElement,
-  text: string,
-): HTMLCanvasElement {
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return canvas;
-
-  ctx.save();
-  ctx.font = '14px monospace';
-  ctx.fillStyle = 'rgba(200, 200, 255, 0.4)';
-  ctx.textAlign = 'right';
-  ctx.textBaseline = 'bottom';
-  ctx.fillText(text, canvas.width - 16, canvas.height - 12);
-  ctx.restore();
-
-  return canvas;
-}
-
-export function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {
-  return new Promise((resolve, reject) => {
-    canvas.toBlob((blob) => {
-      if (blob) resolve(blob);
-      else reject(new Error('Failed to create blob from canvas'));
-    }, 'image/png');
-  });
-}
-
-export function isMediaRecorderSupported(): boolean {
-  return typeof MediaRecorder !== 'undefined' &&
-    MediaRecorder.isTypeSupported('video/webm');
-}

package/packages/graph/src/lib/gesture-detector.ts

@@ -1,123 +0,0 @@
-// Design Ref: §2.1 — 21 landmarks → 6 제스처 분류
-// 3프레임 안정화 + confidence threshold
-
-export type GestureType = 'rotate' | 'pan' | 'zoom' | 'select' | 'reset' | 'none';
-
-export interface GestureResult {
-  type: GestureType;
-  confidence: number;
-  position: { x: number; y: number };
-  delta: { x: number; y: number };
-  pinchDistance: number;
-}
-
-interface Landmark { x: number; y: number; z: number; }
-
-// 손가락 끝 인덱스
-const TIPS = [4, 8, 12, 16, 20]; // 엄지, 검지, 중지, 약지, 소지
-const PIPS = [3, 6, 10, 14, 18]; // 각 손가락 두 번째 관절
-
-// 이전 상태 (안정화용)
-let prevPosition = { x: 0.5, y: 0.5 };
-let gestureHistory: GestureType[] = [];
-let positionHistory: Array<{ x: number; y: number }> = [];
-
-export function detectGesture(landmarks: Landmark[]): GestureResult {
-  if (!landmarks || landmarks.length < 21) {
-    return { type: 'none', confidence: 0, position: prevPosition, delta: { x: 0, y: 0 }, pinchDistance: 1 };
-  }
-
-  // 손바닥 중심
-  const palm = landmarks[9]; // 중지 MCP
-  const position = { x: palm.x, y: palm.y };
-  const delta = { x: position.x - prevPosition.x, y: position.y - prevPosition.y };
-
-  // 핀치 거리 (엄지-검지)
-  const pinchDistance = dist2D(landmarks[4], landmarks[8]);
-
-  // 펼쳐진 손가락 수
-  const extended = countExtended(landmarks);
-
-  // 제스처 판별
-  let type: GestureType = 'none';
-  let confidence = 0.8;
-
-  if (pinchDistance < 0.06) {
-    type = 'zoom';
-    confidence = 0.9;
-  } else if (extended >= 4) {
-    type = 'rotate';
-    confidence = 0.85;
-  } else if (extended === 0) {
-    type = 'pan';
-    confidence = 0.85;
-  } else if (extended === 1 && isFingerExtended(landmarks, 1)) {
-    type = 'select';
-    confidence = 0.9;
-  }
-
-  // 흔들기 감지 (최근 10프레임 x 방향 전환 3회 이상)
-  positionHistory.push({ ...position });
-  if (positionHistory.length > 10) positionHistory.shift();
-  if (isWaving(positionHistory)) {
-    type = 'reset';
-    confidence = 0.85;
-  }
-
-  // confidence < 0.7 무시 (Design §2.4)
-  if (confidence < 0.7) {
-    type = 'none';
-    confidence = 0;
-  }
-
-  // 3프레임 안정화
-  gestureHistory.push(type);
-  if (gestureHistory.length > 3) gestureHistory.shift();
-  const stable = gestureHistory.length === 3 && gestureHistory.every(g => g === type);
-
-  prevPosition = position;
-
-  return {
-    type: stable ? type : 'none',
-    confidence: stable ? confidence : 0,
-    position,
-    delta,
-    pinchDistance,
-  };
-}
-
-export function resetGestureState() {
-  prevPosition = { x: 0.5, y: 0.5 };
-  gestureHistory = [];
-  positionHistory = [];
-}
-
-function countExtended(lm: Landmark[]): number {
-  let count = 0;
-  // 엄지: 팁이 IP보다 x 방향으로 멀면 펼침
-  if (Math.abs(lm[4].x - lm[2].x) > 0.04) count++;
-  // 나머지 4개: 팁이 PIP보다 y가 작으면 (위쪽) 펼침
-  for (let i = 1; i < 5; i++) {
-    if (lm[TIPS[i]].y < lm[PIPS[i]].y - 0.02) count++;
-  }
-  return count;
-}
-
-function isFingerExtended(lm: Landmark[], fingerIdx: number): boolean {
-  return lm[TIPS[fingerIdx]].y < lm[PIPS[fingerIdx]].y - 0.02;
-}
-
-function dist2D(a: Landmark, b: Landmark): number {
-  return Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);
-}
-
-function isWaving(history: Array<{ x: number; y: number }>): boolean {
-  if (history.length < 8) return false;
-  let dirChanges = 0;
-  for (let i = 2; i < history.length; i++) {
-    const prev = history[i - 1].x - history[i - 2].x;
-    const curr = history[i].x - history[i - 1].x;
-    if (prev * curr < 0 && Math.abs(curr) > 0.005) dirChanges++;
-  }
-  return dirChanges >= 3;
-}