fix(studio): capture timeline pinch zoom

This commit is contained in:
Miguel Ángel
2026-04-28 17:31:49 -04:00
parent 820b07ddaa
commit 7ff1734db7
@@ -1042,8 +1042,8 @@ export const Timeline = memo(function Timeline({
[onAssetDrop, onFileDrop], [onAssetDrop, onFileDrop],
); );
const handleWheel = useCallback( const handlePinchWheel = useCallback(
(e: React.WheelEvent<HTMLDivElement>) => { (e: WheelEvent) => {
if (!e.ctrlKey) return; if (!e.ctrlKey) return;
const scroll = scrollRef.current; const scroll = scrollRef.current;
if (!scroll || durationRef.current <= 0 || fitPpsRef.current <= 0 || ppsRef.current <= 0) { if (!scroll || durationRef.current <= 0 || fitPpsRef.current <= 0 || ppsRef.current <= 0) {
@@ -1084,6 +1084,15 @@ export const Timeline = memo(function Timeline({
[setManualZoomPercent, setZoomMode], [setManualZoomPercent, setZoomMode],
); );
useEffect(() => {
const scroll = scrollRef.current;
if (!scroll) return;
scroll.addEventListener("wheel", handlePinchWheel, { passive: false, capture: true });
return () => {
scroll.removeEventListener("wheel", handlePinchWheel, { capture: true });
};
}, [handlePinchWheel, timelineReady, elements.length]);
if (!timelineReady || elements.length === 0) { if (!timelineReady || elements.length === 0) {
return ( return (
<div <div
@@ -1259,7 +1268,6 @@ export const Timeline = memo(function Timeline({
onDragOver={handleAssetDragOver} onDragOver={handleAssetDragOver}
onDragLeave={() => setIsDragOver(false)} onDragLeave={() => setIsDragOver(false)}
onDrop={handleAssetDrop} onDrop={handleAssetDrop}
onWheel={handleWheel}
onPointerDown={handlePointerDown} onPointerDown={handlePointerDown}
onPointerMove={handlePointerMove} onPointerMove={handlePointerMove}
onPointerUp={handlePointerUp} onPointerUp={handlePointerUp}