entangle-ui 0.9.0 → 0.10.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 '../../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+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":[null],"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;;"}