@remotion/studio 4.0.474 → 4.0.476

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -8,6 +8,7 @@ const TimelineEnumField_1 = require("./TimelineEnumField");
 const TimelineNumberField_1 = require("./TimelineNumberField");
 const TimelineRotationField_1 = require("./TimelineRotationField");
 const TimelineScaleField_1 = require("./TimelineScaleField");
+const TimelineTransformOriginField_1 = require("./TimelineTransformOriginField");
 const TimelineTranslateField_1 = require("./TimelineTranslateField");
 const TimelineUvCoordinateField_1 = require("./TimelineUvCoordinateField");
 const inlineWrapper = {
@@ -30,6 +31,9 @@ const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragE
     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 === 'transform-origin') {
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineTransformOriginField_1.TimelineTransformOriginField, { 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');

package/dist/components/Timeline/TimelineRotationField.js

@@ -5,40 +5,37 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const timeline_field_utils_1 = require("./timeline-field-utils");
-const unitPattern = /^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|turn|grad)$/;
-const unitToDegrees = {
-    deg: 1,
-    rad: 180 / Math.PI,
-    turn: 360,
-    grad: 360 / 400,
-};
-const parseCssRotationToDegrees = (value) => {
-    const match = value.trim().match(unitPattern);
-    if (match) {
-        return (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(match[1]) * unitToDegrees[match[2]]);
-    }
-    try {
-        const m = new DOMMatrix(`rotate(${value})`);
-        return (0, timeline_field_utils_1.normalizeTimelineNumber)(Math.atan2(m.b, m.a) * (180 / Math.PI));
-    }
-    catch (_a) {
-        return 0;
-    }
-};
+const timeline_rotation_utils_1 = require("./timeline-rotation-utils");
 const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
     var _a, _b;
     const [dragValue, setDragValue] = (0, react_1.useState)(null);
     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 (0, timeline_rotation_utils_1.parseCssRotationToDegrees)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg'));
         }
         return typeof effectiveValue === 'number' ? effectiveValue : 0;
     }, [effectiveValue, isCssRotation]);
+    const configuredStep = field.fieldSchema.type === 'rotation-css' ||
+        field.fieldSchema.type === 'rotation-degrees'
+        ? field.fieldSchema.step
+        : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
+    const min = field.fieldSchema.type === 'rotation-degrees'
+        ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
+        : -Infinity;
+    const max = field.fieldSchema.type === 'rotation-degrees'
+        ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
+        : Infinity;
+    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 1,
+        step: configuredStep,
+    }), [configuredStep]);
     const serializeValue = (0, react_1.useCallback)((value) => {
-        const normalized = (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
-        return isCssRotation ? `${normalized}deg` : normalized;
-    }, [isCssRotation]);
+        return isCssRotation
+            ? (0, timeline_rotation_utils_1.serializeCssRotation)(value, decimalPlaces)
+            : (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
+    }, [decimalPlaces, isCssRotation]);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
         setDragValue(newVal);
         onDragValueChange(serializeValue(newVal));
@@ -68,21 +65,6 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
             }
         }
     }, [propStatus, onSave, serializeValue]);
-    const configuredStep = field.fieldSchema.type === 'rotation-css' ||
-        field.fieldSchema.type === 'rotation-degrees'
-        ? field.fieldSchema.step
-        : undefined;
-    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
-    const min = field.fieldSchema.type === 'rotation-degrees'
-        ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
-        : -Infinity;
-    const max = field.fieldSchema.type === 'rotation-degrees'
-        ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
-        : Infinity;
-    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
-        defaultDecimalPlaces: 1,
-        step: configuredStep,
-    }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
         const formatted = (0, timeline_field_utils_1.formatTimelineNumber)({
             decimalPlaces,

package/dist/components/Timeline/TimelineScaleField.js

@@ -99,7 +99,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
         ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
         : Infinity;
     const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
-        defaultDecimalPlaces: 2,
+        defaultDecimalPlaces: 3,
         step: configuredStep,
     }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {

package/dist/components/Timeline/TimelineScrollable.js

@@ -3,24 +3,40 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineScrollable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const timeline_refs_1 = require("./timeline-refs");
+const TimelineSelection_1 = require("./TimelineSelection");
 const outer = {
     width: '100%',
     height: '100%',
     overflowX: 'auto',
     overflowY: 'hidden',
     position: 'relative',
-    backgroundColor: colors_1.TIMELINE_BACKGROUND,
+    backgroundColor: TimelineSelection_1.TIMELINE_BACKGROUND,
+};
+const marqueeStyle = {
+    backgroundColor: 'rgba(70, 130, 255, 0.16)',
+    border: '1px solid rgba(70, 130, 255, 0.75)',
+    boxSizing: 'border-box',
+    pointerEvents: 'none',
+    position: 'fixed',
+    zIndex: 10,
 };
 const TimelineScrollable = ({ children }) => {
+    const { marqueeRect, onPointerDownCapture } = (0, TimelineSelection_1.useTimelineMarqueeSelection)();
     const containerStyle = (0, react_1.useMemo)(() => {
         return {
             width: '100%',
             minHeight: '100%',
         };
     }, []);
-    return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.scrollableRef, style: outer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx("div", { style: containerStyle, children: children }) }));
+    return (jsx_runtime_1.jsxs("div", { ref: timeline_refs_1.scrollableRef, style: outer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, onPointerDownCapture: onPointerDownCapture, children: [
+            jsx_runtime_1.jsx("div", { style: containerStyle, children: children }), marqueeRect === null ? null : (jsx_runtime_1.jsx("div", { style: {
+                    ...marqueeStyle,
+                    height: marqueeRect.bottom - marqueeRect.top,
+                    left: marqueeRect.left,
+                    top: marqueeRect.top,
+                    width: marqueeRect.right - marqueeRect.left,
+                } }))] }));
 };
 exports.TimelineScrollable = TimelineScrollable;

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

@@ -7,9 +7,8 @@ export declare const TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
 export declare const getTimelineSelectedLabelStyle: (selected: boolean, subcategory: boolean) => CSSProperties;
 export declare const getTimelineColor: (selected: boolean, subcategory: boolean) => "black" | "rgba(255, 255, 255, 0.8)";
 export declare const getTimelineSelectedTrackHighlightStyle: (timelineWidth: number) => CSSProperties;
-export declare const SELECTION_ENABLED = false;
-export declare const TIMELINE_TOP_DRAG = false;
-export declare const ENABLE_OUTLINES = false;
+export declare const TIMELINE_BACKGROUND = "#0F1113";
+export declare const TIMELINE_TICKS_BACKGROUND = "rgb(31,36,40)";
 type TimelineSelectionBase = {
     readonly nodePathInfo: SequenceNodePathInfo;
 };
@@ -36,6 +35,9 @@ export type TimelineSelection = (TimelineSelectionBase & {
     readonly toFrame: number;
     readonly segmentIndex: number;
 });
+export type TimelineEasingSelection = Extract<TimelineSelection, {
+    type: 'easing';
+}>;
 export type TimelineSelectionInteraction = {
     readonly shiftKey: boolean;
     readonly toggleKey: boolean;
@@ -45,27 +47,74 @@ export declare const isTimelineSelectionModifierEvent: ({ shiftKey, metaKey, ctr
     readonly metaKey: boolean;
     readonly ctrlKey: boolean;
 }) => boolean;
+export declare const shouldSelectTimelineRowOnPointerDown: ({ selected, shiftKey, metaKey, ctrlKey, }: {
+    readonly selected: boolean;
+    readonly shiftKey: boolean;
+    readonly metaKey: boolean;
+    readonly ctrlKey: boolean;
+}) => boolean;
 export type TimelineSelectionState = {
     readonly selectedItems: readonly TimelineSelection[];
     readonly anchor: TimelineSelection | null;
 };
+export type TimelineMarqueeRect = {
+    readonly left: number;
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+};
+export type TimelineMarqueeSelectionKind = 'sequence' | 'keyframes-and-easings';
+export type TimelineMarqueeSelectionCandidate = {
+    readonly item: TimelineSelection;
+    readonly rect: TimelineMarqueeRect;
+};
 export declare const getTimelineSelectionAfterInteraction: ({ currentState, clickedItem, interaction, allSelectableItems, }: {
     readonly currentState: TimelineSelectionState;
     readonly clickedItem: TimelineSelection;
     readonly interaction: TimelineSelectionInteraction;
     readonly allSelectableItems: readonly TimelineSelection[];
 }) => TimelineSelectionState;
+export declare const getNormalizedTimelineMarqueeRect: ({ startX, startY, currentX, currentY, }: {
+    readonly startX: number;
+    readonly startY: number;
+    readonly currentX: number;
+    readonly currentY: number;
+}) => TimelineMarqueeRect;
+export declare const getClampedTimelineMarqueePoint: ({ x, y, bounds, }: {
+    readonly x: number;
+    readonly y: number;
+    readonly bounds: TimelineMarqueeRect;
+}) => {
+    readonly x: number;
+    readonly y: number;
+};
+export declare const timelineMarqueeRectsIntersect: (a: TimelineMarqueeRect, b: TimelineMarqueeRect) => boolean;
+export declare const getTimelineMarqueeSelection: ({ candidates, lockedSelectionKind, marqueeRect, }: {
+    readonly candidates: readonly TimelineMarqueeSelectionCandidate[];
+    readonly lockedSelectionKind: TimelineMarqueeSelectionKind | null;
+    readonly marqueeRect: TimelineMarqueeRect;
+}) => {
+    readonly lockedSelectionKind: TimelineMarqueeSelectionKind | null;
+    readonly selectedItems: readonly TimelineSelection[];
+};
 type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
+    readonly canSelectEasing: boolean;
     readonly selectedItems: readonly TimelineSelection[];
     readonly isSelected: (item: TimelineSelection) => boolean;
     readonly selectItem: (item: TimelineSelection, interaction?: TimelineSelectionInteraction) => void;
     readonly selectItems: (items: readonly TimelineSelection[]) => void;
     readonly registerSelectableItem: (item: TimelineSelection) => () => void;
+    readonly registerMarqueeSelectableItem: (item: TimelineSelection, getRect: () => DOMRect | null) => () => void;
+    readonly getMarqueeSelection: (marqueeRect: TimelineMarqueeRect, lockedSelectionKind: TimelineMarqueeSelectionKind | null) => {
+        readonly lockedSelectionKind: TimelineMarqueeSelectionKind | null;
+        readonly selectedItems: readonly TimelineSelection[];
+    };
     readonly containsSelection: (nodePathInfo: SequenceNodePathInfo) => boolean;
     readonly clearSelection: () => void;
 };
 export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => TimelineSelection | null;
+export declare const getTimelineSelectionKey: (item: TimelineSelection) => string;
 export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TrackWithHash, "nodePathInfo">[]) => TimelineSelection[];
 export declare const getTimelineSequenceSelectionKey: (nodePathInfo: SequenceNodePathInfo) => string;
 export declare const TimelineSelectAllKeybindings: React.FC<{
@@ -75,15 +124,24 @@ export declare const TimelineSelectionProvider: React.FC<{
     readonly children: React.ReactNode;
 }>;
 export declare const useTimelineSelection: () => TimelineSelectionContextValue;
+export declare const TIMELINE_MARQUEE_ITEM_ATTR = "data-timeline-marquee-item";
+export declare const TIMELINE_SCRUBBER_ATTR = "data-timeline-scrubber";
 export declare const useCurrentTimelineSelectionStateAsRef: () => React.RefObject<TimelineSelectionContextValue>;
+export declare const useTimelineMarqueeSelection: () => {
+    marqueeRect: TimelineMarqueeRect | null;
+    onPointerDownCapture: (event: React.PointerEvent<HTMLDivElement>) => void;
+};
+export declare const useTimelineMarqueeSelectableItem: (item: TimelineSelection | null, ref: React.RefObject<Element | null>) => void;
 export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null) => {
     onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
     selectable: boolean;
+    selectionItem: TimelineSelection | null;
     selected: boolean;
 };
 export declare const useTimelineKeyframeSelection: (nodePathInfo: SequenceNodePathInfo, frame: number) => {
     onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
     selectable: boolean;
+    selectionItem: TimelineSelection;
     selected: boolean;
 };
 export declare const useTimelineEasingSelection: ({ nodePathInfo, fromFrame, toFrame, segmentIndex, }: {
@@ -95,6 +153,12 @@ export declare const useTimelineEasingSelection: ({ nodePathInfo, fromFrame, toF
     onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
     selectable: boolean;
     selected: boolean;
+    selectionItem: TimelineSelectionBase & {
+        readonly type: "easing";
+        readonly fromFrame: number;
+        readonly toFrame: number;
+        readonly segmentIndex: number;
+    };
 };
 export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
 export {};