diff options
Diffstat (limited to 'apps/web/src/lib')
| -rw-r--r-- | apps/web/src/lib/clipboard/handlers/elements.ts | 48 | ||||
| -rw-r--r-- | apps/web/src/lib/clipboard/handlers/index.ts | 49 | ||||
| -rw-r--r-- | apps/web/src/lib/clipboard/handlers/keyframes.ts | 170 | ||||
| -rw-r--r-- | apps/web/src/lib/clipboard/index.ts | 2 | ||||
| -rw-r--r-- | apps/web/src/lib/clipboard/types.ts | 79 | ||||
| -rw-r--r-- | apps/web/src/lib/commands/timeline/clipboard/index.ts | 1 | ||||
| -rw-r--r-- | apps/web/src/lib/commands/timeline/clipboard/paste-keyframes.ts | 135 | ||||
| -rw-r--r-- | apps/web/src/lib/commands/timeline/clipboard/paste.ts | 19 | ||||
| -rw-r--r-- | apps/web/src/lib/commands/timeline/element/keyframes/remove-keyframe.ts | 56 | ||||
| -rw-r--r-- | apps/web/src/lib/timeline/types.ts | 2 |
10 files changed, 505 insertions, 56 deletions
diff --git a/apps/web/src/lib/clipboard/handlers/elements.ts b/apps/web/src/lib/clipboard/handlers/elements.ts new file mode 100644 index 00000000..1b58ac78 --- /dev/null +++ b/apps/web/src/lib/clipboard/handlers/elements.ts @@ -0,0 +1,48 @@ +import { PasteCommand } from "@/lib/commands/timeline"; +import type { ClipboardHandler } from "../types"; + +export const ElementsClipboardHandler = { + type: "elements", + + canCopy({ selectedElements }) { + return selectedElements.length > 0; + }, + + copy({ editor, selectedElements }) { + if (selectedElements.length === 0) { + return null; + } + + const results = editor.timeline.getElementsWithTracks({ + elements: selectedElements, + }); + const items = results.map(({ track, element }) => { + const { id: _elementId, ...elementWithoutId } = element; + return { + trackId: track.id, + trackType: track.type, + element: elementWithoutId, + }; + }); + + if (items.length === 0) { + return null; + } + + return { + type: "elements", + items, + }; + }, + + paste(entry, context) { + if (entry.items.length === 0) { + return null; + } + + return new PasteCommand({ + time: context.time, + clipboardItems: entry.items, + }); + }, +} satisfies ClipboardHandler<"elements">; diff --git a/apps/web/src/lib/clipboard/handlers/index.ts b/apps/web/src/lib/clipboard/handlers/index.ts new file mode 100644 index 00000000..29d4d1d0 --- /dev/null +++ b/apps/web/src/lib/clipboard/handlers/index.ts @@ -0,0 +1,49 @@ +import type { + ClipboardEntry, + ClipboardEntryType, + ClipboardHandler, + ClipboardHandlerMap, + CopyContext, + PasteContext, +} from "../types"; +import { ElementsClipboardHandler } from "./elements"; +import { KeyframesClipboardHandler } from "./keyframes"; + +export const clipboardHandlers = { + elements: ElementsClipboardHandler, + keyframes: KeyframesClipboardHandler, +} satisfies ClipboardHandlerMap; + +export const clipboardCopyHandlers = [ + KeyframesClipboardHandler, + ElementsClipboardHandler, +] as const satisfies readonly ClipboardHandler<ClipboardEntryType>[]; + +export function copyClipboardEntry({ + context, +}: { + context: CopyContext; +}): ClipboardEntry | null { + for (const handler of clipboardCopyHandlers) { + if (!handler.canCopy(context)) { + continue; + } + + return handler.copy(context); + } + + return null; +} + +export function buildPasteClipboardCommand({ + entry, + context, +}: { + entry: ClipboardEntry; + context: PasteContext; +}) { + const handler = clipboardHandlers[entry.type] as ClipboardHandler< + typeof entry.type + >; + return handler.paste(entry as never, context); +} diff --git a/apps/web/src/lib/clipboard/handlers/keyframes.ts b/apps/web/src/lib/clipboard/handlers/keyframes.ts new file mode 100644 index 00000000..b746c179 --- /dev/null +++ b/apps/web/src/lib/clipboard/handlers/keyframes.ts @@ -0,0 +1,170 @@ +import { getKeyframeById } from "@/lib/animation"; +import type { SelectedKeyframeRef } from "@/lib/animation/types"; +import type { TimelineElement } from "@/lib/timeline"; +import { PasteKeyframesCommand } from "@/lib/commands/timeline"; +import type { + ClipboardHandler, + KeyframeClipboardCurvePatch, + KeyframeClipboardItem, +} from "../types"; + +function resolveSingleSourceElement({ + selectedKeyframes, +}: { + selectedKeyframes: SelectedKeyframeRef[]; +}) { + const firstKeyframe = selectedKeyframes[0]; + if (!firstKeyframe) { + return null; + } + + const sourceElement = { + trackId: firstKeyframe.trackId, + elementId: firstKeyframe.elementId, + }; + const isSingleSource = selectedKeyframes.every( + (keyframe) => + keyframe.trackId === sourceElement.trackId && + keyframe.elementId === sourceElement.elementId, + ); + + return isSingleSource ? sourceElement : null; +} + +function getCurvePatches({ + element, + propertyPath, + keyframeId, +}: { + element: TimelineElement; + propertyPath: KeyframeClipboardItem["propertyPath"]; + keyframeId: string; +}): KeyframeClipboardCurvePatch[] { + const binding = element.animations?.bindings[propertyPath]; + if (!binding) { + return []; + } + + return binding.components.flatMap((component) => { + const channel = element.animations?.channels[component.channelId]; + if (channel?.kind !== "scalar") { + return []; + } + + const keyframe = channel.keys.find( + (candidate) => candidate.id === keyframeId, + ); + if (!keyframe) { + return []; + } + + return [ + { + componentKey: component.key, + patch: { + leftHandle: keyframe.leftHandle ?? null, + rightHandle: keyframe.rightHandle ?? null, + segmentToNext: keyframe.segmentToNext, + tangentMode: keyframe.tangentMode, + }, + }, + ]; + }); +} + +function buildClipboardItem({ + element, + propertyPath, + keyframeId, +}: { + element: TimelineElement; + propertyPath: KeyframeClipboardItem["propertyPath"]; + keyframeId: string; +}): (Omit<KeyframeClipboardItem, "timeOffset"> & { time: number }) | null { + const keyframe = getKeyframeById({ + animations: element.animations, + propertyPath, + keyframeId, + }); + if (!keyframe) { + return null; + } + + return { + propertyPath, + time: keyframe.time, + value: keyframe.value, + interpolation: keyframe.interpolation, + curvePatches: getCurvePatches({ + element, + propertyPath, + keyframeId, + }), + }; +} + +export const KeyframesClipboardHandler = { + type: "keyframes", + + canCopy({ selectedKeyframes }) { + return selectedKeyframes.length > 0; + }, + + copy({ editor, selectedKeyframes }) { + const sourceElement = resolveSingleSourceElement({ selectedKeyframes }); + if (!sourceElement) { + return null; + } + + const [result] = editor.timeline.getElementsWithTracks({ + elements: [sourceElement], + }); + if (!result) { + return null; + } + + const rawItems = selectedKeyframes.flatMap((keyframeRef) => { + const item = buildClipboardItem({ + element: result.element, + propertyPath: keyframeRef.propertyPath, + keyframeId: keyframeRef.keyframeId, + }); + return item ? [item] : []; + }); + if (rawItems.length === 0) { + return null; + } + + const minTime = Math.min(...rawItems.map((item) => item.time)); + const items = rawItems + .map(({ time, ...item }) => ({ + ...item, + timeOffset: time - minTime, + })) + .sort( + (left, right) => + left.timeOffset - right.timeOffset || + left.propertyPath.localeCompare(right.propertyPath), + ); + + return { + type: "keyframes", + sourceElement, + items, + }; + }, + + paste(entry, { selectedElements, time }) { + const targetElement = selectedElements[0]; + if (!targetElement || entry.items.length === 0) { + return null; + } + + return new PasteKeyframesCommand({ + trackId: targetElement.trackId, + elementId: targetElement.elementId, + time, + clipboardItems: entry.items, + }); + }, +} satisfies ClipboardHandler<"keyframes">; diff --git a/apps/web/src/lib/clipboard/index.ts b/apps/web/src/lib/clipboard/index.ts new file mode 100644 index 00000000..76d5bddf --- /dev/null +++ b/apps/web/src/lib/clipboard/index.ts @@ -0,0 +1,2 @@ +export * from "./types"; +export * from "./handlers"; diff --git a/apps/web/src/lib/clipboard/types.ts b/apps/web/src/lib/clipboard/types.ts new file mode 100644 index 00000000..41e107ef --- /dev/null +++ b/apps/web/src/lib/clipboard/types.ts @@ -0,0 +1,79 @@ +import type { EditorCore } from "@/core"; +import type { + AnimationInterpolation, + AnimationPath, + AnimationValue, + ScalarCurveKeyframePatch, + SelectedKeyframeRef, +} from "@/lib/animation/types"; +import type { Command } from "@/lib/commands/base-command"; +import type { + CreateTimelineElement, + ElementRef, + TrackType, +} from "@/lib/timeline"; + +export interface ElementClipboardItem { + trackId: string; + trackType: TrackType; + element: CreateTimelineElement; +} + +export interface KeyframeClipboardCurvePatch { + componentKey: string; + patch: ScalarCurveKeyframePatch; +} + +export interface KeyframeClipboardItem { + propertyPath: AnimationPath; + timeOffset: number; + value: AnimationValue; + interpolation: AnimationInterpolation; + curvePatches: KeyframeClipboardCurvePatch[]; +} + +export interface ElementsClipboardEntry { + type: "elements"; + items: ElementClipboardItem[]; +} + +export interface KeyframesClipboardEntry { + type: "keyframes"; + sourceElement: ElementRef; + items: KeyframeClipboardItem[]; +} + +export interface ClipboardEntryByType { + elements: ElementsClipboardEntry; + keyframes: KeyframesClipboardEntry; +} + +export type ClipboardEntry = ClipboardEntryByType[keyof ClipboardEntryByType]; +export type ClipboardEntryType = keyof ClipboardEntryByType; + +export interface CopyContext { + editor: EditorCore; + selectedElements: ElementRef[]; + selectedKeyframes: SelectedKeyframeRef[]; +} + +export interface PasteContext { + editor: EditorCore; + selectedElements: ElementRef[]; + selectedKeyframes: SelectedKeyframeRef[]; + time: number; +} + +export interface ClipboardHandler<TType extends ClipboardEntryType> { + type: TType; + canCopy(context: CopyContext): boolean; + copy(context: CopyContext): ClipboardEntryByType[TType] | null; + paste( + entry: ClipboardEntryByType[TType], + context: PasteContext, + ): Command | null; +} + +export type ClipboardHandlerMap = { + [TType in ClipboardEntryType]: ClipboardHandler<TType>; +}; 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, }), }); diff --git a/apps/web/src/lib/timeline/types.ts b/apps/web/src/lib/timeline/types.ts index 1b2c7c9b..ca9ac999 100644 --- a/apps/web/src/lib/timeline/types.ts +++ b/apps/web/src/lib/timeline/types.ts @@ -272,6 +272,8 @@ export type CreateTimelineElement = export interface ElementDragState {
isDragging: boolean;
elementId: string | null;
+ dragElementIds: string[];
+ dragTimeOffsets: Record<string, number>;
trackId: string | null;
startMouseX: number;
startMouseY: number;
|