@remotion/studio 4.0.478 → 4.0.481

package/dist/components/Timeline/use-timeline-expanded-tree.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineExpandedTree = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const get_node_keyframes_1 = require("./get-node-keyframes");
+const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
+const TimelineSelection_1 = require("./TimelineSelection");
+const useTimelineExpandedTree = ({ sequence, nodePathInfo, }) => {
+    const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
+    const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
+    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
+        sequence,
+        nodePathInfo,
+        getDragOverrides,
+        getEffectDragOverrides,
+        propStatuses: visualModePropStatuses,
+    }), [
+        sequence,
+        nodePathInfo,
+        getDragOverrides,
+        getEffectDragOverrides,
+        visualModePropStatuses,
+    ]);
+    const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
+    const filteredTree = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
+        nodes: tree,
+        shouldShowNode: (node) => (0, timeline_expanded_filter_1.isTimelineExpandedNodeSelected)({
+            nodePathInfo: node.nodePathInfo,
+            selectedRowKeys,
+        }) ||
+            (0, get_node_keyframes_1.getNodeHasKeyframes)({
+                node,
+                nodePath: nodePathInfo.sequenceSubscriptionKey,
+                propStatuses: visualModePropStatuses,
+                getDragOverrides,
+                getEffectDragOverrides,
+            }),
+    }), [
+        getDragOverrides,
+        getEffectDragOverrides,
+        nodePathInfo.sequenceSubscriptionKey,
+        selectedRowKeys,
+        tree,
+        visualModePropStatuses,
+    ]);
+    return {
+        filteredTree,
+        getIsExpanded,
+        propStatuses: visualModePropStatuses,
+        toggleTrack,
+        tree,
+    };
+};
+exports.useTimelineExpandedTree = useTimelineExpandedTree;

package/dist/components/Timeline/use-timeline-height.js

@@ -6,13 +6,19 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const get_node_keyframes_1 = require("./get-node-keyframes");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
+const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
+const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const useTimelineHeight = ({ shown, hasBeenCut, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const previewServerConnected = previewServerState.type === 'connected';
+    const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
     return (0, react_1.useMemo)(() => {
         const tracksHeight = shown.reduce((acc, track) => {
             const isExpanded = previewServerConnected &&
@@ -20,20 +26,58 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
                 getIsExpanded(track.nodePathInfo);
             const layerHeight = (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type) +
                 timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM;
-            const expandedHeight = isExpanded && track.nodePathInfo
-                ? (0, timeline_layout_1.getExpandedTrackHeight)({
+            const expandedHeight = (() => {
+                if (!isExpanded || track.nodePathInfo === null) {
+                    return 0;
+                }
+                const { nodePathInfo } = track;
+                const tree = (0, timeline_layout_1.buildTimelineTree)({
                     sequence: track.sequence,
-                    nodePathInfo: track.nodePathInfo,
-                    getIsExpanded,
+                    nodePathInfo,
+                    getDragOverrides,
+                    getEffectDragOverrides,
                     propStatuses,
-                }) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
-                : 0;
+                });
+                const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
+                    nodes: tree,
+                    shouldShowNode: (node) => (0, timeline_expanded_filter_1.isTimelineExpandedNodeSelected)({
+                        nodePathInfo: node.nodePathInfo,
+                        selectedRowKeys,
+                    }) ||
+                        (0, get_node_keyframes_1.getNodeHasKeyframes)({
+                            node,
+                            nodePath: nodePathInfo.sequenceSubscriptionKey,
+                            propStatuses,
+                            getDragOverrides,
+                            getEffectDragOverrides,
+                        }),
+                });
+                const flat = (0, timeline_layout_1.flattenVisibleTreeNodes)({
+                    nodes: filteredTree,
+                    getIsExpanded,
+                });
+                if (flat.length === 0) {
+                    return 0;
+                }
+                const totalRowsHeight = flat.reduce((sum, { node }) => sum + (0, timeline_layout_1.getTreeRowHeight)(node), 0);
+                const separators = Math.max(0, flat.length - 1);
+                return totalRowsHeight + separators + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM;
+            })();
             return acc + layerHeight + expandedHeight;
         }, 0);
         return (tracksHeight +
             timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
             (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
             TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT);
-    }, [shown, hasBeenCut, previewServerConnected, getIsExpanded, propStatuses]);
+    }, [
+        shown,
+        hasBeenCut,
+        previewServerConnected,
+        getIsExpanded,
+        propStatuses,
+        getDragOverrides,
+        getEffectDragOverrides,
+        selectedRowKeys,
+    ]);
 };
 exports.useTimelineHeight = useTimelineHeight;

package/dist/components/Timeline/use-timeline-keyframe-drag.js

@@ -285,7 +285,8 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
             toggleKey: e.metaKey || e.ctrlKey,
         };
         const shouldDragExistingSelection = selected && !interaction.shiftKey && !interaction.toggleKey;
-        if (!shouldDragExistingSelection) {
+        const shouldSelectOnPointerUp = !selected && !interaction.shiftKey && !interaction.toggleKey;
+        if (!shouldDragExistingSelection && !shouldSelectOnPointerUp) {
             onSelect(interaction);
         }
         const clickedSelection = {
@@ -380,6 +381,9 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
             cleanup();
             const targets = dragTargets;
             if (!hasDragged || lastDelta === 0 || targets === null) {
+                if (shouldSelectOnPointerUp) {
+                    onSelect(interaction);
+                }
                 clearActiveOverrides();
                 clearDraggedKeyframes();
                 return;
@@ -392,11 +396,13 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
                 clearDraggedKeyframes();
                 return;
             }
-            currentSelection.current.selectItems(targets.map((target) => ({
-                type: 'keyframe',
-                nodePathInfo: target.nodePathInfo,
-                frame: target.displayFrame + lastDelta,
-            })));
+            if (shouldDragExistingSelection) {
+                currentSelection.current.selectItems(targets.map((target) => ({
+                    type: 'keyframe',
+                    nodePathInfo: target.nodePathInfo,
+                    frame: target.displayFrame + lastDelta,
+                })));
+            }
             clearActiveOverrides();
             clearDraggedKeyframes();
             (0, call_move_keyframe_1.callMoveKeyframes)({

package/dist/components/TopPanel.js

@@ -115,7 +115,7 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
             : null, readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsxs("div", { style: container, children: [
                 jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
                                         jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
-                        ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.CurrentCompositionKeybindings, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
+                        ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
             ] }) }));
 };
 exports.TopPanel = react_1.default.memo(TopPanelInner);

package/dist/components/VisualControls/VisualControlsContent.d.ts

@@ -1 +1 @@
-export declare const VisualControlsContent: () => import("react/jsx-runtime").JSX.Element;
+export declare const VisualControlsContent: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/VisualControls/VisualControlsContent.js

@@ -37,16 +37,15 @@ exports.VisualControlsContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const VisualControls_1 = require("../../visual-controls/VisualControls");
-const is_menu_item_1 = require("../Menu/is-menu-item");
 const SchemaSeparationLine_1 = require("../RenderModal/SchemaEditor/SchemaSeparationLine");
 const VisualControlHandle_1 = require("./VisualControlHandle");
-const container = {
-    overflowY: 'auto',
-};
 const VisualControlsContent = () => {
     const { handles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
     const entries = Object.entries(handles);
-    return (jsx_runtime_1.jsx("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: entries.map(([key, value], i) => {
+    if (entries.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("div", { children: entries.map(([key, value], i) => {
             return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
                     jsx_runtime_1.jsx(VisualControlHandle_1.VisualControlHandle, { keyName: key, value: value }), i === entries.length - 1 ? null : jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaSeparationLine, {})] }, key));
         }) }));

package/dist/components/effect-drag-and-drop.d.ts

@@ -9,3 +9,13 @@ export declare const addEffectFromDragData: ({ clientId, dragData, fileName, nod
     readonly fileName: string;
     readonly nodePath: SequencePropsSubscriptionKey;
 }) => Promise<void>;
+export declare const addEffectToSequence: ({ clientId, effect, fileName, nodePath, }: {
+    readonly clientId: string;
+    readonly effect: {
+        name: string;
+        importPath: string;
+        config: Record<string, unknown>;
+    };
+    readonly fileName: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+}) => Promise<void>;

package/dist/components/effect-drag-and-drop.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addEffectFromDragData = exports.getEffectDragData = exports.hasExplicitEffectDragType = exports.hasEffectDragType = void 0;
+exports.addEffectToSequence = exports.addEffectFromDragData = exports.getEffectDragData = exports.hasExplicitEffectDragType = exports.hasEffectDragType = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const install_required_package_1 = require("../helpers/install-required-package");
 const call_api_1 = require("./call-api");
@@ -47,20 +47,29 @@ const getEffectDragData = (dataTransfer) => {
     return null;
 };
 exports.getEffectDragData = getEffectDragData;
-const addEffectFromDragData = async ({ clientId, dragData, fileName, nodePath, }) => {
+const addEffectFromDragData = ({ clientId, dragData, fileName, nodePath, }) => {
+    return (0, exports.addEffectToSequence)({
+        clientId,
+        effect: dragData.effect,
+        fileName,
+        nodePath,
+    });
+};
+exports.addEffectFromDragData = addEffectFromDragData;
+const addEffectToSequence = async ({ clientId, effect, fileName, nodePath, }) => {
     try {
-        const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(dragData.effect.importPath);
+        const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(effect.importPath);
         await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [requiredPackage] : []);
         const result = await (0, call_api_1.callApi)('/api/add-effect', {
             fileName,
             sequenceNodePath: nodePath,
-            effectName: dragData.effect.name,
-            effectImportPath: dragData.effect.importPath,
-            effectConfig: dragData.effect.config,
+            effectName: effect.name,
+            effectImportPath: effect.importPath,
+            effectConfig: effect.config,
             clientId,
         });
         if (result.success) {
-            (0, NotificationCenter_1.showNotification)(`Added ${dragData.effect.name}()`, 2000);
+            (0, NotificationCenter_1.showNotification)(`Added ${effect.name}()`, 2000);
         }
         else {
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);
@@ -70,4 +79,4 @@ const addEffectFromDragData = async ({ clientId, dragData, fileName, nodePath, }
         (0, NotificationCenter_1.showNotification)(err.message, 4000);
     }
 };
-exports.addEffectFromDragData = addEffectFromDragData;
+exports.addEffectToSequence = addEffectToSequence;

package/dist/components/effect-picker-search.d.ts

@@ -0,0 +1,5 @@
+import type { EffectCatalogItem } from '@remotion/studio-shared';
+export declare const filterEffectCatalog: ({ items, query, }: {
+    readonly items: readonly EffectCatalogItem[];
+    readonly query: string;
+}) => EffectCatalogItem[];

package/dist/components/effect-picker-search.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterEffectCatalog = void 0;
+const normalize = (value) => value.trim().toLowerCase();
+const compact = (value) => normalize(value).replace(/[^a-z0-9]/g, '');
+const fuzzyMatches = (query, value) => {
+    let index = -1;
+    for (const character of query) {
+        index = value.indexOf(character, index + 1);
+        if (index === -1) {
+            return false;
+        }
+    }
+    return true;
+};
+const getMatchScore = (item, query) => {
+    const normalizedQuery = normalize(query);
+    const compactQuery = compact(query);
+    if (normalizedQuery.length === 0) {
+        return 0;
+    }
+    const label = normalize(item.label);
+    const name = normalize(item.effect.name);
+    const primary = [label, name];
+    const compactPrimary = primary.map(compact);
+    if (primary.some((field) => field === normalizedQuery)) {
+        return 0;
+    }
+    if (compactQuery.length > 0) {
+        if (compactPrimary.some((field) => field === compactQuery)) {
+            return 1;
+        }
+        if (compactPrimary.some((field) => field.startsWith(compactQuery))) {
+            return 2;
+        }
+    }
+    if (primary.some((field) => field.startsWith(normalizedQuery))) {
+        return 2;
+    }
+    if (compactQuery.length > 0) {
+        if (compactPrimary.some((field) => field.includes(compactQuery))) {
+            return 3;
+        }
+    }
+    if (primary.some((field) => field.includes(normalizedQuery))) {
+        return 3;
+    }
+    const importPath = normalize(item.effect.importPath);
+    if (importPath.includes(normalizedQuery) ||
+        (compactQuery.length > 0 && compact(importPath).includes(compactQuery))) {
+        return 4;
+    }
+    const secondary = [normalize(item.category), normalize(item.description)];
+    const compactSecondary = secondary.map(compact);
+    if (secondary.some((field) => field.includes(normalizedQuery)) ||
+        (compactQuery.length > 0 &&
+            compactSecondary.some((field) => field.includes(compactQuery)))) {
+        return 5;
+    }
+    if (compactQuery.length > 0 &&
+        compactPrimary.some((field) => fuzzyMatches(compactQuery, field))) {
+        return 6;
+    }
+    return null;
+};
+const filterEffectCatalog = ({ items, query, }) => {
+    return items
+        .map((item, index) => ({
+        item,
+        index,
+        score: getMatchScore(item, query),
+    }))
+        .filter((candidate) => candidate.score !== null)
+        .sort((a, b) => a.score - b.score || a.index - b.index)
+        .map(({ item }) => item);
+};
+exports.filterEffectCatalog = filterEffectCatalog;

package/dist/components/selected-outline-drag.d.ts

@@ -1,8 +1,15 @@
-import type { GetDragOverrides, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, DragOverrideValue, GetDragOverrides, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import { type OutlinePoint } from './selected-outline-geometry';
 import type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineRotationDragTarget, SelectedOutlineScaleDragState, SelectedOutlineScaleDragTarget, SelectedOutlineDragTarget } from './selected-outline-types';
 import { type UvCoordinate } from './selected-outline-uv';
 import type { SaveSequencePropChange } from './Timeline/save-sequence-prop';
+export declare const getSelectedOutlineActiveSchema: ({ schema, currentRuntimeValueDotNotation, dragOverrides, propStatus, frame, }: {
+    readonly schema: InteractivitySchema;
+    readonly currentRuntimeValueDotNotation: Record<string, unknown>;
+    readonly dragOverrides: Record<string, DragOverrideValue>;
+    readonly propStatus: Record<string, CanUpdateSequencePropStatus> | undefined;
+    readonly frame: number | null;
+}) => InteractivitySchema;
 export declare const getSelectedOutlineDragStates: ({ dragTargets, getDragOverrides, timelinePosition, }: {
     readonly dragTargets: readonly SelectedOutlineDragTarget[];
     readonly getDragOverrides: GetDragOverrides;
@@ -35,7 +42,7 @@ export type SelectedOutlineKeyframedDragChange = {
     readonly fieldKey: string;
     readonly sourceFrame: number;
     readonly value: unknown;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
     readonly clientId: string;
 };
 export type SelectedOutlineDragChange = SelectedOutlineStaticDragChange | SelectedOutlineKeyframedDragChange;
@@ -90,6 +97,11 @@ export declare const getSelectedOutlineRotationDragValues: ({ dragStates, rotati
     readonly dragStates: readonly SelectedOutlineRotationDragState[];
     readonly rotationDeltaDegrees: number;
 }) => Map<string, string>;
+export declare const selectedOutlineRotationSnapStepDegrees = 15;
+export declare const snapSelectedOutlineRotationDeltaDegrees: ({ dragStates, rotationDeltaDegrees, }: {
+    readonly dragStates: readonly SelectedOutlineRotationDragState[];
+    readonly rotationDeltaDegrees: number;
+}) => number;
 export declare const getSelectedOutlineRotationDragChanges: ({ dragStates, lastValues, }: {
     readonly dragStates: readonly SelectedOutlineRotationDragState[];
     readonly lastValues: ReadonlyMap<string, string>;
@@ -130,6 +142,13 @@ export declare const applySelectedOutlineTransformOriginAxisLock: ({ lockedAxis,
     readonly startUv: UvCoordinate;
     readonly uv: UvCoordinate;
 }) => UvCoordinate;
+export declare const selectedOutlineUvSnapThresholdPx = 10;
+export declare const snapSelectedOutlineUv: ({ point, points, thresholdPx, uv, }: {
+    readonly point: OutlinePoint;
+    readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
+    readonly thresholdPx?: number | undefined;
+    readonly uv: UvCoordinate;
+}) => UvCoordinate;
 export declare const selectedOutlineTransformOriginSnapThresholdPx = 10;
 export declare const snapSelectedOutlineTransformOriginUv: ({ point, points, thresholdPx, uv, }: {
     readonly point: OutlinePoint;

package/dist/components/selected-outline-drag.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.snapSelectedOutlineTransformOriginUv = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.applySelectedOutlineTransformOriginAxisLock = exports.getSelectedOutlineTransformOriginLockedAxis = exports.uvsEqual = exports.compensateTranslateForTransformOrigin = exports.parseCssRotationToRadians = exports.clearSelectedOutlineRotationDragOverrides = exports.clearSelectedOutlineScaleDragOverrides = exports.getSelectedOutlineKeyboardNudgeDirection = exports.clearSelectedOutlineDragOverrides = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragChanges = exports.isSelectedOutlineDragPastThreshold = exports.applySelectedOutlineDragAxisLock = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragStates = void 0;
+exports.snapSelectedOutlineTransformOriginUv = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.snapSelectedOutlineUv = exports.selectedOutlineUvSnapThresholdPx = exports.applySelectedOutlineTransformOriginAxisLock = exports.getSelectedOutlineTransformOriginLockedAxis = exports.uvsEqual = exports.compensateTranslateForTransformOrigin = exports.parseCssRotationToRadians = exports.clearSelectedOutlineRotationDragOverrides = exports.clearSelectedOutlineScaleDragOverrides = exports.getSelectedOutlineKeyboardNudgeDirection = exports.clearSelectedOutlineDragOverrides = exports.getSelectedOutlineRotationDragChanges = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineRotationSnapStepDegrees = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragChanges = exports.isSelectedOutlineDragPastThreshold = exports.applySelectedOutlineDragAxisLock = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragStates = exports.getSelectedOutlineActiveSchema = void 0;
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const selected_outline_geometry_1 = require("./selected-outline-geometry");
@@ -11,6 +11,17 @@ const timeline_field_utils_1 = require("./Timeline/timeline-field-utils");
 const timeline_rotation_utils_1 = require("./Timeline/timeline-rotation-utils");
 const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils");
 const TimelineScaleField_1 = require("./Timeline/TimelineScaleField");
+const getSelectedOutlineActiveSchema = ({ schema, currentRuntimeValueDotNotation, dragOverrides, propStatus, frame, }) => {
+    const { merged: valuesDotNotation } = remotion_1.Internals.computeEffectiveSchemaValuesDotNotation({
+        schema,
+        currentValue: currentRuntimeValueDotNotation,
+        overrideValues: dragOverrides,
+        propStatus,
+        frame,
+    });
+    return remotion_1.Internals.flattenActiveSchema(schema, (key) => valuesDotNotation[key]);
+};
+exports.getSelectedOutlineActiveSchema = getSelectedOutlineActiveSchema;
 const getSelectedOutlineDragStates = ({ dragTargets, getDragOverrides, timelinePosition, }) => {
     return dragTargets.map((target) => {
         var _a;
@@ -304,6 +315,18 @@ const getSelectedOutlineRotationDragValues = ({ dragStates, rotationDeltaDegrees
     }));
 };
 exports.getSelectedOutlineRotationDragValues = getSelectedOutlineRotationDragValues;
+exports.selectedOutlineRotationSnapStepDegrees = 15;
+const snapSelectedOutlineRotationDeltaDegrees = ({ dragStates, rotationDeltaDegrees, }) => {
+    const anchor = dragStates[0];
+    if (anchor === undefined) {
+        return rotationDeltaDegrees;
+    }
+    return (Math.round((anchor.startDegrees + rotationDeltaDegrees) /
+        exports.selectedOutlineRotationSnapStepDegrees) *
+        exports.selectedOutlineRotationSnapStepDegrees -
+        anchor.startDegrees);
+};
+exports.snapSelectedOutlineRotationDeltaDegrees = snapSelectedOutlineRotationDeltaDegrees;
 const getSelectedOutlineRotationDragChanges = ({ dragStates, lastValues, }) => {
     const changes = [];
     for (const dragState of dragStates) {
@@ -445,7 +468,7 @@ const applySelectedOutlineTransformOriginAxisLock = ({ lockedAxis, startUv, uv,
     return uv;
 };
 exports.applySelectedOutlineTransformOriginAxisLock = applySelectedOutlineTransformOriginAxisLock;
-const transformOriginSnapTargets = [
+const selectedOutlineUvSnapTargets = [
     [0, 0],
     [0.5, 0],
     [1, 0],
@@ -456,11 +479,11 @@ const transformOriginSnapTargets = [
     [0, 0.5],
     [0.5, 0.5],
 ];
-exports.selectedOutlineTransformOriginSnapThresholdPx = 10;
-const snapSelectedOutlineTransformOriginUv = ({ point, points, thresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx, uv, }) => {
+exports.selectedOutlineUvSnapThresholdPx = 10;
+const snapSelectedOutlineUv = ({ point, points, thresholdPx = exports.selectedOutlineUvSnapThresholdPx, uv, }) => {
     var _a;
     let best = null;
-    for (const snapUv of transformOriginSnapTargets) {
+    for (const snapUv of selectedOutlineUvSnapTargets) {
         const snapPoint = (0, selected_outline_uv_1.getUvHandlePosition)(points, snapUv);
         const distance = Math.hypot(point.x - snapPoint.x, point.y - snapPoint.y);
         if (distance > thresholdPx) {
@@ -472,4 +495,6 @@ const snapSelectedOutlineTransformOriginUv = ({ point, points, thresholdPx = exp
     }
     return (_a = best === null || best === void 0 ? void 0 : best.uv) !== null && _a !== void 0 ? _a : uv;
 };
-exports.snapSelectedOutlineTransformOriginUv = snapSelectedOutlineTransformOriginUv;
+exports.snapSelectedOutlineUv = snapSelectedOutlineUv;
+exports.selectedOutlineTransformOriginSnapThresholdPx = exports.selectedOutlineUvSnapThresholdPx;
+exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineUv;

package/dist/components/selected-outline-measurement.js

@@ -219,28 +219,60 @@ const getOutlineSelectionInteraction = ({ shiftKey, metaKey, ctrlKey, }) => ({
     toggleKey: metaKey || ctrlKey,
 });
 exports.getOutlineSelectionInteraction = getOutlineSelectionInteraction;
+const getKeyframeOrEasingField = (item) => {
+    if (item.type !== 'keyframe' && item.type !== 'easing') {
+        return null;
+    }
+    return (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(item.nodePathInfo.auxiliaryKeys);
+};
 const getSelectedEffectFieldsBySequenceKey = (selectedItems) => {
-    var _a, _b;
+    var _a;
     const selectedEffects = new Map();
     for (const item of selectedItems) {
-        if (item.type !== 'sequence-effect' &&
-            item.type !== 'sequence-effect-prop') {
+        if (item.type === 'guide') {
             continue;
         }
         const sequenceKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo);
         const effectsForSequence = (_a = selectedEffects.get(sequenceKey)) !== null && _a !== void 0 ? _a : new Map();
-        const selectedFields = (_b = effectsForSequence.get(item.i)) !== null && _b !== void 0 ? _b : {
-            allFields: false,
-            fieldKeys: new Set(),
+        const addSelectedFields = ({ effectIndex, fieldKey, allFields, }) => {
+            var _a;
+            const selectedFields = (_a = effectsForSequence.get(effectIndex)) !== null && _a !== void 0 ? _a : {
+                allFields: false,
+                fieldKeys: new Set(),
+            };
+            if (allFields) {
+                selectedFields.allFields = true;
+            }
+            else if (fieldKey !== null) {
+                selectedFields.fieldKeys.add(fieldKey);
+            }
+            effectsForSequence.set(effectIndex, selectedFields);
+            selectedEffects.set(sequenceKey, effectsForSequence);
         };
         if (item.type === 'sequence-effect') {
-            selectedFields.allFields = true;
+            addSelectedFields({
+                effectIndex: item.i,
+                fieldKey: null,
+                allFields: true,
+            });
+            continue;
+        }
+        if (item.type === 'sequence-effect-prop') {
+            addSelectedFields({
+                effectIndex: item.i,
+                fieldKey: item.key,
+                allFields: false,
+            });
+            continue;
         }
-        else {
-            selectedFields.fieldKeys.add(item.key);
+        const keyframedField = getKeyframeOrEasingField(item);
+        if ((keyframedField === null || keyframedField === void 0 ? void 0 : keyframedField.type) === 'effect') {
+            addSelectedFields({
+                effectIndex: keyframedField.effectIndex,
+                fieldKey: keyframedField.fieldKey,
+                allFields: false,
+            });
         }
-        effectsForSequence.set(item.i, selectedFields);
-        selectedEffects.set(sequenceKey, effectsForSequence);
     }
     return selectedEffects;
 };
@@ -257,17 +289,19 @@ const getSelectedTransformOriginInfo = (selectedItems) => {
             displayFrame: null,
         };
     }
-    if (selectedItem.type !== 'keyframe') {
+    if (selectedItem.type !== 'keyframe' && selectedItem.type !== 'easing') {
         return null;
     }
-    const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(selectedItem.nodePathInfo.auxiliaryKeys);
+    const field = getKeyframeOrEasingField(selectedItem);
     if ((field === null || field === void 0 ? void 0 : field.type) !== 'sequence' ||
         field.fieldKey !== selected_outline_types_1.transformOriginFieldKey) {
         return null;
     }
     return {
         sequenceKey: (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selectedItem.nodePathInfo),
-        displayFrame: selectedItem.frame,
+        displayFrame: selectedItem.type === 'keyframe'
+            ? selectedItem.frame
+            : selectedItem.fromFrame,
     };
 };
 exports.getSelectedTransformOriginInfo = getSelectedTransformOriginInfo;

package/dist/components/selected-outline-types.d.ts

@@ -1,4 +1,4 @@
-import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, SequenceFieldSchema, SequencePropsSubscriptionKey, SequenceSchema, TSequence } from 'remotion';
+import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, InteractivitySchemaField, SequencePropsSubscriptionKey, InteractivitySchema, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 import type { ComboboxValue } from './NewComposition/ComboBox';
 import type { SelectedOutlineUvHandle } from './selected-outline-uv';
@@ -31,7 +31,7 @@ export type SelectedOutlineDragTarget = {
     readonly fieldDefault: string | undefined;
     readonly keyframeDisplayOffset: number;
     readonly nodePath: SequencePropsSubscriptionKey;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
 };
 export type SelectedOutlineTransformOriginDragTarget = {
     readonly clientId: string;
@@ -42,16 +42,16 @@ export type SelectedOutlineTransformOriginDragTarget = {
     readonly originValue: string;
     readonly rotateValue: string;
     readonly scaleValue: number | string;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
     readonly sourceFrame: number;
     readonly translateDefault: string | undefined;
     readonly translatePropStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
     readonly translateValue: string;
 };
-export type ScaleFieldSchema = Extract<SequenceFieldSchema, {
+export type ScaleFieldSchema = Extract<InteractivitySchemaField, {
     type: 'scale';
 }>;
-export type RotationFieldSchema = Extract<SequenceFieldSchema, {
+export type RotationFieldSchema = Extract<InteractivitySchemaField, {
     type: 'rotation-css';
 }>;
 export type SelectedOutlineScaleDragTarget = {
@@ -62,7 +62,7 @@ export type SelectedOutlineScaleDragTarget = {
     readonly keyframeDisplayOffset: number;
     readonly linked: boolean;
     readonly nodePath: SequencePropsSubscriptionKey;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
 };
 export type SelectedOutlineRotationDragTarget = {
     readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
@@ -71,7 +71,7 @@ export type SelectedOutlineRotationDragTarget = {
     readonly fieldSchema: RotationFieldSchema;
     readonly keyframeDisplayOffset: number;
     readonly nodePath: SequencePropsSubscriptionKey;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
     readonly transformOriginValue: string;
 };
 export type SelectedOutlineDragState = {