diff options
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts | 37 | ||||
| -rw-r--r-- | apps/web/src/components/editor/panels/properties/tabs/transform-tab.tsx | 6 |
2 files changed, 31 insertions, 12 deletions
diff --git a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts index 0c10d443..872d55c0 100644 --- a/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts +++ b/apps/web/src/components/editor/panels/properties/hooks/use-keyframed-number-property.ts @@ -21,6 +21,7 @@ export function useKeyframedNumberProperty({ valueAtPlayhead,
step,
buildBaseUpdates,
+ buildAdditionalKeyframes,
}: {
trackId: string;
elementId: string;
@@ -33,6 +34,9 @@ export function useKeyframedNumberProperty({ valueAtPlayhead: number;
step?: number;
buildBaseUpdates: ({ value }: { value: number }) => Partial<TimelineElement>;
+ buildAdditionalKeyframes?: ({
+ value,
+ }: { value: number }) => Array<{ propertyPath: AnimationPropertyPath; value: number }>;
}) {
const editor = useEditor();
const snapValue = (value: number) =>
@@ -50,19 +54,26 @@ export function useKeyframedNumberProperty({ const previewValue = ({ value }: { value: number }) => {
const nextValue = snapValue(value);
if (shouldUseAnimatedChannel) {
+ const additionalKeyframes = buildAdditionalKeyframes?.({ value: nextValue }) ?? [];
+ const updatedAnimations = [
+ { propertyPath, value: nextValue },
+ ...additionalKeyframes,
+ ].reduce(
+ (currentAnimations, keyframe) =>
+ upsertElementKeyframe({
+ animations: currentAnimations,
+ propertyPath: keyframe.propertyPath,
+ time: localTime,
+ value: keyframe.value,
+ }),
+ animations,
+ );
editor.timeline.previewElements({
updates: [
{
trackId,
elementId,
- updates: {
- animations: upsertElementKeyframe({
- animations,
- propertyPath,
- time: localTime,
- value: nextValue,
- }),
- },
+ updates: { animations: updatedAnimations },
},
],
});
@@ -125,15 +136,17 @@ export function useKeyframedNumberProperty({ const commitValue = ({ value }: { value: number }) => {
const nextValue = snapValue(value);
if (shouldUseAnimatedChannel) {
+ const additionalKeyframes = buildAdditionalKeyframes?.({ value: nextValue }) ?? [];
editor.timeline.upsertKeyframes({
keyframes: [
- {
+ { trackId, elementId, propertyPath, time: localTime, value: nextValue },
+ ...additionalKeyframes.map((keyframe) => ({
trackId,
elementId,
- propertyPath,
+ propertyPath: keyframe.propertyPath,
time: localTime,
- value: nextValue,
- },
+ value: keyframe.value,
+ })),
],
});
return;
diff --git a/apps/web/src/components/editor/panels/properties/tabs/transform-tab.tsx b/apps/web/src/components/editor/panels/properties/tabs/transform-tab.tsx index 288b8349..40519c1d 100644 --- a/apps/web/src/components/editor/panels/properties/tabs/transform-tab.tsx +++ b/apps/web/src/components/editor/panels/properties/tabs/transform-tab.tsx @@ -120,6 +120,9 @@ export function TransformTab({ ...(isScaleLocked ? { scaleY: value } : {}),
},
}),
+ buildAdditionalKeyframes: isScaleLocked
+ ? ({ value }) => [{ propertyPath: "transform.scaleY", value }]
+ : undefined,
});
const scaleY = useKeyframedNumberProperty({
@@ -140,6 +143,9 @@ export function TransformTab({ ...(isScaleLocked ? { scaleX: value } : {}),
},
}),
+ buildAdditionalKeyframes: isScaleLocked
+ ? ({ value }) => [{ propertyPath: "transform.scaleX", value }]
+ : undefined,
});
const scaleFieldPropsX = {
|