From 9b5fd6eb077a3fb2380f42414b65405030a01fcd Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Sun, 8 Feb 2026 01:51:25 +0100 Subject: [PATCH] feat: ensure elements on main track starts at 0 --- .../lib/commands/timeline/clipboard/paste.ts | 27 ++++++++- .../timeline/element/insert-element.ts | 40 ++++++++++++- .../timeline/element/move-elements.ts | 10 +++- .../element/update-element-start-time.ts | 20 +++++-- apps/web/src/lib/timeline/drop-utils.ts | 14 ++++- apps/web/src/lib/timeline/track-utils.ts | 60 +++++++++++++++++++ 6 files changed, 160 insertions(+), 11 deletions(-) diff --git a/apps/web/src/lib/commands/timeline/clipboard/paste.ts b/apps/web/src/lib/commands/timeline/clipboard/paste.ts index 9c979790..39feb8ce 100644 --- a/apps/web/src/lib/commands/timeline/clipboard/paste.ts +++ b/apps/web/src/lib/commands/timeline/clipboard/paste.ts @@ -10,6 +10,8 @@ import { wouldElementOverlap } from "@/lib/timeline/element-utils"; import { buildEmptyTrack, getHighestInsertIndexForTrack, + isMainTrack, + enforceMainTrackStart, } from "@/lib/timeline/track-utils"; export class PasteCommand extends Command { @@ -65,11 +67,32 @@ export class PasteCommand extends Command { if (resolvedTargetIndex >= 0) { const targetTrack = updatedTracks[resolvedTargetIndex]; + let adjustedElements = elementsToAdd; + + if (isMainTrack(targetTrack)) { + const earliestElement = elementsToAdd.reduce((earliest, element) => + element.startTime < earliest.startTime ? element : earliest, + ); + const adjustedEarliestStartTime = enforceMainTrackStart({ + tracks: updatedTracks, + targetTrackId: targetTrack.id, + requestedStartTime: earliestElement.startTime, + }); + const delta = adjustedEarliestStartTime - earliestElement.startTime; + + if (delta !== 0) { + adjustedElements = elementsToAdd.map((element) => ({ + ...element, + startTime: Math.max(0, element.startTime + delta), + })); + } + } + updatedTracks[resolvedTargetIndex] = { ...targetTrack, - elements: [...targetTrack.elements, ...elementsToAdd], + elements: [...targetTrack.elements, ...adjustedElements], } as TimelineTrack; - for (const element of elementsToAdd) { + for (const element of adjustedElements) { this.pastedElements.push({ trackId: targetTrack.id, elementId: element.id, diff --git a/apps/web/src/lib/commands/timeline/element/insert-element.ts b/apps/web/src/lib/commands/timeline/element/insert-element.ts index f95935a5..6067d72b 100644 --- a/apps/web/src/lib/commands/timeline/element/insert-element.ts +++ b/apps/web/src/lib/commands/timeline/element/insert-element.ts @@ -17,6 +17,7 @@ import { canElementGoOnTrack, getDefaultInsertIndexForTrack, validateElementTrackCompatibility, + enforceMainTrackStart, } from "@/lib/timeline/track-utils"; import type { MediaAsset } from "@/types/assets"; import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants"; @@ -204,9 +205,18 @@ export class InsertElementCommand extends Command { return null; } + const adjustedElement = this.adjustElementForMainTrack({ + tracks, + targetTrackId: targetTrack.id, + element, + }); + const updatedTracks = tracks.map((track) => track.id === targetTrack.id - ? { ...track, elements: [...track.elements, element] } + ? { + ...track, + elements: [...track.elements, adjustedElement], + } : track, ) as TimelineTrack[]; @@ -248,9 +258,18 @@ export class InsertElementCommand extends Command { }); if (existingTrack) { + const adjustedElement = this.adjustElementForMainTrack({ + tracks, + targetTrackId: existingTrack.id, + element, + }); + const updatedTracks = tracks.map((track) => track.id === existingTrack.id - ? { ...track, elements: [...track.elements, element] } + ? { + ...track, + elements: [...track.elements, adjustedElement], + } : track, ) as TimelineTrack[]; @@ -298,6 +317,23 @@ export class InsertElementCommand extends Command { }); } + private adjustElementForMainTrack({ + tracks, + targetTrackId, + element, + }: { + tracks: TimelineTrack[]; + targetTrackId: string; + element: TimelineElement; + }): TimelineElement { + const adjustedStartTime = enforceMainTrackStart({ + tracks, + targetTrackId, + requestedStartTime: element.startTime, + }); + return { ...element, startTime: adjustedStartTime }; + } + private getTrackTypeForElement({ element, }: { diff --git a/apps/web/src/lib/commands/timeline/element/move-elements.ts b/apps/web/src/lib/commands/timeline/element/move-elements.ts index 2d4f9236..2fe06694 100644 --- a/apps/web/src/lib/commands/timeline/element/move-elements.ts +++ b/apps/web/src/lib/commands/timeline/element/move-elements.ts @@ -9,6 +9,7 @@ import { buildEmptyTrack, isMainTrack, validateElementTrackCompatibility, + enforceMainTrackStart, } from "@/lib/timeline/track-utils"; export class MoveElementCommand extends Command { @@ -66,9 +67,16 @@ export class MoveElementCommand extends Command { return; } + const adjustedStartTime = enforceMainTrackStart({ + tracks: tracksToUpdate, + targetTrackId: this.targetTrackId, + requestedStartTime: this.newStartTime, + excludeElementId: this.elementId, + }); + const movedElement: TimelineElement = { ...element, - startTime: this.newStartTime, + startTime: adjustedStartTime, }; const isSameTrack = this.sourceTrackId === this.targetTrackId; diff --git a/apps/web/src/lib/commands/timeline/element/update-element-start-time.ts b/apps/web/src/lib/commands/timeline/element/update-element-start-time.ts index 5312000f..51dcb63d 100644 --- a/apps/web/src/lib/commands/timeline/element/update-element-start-time.ts +++ b/apps/web/src/lib/commands/timeline/element/update-element-start-time.ts @@ -1,6 +1,7 @@ import { Command } from "@/lib/commands/base-command"; import type { TimelineTrack } from "@/types/timeline"; import { EditorCore } from "@/core"; +import { enforceMainTrackStart } from "@/lib/timeline/track-utils"; export class UpdateElementStartTimeCommand extends Command { private savedState: TimelineTrack[] | null = null; @@ -16,7 +17,8 @@ export class UpdateElementStartTimeCommand extends Command { const editor = EditorCore.getInstance(); this.savedState = editor.timeline.getTracks(); - const updatedTracks = this.savedState.map((track) => { + const currentTracks = this.savedState; + const updatedTracks = currentTracks.map((track) => { const hasElementsToUpdate = this.elements.some( (el) => el.trackId === track.id, ); @@ -29,9 +31,19 @@ export class UpdateElementStartTimeCommand extends Command { const shouldUpdate = this.elements.some( (el) => el.elementId === element.id && el.trackId === track.id, ); - return shouldUpdate - ? { ...element, startTime: Math.max(0, this.startTime) } - : element; + if (!shouldUpdate) { + return element; + } + + const baseStartTime = Math.max(0, this.startTime); + const adjustedStartTime = enforceMainTrackStart({ + tracks: currentTracks, + targetTrackId: track.id, + requestedStartTime: baseStartTime, + excludeElementId: element.id, + }); + + return { ...element, startTime: adjustedStartTime }; }); return { ...track, elements: newElements } as typeof track; }); diff --git a/apps/web/src/lib/timeline/drop-utils.ts b/apps/web/src/lib/timeline/drop-utils.ts index 8c22194a..9182892f 100644 --- a/apps/web/src/lib/timeline/drop-utils.ts +++ b/apps/web/src/lib/timeline/drop-utils.ts @@ -2,7 +2,7 @@ import type { TimelineTrack, ElementType } from "@/types/timeline"; import { TRACK_HEIGHTS, TRACK_GAP } from "@/constants/timeline-constants"; import { wouldElementOverlap } from "./element-utils"; import type { ComputeDropTargetParams, DropTarget } from "@/types/timeline"; -import { isMainTrack } from "./track-utils"; +import { isMainTrack, enforceMainTrackStart } from "./track-utils"; function getTrackAtY({ mouseY, @@ -185,11 +185,21 @@ export function computeDropTarget({ }); if (isTrackCompatible && !hasOverlap) { + const targetTrack = tracks[trackIndex]; + // safe: snap to 0 only happens when element becomes the new earliest, + // meaning the space before the current earliest is empty + const adjustedXPosition = enforceMainTrackStart({ + tracks, + targetTrackId: targetTrack.id, + requestedStartTime: xPosition, + excludeElementId, + }); + return { trackIndex, isNewTrack: false, insertPosition: null, - xPosition, + xPosition: adjustedXPosition, }; } diff --git a/apps/web/src/lib/timeline/track-utils.ts b/apps/web/src/lib/timeline/track-utils.ts index b6261569..415d0ace 100644 --- a/apps/web/src/lib/timeline/track-utils.ts +++ b/apps/web/src/lib/timeline/track-utils.ts @@ -6,6 +6,7 @@ import type { AudioTrack, StickerTrack, TextTrack, + TimelineElement, } from "@/types/timeline"; import { TRACK_COLORS, @@ -242,3 +243,62 @@ export function validateElementTrackCompatibility({ return { isValid: true }; } + +export function getEarliestMainTrackElement({ + tracks, + excludeElementId, +}: { + tracks: TimelineTrack[]; + excludeElementId?: string; +}): TimelineElement | null { + const mainTrack = getMainTrack({ tracks }); + if (!mainTrack) { + return null; + } + + const elements = mainTrack.elements.filter( + (element) => !excludeElementId || element.id !== excludeElementId, + ); + + if (elements.length === 0) { + return null; + } + + return elements.reduce((earliest, element) => + element.startTime < earliest.startTime ? element : earliest, + ); +} + +export function enforceMainTrackStart({ + tracks, + targetTrackId, + requestedStartTime, + excludeElementId, +}: { + tracks: TimelineTrack[]; + targetTrackId: string; + requestedStartTime: number; + excludeElementId?: string; +}): number { + const mainTrack = getMainTrack({ tracks }); + if (!mainTrack || mainTrack.id !== targetTrackId) { + return requestedStartTime; + } + + const earliestElement = getEarliestMainTrackElement({ + tracks, + excludeElementId, + }); + + if (!earliestElement) { + return 0; + } + + // main track must always start at time 0; if this element would + // become the earliest, pin it to the start + if (requestedStartTime <= earliestElement.startTime) { + return 0; + } + + return requestedStartTime; +}