From 8db3bead13441a5882d8689dfc6a9f09c82375d9 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Wed, 25 Mar 2026 16:47:22 +0100 Subject: feat: masks, properties refactor, shaders, storage migrations, and more --- .../keyframes/remove-effect-param-keyframe.ts | 2 +- .../timeline/element/keyframes/remove-keyframe.ts | 45 ++++++++++------------ .../timeline/element/keyframes/retime-keyframe.ts | 20 +++++----- .../keyframes/upsert-effect-param-keyframe.ts | 2 +- .../timeline/element/keyframes/upsert-keyframe.ts | 30 +++++++++------ 5 files changed, 50 insertions(+), 49 deletions(-) (limited to 'apps/web/src/lib/commands/timeline/element/keyframes') diff --git a/apps/web/src/lib/commands/timeline/element/keyframes/remove-effect-param-keyframe.ts b/apps/web/src/lib/commands/timeline/element/keyframes/remove-effect-param-keyframe.ts index d4922532..984a5ed7 100644 --- a/apps/web/src/lib/commands/timeline/element/keyframes/remove-effect-param-keyframe.ts +++ b/apps/web/src/lib/commands/timeline/element/keyframes/remove-effect-param-keyframe.ts @@ -3,7 +3,7 @@ import { Command } from "@/lib/commands/base-command"; import { removeEffectParamKeyframe } from "@/lib/animation/effect-param-channel"; import { updateElementInTracks } from "@/lib/timeline"; import { isVisualElement } from "@/lib/timeline/element-utils"; -import type { TimelineTrack } from "@/types/timeline"; +import type { TimelineTrack } from "@/lib/timeline"; export class RemoveEffectParamKeyframeCommand extends Command { private savedState: TimelineTrack[] | null = null; 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 f12f9829..eb5cf742 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 @@ -2,15 +2,13 @@ import { EditorCore } from "@/core"; import { getChannel, getChannelValueAtTime, - getElementBaseValueForProperty, removeElementKeyframe, - supportsAnimationProperty, - withElementBaseValueForProperty, + resolveAnimationTarget, } from "@/lib/animation"; import { Command } from "@/lib/commands/base-command"; import { updateElementInTracks } from "@/lib/timeline"; -import type { AnimationPropertyPath } from "@/types/animation"; -import type { TimelineElement, TimelineTrack } from "@/types/timeline"; +import type { AnimationPath, AnimationValue } from "@/lib/animation/types"; +import type { TimelineElement, TimelineTrack } from "@/lib/timeline"; function sampleValueBeforeRemoval({ element, @@ -18,9 +16,9 @@ function sampleValueBeforeRemoval({ keyframeId, }: { element: TimelineElement; - propertyPath: AnimationPropertyPath; + propertyPath: AnimationPath; keyframeId: string; -}): number | null { +}): AnimationValue | null { const channel = getChannel({ animations: element.animations, propertyPath, @@ -32,17 +30,20 @@ function sampleValueBeforeRemoval({ return null; } - const baseValue = getElementBaseValueForProperty({ element, propertyPath }); - if (baseValue === null || typeof baseValue !== "number") { + const target = resolveAnimationTarget({ element, path: propertyPath }); + if (!target) { + return null; + } + const baseValue = target.getBaseValue(); + if (baseValue === null) { return null; } - const sampled = getChannelValueAtTime({ + return getChannelValueAtTime({ channel, time: keyframe.time, fallbackValue: baseValue, }); - return typeof sampled === "number" ? sampled : null; } function removeKeyframeAndPersist({ @@ -51,9 +52,14 @@ function removeKeyframeAndPersist({ keyframeId, }: { element: TimelineElement; - propertyPath: AnimationPropertyPath; + propertyPath: AnimationPath; keyframeId: string; }): TimelineElement { + const target = resolveAnimationTarget({ element, path: propertyPath }); + if (!target) { + return element; + } + const valueBefore = sampleValueBeforeRemoval({ element, propertyPath, @@ -71,11 +77,7 @@ function removeKeyframeAndPersist({ const shouldPersistToBase = isChannelNowEmpty && valueBefore !== null; const baseElement = shouldPersistToBase - ? withElementBaseValueForProperty({ - element, - propertyPath, - value: valueBefore, - }) + ? target.setBaseValue(valueBefore) : element; return { ...baseElement, animations: nextAnimations }; @@ -85,7 +87,7 @@ export class RemoveKeyframeCommand extends Command { private savedState: TimelineTrack[] | null = null; private readonly trackId: string; private readonly elementId: string; - private readonly propertyPath: AnimationPropertyPath; + private readonly propertyPath: AnimationPath; private readonly keyframeId: string; constructor({ @@ -96,7 +98,7 @@ export class RemoveKeyframeCommand extends Command { }: { trackId: string; elementId: string; - propertyPath: AnimationPropertyPath; + propertyPath: AnimationPath; keyframeId: string; }) { super(); @@ -114,11 +116,6 @@ export class RemoveKeyframeCommand extends Command { tracks: this.savedState, trackId: this.trackId, elementId: this.elementId, - elementPredicate: (element) => - supportsAnimationProperty({ - element, - propertyPath: this.propertyPath, - }), update: (element) => removeKeyframeAndPersist({ element, diff --git a/apps/web/src/lib/commands/timeline/element/keyframes/retime-keyframe.ts b/apps/web/src/lib/commands/timeline/element/keyframes/retime-keyframe.ts index 5328419f..9e912f27 100644 --- a/apps/web/src/lib/commands/timeline/element/keyframes/retime-keyframe.ts +++ b/apps/web/src/lib/commands/timeline/element/keyframes/retime-keyframe.ts @@ -1,15 +1,15 @@ import { EditorCore } from "@/core"; -import { retimeElementKeyframe, supportsAnimationProperty } from "@/lib/animation"; +import { resolveAnimationTarget, retimeElementKeyframe } from "@/lib/animation"; import { Command } from "@/lib/commands/base-command"; import { updateElementInTracks } from "@/lib/timeline"; -import type { AnimationPropertyPath } from "@/types/animation"; -import type { TimelineTrack } from "@/types/timeline"; +import type { AnimationPath } from "@/lib/animation/types"; +import type { TimelineTrack } from "@/lib/timeline"; export class RetimeKeyframeCommand extends Command { private savedState: TimelineTrack[] | null = null; private readonly trackId: string; private readonly elementId: string; - private readonly propertyPath: AnimationPropertyPath; + private readonly propertyPath: AnimationPath; private readonly keyframeId: string; private readonly nextTime: number; @@ -22,7 +22,7 @@ export class RetimeKeyframeCommand extends Command { }: { trackId: string; elementId: string; - propertyPath: AnimationPropertyPath; + propertyPath: AnimationPath; keyframeId: string; nextTime: number; }) { @@ -42,14 +42,12 @@ export class RetimeKeyframeCommand extends Command { tracks: this.savedState, trackId: this.trackId, elementId: this.elementId, - elementPredicate: (element) => - supportsAnimationProperty({ - element, - propertyPath: this.propertyPath, - }), update: (element) => { + if (!resolveAnimationTarget({ element, path: this.propertyPath })) { + return element; + } + const boundedTime = Math.max(0, Math.min(this.nextTime, element.duration)); - if (!Number.isFinite(boundedTime)) return element; return { ...element, animations: retimeElementKeyframe({ diff --git a/apps/web/src/lib/commands/timeline/element/keyframes/upsert-effect-param-keyframe.ts b/apps/web/src/lib/commands/timeline/element/keyframes/upsert-effect-param-keyframe.ts index f5236279..285bd80c 100644 --- a/apps/web/src/lib/commands/timeline/element/keyframes/upsert-effect-param-keyframe.ts +++ b/apps/web/src/lib/commands/timeline/element/keyframes/upsert-effect-param-keyframe.ts @@ -3,7 +3,7 @@ import { Command } from "@/lib/commands/base-command"; import { upsertEffectParamKeyframe } from "@/lib/animation/effect-param-channel"; import { updateElementInTracks } from "@/lib/timeline"; import { isVisualElement } from "@/lib/timeline/element-utils"; -import type { TimelineTrack } from "@/types/timeline"; +import type { TimelineTrack } from "@/lib/timeline"; export class UpsertEffectParamKeyframeCommand extends Command { private savedState: TimelineTrack[] | null = null; diff --git a/apps/web/src/lib/commands/timeline/element/keyframes/upsert-keyframe.ts b/apps/web/src/lib/commands/timeline/element/keyframes/upsert-keyframe.ts index 370f6865..28e7feff 100644 --- a/apps/web/src/lib/commands/timeline/element/keyframes/upsert-keyframe.ts +++ b/apps/web/src/lib/commands/timeline/element/keyframes/upsert-keyframe.ts @@ -1,19 +1,19 @@ import { EditorCore } from "@/core"; import { Command } from "@/lib/commands/base-command"; -import { supportsAnimationProperty, upsertElementKeyframe } from "@/lib/animation"; +import { resolveAnimationTarget, upsertPathKeyframe } from "@/lib/animation"; import { updateElementInTracks } from "@/lib/timeline"; -import type { TimelineTrack } from "@/types/timeline"; +import type { TimelineTrack } from "@/lib/timeline"; import type { + AnimationPath, AnimationInterpolation, - AnimationPropertyPath, AnimationValue, -} from "@/types/animation"; +} from "@/lib/animation/types"; export class UpsertKeyframeCommand extends Command { private savedState: TimelineTrack[] | null = null; private readonly trackId: string; private readonly elementId: string; - private readonly propertyPath: AnimationPropertyPath; + private readonly propertyPath: AnimationPath; private readonly time: number; private readonly value: AnimationValue; private readonly interpolation: AnimationInterpolation | undefined; @@ -30,7 +30,7 @@ export class UpsertKeyframeCommand extends Command { }: { trackId: string; elementId: string; - propertyPath: AnimationPropertyPath; + propertyPath: AnimationPath; time: number; value: AnimationValue; interpolation?: AnimationInterpolation; @@ -54,22 +54,28 @@ export class UpsertKeyframeCommand extends Command { tracks: this.savedState, trackId: this.trackId, elementId: this.elementId, - elementPredicate: (element) => - supportsAnimationProperty({ - element, - propertyPath: this.propertyPath, - }), update: (element) => { + const target = resolveAnimationTarget({ + element, + path: this.propertyPath, + }); + if (!target) { + return element; + } + const boundedTime = Math.max(0, Math.min(this.time, element.duration)); return { ...element, - animations: upsertElementKeyframe({ + animations: upsertPathKeyframe({ animations: element.animations, propertyPath: this.propertyPath, time: boundedTime, value: this.value, interpolation: this.interpolation, keyframeId: this.keyframeId, + valueKind: target.valueKind, + defaultInterpolation: target.defaultInterpolation, + numericRange: target.numericRange, }), }; }, -- cgit v1.3.1