@remotion/studio 4.0.507 → 4.0.508

package/dist/components/Timeline/TimelineRotationField.js

@@ -7,16 +7,35 @@ const InputDragger_1 = require("../NewComposition/InputDragger");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const timeline_rotation_field_utils_1 = require("./timeline-rotation-field-utils");
 const timeline_rotation_utils_1 = require("./timeline-rotation-utils");
+const Transform3DModeContext_1 = require("./Transform3DModeContext");
+const containerStyle = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 4,
+};
+const compactDraggerStyle = {
+    paddingBottom: 2,
+    paddingLeft: 2,
+    paddingRight: 2,
+    paddingTop: 2,
+};
+const ROTATION_LABELS = ['X', 'Y', 'Z'];
 const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
     var _a, _b;
     const [dragValue, setDragValue] = (0, react_1.useState)(null);
+    const [dragRotation, setDragRotation] = (0, react_1.useState)(null);
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
     const isCssRotation = field.fieldSchema.type === 'rotation-css';
-    const degrees = (0, react_1.useMemo)(() => {
-        if (isCssRotation) {
-            return (0, timeline_rotation_utils_1.parseCssRotationToDegrees)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg'));
-        }
-        return typeof effectiveValue === 'number' ? effectiveValue : 0;
-    }, [effectiveValue, isCssRotation]);
+    const cssRotation = (0, react_1.useMemo)(() => isCssRotation
+        ? (0, timeline_rotation_utils_1.parseCssRotationToEuler)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg'))
+        : [0, 0, 0], [effectiveValue, isCssRotation]);
+    const show3D = isCssRotation &&
+        (transform3DMode || cssRotation[0] !== 0 || cssRotation[1] !== 0);
+    const degrees = isCssRotation
+        ? cssRotation[2]
+        : typeof effectiveValue === 'number'
+            ? effectiveValue
+            : 0;
     const configuredStep = field.fieldSchema.type === 'rotation-css' ||
         field.fieldSchema.type === 'rotation-degrees'
         ? field.fieldSchema.step
@@ -32,11 +51,13 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
         defaultDecimalPlaces: 1,
         step: configuredStep,
     }), [configuredStep]);
-    const serializeValue = (0, react_1.useCallback)((value) => {
-        return isCssRotation
-            ? (0, timeline_rotation_utils_1.serializeCssRotation)(value, decimalPlaces)
-            : (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
-    }, [decimalPlaces, isCssRotation]);
+    const serializeValue = (0, react_1.useCallback)((value) => isCssRotation
+        ? (0, timeline_rotation_utils_1.serializeCssRotation)(value, decimalPlaces)
+        : (0, timeline_field_utils_1.normalizeTimelineNumber)(value), [decimalPlaces, isCssRotation]);
+    const serializeRotation = (0, react_1.useCallback)((rotation) => (0, timeline_rotation_utils_1.serializeCssRotationFromEuler)({
+        rotation,
+        decimalPlaces: Math.max(6, decimalPlaces),
+    }), [decimalPlaces]);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
         setDragValue(newVal);
         onDragValueChange(serializeValue(newVal));
@@ -73,6 +94,57 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
             value: v,
         });
     }, [decimalPlaces, field.fieldSchema]);
-    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 }));
+    const onRotationValueChange = (0, react_1.useCallback)((rotationIndex, newValue) => {
+        const nextRotation = [...(dragRotation !== null && dragRotation !== void 0 ? dragRotation : cssRotation)];
+        nextRotation[rotationIndex] = newValue;
+        setDragRotation(nextRotation);
+        onDragValueChange(serializeRotation(nextRotation));
+    }, [cssRotation, dragRotation, onDragValueChange, serializeRotation]);
+    const onRotationValueChangeEnd = (0, react_1.useCallback)((rotationIndex, newValue) => {
+        const nextRotation = [...(dragRotation !== null && dragRotation !== void 0 ? dragRotation : cssRotation)];
+        nextRotation[rotationIndex] = newValue;
+        const newRotation = serializeRotation(nextRotation);
+        const clearDragState = () => {
+            setDragRotation(null);
+            onDragEnd();
+        };
+        if (newRotation !== propStatus.codeValue) {
+            onSave(newRotation).finally(clearDragState);
+        }
+        else {
+            clearDragState();
+        }
+    }, [
+        cssRotation,
+        dragRotation,
+        onDragEnd,
+        onSave,
+        propStatus.codeValue,
+        serializeRotation,
+    ]);
+    const onRotationTextChange = (0, react_1.useCallback)((rotationIndex, newValue) => {
+        const parsed = Number(newValue);
+        if (Number.isNaN(parsed)) {
+            return;
+        }
+        const nextRotation = [...(dragRotation !== null && dragRotation !== void 0 ? dragRotation : cssRotation)];
+        nextRotation[rotationIndex] = parsed;
+        const newRotation = serializeRotation(nextRotation);
+        if (newRotation !== propStatus.codeValue) {
+            setDragRotation(nextRotation);
+            onSave(newRotation).finally(() => setDragRotation(null));
+        }
+    }, [
+        cssRotation,
+        dragRotation,
+        onSave,
+        propStatus.codeValue,
+        serializeRotation,
+    ]);
+    const angleDragger = (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, "aria-label": isCssRotation ? 'Rotation Z' : 'Rotation angle' }));
+    if (show3D) {
+        return (jsx_runtime_1.jsx("span", { style: containerStyle, children: ROTATION_LABELS.map((rotationLabel, rotationIndex) => (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: (dragRotation !== null && dragRotation !== void 0 ? dragRotation : cssRotation)[rotationIndex], buttonStyle: compactDraggerStyle, status: "ok", small: true, onValueChange: (newValue) => onRotationValueChange(rotationIndex, newValue), onValueChangeEnd: (newValue) => onRotationValueChangeEnd(rotationIndex, newValue), onTextChange: (newValue) => onRotationTextChange(rotationIndex, newValue), min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, "aria-label": `Rotation ${rotationLabel}` }, rotationLabel))) }));
+    }
+    return angleDragger;
 };
 exports.TimelineRotationField = TimelineRotationField;

package/dist/components/Timeline/TimelineScaleField.js

@@ -10,11 +10,16 @@ const InputDragger_1 = require("../NewComposition/InputDragger");
 const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
+const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const leftDraggerStyle = {
+    paddingBottom: 2,
     paddingLeft: 0,
+    paddingTop: 2,
 };
 const rightDraggerStyle = {
+    paddingBottom: 2,
     paddingRight: 0,
+    paddingTop: 2,
 };
 const containerStyle = {
     alignItems: 'center',
@@ -82,9 +87,12 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
     var _a, _b;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
+    const [dragZ, setDragZ] = (0, react_1.useState)(null);
     const dragStartRef = (0, react_1.useRef)(null);
     const { getScaleLockState, setScaleLockState } = (0, react_1.useContext)(scale_lock_1.ScaleLockContext);
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
     const [codeX, codeY, codeZ] = (0, react_1.useMemo)(() => no_react_1.NoReactInternals.parseScaleValue(effectiveValue), [effectiveValue]);
+    const show3D = transform3DMode || codeZ !== 1;
     const defaultLinked = codeX === codeY;
     const linked = getScaleLockState({
         nodePath: scaleLockNodePath,
@@ -111,9 +119,9 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
         }
         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 serialize = (0, react_1.useCallback)((x, y, z = dragZ !== null && dragZ !== void 0 ? dragZ : codeZ) => {
+        return no_react_1.NoReactInternals.serializeScaleValue([x, y, z]);
+    }, [codeZ, dragZ]);
     const onXChange = (0, react_1.useCallback)((newVal) => {
         if (linked) {
             const [baseX, baseY] = getDragStart();
@@ -161,6 +169,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
             dragStartRef.current = null;
             setDragX(null);
             setDragY(null);
+            setDragZ(null);
             onDragEnd();
         };
         if (!valuesEqual(newScale, propStatus.codeValue)) {
@@ -204,6 +213,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
                 dragStartRef.current = null;
                 setDragX(null);
                 setDragY(null);
+                setDragZ(null);
             });
         }
     }, [codeX, codeY, dragY, linked, max, min, onSave, propStatus, serialize]);
@@ -254,6 +264,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
             dragStartRef.current = null;
             setDragX(null);
             setDragY(null);
+            setDragZ(null);
             onDragEnd();
         };
         if (!valuesEqual(newScale, propStatus.codeValue)) {
@@ -297,6 +308,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
                 dragStartRef.current = null;
                 setDragX(null);
                 setDragY(null);
+                setDragZ(null);
             });
         }
     }, [codeX, codeY, dragX, linked, max, min, onSave, propStatus, serialize]);
@@ -307,8 +319,50 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
             linked: !linked,
         });
     }, [field.key, linked, scaleLockNodePath, setScaleLockState]);
+    const onZChange = (0, react_1.useCallback)((newVal) => {
+        setDragZ(newVal);
+        onDragValueChange(serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, newVal));
+    }, [codeX, codeY, dragX, dragY, onDragValueChange, serialize]);
+    const onZChangeEnd = (0, react_1.useCallback)((newVal) => {
+        const newScale = serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, newVal);
+        const clearDragState = () => {
+            dragStartRef.current = null;
+            setDragX(null);
+            setDragY(null);
+            setDragZ(null);
+            onDragEnd();
+        };
+        if (!valuesEqual(newScale, propStatus.codeValue)) {
+            onSave(newScale).finally(clearDragState);
+        }
+        else {
+            clearDragState();
+        }
+    }, [
+        codeX,
+        codeY,
+        dragX,
+        dragY,
+        onDragEnd,
+        onSave,
+        propStatus.codeValue,
+        serialize,
+    ]);
+    const onZTextChange = (0, react_1.useCallback)((newVal) => {
+        const parsed = Number(newVal);
+        if (Number.isNaN(parsed)) {
+            return;
+        }
+        const newScale = serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, parsed);
+        if (!valuesEqual(newScale, propStatus.codeValue)) {
+            setDragZ(parsed);
+            onSave(newScale).finally(() => setDragZ(null));
+        }
+    }, [codeX, codeY, dragX, dragY, onSave, propStatus.codeValue, serialize]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            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, allowStepMismatch: true }), 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, allowStepMismatch: true }), 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, buttonStyle: leftDraggerStyle, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true, "aria-label": "Scale X" }), jsx_runtime_1.jsx("div", { style: gapStyle }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true, "aria-label": "Scale Y" }), show3D ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("div", { style: gapStyle }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragZ !== null && dragZ !== void 0 ? dragZ : codeZ, buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onZChange, onValueChangeEnd: onZChangeEnd, onTextChange: onZTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true, "aria-label": "Scale Z" })
+                ] })) : null, jsx_runtime_1.jsx(LinkToggle, { linked: linked, onToggle: onToggleLink })
         ] }));
 };
 exports.TimelineScaleField = TimelineScaleField;

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

@@ -161,6 +161,10 @@ export declare const getTimelineSequenceSelectionKey: (nodePathInfo: SequenceNod
 export declare const TimelineSelectAllKeybindings: React.FC<{
     readonly timeline: readonly TimelineTrackData[];
 }>;
+export declare const getTimelineSequenceSelectionForEscape: (selectedItems: readonly TimelineSelection[]) => {
+    readonly type: "sequence";
+    readonly nodePathInfo: SequenceNodePathInfo;
+} | null;
 export declare const TimelineSelectableItemsProvider: React.FC<{
     readonly children: React.ReactNode;
     readonly timeline: readonly TimelineTrackData[];

package/dist/components/Timeline/TimelineSelection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_HOVER_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.getTimelineSequenceSelectionForEscape = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_HOVER_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -18,6 +18,7 @@ const options_sidebar_tabs_1 = require("../options-sidebar-tabs");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
 const imperative_state_1 = require("./imperative-state");
+const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
@@ -543,6 +544,42 @@ const TimelineSelectAllKeybindings = ({ timeline }) => {
     return null;
 };
 exports.TimelineSelectAllKeybindings = TimelineSelectAllKeybindings;
+const fieldsSelectingSequenceOnEscape = new Set([
+    'cropLeft',
+    'cropRight',
+    'cropTop',
+    'cropBottom',
+    'style.rotate',
+]);
+const getTimelineSequenceSelectionForEscape = (selectedItems) => {
+    if (selectedItems.length !== 1) {
+        return null;
+    }
+    const [selectedItem] = selectedItems;
+    let fieldKey = null;
+    if (selectedItem.type === 'sequence-prop') {
+        fieldKey = selectedItem.key;
+    }
+    else if (selectedItem.type === 'keyframe' ||
+        selectedItem.type === 'easing') {
+        const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(selectedItem.nodePathInfo.auxiliaryKeys);
+        fieldKey = (field === null || field === void 0 ? void 0 : field.type) === 'sequence' ? field.fieldKey : null;
+    }
+    else {
+        return null;
+    }
+    if (!fieldsSelectingSequenceOnEscape.has(fieldKey !== null && fieldKey !== void 0 ? fieldKey : '')) {
+        return null;
+    }
+    return {
+        type: 'sequence',
+        nodePathInfo: {
+            ...selectedItem.nodePathInfo,
+            auxiliaryKeys: [],
+        },
+    };
+};
+exports.getTimelineSequenceSelectionForEscape = getTimelineSequenceSelectionForEscape;
 const TimelineEscapeKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const currentSelection = (0, exports.useCurrentTimelineSelectionStateAsRef)();
@@ -551,10 +588,16 @@ const TimelineEscapeKeybindings = () => {
             event: 'keydown',
             key: 'Escape',
             callback: (event) => {
-                const { selectedItems, clearSelection } = currentSelection.current;
+                const { selectedItems, clearSelection, selectItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
                     return;
                 }
+                const sequenceSelection = (0, exports.getTimelineSequenceSelectionForEscape)(selectedItems);
+                if (sequenceSelection) {
+                    selectItems([sequenceSelection]);
+                    event.preventDefault();
+                    return;
+                }
                 clearSelection();
                 event.preventDefault();
             },

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -48,6 +48,7 @@ const use_keybinding_1 = require("../../helpers/use-keybinding");
 const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const modals_1 = require("../../state/modals");
 const timeline_sequence_hover_1 = require("../../state/timeline-sequence-hover");
+const transform_3d_mode_1 = require("../../state/transform-3d-mode");
 const call_api_1 = require("../call-api");
 const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
@@ -658,6 +659,8 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
             });
         },
     });
+    const canRotate = nodePathInfo !== null;
+    const { setManuallyEnabled } = (0, react_1.useContext)(transform_3d_mode_1.Transform3DModeStateContext);
     const onAddEffect = (0, react_1.useCallback)(() => {
         if (!canAddEffect ||
             previewServerState.type !== 'connected' ||
@@ -691,6 +694,20 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
             key: selected_outline_types_1.cropFieldKeys.left,
         }, undefined, undefined, { reveal: true });
     }, [canCrop, nodePathInfo, selectItem]);
+    const onRotate = (0, react_1.useCallback)(() => {
+        if (!canRotate || !nodePathInfo) {
+            return;
+        }
+        setManuallyEnabled((0, TimelineSelection_1.getTimelineSequenceSelectionKey)(nodePathInfo), true);
+        selectItem({
+            type: 'sequence-prop',
+            nodePathInfo: {
+                ...nodePathInfo,
+                auxiliaryKeys: ['controls', selected_outline_types_1.rotateFieldKey],
+            },
+            key: selected_outline_types_1.rotateFieldKey,
+        }, undefined, undefined, { reveal: true });
+    }, [canRotate, nodePathInfo, selectItem, setManuallyEnabled]);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
         var _a;
         if (selectable) {
@@ -769,9 +786,31 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
                                 subMenu: null,
                                 value: 'crop',
                             },
+                        ]
+                        : []),
+                    ...(canRotate
+                        ? [
+                            {
+                                type: 'item',
+                                id: 'rotate',
+                                keyHint: null,
+                                label: isProgrammaticallyDuplicated
+                                    ? 'Rotate all'
+                                    : 'Rotate',
+                                leftItem: null,
+                                disabled: false,
+                                onClick: onRotate,
+                                quickSwitcherLabel: null,
+                                subMenu: null,
+                                value: 'rotate',
+                            },
+                        ]
+                        : []),
+                    ...(canCrop || canRotate
+                        ? [
                             {
                                 type: 'divider',
-                                id: 'crop-divider',
+                                id: 'transform-controls-divider',
                             },
                         ]
                         : []),
@@ -796,6 +835,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     }, [
         canAddEffect,
         canCrop,
+        canRotate,
         canConfigureApps,
         canOpenInEditor,
         canRenameThisSequence,
@@ -810,6 +850,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
         nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects,
         onAddEffect,
         onCrop,
+        onRotate,
         onDeleteSequenceFromSource,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -45,6 +45,7 @@ const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const get_sequence_prop_reset_changes_1 = require("./get-sequence-prop-reset-changes");
 const save_sequence_prop_1 = require("./save-sequence-prop");
+const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldRowContent_1 = require("./TimelineFieldRowContent");
 const TimelineKeyframeControls_1 = require("./TimelineKeyframeControls");
@@ -53,6 +54,7 @@ const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
+const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const fieldRowBase = {};
 const inlineSourceFieldRow = {
     alignItems: 'stretch',
@@ -229,6 +231,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
     const propStatusesForOverride = remotion_1.Internals.getPropStatusesCtx(visualModePropStatuses, nodePath);
     const propStatus = (_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride[field.key]) !== null && _a !== void 0 ? _a : null;
     const dragOverrideValue = (0, react_1.useMemo)(() => {
@@ -248,10 +251,10 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 keyframable,
             })) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: schema, effectIndex: null, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
     const style = (0, react_1.useMemo)(() => {
-        return field.typeName === 'text-content'
+        return (0, timeline_field_row_layout_1.isTimelineFieldStacked)({ field, transform3DMode })
             ? fieldRowBase
             : { ...fieldRowBase, height: field.rowHeight };
-    }, [field.rowHeight, field.typeName]);
+    }, [field, transform3DMode]);
     const canResetToDefault = (0, react_1.useMemo)(() => {
         if (!propStatus || propStatus.status === 'computed') {
             return false;

package/dist/components/Timeline/TimelineTransformOriginField.js

@@ -8,21 +8,33 @@ const timeline_field_display_utils_1 = require("./timeline-field-display-utils")
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const transform_origin_utils_1 = require("./transform-origin-utils");
+const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const leftDraggerStyle = {
+    paddingBottom: 2,
     paddingLeft: 0,
+    paddingTop: 2,
 };
 const rightDraggerStyle = {
+    paddingBottom: 2,
     paddingRight: 0,
+    paddingTop: 2,
 };
 const containerStyle = {
     display: 'flex',
     gap: 4,
 };
 const TimelineTransformOriginField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
+    var _a;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
+    const [dragZ, setDragZ] = (0, react_1.useState)(null);
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
     const parsed = (0, react_1.useMemo)(() => (0, transform_origin_utils_1.parseTransformOrigin)(effectiveValue), [effectiveValue]);
     const percent = (0, react_1.useMemo)(() => (parsed === null ? null : (0, transform_origin_utils_1.parsedTransformOriginToPercent)(parsed)), [parsed]);
+    const parsedZ = (0, react_1.useMemo)(() => (parsed === null || parsed === void 0 ? void 0 : parsed.z) === null || (parsed === null || parsed === void 0 ? void 0 : parsed.z) === undefined
+        ? null
+        : (0, transform_origin_utils_1.parseTransformOriginZ)(parsed.z), [parsed === null || parsed === void 0 ? void 0 : parsed.z]);
+    const show3D = transform3DMode || (parsedZ !== null && parsedZ.value !== 0);
     const configuredStep = field.fieldSchema.type === 'transform-origin'
         ? field.fieldSchema.step
         : undefined;
@@ -37,14 +49,19 @@ const TimelineTransformOriginField = ({ field, propStatus, effectiveValue, onSav
             value: v,
         });
     }, [field.fieldSchema]);
-    const serialize = (0, react_1.useCallback)((x, y) => {
+    const serialize = (0, react_1.useCallback)((x, y, z) => {
         var _a;
+        if (z === void 0) { z = (_a = parsed === null || parsed === void 0 ? void 0 : parsed.z) !== null && _a !== void 0 ? _a : null; }
         return (0, transform_origin_utils_1.serializeTransformOrigin)({
             uv: (0, transform_origin_utils_1.transformOriginPercentToUv)([x, y]),
-            z: (_a = parsed === null || parsed === void 0 ? void 0 : parsed.z) !== null && _a !== void 0 ? _a : null,
+            z,
             decimalPlaces,
         });
     }, [decimalPlaces, parsed === null || parsed === void 0 ? void 0 : parsed.z]);
+    const serializeZ = (0, react_1.useCallback)((value) => {
+        var _a;
+        return `${(0, timeline_field_utils_1.normalizeTimelineNumber)(value)}${(_a = parsedZ === null || parsedZ === void 0 ? void 0 : parsedZ.unit) !== null && _a !== void 0 ? _a : 'px'}`;
+    }, [parsedZ === null || parsedZ === void 0 ? void 0 : parsedZ.unit]);
     const onXChange = (0, react_1.useCallback)((newVal) => {
         if (percent === null) {
             return;
@@ -127,11 +144,68 @@ const TimelineTransformOriginField = ({ field, propStatus, effectiveValue, onSav
             }
         }
     }, [dragX, onSave, percent, propStatus.codeValue, serialize]);
+    const onZChange = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        setDragZ(newVal);
+        onDragValueChange(serialize(dragX !== null && dragX !== void 0 ? dragX : percent[0], dragY !== null && dragY !== void 0 ? dragY : percent[1], serializeZ(newVal)));
+    }, [dragX, dragY, onDragValueChange, percent, serialize, serializeZ]);
+    const onZChangeEnd = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        const value = serialize(dragX !== null && dragX !== void 0 ? dragX : percent[0], dragY !== null && dragY !== void 0 ? dragY : percent[1], serializeZ(newVal));
+        if (value !== propStatus.codeValue) {
+            onSave(value).finally(() => {
+                setDragZ(null);
+                onDragEnd();
+            });
+        }
+        else {
+            setDragZ(null);
+            onDragEnd();
+        }
+    }, [
+        dragX,
+        dragY,
+        onDragEnd,
+        onSave,
+        percent,
+        propStatus.codeValue,
+        serialize,
+        serializeZ,
+    ]);
+    const onZTextChange = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        const parsedValue = Number(newVal);
+        if (!Number.isNaN(parsedValue)) {
+            const value = serialize(dragX !== null && dragX !== void 0 ? dragX : percent[0], dragY !== null && dragY !== void 0 ? dragY : percent[1], serializeZ(parsedValue));
+            if (value !== propStatus.codeValue) {
+                setDragZ(parsedValue);
+                onSave(value).finally(() => setDragZ(null));
+            }
+        }
+    }, [
+        dragX,
+        dragY,
+        onSave,
+        percent,
+        propStatus.codeValue,
+        serialize,
+        serializeZ,
+    ]);
     if (percent === null) {
         return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "unsupported origin" });
     }
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : percent[0], style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : percent[1], style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces })
-        ] }));
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : percent[0], buttonStyle: leftDraggerStyle, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, "aria-label": "Transform origin X" }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : percent[1], buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, "aria-label": "Transform origin Y" }), show3D ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: (_a = dragZ !== null && dragZ !== void 0 ? dragZ : parsedZ === null || parsedZ === void 0 ? void 0 : parsedZ.value) !== null && _a !== void 0 ? _a : 0, buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onZChange, onValueChangeEnd: onZChangeEnd, onTextChange: onZTextChange, min: -Infinity, max: Infinity, step: step, formatter: (value) => {
+                            var _a;
+                            return `${value}${(_a = parsedZ === null || parsedZ === void 0 ? void 0 : parsedZ.unit) !== null && _a !== void 0 ? _a : 'px'}`;
+                        }, rightAlign: false, snapToStep: false, dragDecimalPlaces: decimalPlaces, "aria-label": "Transform origin Z" })
+                ] })) : null] }));
 };
 exports.TimelineTransformOriginField = TimelineTransformOriginField;