Create Timeline.tsx

src/components/Timeline.tsx

@@ -0,0 +1,210 @@
+import React, { useRef, useEffect, useCallback } from 'react';
+import { useStudioStore } from '../store/useStudioStore';
+import { Keyframe } from '../utils/timeline';
+import './Timeline.css';
+
+const Timeline: React.FC = () => {
+  const {
+    objects, selectedId,
+    tracks, playhead, setPlayhead,
+    timelinePlaying, setTimelinePlaying,
+    timelineDuration, setTimelineDuration,
+    addKeyframe, removeKeyframe,
+  } = useStudioStore();
+
+  const rafRef       = useRef<number>(0);
+  const lastTimeRef  = useRef<number>(0);
+  const rulerRef     = useRef<HTMLDivElement>(null);
+
+  // ── Playback loop ─────────────────────────────────────────────
+  useEffect(() => {
+    if (!timelinePlaying) {
+      cancelAnimationFrame(rafRef.current);
+      return;
+    }
+    const tick = (now: number) => {
+      const delta = (now - lastTimeRef.current) / 1000;
+      lastTimeRef.current = now;
+      setPlayhead((prev: number) => {
+        const next = prev + delta;
+        if (next >= timelineDuration) {
+          setTimelinePlaying(false);
+          return timelineDuration;
+        }
+        return next;
+      });
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    lastTimeRef.current = performance.now();
+    rafRef.current = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafRef.current);
+  }, [timelinePlaying, timelineDuration, setPlayhead, setTimelinePlaying]);
+
+  // ── Add keyframe at playhead for selected object ──────────────
+  const handleAddKeyframe = useCallback(() => {
+    if (!selectedId) return;
+    const obj = objects.find(o => o.id === selectedId);
+    if (!obj) return;
+    const kf: Keyframe = {
+      id:       Math.random().toString(36).slice(2),
+      time:     parseFloat(playhead.toFixed(3)),
+      position: [...obj.position] as [number,number,number],
+      rotation: [...obj.rotation] as [number,number,number],
+      scale:    [...obj.scale]    as [number,number,number],
+      easing:   'ease-in-out',
+    };
+    addKeyframe(selectedId, kf);
+  }, [selectedId, objects, playhead, addKeyframe]);
+
+  // ── Keyboard shortcut: I = insert keyframe ────────────────────
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'i' || e.key === 'I') handleAddKeyframe();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [handleAddKeyframe]);
+
+  // ── Click ruler to seek ───────────────────────────────────────
+  const handleRulerClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    const rect = rulerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const t = ((e.clientX - rect.left) / rect.width) * timelineDuration;
+    setPlayhead(Math.max(0, Math.min(timelineDuration, t)));
+  }, [timelineDuration, setPlayhead]);
+
+  const fmt = (t: number) => {
+    const s = Math.floor(t);
+    const f = Math.floor((t % 1) * 30);
+    return `${String(s).padStart(2,'0')}:${String(f).padStart(2,'0')}`;
+  };
+
+  const playheadPct = (playhead / timelineDuration) * 100;
+
+  return (
+    <div className="timeline">
+
+      {/* ── Controls bar ── */}
+      <div className="tl-controls">
+        <button className="tl-btn" title="Rewind"
+          onClick={() => { setPlayhead(0); setTimelinePlaying(false); }}>⏮</button>
+
+        <button
+          className={`tl-btn tl-play ${timelinePlaying ? 'playing' : ''}`}
+          onClick={() => setTimelinePlaying(!timelinePlaying)}
+        >
+          {timelinePlaying ? '⏸' : '▶'}
+        </button>
+
+        <button className="tl-btn" title="Go to end"
+          onClick={() => { setPlayhead(timelineDuration); setTimelinePlaying(false); }}>⏭</button>
+
+        <div className="tl-time">{fmt(playhead)} / {fmt(timelineDuration)}</div>
+
+        <button
+          className={`tl-btn tl-kf-btn ${!selectedId ? 'disabled' : ''}`}
+          onClick={handleAddKeyframe}
+          disabled={!selectedId}
+          title="Add keyframe at playhead (I)"
+        >
+          ◆ ADD KEY
+        </button>
+
+        <div className="tl-duration">
+          <label>Dur</label>
+          <input
+            type="number" min={1} max={120} step={1}
+            value={timelineDuration}
+            onChange={(e) => setTimelineDuration(parseInt(e.target.value) || 5)}
+          />
+          <span>s</span>
+        </div>
+      </div>
+
+      {/* ── Track area ── */}
+      <div className="tl-body">
+
+        {/* Object labels column */}
+        <div className="tl-labels">
+          {objects.length === 0 && (
+            <div className="tl-empty">Load a model first</div>
+          )}
+          {objects.map(obj => {
+            const kfCount = tracks.find(t => t.objectId === obj.id)?.keyframes.length ?? 0;
+            return (
+              <div key={obj.id}
+                className={`tl-label ${selectedId === obj.id ? 'active' : ''}`}>
+                <span className="tl-label-dot">◈</span>
+                <span className="tl-label-name">{obj.name}</span>
+                {kfCount > 0 && <span className="tl-kf-count">{kfCount}K</span>}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Ruler + tracks column */}
+        <div className="tl-tracks-wrap">
+
+          {/* Ruler */}
+          <div className="tl-ruler" ref={rulerRef} onClick={handleRulerClick}>
+            {Array.from({ length: timelineDuration + 1 }, (_, i) => (
+              <div key={i} className="tl-tick"
+                style={{ left: `${(i / timelineDuration) * 100}%` }}>
+                <span>{i}s</span>
+              </div>
+            ))}
+            {/* Playhead needle */}
+            <div className="tl-playhead" style={{ left: `${playheadPct}%` }} />
+          </div>
+
+          {/* Keyframe tracks */}
+          <div className="tl-tracks">
+            {objects.map(obj => {
+              const track = tracks.find(t => t.objectId === obj.id);
+              const sorted = track
+                ? [...track.keyframes].sort((a, b) => a.time - b.time)
+                : [];
+              return (
+                <div key={obj.id}
+                  className={`tl-track ${selectedId === obj.id ? 'active' : ''}`}>
+
+                  {/* Connection lines between consecutive keyframes */}
+                  {sorted.map((kf, i) => {
+                    if (i === sorted.length - 1) return null;
+                    const x1 = (kf.time           / timelineDuration) * 100;
+                    const x2 = (sorted[i+1].time  / timelineDuration) * 100;
+                    return (
+                      <div key={kf.id + '-line'} className="tl-kf-line"
+                        style={{ left: `${x1}%`, width: `${x2 - x1}%` }} />
+                    );
+                  })}
+
+                  {/* Keyframe diamonds */}
+                  {sorted.map(kf => (
+                    <div
+                      key={kf.id}
+                      className="tl-kf-diamond"
+                      style={{ left: `${(kf.time / timelineDuration) * 100}%` }}
+                      title={`${kf.time.toFixed(2)}s  •  click to delete`}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        removeKeyframe(obj.id, kf.id);
+                      }}
+                    >◆</div>
+                  ))}
+
+                  {/* Playhead ghost line on each track */}
+                  <div className="tl-track-playhead"
+                    style={{ left: `${playheadPct}%` }} />
+                </div>
+              );
+            })}
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Timeline;