@rendiv/studio 0.1.2 → 0.1.4

package/ui/timeline/track-layout.ts

@@ -0,0 +1,94 @@
+import type { TimelineEntry, TimelineOverride } from '@rendiv/core';
+import type { Track, TrackEntry } from './types';
+
+/**
+ * Assign entries to tracks, respecting pinned trackIndex from overrides.
+ *
+ * 1. Entries with a trackIndex override are placed on their assigned track.
+ * 2. Remaining entries are auto-assigned via greedy bin-packing,
+ *    skipping occupied time ranges on each track.
+ * 3. Only leaf entries (entries with no children) appear as blocks.
+ *
+ * Track 0 (top) renders in front; higher track indices render behind.
+ */
+export function assignTracks(
+  entries: TimelineEntry[],
+  overrides: Map<string, TimelineOverride>,
+): Track[] {
+  // Find parent IDs to identify leaves
+  const parentIds = new Set(entries.map((e) => e.parentId).filter(Boolean));
+  const leaves = entries.filter((e) => !parentIds.has(e.id));
+
+  // Sort by from position (start time)
+  const sorted = [...leaves].sort((a, b) => a.from - b.from);
+
+  // Separate pinned (has trackIndex override) from unpinned
+  const pinned: { entry: TimelineEntry; trackIndex: number; hasOverride: boolean }[] = [];
+  const unpinned: TimelineEntry[] = [];
+
+  for (const entry of sorted) {
+    const override = overrides.get(entry.namePath);
+    if (override?.trackIndex !== undefined) {
+      pinned.push({ entry, trackIndex: override.trackIndex, hasOverride: true });
+    } else {
+      unpinned.push(entry);
+    }
+  }
+
+  // Determine how many tracks we need (at minimum, enough for pinned entries)
+  let maxTrack = -1;
+  for (const p of pinned) {
+    if (p.trackIndex > maxTrack) maxTrack = p.trackIndex;
+  }
+
+  // Build track structures — at least enough for pinned entries
+  const trackCount = maxTrack + 1;
+  const tracks: Track[] = [];
+  const trackEnds: number[] = [];
+  for (let i = 0; i < trackCount; i++) {
+    tracks.push({ id: i, entries: [] });
+    trackEnds.push(0);
+  }
+
+  // Place pinned entries first
+  for (const p of pinned) {
+    const idx = p.trackIndex;
+    const te: TrackEntry = { entry: p.entry, trackIndex: idx, hasOverride: true };
+    tracks[idx].entries.push(te);
+    const end = p.entry.from + p.entry.durationInFrames;
+    if (end > trackEnds[idx]) trackEnds[idx] = end;
+  }
+
+  // Greedy bin-pack unpinned entries into existing or new tracks
+  for (const entry of unpinned) {
+    const end = entry.from + entry.durationInFrames;
+    let assigned = false;
+    const hasOverride = overrides.has(entry.namePath);
+
+    for (let i = 0; i < tracks.length; i++) {
+      // Check if this entry fits without overlapping any existing entry on this track
+      const fits = !tracks[i].entries.some((te) => {
+        const teEnd = te.entry.from + te.entry.durationInFrames;
+        return entry.from < teEnd && end > te.entry.from;
+      });
+
+      if (fits) {
+        const te: TrackEntry = { entry, trackIndex: i, hasOverride };
+        tracks[i].entries.push(te);
+        if (end > trackEnds[i]) trackEnds[i] = end;
+        assigned = true;
+        break;
+      }
+    }
+
+    if (!assigned) {
+      const idx = tracks.length;
+      const te: TrackEntry = { entry, trackIndex: idx, hasOverride };
+      tracks.push({ id: idx, entries: [te] });
+      trackEnds.push(end);
+      assigned = true;
+    }
+  }
+
+  return tracks;
+}

package/ui/timeline/types.ts

@@ -0,0 +1,39 @@
+import type { TimelineEntry, TimelineOverride } from '@rendiv/core';
+
+export interface TrackEntry {
+  entry: TimelineEntry;
+  trackIndex: number;
+  hasOverride: boolean;
+}
+
+export interface Track {
+  id: number;
+  entries: TrackEntry[];
+}
+
+export type DragEdge = 'body' | 'left' | 'right';
+
+export interface DragOperation {
+  namePath: string;
+  edge: DragEdge;
+  startClientX: number;
+  startClientY: number;
+  originalFrom: number;
+  originalDuration: number;
+  originalTrackIndex: number;
+}
+
+export interface TimelineEditorProps {
+  entries: TimelineEntry[];
+  currentFrame: number;
+  totalFrames: number;
+  fps: number;
+  compositionName: string;
+  onSeek: (frame: number) => void;
+  overrides: Map<string, TimelineOverride>;
+  onOverrideChange: (namePath: string, override: TimelineOverride) => void;
+  onOverrideRemove: (namePath: string) => void;
+  onOverridesClear: () => void;
+  view: 'editor' | 'tree';
+  onViewChange: (view: 'editor' | 'tree') => void;
+}

package/ui/timeline/use-timeline-drag.ts

@@ -0,0 +1,98 @@
+import { useRef, useCallback, useEffect } from 'react';
+import type { DragOperation, DragEdge } from './types';
+
+interface UseTimelineDragOptions {
+  pixelsPerFrame: number;
+  trackHeight: number;
+  trackGap: number;
+  onOverrideChange: (namePath: string, override: { from: number; durationInFrames: number; trackIndex?: number }) => void;
+  /** Check whether the dragged block can be placed on the target track without overlapping. */
+  canPlaceOnTrack: (namePath: string, from: number, duration: number, trackIndex: number) => boolean;
+}
+
+interface UseTimelineDragReturn {
+  isDragging: boolean;
+  dragNamePath: string | null;
+  startDrag: (namePath: string, edge: DragEdge, clientX: number, clientY: number, originalFrom: number, originalDuration: number, originalTrackIndex: number) => void;
+}
+
+export function useTimelineDrag({ pixelsPerFrame, trackHeight, trackGap, onOverrideChange, canPlaceOnTrack }: UseTimelineDragOptions): UseTimelineDragReturn {
+  const dragRef = useRef<DragOperation | null>(null);
+  const isDraggingRef = useRef(false);
+  const dragNamePathRef = useRef<string | null>(null);
+  // Force re-renders when drag state changes
+  const forceUpdateRef = useRef(0);
+
+  const startDrag = useCallback((namePath: string, edge: DragEdge, clientX: number, clientY: number, originalFrom: number, originalDuration: number, originalTrackIndex: number) => {
+    dragRef.current = { namePath, edge, startClientX: clientX, startClientY: clientY, originalFrom, originalDuration, originalTrackIndex };
+    isDraggingRef.current = true;
+    dragNamePathRef.current = namePath;
+    forceUpdateRef.current++;
+  }, []);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+
+      const deltaPixelsX = e.clientX - drag.startClientX;
+      const deltaFrames = Math.round(deltaPixelsX / pixelsPerFrame);
+
+      let newFrom = drag.originalFrom;
+      let newDuration = drag.originalDuration;
+      let newTrackIndex: number | undefined;
+
+      switch (drag.edge) {
+        case 'body': {
+          newFrom = Math.max(0, drag.originalFrom + deltaFrames);
+          // Vertical drag: compute new track from Y delta
+          const deltaPixelsY = e.clientY - drag.startClientY;
+          const rowHeight = trackHeight + trackGap;
+          const trackDelta = Math.round(deltaPixelsY / rowHeight);
+          const candidateTrack = Math.max(0, drag.originalTrackIndex + trackDelta);
+
+          // Only move to the new track if the block fits without overlapping
+          if (canPlaceOnTrack(drag.namePath, newFrom, newDuration, candidateTrack)) {
+            newTrackIndex = candidateTrack;
+          } else {
+            // Stay on current track
+            newTrackIndex = drag.originalTrackIndex;
+          }
+          break;
+        }
+        case 'left':
+          newFrom = Math.max(0, drag.originalFrom + deltaFrames);
+          newDuration = Math.max(1, drag.originalDuration - deltaFrames);
+          newTrackIndex = drag.originalTrackIndex;
+          break;
+        case 'right':
+          newDuration = Math.max(1, drag.originalDuration + deltaFrames);
+          newTrackIndex = drag.originalTrackIndex;
+          break;
+      }
+
+      onOverrideChange(drag.namePath, { from: newFrom, durationInFrames: newDuration, trackIndex: newTrackIndex });
+    };
+
+    const handleMouseUp = () => {
+      if (dragRef.current) {
+        dragRef.current = null;
+        isDraggingRef.current = false;
+        dragNamePathRef.current = null;
+      }
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [pixelsPerFrame, trackHeight, trackGap, onOverrideChange, canPlaceOnTrack]);
+
+  return {
+    isDragging: isDraggingRef.current,
+    dragNamePath: dragNamePathRef.current,
+    startDrag,
+  };
+}

package/ui/timeline/use-timeline-zoom.ts

@@ -0,0 +1,65 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+interface UseTimelineZoomOptions {
+  totalFrames: number;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+}
+
+interface UseTimelineZoomReturn {
+  pixelsPerFrame: number;
+  scrollLeft: number;
+  setScrollLeft: (v: number) => void;
+  setPixelsPerFrame: (v: number) => void;
+  handleWheel: (e: WheelEvent) => void;
+}
+
+const MIN_PX_PER_FRAME = 0.5;
+const MAX_PX_PER_FRAME = 20;
+
+export function useTimelineZoom({ totalFrames, containerRef }: UseTimelineZoomOptions): UseTimelineZoomReturn {
+  const [pixelsPerFrame, setPixelsPerFrame] = useState(() => {
+    // Start at a reasonable default — will be adjusted on mount
+    return 3;
+  });
+  const [scrollLeft, setScrollLeft] = useState(0);
+  const ppfRef = useRef(pixelsPerFrame);
+  ppfRef.current = pixelsPerFrame;
+
+  // Fit to width on mount
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || totalFrames <= 0) return;
+    const fitPpf = Math.max(MIN_PX_PER_FRAME, el.clientWidth / totalFrames);
+    setPixelsPerFrame(Math.min(fitPpf, MAX_PX_PER_FRAME));
+    setScrollLeft(0);
+  }, [totalFrames, containerRef]);
+
+  const handleWheel = useCallback((e: WheelEvent) => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    if (e.ctrlKey || e.metaKey) {
+      // Zoom: Ctrl/Cmd + wheel
+      e.preventDefault();
+      const rect = el.getBoundingClientRect();
+      const cursorX = e.clientX - rect.left;
+      const oldPpf = ppfRef.current;
+      const zoomFactor = e.deltaY < 0 ? 1.15 : 1 / 1.15;
+      const newPpf = Math.min(MAX_PX_PER_FRAME, Math.max(MIN_PX_PER_FRAME, oldPpf * zoomFactor));
+
+      // Keep the frame under the cursor in place
+      const frameAtCursor = (cursorX + el.scrollLeft) / oldPpf;
+      const newScrollLeft = Math.max(0, frameAtCursor * newPpf - cursorX);
+
+      setPixelsPerFrame(newPpf);
+      setScrollLeft(newScrollLeft);
+    } else {
+      // Horizontal scroll
+      e.preventDefault();
+      const delta = e.deltaX !== 0 ? e.deltaX : e.deltaY;
+      setScrollLeft((prev) => Math.max(0, prev + delta));
+    }
+  }, [containerRef]);
+
+  return { pixelsPerFrame, scrollLeft, setScrollLeft, setPixelsPerFrame, handleWheel };
+}