diff options
Diffstat (limited to 'apps/web/src/lib/commands')
4 files changed, 155 insertions, 56 deletions
diff --git a/apps/web/src/lib/commands/timeline/clipboard/index.ts b/apps/web/src/lib/commands/timeline/clipboard/index.ts index 11a8bed4..e893b62b 100644 --- a/apps/web/src/lib/commands/timeline/clipboard/index.ts +++ b/apps/web/src/lib/commands/timeline/clipboard/index.ts @@ -1 +1,2 @@ export { PasteCommand } from "./paste"; +export { PasteKeyframesCommand } from "./paste-keyframes"; diff --git a/apps/web/src/lib/commands/timeline/clipboard/paste-keyframes.ts b/apps/web/src/lib/commands/timeline/clipboard/paste-keyframes.ts new file mode 100644 index 00000000..210afbd3 --- /dev/null +++ b/apps/web/src/lib/commands/timeline/clipboard/paste-keyframes.ts @@ -0,0 +1,135 @@ +import { EditorCore } from "@/core"; +import { + getKeyframeAtTime, + resolveAnimationTarget, + updateScalarKeyframeCurve, + upsertPathKeyframe, +} from "@/lib/animation"; +import { Command, type CommandResult } from "@/lib/commands/base-command"; +import type { KeyframeClipboardItem } from "@/lib/clipboard"; +import type { SceneTracks, TimelineElement } from "@/lib/timeline"; +import { updateElementInSceneTracks } from "@/lib/timeline"; +import { generateUUID } from "@/utils/id"; + +function pasteKeyframesIntoElement({ + element, + time, + clipboardItems, +}: { + element: TimelineElement; + time: number; + clipboardItems: KeyframeClipboardItem[]; +}): TimelineElement { + let nextElement = element; + + for (const item of clipboardItems) { + const target = resolveAnimationTarget({ + element: nextElement, + path: item.propertyPath, + }); + if (!target) { + continue; + } + + const keyframeTime = Math.max( + 0, + Math.min(time + item.timeOffset, nextElement.duration), + ); + const nextAnimations = upsertPathKeyframe({ + animations: nextElement.animations, + propertyPath: item.propertyPath, + time: keyframeTime, + value: item.value, + interpolation: item.interpolation, + keyframeId: generateUUID(), + kind: target.kind, + defaultInterpolation: target.defaultInterpolation, + coerceValue: target.coerceValue, + }); + const pastedKeyframe = getKeyframeAtTime({ + animations: nextAnimations, + propertyPath: item.propertyPath, + time: keyframeTime, + }); + + let patchedAnimations = nextAnimations; + if (pastedKeyframe) { + for (const curvePatch of item.curvePatches) { + const nextPatchedAnimations = updateScalarKeyframeCurve({ + animations: patchedAnimations, + propertyPath: item.propertyPath, + componentKey: curvePatch.componentKey, + keyframeId: pastedKeyframe.id, + patch: curvePatch.patch, + }); + patchedAnimations = nextPatchedAnimations ?? patchedAnimations; + } + } + + nextElement = { + ...nextElement, + animations: patchedAnimations, + }; + } + + return nextElement; +} + +export class PasteKeyframesCommand extends Command { + private savedState: SceneTracks | null = null; + private readonly trackId: string; + private readonly elementId: string; + private readonly time: number; + private readonly clipboardItems: KeyframeClipboardItem[]; + + constructor({ + trackId, + elementId, + time, + clipboardItems, + }: { + trackId: string; + elementId: string; + time: number; + clipboardItems: KeyframeClipboardItem[]; + }) { + super(); + this.trackId = trackId; + this.elementId = elementId; + this.time = time; + this.clipboardItems = clipboardItems; + } + + execute(): CommandResult | undefined { + if (this.clipboardItems.length === 0) { + return undefined; + } + + const editor = EditorCore.getInstance(); + this.savedState = editor.scenes.getActiveScene().tracks; + + const updatedTracks = updateElementInSceneTracks({ + tracks: this.savedState, + trackId: this.trackId, + elementId: this.elementId, + update: (element) => + pasteKeyframesIntoElement({ + element, + time: this.time, + clipboardItems: this.clipboardItems, + }), + }); + + editor.timeline.updateTracks(updatedTracks); + return undefined; + } + + undo(): void { + if (!this.savedState) { + return; + } + + const editor = EditorCore.getInstance(); + editor.timeline.updateTracks(this.savedState); + } +} diff --git a/apps/web/src/lib/commands/timeline/clipboard/paste.ts b/apps/web/src/lib/commands/timeline/clipboard/paste.ts index 6ccf96fb..347c4f68 100644 --- a/apps/web/src/lib/commands/timeline/clipboard/paste.ts +++ b/apps/web/src/lib/commands/timeline/clipboard/paste.ts @@ -1,10 +1,7 @@ import { Command, type CommandResult } from "@/lib/commands/base-command"; import { EditorCore } from "@/core"; -import type { - SceneTracks, - TimelineElement, - ClipboardItem, -} from "@/lib/timeline"; +import type { SceneTracks, TimelineElement } from "@/lib/timeline"; +import type { ElementClipboardItem } from "@/lib/clipboard"; import { generateUUID } from "@/utils/id"; import { applyPlacement, resolveTrackPlacement, enforceMainTrackStart } from "@/lib/timeline/placement"; import { cloneAnimations } from "@/lib/animation"; @@ -13,14 +10,14 @@ export class PasteCommand extends Command { private savedState: SceneTracks | null = null; private pastedElements: { trackId: string; elementId: string }[] = []; private readonly time: number; - private readonly clipboardItems: ClipboardItem[]; + private readonly clipboardItems: ElementClipboardItem[]; constructor({ time, clipboardItems, }: { time: number; - clipboardItems: ClipboardItem[]; + clipboardItems: ElementClipboardItem[]; }) { super(); this.time = time; @@ -145,9 +142,9 @@ export class PasteCommand extends Command { function groupClipboardItemsByTrackId({ clipboardItems, }: { - clipboardItems: ClipboardItem[]; -}): Map<string, ClipboardItem[]> { - const groupedItems = new Map<string, ClipboardItem[]>(); + clipboardItems: ElementClipboardItem[]; +}): Map<string, ElementClipboardItem[]> { + const groupedItems = new Map<string, ElementClipboardItem[]>(); for (const item of clipboardItems) { const existingItems = groupedItems.get(item.trackId) ?? []; @@ -162,7 +159,7 @@ function buildPastedElements({ minStart, time, }: { - items: ClipboardItem[]; + items: ElementClipboardItem[]; minStart: number; time: number; }): TimelineElement[] { diff --git a/apps/web/src/lib/commands/timeline/element/keyframes/remove-keyframe.ts b/apps/web/src/lib/commands/timeline/element/keyframes/remove-keyframe.ts index c757055d..3c3d1c6b 100644 --- a/apps/web/src/lib/commands/timeline/element/keyframes/remove-keyframe.ts +++ b/apps/web/src/lib/commands/timeline/element/keyframes/remove-keyframe.ts @@ -1,9 +1,7 @@ import { EditorCore } from "@/core"; import { hasKeyframesForPath, - getKeyframeById, removeElementKeyframe, - resolveAnimationPathValueAtTime, resolveAnimationTarget, } from "@/lib/animation"; import { Command, type CommandResult } from "@/lib/commands/base-command"; @@ -11,61 +9,22 @@ import { updateElementInSceneTracks } from "@/lib/timeline"; import type { AnimationPath, AnimationValue } from "@/lib/animation/types"; import type { SceneTracks, TimelineElement } from "@/lib/timeline"; -function sampleValueBeforeRemoval({ - element, - propertyPath, - keyframeId, -}: { - element: TimelineElement; - propertyPath: AnimationPath; - keyframeId: string; -}): AnimationValue | null { - const target = resolveAnimationTarget({ element, path: propertyPath }); - if (!target) { - return null; - } - const baseValue = target.getBaseValue(); - if (baseValue === null) { - return null; - } - - const keyframe = getKeyframeById({ - animations: element.animations, - propertyPath, - keyframeId, - }); - if (!keyframe) { - return null; - } - - return resolveAnimationPathValueAtTime({ - animations: element.animations, - propertyPath, - localTime: keyframe.time, - fallbackValue: baseValue, - }); -} - function removeKeyframeAndPersist({ element, propertyPath, keyframeId, + valueAtPlayhead, }: { element: TimelineElement; propertyPath: AnimationPath; keyframeId: string; + valueAtPlayhead: AnimationValue | null; }): TimelineElement { const target = resolveAnimationTarget({ element, path: propertyPath }); if (!target) { return element; } - const valueBefore = sampleValueBeforeRemoval({ - element, - propertyPath, - keyframeId, - }); - const nextAnimations = removeElementKeyframe({ animations: element.animations, propertyPath, @@ -76,10 +35,12 @@ function removeKeyframeAndPersist({ animations: nextAnimations, propertyPath, }); - const shouldPersistToBase = isChannelNowEmpty && valueBefore !== null; + + // When clearing all keyframes, preserve the value at the playhead (what the user was seeing) + const shouldPersistToBase = isChannelNowEmpty && valueAtPlayhead !== null; const baseElement = shouldPersistToBase - ? target.setBaseValue({ value: valueBefore }) + ? target.setBaseValue({ value: valueAtPlayhead }) : element; return { ...baseElement, animations: nextAnimations }; @@ -91,23 +52,27 @@ export class RemoveKeyframeCommand extends Command { private readonly elementId: string; private readonly propertyPath: AnimationPath; private readonly keyframeId: string; + private readonly valueAtPlayhead: AnimationValue | null; constructor({ trackId, elementId, propertyPath, keyframeId, + valueAtPlayhead, }: { trackId: string; elementId: string; propertyPath: AnimationPath; keyframeId: string; + valueAtPlayhead: AnimationValue | null; }) { super(); this.trackId = trackId; this.elementId = elementId; this.propertyPath = propertyPath; this.keyframeId = keyframeId; + this.valueAtPlayhead = valueAtPlayhead; } execute(): CommandResult | undefined { @@ -123,6 +88,7 @@ export class RemoveKeyframeCommand extends Command { element, propertyPath: this.propertyPath, keyframeId: this.keyframeId, + valueAtPlayhead: this.valueAtPlayhead, }), }); |