From f47e85c3bb3c11607bbff69dcd511fd577ced9f9 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Tue, 7 Apr 2026 01:19:46 +0200
Subject: fix: respect scale lock when editing keyframed scale

---
 .../hooks/use-keyframed-number-property.ts         | 37 +++++++++++++++-------
 1 file changed, 25 insertions(+), 12 deletions(-)

(limited to 'apps/web/src/components/editor/panels/properties/hooks')

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;
-- 
cgit v1.3.1