@remotion/studio 4.0.470 → 4.0.472

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelinePrimitiveFieldValue = exports.isTimelinePrimitiveFieldInfo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TimelineBooleanField_1 = require("./TimelineBooleanField");
+const TimelineColorField_1 = require("./TimelineColorField");
+const TimelineEnumField_1 = require("./TimelineEnumField");
+const TimelineNumberField_1 = require("./TimelineNumberField");
+const TimelineRotationField_1 = require("./TimelineRotationField");
+const TimelineScaleField_1 = require("./TimelineScaleField");
+const TimelineTranslateField_1 = require("./TimelineTranslateField");
+const TimelineUvCoordinateField_1 = require("./TimelineUvCoordinateField");
+const inlineWrapper = {
+    fontSize: 12,
+};
+const isTimelinePrimitiveFieldInfo = (field) => {
+    return (field.typeName !== 'array' &&
+        field.typeName !== 'hidden' &&
+        field.fieldSchema.type !== 'array');
+};
+exports.isTimelinePrimitiveFieldInfo = isTimelinePrimitiveFieldInfo;
+const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, scaleLockNodePath, }) => {
+    if (field.typeName === 'number') {
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
+    if (field.typeName === 'rotation-css' ||
+        field.typeName === 'rotation-degrees') {
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineRotationField_1.TimelineRotationField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
+    if (field.typeName === 'translate') {
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineTranslateField_1.TimelineTranslateField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
+    if (field.typeName === 'scale') {
+        if (scaleLockNodePath === null) {
+            throw new Error('Expected scale lock node path for scale field');
+        }
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineScaleField_1.TimelineScaleField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus, scaleLockNodePath: scaleLockNodePath }) }));
+    }
+    if (field.typeName === 'uv-coordinate') {
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineUvCoordinateField_1.TimelineUvCoordinateField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
+    if (field.typeName === 'boolean') {
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineBooleanField_1.TimelineBooleanField, { effectiveValue: effectiveValue, field: field, onSave: onSave, propStatus: propStatus }) }));
+    }
+    if (field.typeName === 'color') {
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineColorField_1.TimelineColorField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
+    if (field.typeName === 'enum') {
+        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineEnumField_1.TimelineEnumField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
+    throw new Error(`Unsupported field type: ${field.typeName}`);
+};
+exports.TimelinePrimitiveFieldValue = TimelinePrimitiveFieldValue;

package/dist/components/Timeline/TimelineRotationField.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { CanUpdateSequencePropStatusStatic } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineRotationField: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly effectiveValue: unknown;
-    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
     readonly onSave: TimelineFieldOnSave;
     readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;

package/dist/components/Timeline/TimelineRotationField.js

@@ -15,28 +15,38 @@ const unitToDegrees = {
 const parseCssRotationToDegrees = (value) => {
     const match = value.trim().match(unitPattern);
     if (match) {
-        return Number(match[1]) * unitToDegrees[match[2]];
+        return (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(match[1]) * unitToDegrees[match[2]]);
     }
     try {
         const m = new DOMMatrix(`rotate(${value})`);
-        return Math.round(Math.atan2(m.b, m.a) * (180 / Math.PI) * 1e6) / 1e6;
+        return (0, timeline_field_utils_1.normalizeTimelineNumber)(Math.atan2(m.b, m.a) * (180 / Math.PI));
     }
     catch (_a) {
         return 0;
     }
 };
 const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
-    var _a;
+    var _a, _b, _c;
     const [dragValue, setDragValue] = (0, react_1.useState)(null);
-    const degrees = (0, react_1.useMemo)(() => parseCssRotationToDegrees(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg')), [effectiveValue]);
+    const isCssRotation = field.fieldSchema.type === 'rotation-css';
+    const degrees = (0, react_1.useMemo)(() => {
+        if (isCssRotation) {
+            return parseCssRotationToDegrees(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg'));
+        }
+        return typeof effectiveValue === 'number' ? effectiveValue : 0;
+    }, [effectiveValue, isCssRotation]);
+    const serializeValue = (0, react_1.useCallback)((value) => {
+        const normalized = (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
+        return isCssRotation ? `${normalized}deg` : normalized;
+    }, [isCssRotation]);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
         setDragValue(newVal);
-        onDragValueChange(`${newVal}deg`);
-    }, [onDragValueChange]);
+        onDragValueChange(serializeValue(newVal));
+    }, [onDragValueChange, serializeValue]);
     const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
-        const newStr = `${newVal}deg`;
-        if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
-            onSave(newStr).finally(() => {
+        const newValue = serializeValue(newVal);
+        if (newValue !== propStatus.codeValue) {
+            onSave(newValue).finally(() => {
                 setDragValue(null);
                 onDragEnd();
             });
@@ -45,29 +55,36 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
             setDragValue(null);
             onDragEnd();
         }
-    }, [propStatus, onSave, onDragEnd]);
+    }, [propStatus, onSave, onDragEnd, serializeValue]);
     const onTextChange = (0, react_1.useCallback)((newVal) => {
-        if (propStatus.canUpdate) {
-            const parsed = Number(newVal);
-            if (!Number.isNaN(parsed)) {
-                const newStr = `${parsed}deg`;
-                if (newStr !== propStatus.codeValue) {
-                    setDragValue(parsed);
-                    onSave(newStr).finally(() => {
-                        setDragValue(null);
-                    });
-                }
+        const parsed = Number(newVal);
+        if (!Number.isNaN(parsed)) {
+            const newValue = serializeValue(parsed);
+            if (newValue !== propStatus.codeValue) {
+                setDragValue(parsed);
+                onSave(newValue).finally(() => {
+                    setDragValue(null);
+                });
             }
         }
-    }, [propStatus, onSave]);
-    const step = field.fieldSchema.type === 'rotation' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
+    }, [propStatus, onSave, serializeValue]);
+    const step = field.fieldSchema.type === 'rotation-css' ||
+        field.fieldSchema.type === 'rotation-degrees'
+        ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1)
+        : 1;
+    const min = field.fieldSchema.type === 'rotation-degrees'
+        ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+        : -Infinity;
+    const max = field.fieldSchema.type === 'rotation-degrees'
+        ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+        : Infinity;
     const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const num = Number(v);
+        const num = (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(v));
         const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
         const formatted = digits === 0 ? String(num) : num.toFixed(digits);
         return `${formatted}\u00B0`;
     }, [stepDecimals]);
-    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : degrees, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false }));
+    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : degrees, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }));
 };
 exports.TimelineRotationField = TimelineRotationField;

package/dist/components/Timeline/TimelineRowChrome.d.ts

@@ -13,5 +13,8 @@ export declare const TimelineRowChrome: React.FC<{
     readonly showSelectedBackground: boolean;
     readonly containsSelection: boolean;
     readonly outerHeight: number | null;
+    readonly onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;
+    readonly onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
+    readonly onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
     readonly onDoubleClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }>;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -17,23 +17,25 @@ const leftChromeStyle = {
     display: 'flex',
     flexShrink: 0,
 };
-const keyframeControlsColumnStyle = {
+const keyframeControlsColumnBaseStyle = {
     alignItems: 'center',
     display: 'flex',
     flexShrink: 0,
     justifyContent: 'flex-start',
-    marginRight: -(timeline_row_layout_1.TIMELINE_KEYFRAME_CONTROLS_WIDTH - timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING),
-    width: timeline_row_layout_1.TIMELINE_KEYFRAME_CONTROLS_WIDTH,
 };
-const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, outerHeight, onDoubleClick, }) => {
+const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, }) => {
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
+    const keyframeControlsColumnStyle = (0, react_1.useMemo)(() => ({
+        ...keyframeControlsColumnBaseStyle,
+        width: (0, timeline_row_layout_1.getTimelineRowLeftChromeWidth)(depth),
+    }), [depth]);
     const chromeColumnStyle = (0, react_1.useMemo)(() => ({
         alignItems: 'center',
         alignSelf: 'stretch',
         display: 'flex',
         flexShrink: 0,
-        paddingLeft: keyframeControls ? 0 : timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
-    }), [keyframeControls]);
+        paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+    }), []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button === 0) {
             e.stopPropagation();
@@ -69,11 +71,10 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
         };
     }, [outerHeight, highlightBackground]);
     const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("div", { style: leftChromeStyle, children: [keyframeControls ? (jsx_runtime_1.jsx("div", { style: keyframeControlsColumnStyle, children: keyframeControls })) : null, jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] })
-                ] }), children] }));
+            jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: keyframeControls ? (jsx_runtime_1.jsx("div", { style: keyframeControlsColumnStyle, children: keyframeControls })) : (jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] })) }), children] }));
     if (outerStyle) {
-        return (jsx_runtime_1.jsx("div", { style: outerStyle, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
+        return (jsx_runtime_1.jsx("div", { style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
     }
-    return (jsx_runtime_1.jsx("div", { onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, style: innerRowStyle, children: chrome }));
+    return (jsx_runtime_1.jsx("div", { onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, style: innerRowStyle, children: chrome }));
 };
 exports.TimelineRowChrome = TimelineRowChrome;

package/dist/components/Timeline/TimelineScaleField.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusStatic, SequencePropsSubscriptionKey } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const getLinkedScale: ({ axis, newValue, baseX, baseY, min, max, }: {
+    readonly axis: "x" | "y";
+    readonly newValue: number;
+    readonly baseX: number;
+    readonly baseY: number;
+    readonly min: number;
+    readonly max: number;
+}) => [number, number];
+export declare const TimelineScaleField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
+    readonly effectiveValue: unknown;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+    readonly scaleLockNodePath: SequencePropsSubscriptionKey;
+}>;

package/dist/components/Timeline/TimelineScaleField.js

@@ -0,0 +1,314 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineScaleField = exports.getLinkedScale = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const no_react_1 = require("remotion/no-react");
+const colors_1 = require("../../helpers/colors");
+const scale_lock_1 = require("../../state/scale-lock");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_utils_1 = require("./timeline-field-utils");
+const TimelineLayerEye_1 = require("./TimelineLayerEye");
+const leftDraggerStyle = {
+    paddingLeft: 0,
+};
+const rightDraggerStyle = {
+    paddingRight: 0,
+};
+const containerStyle = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 4,
+};
+const toggleStyle = {
+    ...TimelineLayerEye_1.timelineLayerIconContainer,
+    border: 'none',
+    color: colors_1.LIGHT_COLOR,
+    cursor: 'pointer',
+    marginRight: 0,
+    padding: 0,
+};
+const linkIconStyle = {
+    width: 14,
+    height: 14,
+    pointerEvents: 'none',
+};
+const gapStyle = {
+    marginLeft: -6,
+    marginRight: -6,
+};
+const clamp = (value, min, max) => {
+    return Math.min(max, Math.max(min, value));
+};
+const getLinkedScale = ({ axis, newValue, baseX, baseY, min, max, }) => {
+    const drivingBase = axis === 'x' ? baseX : baseY;
+    const linkedBase = axis === 'x' ? baseY : baseX;
+    if (drivingBase === 0 || linkedBase === 0) {
+        const clamped = (0, timeline_field_utils_1.normalizeTimelineNumber)(clamp(newValue, min, max));
+        return [clamped, clamped];
+    }
+    let factor = newValue / drivingBase;
+    let driving = newValue;
+    let linked = linkedBase * factor;
+    const clampedLinked = clamp(linked, min, max);
+    if (clampedLinked !== linked) {
+        factor = clampedLinked / linkedBase;
+        linked = clampedLinked;
+        driving = drivingBase * factor;
+    }
+    const clampedDriving = clamp(driving, min, max);
+    const normalizedDriving = (0, timeline_field_utils_1.normalizeTimelineNumber)(clampedDriving);
+    const normalizedLinked = (0, timeline_field_utils_1.normalizeTimelineNumber)(linked);
+    return axis === 'x'
+        ? [normalizedDriving, normalizedLinked]
+        : [normalizedLinked, normalizedDriving];
+};
+exports.getLinkedScale = getLinkedScale;
+const valuesEqual = (left, right) => {
+    return JSON.stringify(left) === JSON.stringify(right);
+};
+const LinkToggle = ({ linked, onToggle }) => {
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        e.stopPropagation();
+        onToggle();
+    }, [onToggle]);
+    return (jsx_runtime_1.jsx("button", { type: "button", style: toggleStyle, onPointerDown: onPointerDown, title: linked ? 'Unlink scale axes' : 'Link scale axes', "aria-label": linked ? 'Unlink scale axes' : 'Link scale axes', children: linked ? (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: linkIconStyle, children: jsx_runtime_1.jsx("path", { fill: "currentcolor", d: "M32 320C32 214 118 128 224 128L288 128L288 192L224 192C153.3 192 96 249.3 96 320C96 390.7 153.3 448 224 448L288 448L288 512L224 512C118 512 32 426 32 320zM608 320C608 426 522 512 416 512L352 512L352 448L416 448C486.7 448 544 390.7 544 320C544 249.3 486.7 192 416 192L352 192L352 128L416 128C522 128 608 214 608 320zM224 288L448 288L448 352L192 352L192 288L224 288z" }) })) : null }));
+};
+const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, scaleLockNodePath, }) => {
+    var _a, _b, _c;
+    const [dragX, setDragX] = (0, react_1.useState)(null);
+    const [dragY, setDragY] = (0, react_1.useState)(null);
+    const dragStartRef = (0, react_1.useRef)(null);
+    const { getScaleLockState, setScaleLockState } = (0, react_1.useContext)(scale_lock_1.ScaleLockContext);
+    const [codeX, codeY, codeZ] = (0, react_1.useMemo)(() => no_react_1.NoReactInternals.parseScaleValue(effectiveValue), [effectiveValue]);
+    const defaultLinked = codeX === codeY;
+    const linked = getScaleLockState({
+        nodePath: scaleLockNodePath,
+        fieldKey: field.key,
+        defaultValue: defaultLinked,
+    });
+    const step = field.fieldSchema.type === 'scale'
+        ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 0.01)
+        : 0.01;
+    const min = field.fieldSchema.type === 'scale'
+        ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+        : -Infinity;
+    const max = field.fieldSchema.type === 'scale'
+        ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+        : Infinity;
+    const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
+    const formatter = (0, react_1.useCallback)((v) => {
+        const num = Number(v);
+        const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
+        return digits === 0 ? String(num) : num.toFixed(digits);
+    }, [stepDecimals]);
+    const getDragStart = (0, react_1.useCallback)(() => {
+        if (dragStartRef.current === null) {
+            dragStartRef.current = [dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY];
+        }
+        return dragStartRef.current;
+    }, [codeX, codeY, dragX, dragY]);
+    const serialize = (0, react_1.useCallback)((x, y) => {
+        return no_react_1.NoReactInternals.serializeScaleValue([x, y, codeZ]);
+    }, [codeZ]);
+    const onXChange = (0, react_1.useCallback)((newVal) => {
+        if (linked) {
+            const [baseX, baseY] = getDragStart();
+            const [newX, newY] = (0, exports.getLinkedScale)({
+                axis: 'x',
+                newValue: newVal,
+                baseX,
+                baseY,
+                min,
+                max,
+            });
+            setDragX(newX);
+            setDragY(newY);
+            onDragValueChange(serialize(newX, newY));
+            return;
+        }
+        setDragX(newVal);
+        const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
+        onDragValueChange(serialize(newVal, currentY));
+    }, [
+        codeY,
+        dragY,
+        getDragStart,
+        linked,
+        max,
+        min,
+        onDragValueChange,
+        serialize,
+    ]);
+    const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
+        var _a, _b;
+        var _c, _d;
+        const [newX, newY] = linked
+            ? (0, exports.getLinkedScale)({
+                axis: 'x',
+                newValue: newVal,
+                baseX: (_c = (_a = dragStartRef.current) === null || _a === void 0 ? void 0 : _a[0]) !== null && _c !== void 0 ? _c : codeX,
+                baseY: (_d = (_b = dragStartRef.current) === null || _b === void 0 ? void 0 : _b[1]) !== null && _d !== void 0 ? _d : codeY,
+                min,
+                max,
+            })
+            : [newVal, dragY !== null && dragY !== void 0 ? dragY : codeY];
+        const newScale = serialize(newX, newY);
+        const clearDragState = () => {
+            dragStartRef.current = null;
+            setDragX(null);
+            setDragY(null);
+            onDragEnd();
+        };
+        if (!valuesEqual(newScale, propStatus.codeValue)) {
+            onSave(newScale).finally(clearDragState);
+        }
+        else {
+            clearDragState();
+        }
+    }, [
+        codeX,
+        codeY,
+        dragY,
+        linked,
+        max,
+        min,
+        onDragEnd,
+        onSave,
+        propStatus,
+        serialize,
+    ]);
+    const onXTextChange = (0, react_1.useCallback)((newVal) => {
+        const parsed = Number(newVal);
+        if (Number.isNaN(parsed)) {
+            return;
+        }
+        const [newX, newY] = linked
+            ? (0, exports.getLinkedScale)({
+                axis: 'x',
+                newValue: parsed,
+                baseX: codeX,
+                baseY: codeY,
+                min,
+                max,
+            })
+            : [parsed, dragY !== null && dragY !== void 0 ? dragY : codeY];
+        const newScale = serialize(newX, newY);
+        if (!valuesEqual(newScale, propStatus.codeValue)) {
+            setDragX(newX);
+            setDragY(newY);
+            onSave(newScale).finally(() => {
+                dragStartRef.current = null;
+                setDragX(null);
+                setDragY(null);
+            });
+        }
+    }, [codeX, codeY, dragY, linked, max, min, onSave, propStatus, serialize]);
+    const onYChange = (0, react_1.useCallback)((newVal) => {
+        if (linked) {
+            const [baseX, baseY] = getDragStart();
+            const [newX, newY] = (0, exports.getLinkedScale)({
+                axis: 'y',
+                newValue: newVal,
+                baseX,
+                baseY,
+                min,
+                max,
+            });
+            setDragX(newX);
+            setDragY(newY);
+            onDragValueChange(serialize(newX, newY));
+            return;
+        }
+        setDragY(newVal);
+        const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
+        onDragValueChange(serialize(currentX, newVal));
+    }, [
+        codeX,
+        dragX,
+        getDragStart,
+        linked,
+        max,
+        min,
+        onDragValueChange,
+        serialize,
+    ]);
+    const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
+        var _a, _b;
+        var _c, _d;
+        const [newX, newY] = linked
+            ? (0, exports.getLinkedScale)({
+                axis: 'y',
+                newValue: newVal,
+                baseX: (_c = (_a = dragStartRef.current) === null || _a === void 0 ? void 0 : _a[0]) !== null && _c !== void 0 ? _c : codeX,
+                baseY: (_d = (_b = dragStartRef.current) === null || _b === void 0 ? void 0 : _b[1]) !== null && _d !== void 0 ? _d : codeY,
+                min,
+                max,
+            })
+            : [dragX !== null && dragX !== void 0 ? dragX : codeX, newVal];
+        const newScale = serialize(newX, newY);
+        const clearDragState = () => {
+            dragStartRef.current = null;
+            setDragX(null);
+            setDragY(null);
+            onDragEnd();
+        };
+        if (!valuesEqual(newScale, propStatus.codeValue)) {
+            onSave(newScale).finally(clearDragState);
+        }
+        else {
+            clearDragState();
+        }
+    }, [
+        codeX,
+        codeY,
+        dragX,
+        linked,
+        max,
+        min,
+        onDragEnd,
+        onSave,
+        propStatus,
+        serialize,
+    ]);
+    const onYTextChange = (0, react_1.useCallback)((newVal) => {
+        const parsed = Number(newVal);
+        if (Number.isNaN(parsed)) {
+            return;
+        }
+        const [newX, newY] = linked
+            ? (0, exports.getLinkedScale)({
+                axis: 'y',
+                newValue: parsed,
+                baseX: codeX,
+                baseY: codeY,
+                min,
+                max,
+            })
+            : [dragX !== null && dragX !== void 0 ? dragX : codeX, parsed];
+        const newScale = serialize(newX, newY);
+        if (!valuesEqual(newScale, propStatus.codeValue)) {
+            setDragX(newX);
+            setDragY(newY);
+            onSave(newScale).finally(() => {
+                dragStartRef.current = null;
+                setDragX(null);
+                setDragY(null);
+            });
+        }
+    }, [codeX, codeY, dragX, linked, max, min, onSave, propStatus, serialize]);
+    const onToggleLink = (0, react_1.useCallback)(() => {
+        setScaleLockState({
+            nodePath: scaleLockNodePath,
+            fieldKey: field.key,
+            linked: !linked,
+        });
+    }, [field.key, linked, scaleLockNodePath, setScaleLockState]);
+    return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
+            jsx_runtime_1.jsx(LinkToggle, { linked: linked, onToggle: onToggleLink }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: gapStyle }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false })
+        ] }));
+};
+exports.TimelineScaleField = TimelineScaleField;

package/dist/components/Timeline/TimelineSchemaField.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusTrue } from 'remotion';
+import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusStatic, SequencePropsSubscriptionKey } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const UnsupportedStatus: React.FC<{
     readonly label: string;
@@ -12,6 +12,7 @@ export declare const TimelineFieldValue: React.FC<{
     readonly onSave: TimelineFieldOnSave;
     readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;
-    readonly propStatus: CanUpdateSequencePropStatusTrue;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
     readonly effectiveValue: unknown;
+    readonly scaleLockNodePath: SequencePropsSubscriptionKey | null;
 }>;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -3,13 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldValue = exports.TimelineNonEditableStatus = exports.UnsupportedStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
-const TimelineBooleanField_1 = require("./TimelineBooleanField");
-const TimelineColorField_1 = require("./TimelineColorField");
-const TimelineEnumField_1 = require("./TimelineEnumField");
-const TimelineNumberField_1 = require("./TimelineNumberField");
-const TimelineRotationField_1 = require("./TimelineRotationField");
-const TimelineTranslateField_1 = require("./TimelineTranslateField");
-const TimelineUvCoordinateField_1 = require("./TimelineUvCoordinateField");
+const TimelineArrayField_1 = require("./TimelineArrayField");
+const TimelinePrimitiveFieldValue_1 = require("./TimelinePrimitiveFieldValue");
 const unsupportedLabel = {
     color: 'rgba(255, 255, 255, 0.4)',
     fontSize: 12,
@@ -17,51 +12,22 @@ const unsupportedLabel = {
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
-const notEditableBackground = {
-    backgroundColor: 'rgba(255, 0, 0, 0.2)',
-    borderRadius: 3,
-    padding: '0 4px',
-};
-const inlineWrapper = {
-    fontSize: 12,
-};
 const UnsupportedStatus = ({ label }) => {
     return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: label });
 };
 exports.UnsupportedStatus = UnsupportedStatus;
 const TimelineNonEditableStatus = ({ propStatus }) => {
-    if (propStatus.canUpdate) {
-        return null;
-    }
-    if (propStatus.reason === 'computed' || propStatus.reason === 'keyframed') {
+    if (propStatus.status === 'computed') {
         return (jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) }));
     }
 };
 exports.TimelineNonEditableStatus = TimelineNonEditableStatus;
-const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, }) => {
-    const wrapperStyle = !propStatus.canUpdate
-        ? notEditableBackground
-        : undefined;
-    if (field.typeName === 'number') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { field: field, effectiveValue: effectiveValue, onSave: onSave, propStatus: propStatus, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
-    }
-    if (field.typeName === 'rotation') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineRotationField_1.TimelineRotationField, { field: field, effectiveValue: effectiveValue, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
-    }
-    if (field.typeName === 'translate') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineTranslateField_1.TimelineTranslateField, { field: field, effectiveValue: effectiveValue, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
-    }
-    if (field.typeName === 'uv-coordinate') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineUvCoordinateField_1.TimelineUvCoordinateField, { field: field, effectiveValue: effectiveValue, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
-    }
-    if (field.typeName === 'boolean') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField_1.TimelineBooleanField, { field: field, propStatus: propStatus, onSave: onSave, effectiveValue: effectiveValue }) }));
-    }
-    if (field.typeName === 'color') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineColorField_1.TimelineColorField, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue }) }));
+const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, scaleLockNodePath, }) => {
+    if ((0, TimelinePrimitiveFieldValue_1.isTimelinePrimitiveFieldInfo)(field)) {
+        return (jsx_runtime_1.jsx(TimelinePrimitiveFieldValue_1.TimelinePrimitiveFieldValue, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus, scaleLockNodePath: scaleLockNodePath }));
     }
-    if (field.typeName === 'enum') {
-        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineEnumField_1.TimelineEnumField, { field: field, propStatus: propStatus, onSave: onSave, effectiveValue: effectiveValue, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+    if (field.typeName === 'array') {
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineArrayField_1.TimelineArrayField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave }) }));
     }
     throw new Error(`Unsupported field type: ${field.typeName}`);
 };