From 6a22a3ecbdff2d0e6a4c24c8db40bb86bc01b692 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Sat, 25 Apr 2026 03:56:22 +0200 Subject: refactor: centralize editor interaction state Move timeline and preview gestures into dedicated controllers so hooks stay thin around editor state and DOM events. This also routes drag and playback synchronization through manager APIs and reuses persistent wasm surfaces so scrubbing, seeking, and preview rendering stay in sync. Made-with: Cursor --- apps/web/src/timeline/components/index.tsx | 69 +++++++++++----------- .../src/timeline/components/timeline-element.tsx | 23 ++++---- .../web/src/timeline/components/timeline-track.tsx | 26 ++------ 3 files changed, 53 insertions(+), 65 deletions(-) (limited to 'apps/web/src/timeline/components') diff --git a/apps/web/src/timeline/components/index.tsx b/apps/web/src/timeline/components/index.tsx index e6a9df49..88fb93b7 100644 --- a/apps/web/src/timeline/components/index.tsx +++ b/apps/web/src/timeline/components/index.tsx @@ -29,7 +29,7 @@ import { useState, type ReactNode, } from "react"; -import type { ElementDragState, DropTarget } from "@/timeline"; +import type { ElementDragView, DropTarget } from "@/timeline"; import { TimelineTrackContent } from "./timeline-track"; import { TimelinePlayhead } from "./timeline-playhead"; import { SelectionBox } from "@/selection/selection-box"; @@ -287,20 +287,15 @@ export function Timeline() { isReady: tracks.length > 0, }); - const { - dragState, - dragDropTarget, - handleElementMouseDown, - handleElementClick, - lastMouseXRef, - } = useElementInteraction({ - zoomLevel, - timelineRef, - tracksContainerRef, - tracksScrollRef, - snappingEnabled, - onSnapPointChange: handleSnapPointChange, - }); + const { dragView, handleElementMouseDown, handleElementClick } = + useElementInteraction({ + zoomLevel, + tracksContainerRef, + tracksScrollRef, + snappingEnabled, + onSnapPointChange: handleSnapPointChange, + }); + const isElementDragging = dragView.kind === "dragging"; const { dragState: bookmarkDragState, @@ -391,10 +386,19 @@ export function Timeline() { contentWidth: dynamicTimelineWidth, }); + useEdgeAutoScroll({ + isActive: isElementDragging, + getMouseClientX: () => + dragView.kind === "dragging" ? dragView.currentMouseX : 0, + rulerScrollRef, + tracksScrollRef, + contentWidth: dynamicTimelineWidth, + }); + const showSnapIndicator = snappingEnabled && currentSnapPoint !== null && - (dragState.isDragging || bookmarkDragState.isDragging || isResizing); + (isElementDragging || bookmarkDragState.isDragging || isResizing); const { handleTracksMouseDown, @@ -457,9 +461,9 @@ export function Timeline() { headerHeight={timelineHeaderHeight} /> @@ -540,9 +544,7 @@ export function Timeline() { ; - lastMouseXRef: React.RefObject; + dragView: ElementDragView; onResizeStart: React.ComponentProps< typeof TimelineTrackContent >["onResizeStart"]; @@ -776,8 +774,16 @@ function TimelineTrackRows({ [tracks, expandedElementIds], ); + const draggingElementIds = useMemo( + () => + dragView.kind === "dragging" + ? dragView.memberTimeOffsets + : (null as ReadonlyMap | null), + [dragView], + ); const sortedTracks = useMemo(() => { - const draggingElementIds = new Set(dragState.dragElementIds); + if (!draggingElementIds) + return tracks.map((track, index) => ({ track, index })); return [...tracks] .map((track, index) => ({ track, index })) .sort((a, b) => { @@ -791,7 +797,7 @@ function TimelineTrackRows({ if (bHasDragged) return -1; return 0; }); - }, [tracks, dragState.dragElementIds]); + }, [tracks, draggingElementIds]); return ( <> @@ -811,10 +817,7 @@ function TimelineTrackRows({ void; - dragState: ElementDragState; + dragView: ElementDragView; isDropTarget?: boolean; } @@ -226,7 +226,7 @@ export function TimelineElement({ onResizeStart, onElementMouseDown, onElementClick, - dragState, + dragView, isDropTarget = false, }: TimelineElementProps) { const mediaAssets = useEditor((e) => e.media.getAssets()); @@ -252,15 +252,18 @@ export function TimelineElement({ selected.elementId === element.id && selected.trackId === track.id, ); - const isBeingDragged = dragState.dragElementIds.includes(element.id); + const isDragging = dragView.kind === "dragging"; + const dragTimeOffset = isDragging + ? dragView.memberTimeOffsets.get(element.id) + : undefined; + const isBeingDragged = dragTimeOffset !== undefined; const dragOffsetY = - isBeingDragged && dragState.isDragging - ? dragState.currentMouseY - dragState.startMouseY + isDragging && isBeingDragged + ? dragView.currentMouseY - dragView.startMouseY : 0; - const dragTimeOffset = dragState.dragTimeOffsets[element.id] ?? 0; const elementStartTime = - isBeingDragged && dragState.isDragging - ? dragState.currentTime + dragTimeOffset + isDragging && isBeingDragged + ? dragView.currentTime + dragTimeOffset : renderElement.startTime; const displayedStartTime = elementStartTime; const displayedDuration = renderElement.duration; @@ -382,7 +385,7 @@ export function TimelineElement({ ? `${baseTrackHeight + expansionHeight}px` : "100%", transform: - isBeingDragged && dragState.isDragging + isBeingDragged && isDragging ? `translate3d(0, ${dragOffsetY}px, 0)` : undefined, }} diff --git a/apps/web/src/timeline/components/timeline-track.tsx b/apps/web/src/timeline/components/timeline-track.tsx index 6c40637e..7608e6df 100644 --- a/apps/web/src/timeline/components/timeline-track.tsx +++ b/apps/web/src/timeline/components/timeline-track.tsx @@ -5,18 +5,12 @@ import { TimelineElement } from "./timeline-element"; import type { TimelineTrack } from "@/timeline"; import type { TimelineElement as TimelineElementType } from "@/timeline"; import { TIMELINE_LAYERS } from "./layers"; -import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/timeline/scale"; -import { useEdgeAutoScroll } from "@/timeline/hooks/use-edge-auto-scroll"; -import type { ElementDragState } from "@/timeline"; -import { useEditor } from "@/editor/use-editor"; +import type { ElementDragView } from "@/timeline"; interface TimelineTrackContentProps { track: TimelineTrack; zoomLevel: number; - dragState: ElementDragState; - rulerScrollRef: React.RefObject; - tracksScrollRef: React.RefObject; - lastMouseXRef: React.RefObject; + dragView: ElementDragView; onResizeStart: (params: { event: React.MouseEvent; element: TimelineElementType; @@ -42,10 +36,7 @@ interface TimelineTrackContentProps { export function TimelineTrackContent({ track, zoomLevel, - dragState, - rulerScrollRef, - tracksScrollRef, - lastMouseXRef, + dragView, onResizeStart, onElementMouseDown, onElementClick, @@ -55,15 +46,6 @@ export function TimelineTrackContent({ targetElementId = null, }: TimelineTrackContentProps) { const { isElementSelected } = useElementSelection(); - const duration = useEditor((e) => e.timeline.getTotalDuration()); - - useEdgeAutoScroll({ - isActive: dragState.isDragging, - getMouseClientX: () => lastMouseXRef.current ?? 0, - rulerScrollRef, - tracksScrollRef, - contentWidth: duration * BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel, - }); return (
@@ -120,7 +102,7 @@ export function TimelineTrackContent({ onElementClick={(event, element) => onElementClick({ event, element, track }) } - dragState={dragState} + dragView={dragView} isDropTarget={element.id === targetElementId} /> ); -- cgit v1.3.1