1362 lines
30 KiB
TypeScript
1362 lines
30 KiB
TypeScript
import type {
|
|
AnimationChannel,
|
|
ChannelData,
|
|
AnimationInterpolation,
|
|
AnimationPath,
|
|
DiscreteAnimationChannel,
|
|
DiscreteAnimationKey,
|
|
ElementAnimations,
|
|
ScalarAnimationChannel,
|
|
ScalarAnimationKey,
|
|
ScalarCurveKeyframePatch,
|
|
ScalarSegmentType,
|
|
} from "@/animation/types";
|
|
import type {
|
|
ChannelComponentDefinition,
|
|
ParamChannelLayout,
|
|
ParamValue,
|
|
} from "@/params";
|
|
import {
|
|
getChannelsFromData,
|
|
isCompositeChannelData,
|
|
isAnimationStorageKey,
|
|
isLeafChannelData,
|
|
} from "./channel-data";
|
|
import {
|
|
getDefaultLeftHandle,
|
|
getDefaultRightHandle,
|
|
solveBezierProgressForTime,
|
|
} from "./bezier";
|
|
import {
|
|
getChannelValueAtTime,
|
|
getScalarSegmentInterpolation,
|
|
isScalarChannel,
|
|
normalizeChannel,
|
|
normalizeDiscreteChannel,
|
|
normalizeScalarChannel,
|
|
} from "./interpolation";
|
|
import {
|
|
type MediaTime,
|
|
roundMediaTime,
|
|
subMediaTime,
|
|
ZERO_MEDIA_TIME,
|
|
} from "@/wasm";
|
|
import { generateUUID } from "@/utils/id";
|
|
|
|
function isNearlySameTime({
|
|
leftTime,
|
|
rightTime,
|
|
}: {
|
|
leftTime: number;
|
|
rightTime: number;
|
|
}): boolean {
|
|
return leftTime === rightTime;
|
|
}
|
|
|
|
function hasChannelKeys({
|
|
channel,
|
|
}: {
|
|
channel: AnimationChannel | undefined;
|
|
}): boolean {
|
|
return Boolean(channel && channel.keys.length > 0);
|
|
}
|
|
|
|
function hasChannelData({ data }: { data: ChannelData | undefined }): boolean {
|
|
return getChannelsFromData({ data }).some((channel) =>
|
|
hasChannelKeys({ channel }),
|
|
);
|
|
}
|
|
|
|
function toAnimation({
|
|
animations,
|
|
}: {
|
|
animations: ElementAnimations;
|
|
}): ElementAnimations | undefined {
|
|
const nextAnimations = Object.fromEntries(
|
|
Object.entries(animations).filter(
|
|
([key, data]) => isAnimationStorageKey({ key }) && hasChannelData({ data }),
|
|
),
|
|
);
|
|
if (Object.keys(nextAnimations).length === 0) {
|
|
return undefined;
|
|
}
|
|
|
|
return nextAnimations;
|
|
}
|
|
|
|
function cloneAnimationsState({
|
|
animations,
|
|
}: {
|
|
animations: ElementAnimations | undefined;
|
|
}): ElementAnimations {
|
|
return { ...(animations ?? {}) };
|
|
}
|
|
|
|
function getChannelFromData({
|
|
data,
|
|
componentKey,
|
|
}: {
|
|
data: ChannelData | undefined;
|
|
componentKey: string;
|
|
}): AnimationChannel | undefined {
|
|
if (isLeafChannelData(data)) {
|
|
return componentKey === "value" ? data : undefined;
|
|
}
|
|
if (isCompositeChannelData(data)) {
|
|
return data[componentKey];
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
type LayoutComponent = ChannelComponentDefinition<string>;
|
|
|
|
function getLayoutComponents({
|
|
channelLayout,
|
|
}: {
|
|
channelLayout: ParamChannelLayout;
|
|
}): LayoutComponent[] {
|
|
return channelLayout.kind === "leaf"
|
|
? [channelLayout.component]
|
|
: channelLayout.components;
|
|
}
|
|
|
|
function getPrimaryComponentKey({
|
|
channelLayout,
|
|
}: {
|
|
channelLayout: ParamChannelLayout;
|
|
}): string {
|
|
return getLayoutComponents({ channelLayout })[0]?.key ?? "value";
|
|
}
|
|
|
|
function getPrimaryChannelFromData({
|
|
data,
|
|
channelLayout,
|
|
}: {
|
|
data: ChannelData | undefined;
|
|
channelLayout: ParamChannelLayout;
|
|
}): AnimationChannel | undefined {
|
|
return getChannelFromData({
|
|
data,
|
|
componentKey: getPrimaryComponentKey({ channelLayout }),
|
|
});
|
|
}
|
|
|
|
function setChannelInData({
|
|
data,
|
|
componentKey,
|
|
channel,
|
|
}: {
|
|
data: ChannelData | undefined;
|
|
componentKey: string;
|
|
channel: AnimationChannel | undefined;
|
|
}): ChannelData | undefined {
|
|
if (componentKey === "value") {
|
|
return channel;
|
|
}
|
|
const components = isCompositeChannelData(data) ? { ...data } : {};
|
|
if (channel && hasChannelKeys({ channel })) {
|
|
components[componentKey] = channel;
|
|
} else {
|
|
delete components[componentKey];
|
|
}
|
|
return Object.keys(components).length > 0 ? components : undefined;
|
|
}
|
|
|
|
function getChannelDataEntries({
|
|
data,
|
|
}: {
|
|
data: ChannelData | undefined;
|
|
}): Array<[string, AnimationChannel | undefined]> {
|
|
if (isLeafChannelData(data)) {
|
|
return [["value", data]];
|
|
}
|
|
return isCompositeChannelData(data) ? Object.entries(data) : [];
|
|
}
|
|
|
|
function getScalarSegmentType({
|
|
interpolation,
|
|
}: {
|
|
interpolation: AnimationInterpolation;
|
|
}): ScalarSegmentType {
|
|
if (interpolation === "hold") {
|
|
return "step";
|
|
}
|
|
return interpolation === "bezier" ? "bezier" : "linear";
|
|
}
|
|
|
|
function getInterpolationForComponent({
|
|
component,
|
|
interpolation,
|
|
}: {
|
|
component: LayoutComponent;
|
|
interpolation: AnimationInterpolation | undefined;
|
|
}): AnimationInterpolation {
|
|
if (component.valueKind === "discrete") {
|
|
return "hold";
|
|
}
|
|
|
|
if (
|
|
interpolation === "linear" ||
|
|
interpolation === "hold" ||
|
|
interpolation === "bezier"
|
|
) {
|
|
return interpolation;
|
|
}
|
|
|
|
return component.defaultInterpolation;
|
|
}
|
|
|
|
function decomposeChannelLayoutValue({
|
|
channelLayout,
|
|
value,
|
|
}: {
|
|
channelLayout: ParamChannelLayout;
|
|
value: ParamValue;
|
|
}): Record<string, ParamValue> | null {
|
|
if (channelLayout.kind === "leaf") {
|
|
return { [channelLayout.component.key]: value };
|
|
}
|
|
if (typeof value !== "string") {
|
|
return null;
|
|
}
|
|
|
|
const components = channelLayout.decompose(value);
|
|
return components ? { ...components } : null;
|
|
}
|
|
|
|
function createScalarKey({
|
|
id,
|
|
time,
|
|
value,
|
|
interpolation,
|
|
previousKey,
|
|
}: {
|
|
id: string;
|
|
time: MediaTime;
|
|
value: number;
|
|
interpolation?: AnimationInterpolation;
|
|
previousKey?: ScalarAnimationKey;
|
|
}): ScalarAnimationKey {
|
|
return {
|
|
id,
|
|
time,
|
|
value,
|
|
leftHandle: previousKey?.leftHandle,
|
|
rightHandle: previousKey?.rightHandle,
|
|
segmentToNext:
|
|
previousKey?.segmentToNext ??
|
|
getScalarSegmentType({ interpolation: interpolation ?? "linear" }),
|
|
tangentMode: previousKey?.tangentMode ?? "flat",
|
|
};
|
|
}
|
|
|
|
function createDiscreteKey({
|
|
id,
|
|
time,
|
|
value,
|
|
}: {
|
|
id: string;
|
|
time: MediaTime;
|
|
value: string | boolean;
|
|
}): DiscreteAnimationKey {
|
|
return {
|
|
id,
|
|
time,
|
|
value,
|
|
};
|
|
}
|
|
|
|
function isDiscreteChannel(
|
|
channel: AnimationChannel | undefined,
|
|
): channel is DiscreteAnimationChannel {
|
|
return channel != null && !isScalarChannel(channel);
|
|
}
|
|
|
|
function getChannelData({
|
|
animations,
|
|
propertyPath,
|
|
}: {
|
|
animations: ElementAnimations | undefined;
|
|
propertyPath: AnimationPath;
|
|
}): ChannelData | undefined {
|
|
return animations?.[propertyPath];
|
|
}
|
|
|
|
function getTargetKeyMetadata({
|
|
channel,
|
|
time,
|
|
keyframeId,
|
|
}: {
|
|
channel: AnimationChannel | undefined;
|
|
time: MediaTime;
|
|
keyframeId?: string;
|
|
}) {
|
|
const normalizedChannel =
|
|
channel != null ? normalizeChannel({ channel }) : undefined;
|
|
const keys = normalizedChannel?.keys ?? [];
|
|
if (keyframeId) {
|
|
const keyById = keys.find((key) => key.id === keyframeId);
|
|
if (keyById) {
|
|
return {
|
|
id: keyById.id,
|
|
time,
|
|
};
|
|
}
|
|
}
|
|
|
|
const keyAtTime = keys.find((key) =>
|
|
isNearlySameTime({ leftTime: key.time, rightTime: time }),
|
|
);
|
|
if (keyAtTime) {
|
|
return {
|
|
id: keyAtTime.id,
|
|
time: keyAtTime.time,
|
|
};
|
|
}
|
|
|
|
return {
|
|
id: keyframeId ?? generateUUID(),
|
|
time,
|
|
};
|
|
}
|
|
|
|
function upsertDiscreteChannelKey({
|
|
channel,
|
|
time,
|
|
value,
|
|
keyframeId,
|
|
}: {
|
|
channel: DiscreteAnimationChannel | undefined;
|
|
time: MediaTime;
|
|
value: string | boolean;
|
|
keyframeId?: string;
|
|
}): DiscreteAnimationChannel {
|
|
const normalizedChannel = normalizeDiscreteChannel({
|
|
channel: channel ?? { keys: [] },
|
|
});
|
|
const keys = [...normalizedChannel.keys];
|
|
if (keyframeId) {
|
|
const existingIndex = keys.findIndex((key) => key.id === keyframeId);
|
|
if (existingIndex >= 0) {
|
|
keys[existingIndex] = createDiscreteKey({
|
|
id: keys[existingIndex].id,
|
|
time,
|
|
value,
|
|
});
|
|
return normalizeDiscreteChannel({
|
|
channel: { keys },
|
|
});
|
|
}
|
|
}
|
|
|
|
const existingAtTimeIndex = keys.findIndex((key) =>
|
|
isNearlySameTime({ leftTime: key.time, rightTime: time }),
|
|
);
|
|
if (existingAtTimeIndex >= 0) {
|
|
keys[existingAtTimeIndex] = createDiscreteKey({
|
|
id: keys[existingAtTimeIndex].id,
|
|
time: keys[existingAtTimeIndex].time,
|
|
value,
|
|
});
|
|
return normalizeDiscreteChannel({
|
|
channel: { keys },
|
|
});
|
|
}
|
|
|
|
keys.push(
|
|
createDiscreteKey({
|
|
id: keyframeId ?? generateUUID(),
|
|
time,
|
|
value,
|
|
}),
|
|
);
|
|
return normalizeDiscreteChannel({
|
|
channel: { keys },
|
|
});
|
|
}
|
|
|
|
function upsertScalarChannelKey({
|
|
channel,
|
|
time,
|
|
value,
|
|
interpolation,
|
|
defaultInterpolation,
|
|
keyframeId,
|
|
}: {
|
|
channel: ScalarAnimationChannel | undefined;
|
|
time: MediaTime;
|
|
value: number;
|
|
interpolation?: AnimationInterpolation;
|
|
defaultInterpolation?: AnimationInterpolation;
|
|
keyframeId?: string;
|
|
}): ScalarAnimationChannel {
|
|
const normalizedChannel = normalizeScalarChannel({
|
|
channel: channel ?? { keys: [] },
|
|
});
|
|
const keys = [...normalizedChannel.keys];
|
|
if (keyframeId) {
|
|
const existingIndex = keys.findIndex((key) => key.id === keyframeId);
|
|
if (existingIndex >= 0) {
|
|
keys[existingIndex] = createScalarKey({
|
|
id: keys[existingIndex].id,
|
|
time,
|
|
value,
|
|
interpolation,
|
|
previousKey:
|
|
interpolation != null
|
|
? {
|
|
...keys[existingIndex],
|
|
segmentToNext: getScalarSegmentType({ interpolation }),
|
|
}
|
|
: keys[existingIndex],
|
|
});
|
|
return normalizeScalarChannel({
|
|
channel: {
|
|
keys,
|
|
extrapolation: normalizedChannel.extrapolation,
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
const existingAtTimeIndex = keys.findIndex((key) =>
|
|
isNearlySameTime({ leftTime: key.time, rightTime: time }),
|
|
);
|
|
if (existingAtTimeIndex >= 0) {
|
|
keys[existingAtTimeIndex] = createScalarKey({
|
|
id: keys[existingAtTimeIndex].id,
|
|
time: keys[existingAtTimeIndex].time,
|
|
value,
|
|
interpolation,
|
|
previousKey:
|
|
interpolation != null
|
|
? {
|
|
...keys[existingAtTimeIndex],
|
|
segmentToNext: getScalarSegmentType({ interpolation }),
|
|
}
|
|
: keys[existingAtTimeIndex],
|
|
});
|
|
return normalizeScalarChannel({
|
|
channel: {
|
|
keys,
|
|
extrapolation: normalizedChannel.extrapolation,
|
|
},
|
|
});
|
|
}
|
|
|
|
keys.push(
|
|
createScalarKey({
|
|
id: keyframeId ?? generateUUID(),
|
|
time,
|
|
value,
|
|
interpolation: interpolation ?? defaultInterpolation,
|
|
}),
|
|
);
|
|
return normalizeScalarChannel({
|
|
channel: {
|
|
keys,
|
|
extrapolation: normalizedChannel.extrapolation,
|
|
},
|
|
});
|
|
}
|
|
|
|
export function getChannel({
|
|
animations,
|
|
propertyPath,
|
|
}: {
|
|
animations: ElementAnimations | undefined;
|
|
propertyPath: AnimationPath;
|
|
}): AnimationChannel | undefined {
|
|
const data = getChannelData({ animations, propertyPath });
|
|
if (isLeafChannelData(data)) {
|
|
return data;
|
|
}
|
|
return getChannelsFromData({ data })[0];
|
|
}
|
|
|
|
export function upsertPathKeyframe({
|
|
animations,
|
|
propertyPath,
|
|
time,
|
|
value,
|
|
interpolation,
|
|
keyframeId,
|
|
channelLayout,
|
|
coerceValue,
|
|
}: {
|
|
animations: ElementAnimations | undefined;
|
|
propertyPath: AnimationPath;
|
|
time: MediaTime;
|
|
value: ParamValue;
|
|
interpolation?: AnimationInterpolation;
|
|
keyframeId?: string;
|
|
channelLayout: ParamChannelLayout;
|
|
coerceValue: ({ value }: { value: ParamValue }) => ParamValue | null;
|
|
}): ElementAnimations | undefined {
|
|
const coercedValue = coerceValue({ value });
|
|
if (coercedValue === null) {
|
|
return animations;
|
|
}
|
|
|
|
const nextAnimations = cloneAnimationsState({ animations });
|
|
const currentData = getChannelData({ animations, propertyPath });
|
|
const primaryChannel = getPrimaryChannelFromData({
|
|
data: currentData,
|
|
channelLayout,
|
|
});
|
|
const targetKey = getTargetKeyMetadata({
|
|
channel: primaryChannel,
|
|
time,
|
|
keyframeId,
|
|
});
|
|
const componentValues = decomposeChannelLayoutValue({
|
|
channelLayout,
|
|
value: coercedValue,
|
|
});
|
|
if (!componentValues) {
|
|
return animations;
|
|
}
|
|
|
|
let nextData: ChannelData | undefined = currentData;
|
|
for (const component of getLayoutComponents({ channelLayout })) {
|
|
const componentKey = component.key;
|
|
const nextValue = componentValues[componentKey];
|
|
if (nextValue == null) {
|
|
continue;
|
|
}
|
|
|
|
const currentChannel = getChannelFromData({
|
|
data: currentData,
|
|
componentKey,
|
|
});
|
|
if (component.valueKind === "discrete") {
|
|
if (typeof nextValue !== "string" && typeof nextValue !== "boolean") {
|
|
continue;
|
|
}
|
|
const nextChannel = upsertDiscreteChannelKey({
|
|
channel: isDiscreteChannel(currentChannel) ? currentChannel : undefined,
|
|
time: targetKey.time,
|
|
value: nextValue,
|
|
keyframeId: targetKey.id,
|
|
});
|
|
nextData = setChannelInData({
|
|
data: nextData,
|
|
componentKey,
|
|
channel: nextChannel,
|
|
});
|
|
continue;
|
|
}
|
|
|
|
if (typeof nextValue !== "number") {
|
|
continue;
|
|
}
|
|
const nextChannel = upsertScalarChannelKey({
|
|
channel:
|
|
currentChannel != null && isScalarChannel(currentChannel)
|
|
? currentChannel
|
|
: undefined,
|
|
time: targetKey.time,
|
|
value: nextValue,
|
|
interpolation:
|
|
interpolation != null
|
|
? getInterpolationForComponent({ component, interpolation })
|
|
: undefined,
|
|
defaultInterpolation: component.defaultInterpolation,
|
|
keyframeId: targetKey.id,
|
|
});
|
|
nextData = setChannelInData({
|
|
data: nextData,
|
|
componentKey,
|
|
channel: nextChannel,
|
|
});
|
|
}
|
|
nextAnimations[propertyPath] = nextData;
|
|
|
|
return toAnimation({
|
|
animations: nextAnimations,
|
|
});
|
|
}
|
|
|
|
export function upsertKeyframe({
|
|
channel,
|
|
time,
|
|
value,
|
|
interpolation,
|
|
keyframeId,
|
|
}: {
|
|
channel: AnimationChannel | undefined;
|
|
time: MediaTime;
|
|
value: ParamValue;
|
|
interpolation?: AnimationInterpolation;
|
|
keyframeId?: string;
|
|
}): AnimationChannel | undefined {
|
|
if (!channel) {
|
|
return undefined;
|
|
}
|
|
|
|
if (typeof value === "string" || typeof value === "boolean") {
|
|
return upsertDiscreteChannelKey({
|
|
channel: isDiscreteChannel(channel) ? channel : undefined,
|
|
time,
|
|
value,
|
|
keyframeId,
|
|
});
|
|
}
|
|
|
|
if (typeof value !== "number") {
|
|
return channel;
|
|
}
|
|
|
|
return upsertScalarChannelKey({
|
|
channel: isScalarChannel(channel) ? channel : undefined,
|
|
time,
|
|
value,
|
|
interpolation,
|
|
keyframeId,
|
|
});
|
|
}
|
|
|
|
export function removeKeyframe({
|
|
channel,
|
|
keyframeId,
|
|
}: {
|
|
channel: AnimationChannel | undefined;
|
|
keyframeId: string;
|
|
}): AnimationChannel | undefined {
|
|
if (!channel) {
|
|
return undefined;
|
|
}
|
|
|
|
if (isScalarChannel(channel)) {
|
|
const nextKeys = channel.keys.filter((keyframe) => keyframe.id !== keyframeId);
|
|
if (nextKeys.length === 0) {
|
|
return undefined;
|
|
}
|
|
|
|
return normalizeScalarChannel({
|
|
channel: {
|
|
...channel,
|
|
keys: nextKeys,
|
|
},
|
|
});
|
|
}
|
|
|
|
const nextKeys = channel.keys.filter((keyframe) => keyframe.id !== keyframeId);
|
|
if (nextKeys.length === 0) {
|
|
return undefined;
|
|
}
|
|
|
|
return normalizeDiscreteChannel({
|
|
channel: {
|
|
...channel,
|
|
keys: nextKeys,
|
|
},
|
|
});
|
|
}
|
|
|
|
export function retimeKeyframe({
|
|
channel,
|
|
keyframeId,
|
|
time,
|
|
}: {
|
|
channel: AnimationChannel | undefined;
|
|
keyframeId: string;
|
|
time: MediaTime;
|
|
}): AnimationChannel | undefined {
|
|
if (!channel) {
|
|
return undefined;
|
|
}
|
|
|
|
if (isScalarChannel(channel)) {
|
|
const keyframeByIdIndex = channel.keys.findIndex(
|
|
(keyframe) => keyframe.id === keyframeId,
|
|
);
|
|
if (keyframeByIdIndex < 0) {
|
|
return channel;
|
|
}
|
|
|
|
const nextKeys = [...channel.keys];
|
|
nextKeys[keyframeByIdIndex] = {
|
|
...nextKeys[keyframeByIdIndex],
|
|
time,
|
|
};
|
|
|
|
return normalizeScalarChannel({
|
|
channel: {
|
|
...channel,
|
|
keys: nextKeys,
|
|
},
|
|
});
|
|
}
|
|
|
|
const keyframeByIdIndex = channel.keys.findIndex(
|
|
(keyframe) => keyframe.id === keyframeId,
|
|
);
|
|
if (keyframeByIdIndex < 0) {
|
|
return channel;
|
|
}
|
|
|
|
const nextKeys = [...channel.keys];
|
|
nextKeys[keyframeByIdIndex] = {
|
|
...nextKeys[keyframeByIdIndex],
|
|
time,
|
|
};
|
|
|
|
return normalizeDiscreteChannel({
|
|
channel: {
|
|
...channel,
|
|
keys: nextKeys,
|
|
},
|
|
});
|
|
}
|
|
|
|
export function setChannel({
|
|
animations,
|
|
propertyPath,
|
|
channel,
|
|
}: {
|
|
animations: ElementAnimations | undefined;
|
|
propertyPath: AnimationPath;
|
|
channel: AnimationChannel | undefined;
|
|
}): ElementAnimations | undefined {
|
|
return setBindingComponentChannel({
|
|
animations,
|
|
propertyPath,
|
|
componentKey: "value",
|
|
channel,
|
|
});
|
|
}
|
|
|
|
export function setBindingComponentChannel({
|
|
animations,
|
|
propertyPath,
|
|
componentKey,
|
|
channel,
|
|
}: {
|
|
animations: ElementAnimations | undefined;
|
|
propertyPath: AnimationPath;
|
|
componentKey: string;
|
|
channel: AnimationChannel | undefined;
|
|
}): ElementAnimations | undefined {
|
|
const nextAnimations = cloneAnimationsState({ animations });
|
|
nextAnimations[propertyPath] = setChannelInData({
|
|
data: nextAnimations[propertyPath],
|
|
componentKey,
|
|
channel:
|
|
channel && hasChannelKeys({ channel })
|
|
? normalizeChannel({ channel })
|
|
: undefined,
|
|
});
|
|
return toAnimation({
|
|
animations: nextAnimations,
|
|
});
|
|
}
|
|
|
|
export function updateScalarKeyframeCurve({
|
|
animations,
|
|
propertyPath,
|
|
componentKey,
|
|
keyframeId,
|
|
patch,
|
|
}: {
|
|
animations: ElementAnimations | undefined;
|
|
propertyPath: AnimationPath;
|
|
componentKey: string;
|
|
keyframeId: string;
|
|
patch: ScalarCurveKeyframePatch;
|
|
}): ElementAnimations | undefined {
|
|
const channel = getChannelFromData({
|
|
data: getChannelData({ animations, propertyPath }),
|
|
componentKey,
|
|
});
|
|
if (!channel || !isScalarChannel(channel)) {
|
|
return animations;
|
|
}
|
|
|
|
const keyframeIndex = channel.keys.findIndex((keyframe) => keyframe.id === keyframeId);
|
|
if (keyframeIndex < 0) {
|
|
return animations;
|
|
}
|
|
|
|
const nextKeys = [...channel.keys];
|
|
const currentKey = nextKeys[keyframeIndex];
|
|
nextKeys[keyframeIndex] = {
|
|
...currentKey,
|
|
leftHandle:
|
|
patch.leftHandle === undefined
|
|
? currentKey.leftHandle
|
|
: patch.leftHandle ?? undefined,
|
|
rightHandle:
|
|
patch.rightHandle === undefined
|
|
? currentKey.rightHandle
|
|
: patch.rightHandle ?? undefined,
|
|
segmentToNext: patch.segmentToNext ?? currentKey.segmentToNext,
|
|
tangentMode: patch.tangentMode ?? currentKey.tangentMode,
|
|
};
|
|
|
|
return setBindingComponentChannel({
|
|
animations,
|
|
propertyPath,
|
|
componentKey,
|
|
channel: {
|
|
keys: nextKeys,
|
|
extrapolation: channel.extrapolation,
|
|
},
|
|
});
|
|
}
|
|
|
|
function cloneChannelWithKeyIds({
|
|
channel,
|
|
keyIdMap,
|
|
}: {
|
|
channel: AnimationChannel;
|
|
keyIdMap: Map<string, string>;
|
|
}): AnimationChannel {
|
|
return isScalarChannel(channel)
|
|
? normalizeScalarChannel({
|
|
channel: {
|
|
...channel,
|
|
keys: channel.keys.map((key) => ({
|
|
...key,
|
|
id: keyIdMap.get(key.id) ?? key.id,
|
|
})),
|
|
},
|
|
})
|
|
: normalizeDiscreteChannel({
|
|
channel: {
|
|
...channel,
|
|
keys: channel.keys.map((key) => ({
|
|
...key,
|
|
id: keyIdMap.get(key.id) ?? key.id,
|
|
})),
|
|
},
|
|
});
|
|
}
|
|
|
|
export function cloneAnimations({
|
|
animations,
|
|
shouldRegenerateKeyframeIds = false,
|
|
}: {
|
|
animations: ElementAnimations | undefined;
|
|
shouldRegenerateKeyframeIds?: boolean;
|
|
}): ElementAnimations | undefined {
|
|
if (!animations) {
|
|
return undefined;
|
|
}
|
|
|
|
const nextAnimations = cloneAnimationsState({ animations });
|
|
for (const [propertyPath, data] of Object.entries(animations).filter(([key]) =>
|
|
isAnimationStorageKey({ key }),
|
|
)) {
|
|
const channels = getChannelsFromData({ data });
|
|
const primaryChannel = channels[0];
|
|
const keyIdMap = new Map<string, string>();
|
|
if (primaryChannel) {
|
|
for (const key of primaryChannel.keys) {
|
|
keyIdMap.set(
|
|
key.id,
|
|
shouldRegenerateKeyframeIds ? generateUUID() : key.id,
|
|
);
|
|
}
|
|
}
|
|
|
|
if (isLeafChannelData(data)) {
|
|
nextAnimations[propertyPath] = cloneChannelWithKeyIds({
|
|
channel: data,
|
|
keyIdMap,
|
|
});
|
|
continue;
|
|
}
|
|
if (isCompositeChannelData(data)) {
|
|
nextAnimations[propertyPath] = Object.fromEntries(
|
|
Object.entries(data).map(([componentKey, channel]) => [
|
|
componentKey,
|
|
channel
|
|
? cloneChannelWithKeyIds({ channel, keyIdMap })
|
|
: undefined,
|
|
]),
|
|
);
|
|
}
|
|
}
|
|
|
|
return toAnimation({
|
|
animations: nextAnimations,
|
|
});
|
|
}
|
|
|
|
export function clampAnimationsToDuration({
|
|
animations,
|
|
duration,
|
|
}: {
|
|
animations: ElementAnimations | undefined;
|
|
duration: MediaTime;
|
|
}): ElementAnimations | undefined {
|
|
if (!animations || duration <= 0) {
|
|
return undefined;
|
|
}
|
|
|
|
return splitAnimationsAtTime({
|
|
animations,
|
|
splitTime: duration,
|
|
shouldIncludeSplitBoundary: true,
|
|
}).leftAnimations;
|
|
}
|
|
|
|
function lerpPoint({
|
|
left,
|
|
right,
|
|
progress,
|
|
}: {
|
|
left: { x: number; y: number };
|
|
right: { x: number; y: number };
|
|
progress: number;
|
|
}) {
|
|
return {
|
|
x: left.x + (right.x - left.x) * progress,
|
|
y: left.y + (right.y - left.y) * progress,
|
|
};
|
|
}
|
|
|
|
function splitDiscreteChannelAtTime({
|
|
channel,
|
|
splitTime,
|
|
leftBoundaryId,
|
|
rightBoundaryId,
|
|
shouldIncludeSplitBoundary,
|
|
}: {
|
|
channel: DiscreteAnimationChannel | undefined;
|
|
splitTime: MediaTime;
|
|
leftBoundaryId: string;
|
|
rightBoundaryId: string;
|
|
shouldIncludeSplitBoundary: boolean;
|
|
}) {
|
|
if (!channel || channel.keys.length === 0) {
|
|
return {
|
|
leftChannel: undefined,
|
|
rightChannel: undefined,
|
|
};
|
|
}
|
|
|
|
const normalizedChannel = normalizeChannel({ channel });
|
|
let leftKeys = normalizedChannel.keys.filter((key) => key.time <= splitTime);
|
|
let rightKeys = normalizedChannel.keys
|
|
.filter((key) => key.time >= splitTime)
|
|
.map((key) => ({
|
|
...key,
|
|
time: subMediaTime({ a: key.time, b: splitTime }),
|
|
}));
|
|
|
|
if (shouldIncludeSplitBoundary) {
|
|
const hasBoundaryOnLeft = leftKeys.some((key) =>
|
|
isNearlySameTime({ leftTime: key.time, rightTime: splitTime }),
|
|
);
|
|
const hasBoundaryOnRight = rightKeys.some((key) =>
|
|
isNearlySameTime({ leftTime: key.time, rightTime: 0 }),
|
|
);
|
|
const boundaryValue = getChannelValueAtTime({
|
|
channel: normalizedChannel,
|
|
time: splitTime,
|
|
fallbackValue: normalizedChannel.keys[0].value,
|
|
});
|
|
if (!hasBoundaryOnLeft) {
|
|
leftKeys = [
|
|
...leftKeys,
|
|
createDiscreteKey({
|
|
id: leftBoundaryId,
|
|
time: splitTime,
|
|
value: boundaryValue,
|
|
}),
|
|
];
|
|
}
|
|
if (!hasBoundaryOnRight) {
|
|
rightKeys = [
|
|
createDiscreteKey({
|
|
id: rightBoundaryId,
|
|
time: ZERO_MEDIA_TIME,
|
|
value: boundaryValue,
|
|
}),
|
|
...rightKeys,
|
|
];
|
|
}
|
|
}
|
|
|
|
return {
|
|
leftChannel: leftKeys.length
|
|
? normalizeChannel({ channel: { keys: leftKeys } })
|
|
: undefined,
|
|
rightChannel: rightKeys.length
|
|
? normalizeChannel({ channel: { keys: rightKeys } })
|
|
: undefined,
|
|
};
|
|
}
|
|
|
|
function splitScalarChannelAtTime({
|
|
channel,
|
|
splitTime,
|
|
leftBoundaryId,
|
|
rightBoundaryId,
|
|
shouldIncludeSplitBoundary,
|
|
}: {
|
|
channel: ScalarAnimationChannel | undefined;
|
|
splitTime: MediaTime;
|
|
leftBoundaryId: string;
|
|
rightBoundaryId: string;
|
|
shouldIncludeSplitBoundary: boolean;
|
|
}) {
|
|
if (!channel || channel.keys.length === 0) {
|
|
return {
|
|
leftChannel: undefined,
|
|
rightChannel: undefined,
|
|
};
|
|
}
|
|
|
|
const normalizedChannel = normalizeChannel({ channel });
|
|
let leftKeys = normalizedChannel.keys.filter((key) => key.time <= splitTime);
|
|
let rightKeys = normalizedChannel.keys
|
|
.filter((key) => key.time >= splitTime)
|
|
.map((key) => ({
|
|
...key,
|
|
time: subMediaTime({ a: key.time, b: splitTime }),
|
|
}));
|
|
|
|
const hasBoundaryOnLeft = leftKeys.some((key) =>
|
|
isNearlySameTime({ leftTime: key.time, rightTime: splitTime }),
|
|
);
|
|
const hasBoundaryOnRight = rightKeys.some((key) =>
|
|
isNearlySameTime({ leftTime: key.time, rightTime: 0 }),
|
|
);
|
|
if (!shouldIncludeSplitBoundary || (hasBoundaryOnLeft && hasBoundaryOnRight)) {
|
|
return {
|
|
leftChannel: leftKeys.length
|
|
? normalizeChannel({
|
|
channel: {
|
|
keys: leftKeys,
|
|
extrapolation: normalizedChannel.extrapolation,
|
|
},
|
|
})
|
|
: undefined,
|
|
rightChannel: rightKeys.length
|
|
? normalizeChannel({
|
|
channel: {
|
|
keys: rightKeys,
|
|
extrapolation: normalizedChannel.extrapolation,
|
|
},
|
|
})
|
|
: undefined,
|
|
};
|
|
}
|
|
|
|
for (let keyIndex = 0; keyIndex < normalizedChannel.keys.length - 1; keyIndex++) {
|
|
const leftKey = normalizedChannel.keys[keyIndex];
|
|
const rightKey = normalizedChannel.keys[keyIndex + 1];
|
|
if (
|
|
!(
|
|
splitTime > leftKey.time &&
|
|
splitTime < rightKey.time
|
|
)
|
|
) {
|
|
continue;
|
|
}
|
|
|
|
const boundaryValue = getChannelValueAtTime({
|
|
channel: normalizedChannel,
|
|
time: splitTime,
|
|
fallbackValue: leftKey.value,
|
|
});
|
|
|
|
if (leftKey.segmentToNext === "bezier") {
|
|
const rightHandle =
|
|
leftKey.rightHandle ?? getDefaultRightHandle({ leftKey, rightKey });
|
|
const leftHandle =
|
|
rightKey.leftHandle ?? getDefaultLeftHandle({ leftKey, rightKey });
|
|
const progress = solveBezierProgressForTime({
|
|
time: splitTime,
|
|
leftKey,
|
|
rightKey,
|
|
});
|
|
const p0 = { x: leftKey.time, y: leftKey.value };
|
|
const p1 = {
|
|
x: leftKey.time + rightHandle.dt,
|
|
y: leftKey.value + rightHandle.dv,
|
|
};
|
|
const p2 = {
|
|
x: rightKey.time + leftHandle.dt,
|
|
y: rightKey.value + leftHandle.dv,
|
|
};
|
|
const p3 = { x: rightKey.time, y: rightKey.value };
|
|
const q0 = lerpPoint({ left: p0, right: p1, progress });
|
|
const q1 = lerpPoint({ left: p1, right: p2, progress });
|
|
const q2 = lerpPoint({ left: p2, right: p3, progress });
|
|
const r0 = lerpPoint({ left: q0, right: q1, progress });
|
|
const r1 = lerpPoint({ left: q1, right: q2, progress });
|
|
const splitPoint = lerpPoint({ left: r0, right: r1, progress });
|
|
leftKeys = [
|
|
...normalizedChannel.keys.filter((key) => key.time < splitTime),
|
|
{
|
|
...leftKey,
|
|
rightHandle: {
|
|
dt: roundMediaTime({ time: q0.x - p0.x }),
|
|
dv: q0.y - p0.y,
|
|
},
|
|
},
|
|
{
|
|
id: leftBoundaryId,
|
|
time: splitTime,
|
|
value: boundaryValue,
|
|
leftHandle: {
|
|
dt: roundMediaTime({ time: r0.x - splitPoint.x }),
|
|
dv: r0.y - splitPoint.y,
|
|
},
|
|
segmentToNext: leftKey.segmentToNext,
|
|
tangentMode: leftKey.tangentMode,
|
|
},
|
|
];
|
|
rightKeys = [
|
|
{
|
|
id: rightBoundaryId,
|
|
time: ZERO_MEDIA_TIME,
|
|
value: boundaryValue,
|
|
rightHandle: {
|
|
dt: roundMediaTime({ time: r1.x - splitPoint.x }),
|
|
dv: r1.y - splitPoint.y,
|
|
},
|
|
segmentToNext: "bezier",
|
|
tangentMode: leftKey.tangentMode,
|
|
},
|
|
{
|
|
...rightKey,
|
|
time: subMediaTime({ a: rightKey.time, b: splitTime }),
|
|
leftHandle: {
|
|
dt: roundMediaTime({ time: q2.x - p3.x }),
|
|
dv: q2.y - p3.y,
|
|
},
|
|
},
|
|
...normalizedChannel.keys
|
|
.filter((key) => key.time > rightKey.time)
|
|
.map((key) => ({
|
|
...key,
|
|
time: subMediaTime({ a: key.time, b: splitTime }),
|
|
})),
|
|
];
|
|
} else {
|
|
leftKeys = [
|
|
...leftKeys,
|
|
createScalarKey({
|
|
id: leftBoundaryId,
|
|
time: splitTime,
|
|
value: boundaryValue,
|
|
interpolation: "linear",
|
|
}),
|
|
];
|
|
rightKeys = [
|
|
createScalarKey({
|
|
id: rightBoundaryId,
|
|
time: ZERO_MEDIA_TIME,
|
|
value: boundaryValue,
|
|
interpolation: getScalarSegmentInterpolation({
|
|
segment: leftKey.segmentToNext,
|
|
}),
|
|
}),
|
|
...rightKeys,
|
|
];
|
|
}
|
|
|
|
return {
|
|
leftChannel: normalizeChannel({
|
|
channel: {
|
|
keys: leftKeys,
|
|
extrapolation: normalizedChannel.extrapolation,
|
|
},
|
|
}),
|
|
rightChannel: normalizeChannel({
|
|
channel: {
|
|
keys: rightKeys,
|
|
extrapolation: normalizedChannel.extrapolation,
|
|
},
|
|
}),
|
|
};
|
|
}
|
|
|
|
return {
|
|
leftChannel: leftKeys.length
|
|
? normalizeChannel({
|
|
channel: {
|
|
keys: leftKeys,
|
|
extrapolation: normalizedChannel.extrapolation,
|
|
},
|
|
})
|
|
: undefined,
|
|
rightChannel: rightKeys.length
|
|
? normalizeChannel({
|
|
channel: {
|
|
keys: rightKeys,
|
|
extrapolation: normalizedChannel.extrapolation,
|
|
},
|
|
})
|
|
: undefined,
|
|
};
|
|
}
|
|
|
|
function splitChannelAtTime({
|
|
channel,
|
|
splitTime,
|
|
leftBoundaryId,
|
|
rightBoundaryId,
|
|
shouldIncludeSplitBoundary,
|
|
}: {
|
|
channel: AnimationChannel | undefined;
|
|
splitTime: MediaTime;
|
|
leftBoundaryId: string;
|
|
rightBoundaryId: string;
|
|
shouldIncludeSplitBoundary: boolean;
|
|
}) {
|
|
return channel != null && !isScalarChannel(channel)
|
|
? splitDiscreteChannelAtTime({
|
|
channel,
|
|
splitTime,
|
|
leftBoundaryId,
|
|
rightBoundaryId,
|
|
shouldIncludeSplitBoundary,
|
|
})
|
|
: splitScalarChannelAtTime({
|
|
channel:
|
|
channel != null && isScalarChannel(channel) ? channel : undefined,
|
|
splitTime,
|
|
leftBoundaryId,
|
|
rightBoundaryId,
|
|
shouldIncludeSplitBoundary,
|
|
});
|
|
}
|
|
|
|
export function splitAnimationsAtTime({
|
|
animations,
|
|
splitTime,
|
|
shouldIncludeSplitBoundary = true,
|
|
}: {
|
|
animations: ElementAnimations | undefined;
|
|
splitTime: MediaTime;
|
|
shouldIncludeSplitBoundary?: boolean;
|
|
}): {
|
|
leftAnimations: ElementAnimations | undefined;
|
|
rightAnimations: ElementAnimations | undefined;
|
|
} {
|
|
if (!animations) {
|
|
return { leftAnimations: undefined, rightAnimations: undefined };
|
|
}
|
|
|
|
const leftAnimations = cloneAnimationsState({ animations: undefined });
|
|
const rightAnimations = cloneAnimationsState({ animations: undefined });
|
|
|
|
for (const [propertyPath, data] of Object.entries(animations).filter(([key]) =>
|
|
isAnimationStorageKey({ key }),
|
|
)) {
|
|
if (!data) {
|
|
continue;
|
|
}
|
|
|
|
const leftBoundaryId = generateUUID();
|
|
const rightBoundaryId = generateUUID();
|
|
|
|
for (const [componentKey, channel] of getChannelDataEntries({ data })) {
|
|
const splitResult = splitChannelAtTime({
|
|
channel,
|
|
splitTime,
|
|
leftBoundaryId,
|
|
rightBoundaryId,
|
|
shouldIncludeSplitBoundary,
|
|
});
|
|
if (splitResult.leftChannel) {
|
|
leftAnimations[propertyPath] = setChannelInData({
|
|
data: leftAnimations[propertyPath],
|
|
componentKey,
|
|
channel: splitResult.leftChannel,
|
|
});
|
|
}
|
|
if (splitResult.rightChannel) {
|
|
rightAnimations[propertyPath] = setChannelInData({
|
|
data: rightAnimations[propertyPath],
|
|
componentKey,
|
|
channel: splitResult.rightChannel,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
leftAnimations: toAnimation({ animations: leftAnimations }),
|
|
rightAnimations: toAnimation({ animations: rightAnimations }),
|
|
};
|
|
}
|
|
|
|
export function removeElementKeyframe({
|
|
animations,
|
|
propertyPath,
|
|
keyframeId,
|
|
}: {
|
|
animations: ElementAnimations | undefined;
|
|
propertyPath: AnimationPath;
|
|
keyframeId: string;
|
|
}): ElementAnimations | undefined {
|
|
const data = getChannelData({ animations, propertyPath });
|
|
if (!data) {
|
|
return animations;
|
|
}
|
|
|
|
const nextAnimations = cloneAnimationsState({ animations });
|
|
if (isLeafChannelData(data)) {
|
|
nextAnimations[propertyPath] = removeKeyframe({ channel: data, keyframeId });
|
|
} else if (isCompositeChannelData(data)) {
|
|
let nextData: ChannelData | undefined = data;
|
|
for (const [componentKey, channel] of Object.entries(data)) {
|
|
nextData = setChannelInData({
|
|
data: nextData,
|
|
componentKey,
|
|
channel: removeKeyframe({ channel, keyframeId }),
|
|
});
|
|
}
|
|
nextAnimations[propertyPath] = nextData;
|
|
}
|
|
return toAnimation({
|
|
animations: nextAnimations,
|
|
});
|
|
}
|
|
|
|
export function retimeElementKeyframe({
|
|
animations,
|
|
propertyPath,
|
|
keyframeId,
|
|
time,
|
|
}: {
|
|
animations: ElementAnimations | undefined;
|
|
propertyPath: AnimationPath;
|
|
keyframeId: string;
|
|
time: MediaTime;
|
|
}): ElementAnimations | undefined {
|
|
const data = getChannelData({ animations, propertyPath });
|
|
if (!data) {
|
|
return animations;
|
|
}
|
|
|
|
const nextAnimations = cloneAnimationsState({ animations });
|
|
if (isLeafChannelData(data)) {
|
|
nextAnimations[propertyPath] = retimeKeyframe({
|
|
channel: data,
|
|
keyframeId,
|
|
time,
|
|
});
|
|
} else if (isCompositeChannelData(data)) {
|
|
let nextData: ChannelData | undefined = data;
|
|
for (const [componentKey, channel] of Object.entries(data)) {
|
|
nextData = setChannelInData({
|
|
data: nextData,
|
|
componentKey,
|
|
channel: retimeKeyframe({ channel, keyframeId, time }),
|
|
});
|
|
}
|
|
nextAnimations[propertyPath] = nextData;
|
|
}
|
|
return toAnimation({
|
|
animations: nextAnimations,
|
|
});
|
|
}
|