entangle-ui 0.9.0 → 0.11.0

package/dist/esm/components/editor/Timeline/useTimelineDraw.js

@@ -0,0 +1,156 @@
+"use client";
+import { useRef, useCallback, useLayoutEffect, useEffect } from 'react';
+import { resolveVarValue } from '../../primitives/canvas/canvasTheme.js';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import { vars } from '../../../theme/contract.css.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '@vanilla-extract/css';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import 'react/jsx-runtime';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { framesToTimecode } from './timelineCoords.js';
+import { drawTimeline } from './timelineDrawing.js';
+import { selectionKeySet, selectionKey } from './timelineSelection.js';
+
+/**
+ * Schedules a canvas redraw via `requestAnimationFrame`, resolves theme
+ * tokens per-frame so the live theme is respected, and re-runs on any
+ * input change. `renderOverlay` / `formatTime` are read through `useLatest`
+ * refs so consumer inline functions don't invalidate the draw schedule
+ * (component-patterns.md rule #3).
+ */
+function useTimelineDraw(opts) {
+    const rafRef = useRef(0);
+    // Consumer callbacks — read live without invalidating `scheduleDraw`.
+    const renderOverlayRef = useLatest(opts.renderOverlay);
+    const formatTimeRef = useLatest(opts.formatTime);
+    const scheduleDraw = useCallback(() => {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = requestAnimationFrame(() => {
+            const canvas = opts.canvasRef.current;
+            if (!canvas)
+                return;
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return;
+            const w = Math.max(1, opts.size.width);
+            const h = Math.max(1, opts.size.height);
+            const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+            const targetW = Math.max(1, Math.round(w * dpr));
+            const targetH = Math.max(1, Math.round(h * dpr));
+            if (canvas.width !== targetW || canvas.height !== targetH) {
+                canvas.width = targetW;
+                canvas.height = targetH;
+            }
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            const fontPx = parseFloat(resolveVarValue(canvas, vars.typography.fontSize.xs)) || 10;
+            const family = getComputedStyle(canvas).fontFamily || 'sans-serif';
+            const colors = {
+                background: opts.backgroundColor ??
+                    resolveVarValue(canvas, vars.colors.background.secondary),
+                gridLine: resolveVarValue(canvas, vars.colors.border.default),
+                rulerText: resolveVarValue(canvas, vars.colors.text.muted),
+                rowSeparator: resolveVarValue(canvas, vars.colors.border.default),
+                keyframe: resolveVarValue(canvas, vars.colors.accent.secondary),
+                keyframeSelected: resolveVarValue(canvas, vars.colors.accent.primary),
+                keyframeStroke: resolveVarValue(canvas, vars.colors.background.secondary),
+                playhead: opts.playheadColor ??
+                    resolveVarValue(canvas, vars.colors.accent.primary),
+                groupHeader: resolveVarValue(canvas, vars.colors.background.elevated),
+            };
+            const selKeys = selectionKeySet(opts.selection);
+            const hover = opts.hover;
+            drawTimeline({
+                ctx,
+                size: { width: w, height: h },
+                view: opts.view,
+                startFrame: opts.startFrame,
+                endFrame: opts.endFrame,
+                fps: opts.fps,
+                frame: opts.frame,
+                rows: opts.rows,
+                scrollTop: opts.scrollTop,
+                rulerHeight: opts.rulerHeight,
+                loopStripHeight: opts.loopStripHeight,
+                loopHandles: opts.loopHandles,
+                showPlayhead: opts.showPlayhead,
+                colors,
+                font: `${fontPx}px ${family}`,
+                formatTime: (f, fps) => (formatTimeRef.current ?? framesToTimecode)(f, fps),
+                isSelected: (t, k) => selKeys.has(selectionKey({ trackId: t, keyframeId: k })),
+                isHovered: (t, k) => hover !== null && hover.trackId === t && hover.keyframeId === k,
+                playheadHovered: opts.hoverPlayhead,
+                ...(opts.trackScale
+                    ? {
+                        trackScale: {
+                            position: opts.trackScale.position ?? 'start',
+                            format: opts.trackScale.format ??
+                                ((v) => Number(v.toFixed(2)).toString()),
+                            showMidpoint: opts.trackScale.showMidpoint ?? false,
+                            gridlines: opts.trackScale.gridlines ?? false,
+                            minLaneHeight: opts.trackScale.minLaneHeight ?? 48,
+                            ...(opts.trackScale.color
+                                ? { color: opts.trackScale.color }
+                                : {}),
+                        },
+                    }
+                    : {}),
+                renderOverlay: (ctx, info) => renderOverlayRef.current?.(ctx, info),
+                marquee: opts.marquee,
+                loopRegion: opts.loopRegion,
+                loopHover: opts.loopHover,
+            });
+        });
+        // `renderOverlayRef` / `formatTimeRef` are stable refs from `useLatest`.
+    }, [
+        opts.canvasRef,
+        opts.size,
+        opts.view,
+        opts.startFrame,
+        opts.endFrame,
+        opts.fps,
+        opts.frame,
+        opts.rows,
+        opts.scrollTop,
+        opts.rulerHeight,
+        opts.loopStripHeight,
+        opts.loopHandles,
+        opts.showPlayhead,
+        opts.selection,
+        opts.hover,
+        opts.hoverPlayhead,
+        opts.marquee,
+        opts.loopRegion,
+        opts.loopHover,
+        opts.backgroundColor,
+        opts.playheadColor,
+        opts.trackScale,
+        formatTimeRef,
+        renderOverlayRef,
+    ]);
+    useLayoutEffect(() => {
+        scheduleDraw();
+        return () => {
+            cancelAnimationFrame(rafRef.current);
+        };
+    }, [scheduleDraw]);
+    // Redraw when DPR changes (e.g. dragging to a different display).
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const mq = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+        const handler = () => {
+            scheduleDraw();
+        };
+        mq.addEventListener('change', handler);
+        return () => {
+            mq.removeEventListener('change', handler);
+        };
+    }, [scheduleDraw]);
+}
+
+export { useTimelineDraw };
+//# sourceMappingURL=useTimelineDraw.js.map

package/dist/esm/components/editor/Timeline/useTimelineDraw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimelineDraw.js","sources":["src/components/editor/Timeline/useTimelineDraw.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useLayoutEffect, useRef } from 'react';\n\nimport { resolveVarValue } from '@/components/primitives/canvas/canvasTheme';\nimport { useLatest } from '@/hooks';\nimport { vars } from '@/theme/contract.css';\n\nimport { framesToTimecode } from './timelineCoords';\nimport { drawTimeline } from './timelineDrawing';\nimport { selectionKey, selectionKeySet } from './timelineSelection';\n\nimport type {\n  TimelineDrawInfo,\n  TimelineSelection,\n  TimelineTrackScaleProps,\n  TimelineView,\n} from './Timeline.types';\nimport type { TimelineDrawColors } from './timelineDrawing';\nimport type { TimelineRow } from './timelineLayout';\nimport type { ViewportSize } from '@/components/primitives/viewport';\nimport type React from 'react';\n\nexport interface UseTimelineDrawOptions {\n  canvasRef: React.RefObject<HTMLCanvasElement | null>;\n  size: ViewportSize;\n  view: TimelineView;\n  startFrame: number;\n  endFrame: number;\n  fps: number;\n  frame: number;\n  rows: ReadonlyArray<TimelineRow>;\n  scrollTop: number;\n  rulerHeight: number;\n  loopStripHeight: number;\n  loopHandles: 'edges' | 'brackets';\n  showPlayhead: boolean;\n  selection: TimelineSelection;\n  hover: { trackId: string; keyframeId: string } | null;\n  hoverPlayhead: boolean;\n  marquee: { x: number; y: number; width: number; height: number } | null;\n  loopRegion: { startFrame: number; endFrame: number } | null;\n  loopHover: 'start' | 'end' | 'body' | null;\n  backgroundColor?: string;\n  playheadColor?: string;\n  trackScale?: TimelineTrackScaleProps;\n  renderOverlay?: (\n    ctx: CanvasRenderingContext2D,\n    info: TimelineDrawInfo\n  ) => void;\n  formatTime?: (frame: number, fps: number) => string;\n}\n\n/**\n * Schedules a canvas redraw via `requestAnimationFrame`, resolves theme\n * tokens per-frame so the live theme is respected, and re-runs on any\n * input change. `renderOverlay` / `formatTime` are read through `useLatest`\n * refs so consumer inline functions don't invalidate the draw schedule\n * (component-patterns.md rule #3).\n */\nexport function useTimelineDraw(opts: UseTimelineDrawOptions): void {\n  const rafRef = useRef<number>(0);\n\n  // Consumer callbacks — read live without invalidating `scheduleDraw`.\n  const renderOverlayRef = useLatest(opts.renderOverlay);\n  const formatTimeRef = useLatest(opts.formatTime);\n\n  const scheduleDraw = useCallback((): void => {\n    cancelAnimationFrame(rafRef.current);\n    rafRef.current = requestAnimationFrame(() => {\n      const canvas = opts.canvasRef.current;\n      if (!canvas) return;\n      const ctx = canvas.getContext('2d');\n      if (!ctx) return;\n\n      const w = Math.max(1, opts.size.width);\n      const h = Math.max(1, opts.size.height);\n      const dpr =\n        typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;\n      const targetW = Math.max(1, Math.round(w * dpr));\n      const targetH = Math.max(1, Math.round(h * dpr));\n      if (canvas.width !== targetW || canvas.height !== targetH) {\n        canvas.width = targetW;\n        canvas.height = targetH;\n      }\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n\n      const fontPx =\n        parseFloat(resolveVarValue(canvas, vars.typography.fontSize.xs)) || 10;\n      const family = getComputedStyle(canvas).fontFamily || 'sans-serif';\n\n      const colors: TimelineDrawColors = {\n        background:\n          opts.backgroundColor ??\n          resolveVarValue(canvas, vars.colors.background.secondary),\n        gridLine: resolveVarValue(canvas, vars.colors.border.default),\n        rulerText: resolveVarValue(canvas, vars.colors.text.muted),\n        rowSeparator: resolveVarValue(canvas, vars.colors.border.default),\n        keyframe: resolveVarValue(canvas, vars.colors.accent.secondary),\n        keyframeSelected: resolveVarValue(canvas, vars.colors.accent.primary),\n        keyframeStroke: resolveVarValue(\n          canvas,\n          vars.colors.background.secondary\n        ),\n        playhead:\n          opts.playheadColor ??\n          resolveVarValue(canvas, vars.colors.accent.primary),\n        groupHeader: resolveVarValue(canvas, vars.colors.background.elevated),\n      };\n\n      const selKeys = selectionKeySet(opts.selection);\n      const hover = opts.hover;\n\n      drawTimeline({\n        ctx,\n        size: { width: w, height: h },\n        view: opts.view,\n        startFrame: opts.startFrame,\n        endFrame: opts.endFrame,\n        fps: opts.fps,\n        frame: opts.frame,\n        rows: opts.rows,\n        scrollTop: opts.scrollTop,\n        rulerHeight: opts.rulerHeight,\n        loopStripHeight: opts.loopStripHeight,\n        loopHandles: opts.loopHandles,\n        showPlayhead: opts.showPlayhead,\n        colors,\n        font: `${fontPx}px ${family}`,\n        formatTime: (f: number, fps: number): string =>\n          (formatTimeRef.current ?? framesToTimecode)(f, fps),\n        isSelected: (t, k) =>\n          selKeys.has(selectionKey({ trackId: t, keyframeId: k })),\n        isHovered: (t, k) =>\n          hover !== null && hover.trackId === t && hover.keyframeId === k,\n        playheadHovered: opts.hoverPlayhead,\n        ...(opts.trackScale\n          ? {\n              trackScale: {\n                position: opts.trackScale.position ?? 'start',\n                format:\n                  opts.trackScale.format ??\n                  ((v: number) => Number(v.toFixed(2)).toString()),\n                showMidpoint: opts.trackScale.showMidpoint ?? false,\n                gridlines: opts.trackScale.gridlines ?? false,\n                minLaneHeight: opts.trackScale.minLaneHeight ?? 48,\n                ...(opts.trackScale.color\n                  ? { color: opts.trackScale.color }\n                  : {}),\n              },\n            }\n          : {}),\n        renderOverlay: (\n          ctx: CanvasRenderingContext2D,\n          info: TimelineDrawInfo\n        ): void => renderOverlayRef.current?.(ctx, info),\n        marquee: opts.marquee,\n        loopRegion: opts.loopRegion,\n        loopHover: opts.loopHover,\n      });\n    });\n    // `renderOverlayRef` / `formatTimeRef` are stable refs from `useLatest`.\n  }, [\n    opts.canvasRef,\n    opts.size,\n    opts.view,\n    opts.startFrame,\n    opts.endFrame,\n    opts.fps,\n    opts.frame,\n    opts.rows,\n    opts.scrollTop,\n    opts.rulerHeight,\n    opts.loopStripHeight,\n    opts.loopHandles,\n    opts.showPlayhead,\n    opts.selection,\n    opts.hover,\n    opts.hoverPlayhead,\n    opts.marquee,\n    opts.loopRegion,\n    opts.loopHover,\n    opts.backgroundColor,\n    opts.playheadColor,\n    opts.trackScale,\n    formatTimeRef,\n    renderOverlayRef,\n  ]);\n\n  useLayoutEffect(() => {\n    scheduleDraw();\n    return () => {\n      cancelAnimationFrame(rafRef.current);\n    };\n  }, [scheduleDraw]);\n\n  // Redraw when DPR changes (e.g. dragging to a different display).\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n    const mq = window.matchMedia(\n      `(resolution: ${window.devicePixelRatio}dppx)`\n    );\n    const handler = (): void => {\n      scheduleDraw();\n    };\n    mq.addEventListener('change', handler);\n    return () => {\n      mq.removeEventListener('change', handler);\n    };\n  }, [scheduleDraw]);\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAqDA;;;;;;AAMG;AACG;AACJ;;;;AAMA;AACE;AACA;AACE;AACA;;;AAEA;;AAEA;AACA;AACA;AAEA;AACA;AACA;AACE;AACA;;AAEF;AAEA;;AAIA;;;AAIE;AACA;AACA;AACA;AACA;AACA;;;AAOA;;;AAIF;AAEA;;;;;;;;;;;;;;;AAeE;AACA;;;;;AAQE;AACI;AACE;AACA;AAEE;AACF;AACA;AACA;AACA;;;AAGD;AACF;;AAEL;;;;AAOD;AACH;;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGD;;AAGC;AACA;AACE;AACF;AACF;;;;;AAKE;;AAIE;AACF;AACA;AACA;AACE;AACF;AACF;AACF;;"}