summaryrefslogtreecommitdiff
path: root/apps/web/src/timeline/components
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web/src/timeline/components')
-rw-r--r--apps/web/src/timeline/components/index.tsx69
-rw-r--r--apps/web/src/timeline/components/timeline-element.tsx23
-rw-r--r--apps/web/src/timeline/components/timeline-track.tsx26
3 files changed, 53 insertions, 65 deletions
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}
/>
<DragLine
- dropTarget={dragDropTarget}
+ dropTarget={isElementDragging ? dragView.dropTarget : null}
tracks={tracks}
- isVisible={dragState.isDragging}
+ isVisible={isElementDragging}
headerHeight={timelineHeaderHeight}
/>
@@ -540,9 +544,7 @@ export function Timeline() {
<TimelineTrackRows
mainTrackId={mainTrackId}
zoomLevel={zoomLevel}
- dragState={dragState}
- tracksScrollRef={tracksScrollRef}
- lastMouseXRef={lastMouseXRef}
+ dragView={dragView}
onResizeStart={handleResizeStart}
onElementMouseDown={handleElementMouseDown}
onElementClick={handleElementClick}
@@ -718,9 +720,7 @@ function TrackLabelsPanel({
function TimelineTrackRows({
mainTrackId,
zoomLevel,
- dragState,
- tracksScrollRef,
- lastMouseXRef,
+ dragView,
onResizeStart,
onElementMouseDown,
onElementClick,
@@ -732,9 +732,7 @@ function TimelineTrackRows({
}: {
mainTrackId: string | null;
zoomLevel: number;
- dragState: ElementDragState;
- tracksScrollRef: React.RefObject<HTMLDivElement | null>;
- lastMouseXRef: React.RefObject<number>;
+ 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<string, number> | 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({
<TimelineTrackContent
track={track}
zoomLevel={zoomLevel}
- dragState={dragState}
- rulerScrollRef={tracksScrollRef}
- tracksScrollRef={tracksScrollRef}
- lastMouseXRef={lastMouseXRef}
+ dragView={dragView}
onResizeStart={onResizeStart}
onElementMouseDown={onElementMouseDown}
onElementClick={onElementClick}
diff --git a/apps/web/src/timeline/components/timeline-element.tsx b/apps/web/src/timeline/components/timeline-element.tsx
index 74c34607..35785332 100644
--- a/apps/web/src/timeline/components/timeline-element.tsx
+++ b/apps/web/src/timeline/components/timeline-element.tsx
@@ -34,7 +34,7 @@ import {
import type {
TimelineElement as TimelineElementType,
TimelineTrack,
- ElementDragState,
+ ElementDragView,
VideoElement,
ImageElement,
AudioElement,
@@ -214,7 +214,7 @@ interface TimelineElementProps {
event: React.MouseEvent,
element: TimelineElementType,
) => 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<HTMLDivElement | null>;
- tracksScrollRef: React.RefObject<HTMLDivElement | null>;
- lastMouseXRef: React.RefObject<number>;
+ 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 (
<div className="relative size-full">
@@ -120,7 +102,7 @@ export function TimelineTrackContent({
onElementClick={(event, element) =>
onElementClick({ event, element, track })
}
- dragState={dragState}
+ dragView={dragView}
isDropTarget={element.id === targetElementId}
/>
);
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-17 08:28:12 +0000