@remotion/studio 4.0.473 → 4.0.475

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -0,0 +1,245 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineKeyframeEasingLine = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
+const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const modals_1 = require("../../state/modals");
+const ContextMenu_1 = require("../ContextMenu");
+const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const update_selected_easing_1 = require("./update-selected-easing");
+const hitTargetHeight = 12;
+const lineHeight = 2;
+const easingLineButton = {
+    background: 'none',
+    border: 'none',
+    height: hitTargetHeight,
+    padding: 0,
+    position: 'absolute',
+    transform: 'translateY(-50%)',
+};
+const easingLine = {
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    borderRadius: lineHeight / 2,
+    height: lineHeight,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+};
+const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nodePathInfo, segmentIndex }) => {
+    const buttonRef = (0, react_1.useRef)(null);
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const { selected, onSelect, selectable, selectionItem } = (0, TimelineSelection_1.useTimelineEasingSelection)({
+        nodePathInfo,
+        fromFrame,
+        toFrame,
+        segmentIndex,
+    });
+    (0, TimelineSelection_1.useTimelineMarqueeSelectableItem)(selectionItem, buttonRef);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const getTargetSelections = (0, react_1.useCallback)(() => {
+        const selectedEasings = (0, update_selected_easing_1.getEasingSelections)(currentSelection.current.selectedItems);
+        return selected ? selectedEasings : [selectionItem];
+    }, [currentSelection, selected, selectionItem]);
+    const updateEasing = (0, react_1.useCallback)((easing) => {
+        if (previewServerState.type !== 'connected') {
+            return;
+        }
+        const promise = (0, update_selected_easing_1.updateSelectedTimelineEasings)({
+            selections: getTargetSelections(),
+            sequences: sequencesRef.current,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            propStatuses: propStatusesRef.current,
+            setPropStatuses,
+            clientId: previewServerState.clientId,
+            easing,
+        });
+        promise === null || promise === void 0 ? void 0 : promise.catch(() => undefined);
+    }, [
+        getTargetSelections,
+        overrideIdToNodePathMappings,
+        previewServerState,
+        propStatusesRef,
+        sequencesRef,
+        setPropStatuses,
+    ]);
+    const onOpenEasingEditor = (0, react_1.useCallback)(() => {
+        if (previewServerState.type !== 'connected') {
+            return;
+        }
+        const initialEasing = (0, update_selected_easing_1.getTimelineEasingValueForSelection)({
+            selection: selectionItem,
+            sequences: sequencesRef.current,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            propStatuses: propStatusesRef.current,
+        });
+        if (initialEasing === null) {
+            return;
+        }
+        setSelectedModal({
+            type: 'easing-editor',
+            initialEasing,
+            selections: getTargetSelections(),
+        });
+    }, [
+        getTargetSelections,
+        overrideIdToNodePathMappings,
+        previewServerState,
+        propStatusesRef,
+        selectionItem,
+        sequencesRef,
+        setSelectedModal,
+    ]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
+        return [
+            {
+                type: 'item',
+                id: 'linear',
+                keyHint: null,
+                label: 'Linear',
+                leftItem: null,
+                disabled: previewServerState.type !== 'connected',
+                onClick: () => updateEasing('linear'),
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'linear',
+            },
+            ...studio_shared_1.KEYFRAME_EASING_PRESETS.map((preset) => ({
+                type: 'item',
+                id: preset.id,
+                keyHint: null,
+                label: preset.label,
+                leftItem: null,
+                disabled: previewServerState.type !== 'connected',
+                onClick: () => updateEasing(preset.easing),
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: preset.id,
+            })),
+            {
+                type: 'divider',
+                id: 'edit-easing-divider',
+            },
+            {
+                type: 'item',
+                id: 'edit-easing',
+                keyHint: null,
+                label: 'Edit...',
+                leftItem: null,
+                disabled: previewServerState.type !== 'connected',
+                onClick: onOpenEasingEditor,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'edit-easing',
+            },
+        ];
+    }, [onOpenEasingEditor, previewServerState.type, updateEasing]);
+    const onOpenContextMenu = (0, react_1.useCallback)((event) => {
+        if (!selectable) {
+            return false;
+        }
+        if (!selected) {
+            onSelect({
+                shiftKey: event.shiftKey,
+                toggleKey: event.metaKey || event.ctrlKey,
+            });
+        }
+        return contextMenuValues;
+    }, [contextMenuValues, onSelect, selectable, selected]);
+    const style = (0, react_1.useMemo)(() => {
+        if (timelineWidth === null) {
+            return null;
+        }
+        const fromLeft = (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(fromFrame, videoConfig.durationInFrames, timelineWidth) - timeline_layout_1.TIMELINE_PADDING;
+        const toLeft = (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(toFrame, videoConfig.durationInFrames, timelineWidth) - timeline_layout_1.TIMELINE_PADDING;
+        const left = Math.min(fromLeft, toLeft);
+        const width = Math.abs(toLeft - fromLeft);
+        if (width === 0) {
+            return null;
+        }
+        return {
+            ...easingLineButton,
+            left,
+            pointerEvents: selectable ? 'auto' : 'none',
+            top: rowHeight / 2,
+            width,
+        };
+    }, [
+        fromFrame,
+        rowHeight,
+        selectable,
+        timelineWidth,
+        toFrame,
+        videoConfig.durationInFrames,
+    ]);
+    const lineStyle = (0, react_1.useMemo)(() => ({
+        ...easingLine,
+        outline: selected ? `1px solid ${colors_1.BLUE}` : undefined,
+    }), [selected]);
+    const onPointerDown = (0, react_1.useCallback)((event) => {
+        if (!selectable || event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        onSelect({
+            shiftKey: event.shiftKey,
+            toggleKey: event.metaKey || event.ctrlKey,
+        });
+    }, [onSelect, selectable]);
+    if (style === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("button", { ref: buttonRef, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: style, title: `Easing from frame ${fromFrame} to ${toFrame}`, "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx("div", { style: lineStyle }) }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: buttonRef, values: contextMenuValues, onOpen: onOpenContextMenu })
+        ] }));
+};
+exports.TimelineKeyframeEasingLine = react_1.default.memo(TimelineKeyframeEasingLineUnmemoized);

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TimelineKeyframeTracksProvider: React.FC<{
+    readonly tracks: readonly TrackWithHash[];
+    readonly children: React.ReactNode;
+}>;
+export declare const useTimelineKeyframeTracks: () => readonly TrackWithHash[];

package/dist/components/Timeline/TimelineKeyframeTracksContext.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineKeyframeTracks = exports.TimelineKeyframeTracksProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TimelineKeyframeTracksContext = (0, react_1.createContext)([]);
+// Keyframe diamonds need track metadata to resolve other selected rows. The
+// selection state only stores identities, and a mounted-row registry would miss
+// collapsed or otherwise unmounted rows.
+const TimelineKeyframeTracksProvider = ({ tracks, children }) => {
+    return (jsx_runtime_1.jsx(TimelineKeyframeTracksContext.Provider, { value: tracks, children: children }));
+};
+exports.TimelineKeyframeTracksProvider = TimelineKeyframeTracksProvider;
+const useTimelineKeyframeTracks = () => {
+    return (0, react_1.useContext)(TimelineKeyframeTracksContext);
+};
+exports.useTimelineKeyframeTracks = useTimelineKeyframeTracks;

package/dist/components/Timeline/TimelineKeyframedValue.js

@@ -27,7 +27,7 @@ const TimelineKeyframedValue = ({ field, propStatus, keyframeDisplayOffset, drag
     }), [computedValue]);
     const effectiveValue = (0, react_1.useMemo)(() => {
         return remotion_1.Internals.getEffectiveVisualModeValue({
-            codeValue: fakeStatus,
+            propStatus: fakeStatus,
             dragOverrideValue,
             frame: jsxFrame,
             defaultValue: field.fieldSchema.default,

package/dist/components/Timeline/TimelineMediaInfo.js

@@ -5,9 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
-const use_select_asset_1 = require("../use-select-asset");
 const timeline_asset_link_1 = require("./timeline-asset-link");
-const TimelineSelection_1 = require("./TimelineSelection");
 const lineStyle = {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
@@ -18,24 +16,10 @@ const lineStyle = {
     display: 'inline-block',
 };
 const useAssetLink = (src) => {
-    const selectAsset = (0, use_select_asset_1.useSelectAsset)();
-    const [hovered, setHovered] = (0, react_1.useState)(false);
     const linkInfo = (0, react_1.useMemo)(() => (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(src), [src]);
-    const interactive = !TimelineSelection_1.SELECTION_ENABLED && linkInfo !== null;
-    const onClick = (0, react_1.useCallback)((e) => {
-        if (!linkInfo) {
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        (0, timeline_asset_link_1.openTimelineAssetLink)(linkInfo, selectAsset);
-    }, [linkInfo, selectAsset]);
-    const onPointerEnter = (0, react_1.useCallback)(() => setHovered(true), []);
-    const onPointerLeave = (0, react_1.useCallback)(() => setHovered(false), []);
     const fileNameStyle = (0, react_1.useMemo)(() => ({
         ...lineStyle,
-        color: interactive && hovered ? colors_1.LIGHT_TEXT : colors_1.VERY_LIGHT_TEXT,
-        cursor: interactive ? 'pointer' : undefined,
+        color: colors_1.VERY_LIGHT_TEXT,
         textDecoration: 'none',
         display: 'inline-block',
         overflow: 'hidden',
@@ -43,19 +27,15 @@ const useAssetLink = (src) => {
         textOverflow: 'ellipsis',
         userSelect: 'none',
         WebkitUserSelect: 'none',
-    }), [interactive, hovered]);
+    }), []);
     return {
         linkInfo,
-        interactive,
-        onClick,
-        onPointerEnter,
-        onPointerLeave,
         fileNameStyle,
     };
 };
 const TimelineMediaInfo = ({ src }) => {
     const fileName = (0, react_1.useMemo)(() => remotion_1.Internals.getAssetDisplayName(src), [src]);
-    const { linkInfo, interactive, onClick, onPointerEnter, onPointerLeave, fileNameStyle, } = useAssetLink(src);
-    return (jsx_runtime_1.jsx("div", { style: fileNameStyle, title: linkInfo ? linkInfo.title : fileName, onClick: interactive ? onClick : undefined, onPointerEnter: interactive ? onPointerEnter : undefined, onPointerLeave: interactive ? onPointerLeave : undefined, children: fileName }));
+    const { linkInfo, fileNameStyle } = useAssetLink(src);
+    return (jsx_runtime_1.jsx("div", { style: fileNameStyle, title: linkInfo ? linkInfo.title : fileName, children: fileName }));
 };
 exports.TimelineMediaInfo = TimelineMediaInfo;

package/dist/components/Timeline/TimelineNumberField.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange, onDragEnd, propStatus, }) => {
-    var _a, _b, _c;
+    var _a, _b;
     const [dragValue, setDragValue] = (0, react_1.useState)(null);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
         setDragValue(newVal);
@@ -33,17 +33,25 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
             });
         }
     }, [onSave, propStatus]);
-    const step = field.fieldSchema.type === 'number' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
-    const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
+    const configuredStep = field.fieldSchema.type === 'number' ? field.fieldSchema.step : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
+    const stepDecimals = (0, react_1.useMemo)(() => configuredStep === undefined ? null : (0, timeline_field_utils_1.getDecimalPlaces)(configuredStep), [configuredStep]);
     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);
+        if (stepDecimals === null) {
+            const digits = (0, timeline_field_utils_1.getDecimalPlaces)(num);
+            return digits === 0 ? String(num) : num.toFixed(digits);
+        }
+        return (0, timeline_field_utils_1.formatTimelineNumber)({
+            decimalPlaces: stepDecimals,
+            fixed: true,
+            value: num,
+        });
     }, [stepDecimals]);
     return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : effectiveValue, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: field.fieldSchema.type === 'number'
-            ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+            ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
             : -Infinity, max: field.fieldSchema.type === 'number'
-            ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+            ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
             : Infinity, step: step, formatter: formatter, rightAlign: false }));
 };
 exports.TimelineNumberField = TimelineNumberField;

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,39 +5,21 @@ 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, _c;
+    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 serializeValue = (0, react_1.useCallback)((value) => {
-        const normalized = (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
-        return isCssRotation ? `${normalized}deg` : normalized;
+        return isCssRotation
+            ? (0, timeline_rotation_utils_1.serializeCssRotation)(value)
+            : (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
     }, [isCssRotation]);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
         setDragValue(newVal);
@@ -68,23 +50,29 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
             }
         }
     }, [propStatus, onSave, serializeValue]);
-    const step = field.fieldSchema.type === 'rotation-css' ||
+    const configuredStep = field.fieldSchema.type === 'rotation-css' ||
         field.fieldSchema.type === 'rotation-degrees'
-        ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1)
-        : 1;
+        ? field.fieldSchema.step
+        : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
     const min = field.fieldSchema.type === 'rotation-degrees'
-        ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+        ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
         : -Infinity;
     const max = field.fieldSchema.type === 'rotation-degrees'
-        ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+        ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
         : Infinity;
-    const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
+    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 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);
+        const formatted = (0, timeline_field_utils_1.formatTimelineNumber)({
+            decimalPlaces,
+            fixed: false,
+            value: (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(v)),
+        });
         return `${formatted}\u00B0`;
-    }, [stepDecimals]);
+    }, [decimalPlaces]);
     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/TimelineScaleField.js

@@ -24,7 +24,7 @@ const toggleStyle = {
     ...TimelineLayerEye_1.timelineLayerIconContainer,
     border: 'none',
     color: colors_1.LIGHT_COLOR,
-    cursor: 'pointer',
+    cursor: 'default',
     marginRight: 0,
     padding: 0,
 };
@@ -78,7 +78,7 @@ const LinkToggle = ({ linked, 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;
+    var _a, _b;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
     const dragStartRef = (0, react_1.useRef)(null);
@@ -90,21 +90,25 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
         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 configuredStep = field.fieldSchema.type === 'scale' ? field.fieldSchema.step : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 0.01;
     const min = field.fieldSchema.type === 'scale'
-        ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+        ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
         : -Infinity;
     const max = field.fieldSchema.type === 'scale'
-        ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+        ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
         : Infinity;
-    const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
+    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 2,
+        step: configuredStep,
+    }), [configuredStep]);
     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]);
+        return (0, timeline_field_utils_1.formatTimelineNumber)({
+            decimalPlaces,
+            fixed: true,
+            value: v,
+        });
+    }, [decimalPlaces]);
     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];

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;