@remotion/studio 4.0.477 → 4.0.478

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -8,6 +8,7 @@ const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
 const get_timeline_video_info_widths_1 = require("./get-timeline-video-info-widths");
+const timeline_video_filmstrip_times_1 = require("./timeline-video-filmstrip-times");
 const outerStyle = {
     width: '100%',
     height: '100%',
@@ -22,7 +23,8 @@ const filmstripContainerStyle = {
     fontSize: 10,
     fontFamily: 'Arial, Helvetica',
 };
-const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, }) => {
+const MAX_FROZEN_FRAME_CACHE_DEVIATION = timeline_utils_1.WEBCODECS_TIMESCALE * 0.05;
+const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, frozenMediaFrame, }) => {
     const { fps } = (0, remotion_1.useVideoConfig)();
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -53,6 +55,94 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
             return;
         }
         current.appendChild(canvas);
+        const drawRepeatedFrame = (frame) => {
+            const thumbnailWidth = Math.max(1, frame.displayWidth / window.devicePixelRatio);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            for (let x = 0; x < canvas.width; x += thumbnailWidth) {
+                ctx.drawImage(frame, x, 0, thumbnailWidth, timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT);
+            }
+        };
+        const getCachedFrozenFrame = (timestamp) => {
+            const prefix = (0, timeline_utils_1.getFrameDatabaseKeyPrefix)(src);
+            const keys = Array.from(timeline_utils_1.frameDatabase.keys()).filter((k) => k.startsWith(prefix));
+            let bestDistance = Infinity;
+            let bestFrame = null;
+            for (const key of keys) {
+                const frame = timeline_utils_1.frameDatabase.get(key);
+                if (!frame) {
+                    continue;
+                }
+                const distance = Math.abs((0, timeline_utils_1.getTimestampFromFrameDatabaseKey)(key) - timestamp);
+                if (distance < bestDistance) {
+                    bestDistance = distance;
+                    bestFrame = frame.frame;
+                }
+            }
+            return bestDistance <= MAX_FROZEN_FRAME_CACHE_DEVIATION
+                ? bestFrame
+                : null;
+        };
+        const times = (0, timeline_video_filmstrip_times_1.getTimelineVideoFilmstripTimes)({
+            trimBefore,
+            durationInFrames,
+            playbackRate,
+            fps,
+            loopDisplay,
+            frozenMediaFrame,
+        });
+        if (times.type === 'frozen') {
+            const timestamp = times.timestampInSeconds * timeline_utils_1.WEBCODECS_TIMESCALE;
+            const cachedFrame = getCachedFrozenFrame(timestamp);
+            if (cachedFrame) {
+                drawRepeatedFrame(cachedFrame);
+                return () => {
+                    current.removeChild(canvas);
+                };
+            }
+            (0, timeline_utils_1.extractFrames)({
+                timestampsInSeconds: ({ track, }) => {
+                    aspectRatio.current = track.width / track.height;
+                    timeline_utils_1.aspectRatioCache.set(src, aspectRatio.current);
+                    return [times.timestampInSeconds];
+                },
+                src,
+                onVideoSample: (sample) => {
+                    let frame;
+                    try {
+                        frame = sample.toVideoFrame();
+                        const scale = (timeline_layout_1.TIMELINE_LAYER_FILMSTRIP_HEIGHT / frame.displayHeight) *
+                            window.devicePixelRatio;
+                        const transformed = (0, timeline_utils_1.resizeVideoFrame)({
+                            frame,
+                            scale,
+                        });
+                        if (transformed !== frame) {
+                            frame.close();
+                        }
+                        frame = undefined;
+                        const databaseKey = (0, timeline_utils_1.makeFrameDatabaseKey)(src, transformed.timestamp);
+                        (0, timeline_utils_1.addFrameToCache)(databaseKey, transformed);
+                        drawRepeatedFrame(transformed);
+                    }
+                    catch (e) {
+                        if (frame) {
+                            frame.close();
+                        }
+                        throw e;
+                    }
+                    finally {
+                        sample.close();
+                    }
+                },
+                signal: controller.signal,
+            }).catch((e) => {
+                setError(e);
+            });
+            return () => {
+                controller.abort();
+                current.removeChild(canvas);
+            };
+        }
         const loopWidth = (0, timeline_utils_1.getLoopDisplayWidth)({
             visualizationWidth: mediaNaturalWidth,
             loopDisplay,
@@ -85,13 +175,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         };
         // desired-timestamp -> filled-timestamp
         const filledSlots = new Map();
-        const fromSeconds = trimBefore / fps;
-        const visibleDurationInFrames = shouldRepeatVideo && loopDisplay
-            ? loopDisplay.durationInFrames
-            : durationInFrames;
-        // Trim is applied first, then playbackRate. Each composition frame
-        // advances the source video by `playbackRate` source frames.
-        const toSeconds = fromSeconds + (visibleDurationInFrames * playbackRate) / fps;
+        const { fromSeconds, toSeconds } = times;
         const targetWidth = shouldRepeatVideo
             ? targetCanvas.width
             : mediaNaturalWidth;
@@ -216,6 +300,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         durationInFrames,
         error,
         fps,
+        frozenMediaFrame,
         loopDisplay,
         mediaNaturalWidth,
         mediaVisualizationWidth,

package/dist/components/Timeline/duplicate-selected-timeline-item.d.ts

@@ -8,6 +8,13 @@ export declare const isDuplicatableSequenceRowSelection: (selection: TimelineSel
 } & {
     type: "sequence";
 };
+export declare const isDuplicatableEffectSelection: (selection: TimelineSelection) => selection is {
+    readonly type: "sequence-effect";
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly i: number;
+} & {
+    type: "sequence-effect";
+};
 export declare const duplicateSelectedTimelineItems: ({ selections, confirm, }: {
     selections: readonly TimelineSelection[];
     confirm: ConfirmationDialogFunction;

package/dist/components/Timeline/duplicate-selected-timeline-item.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.duplicateSelectedTimelineItems = exports.isDuplicatableSequenceRowSelection = exports.duplicateSequencesFromSource = void 0;
+exports.duplicateSelectedTimelineItems = exports.isDuplicatableEffectSelection = exports.isDuplicatableSequenceRowSelection = exports.duplicateSequencesFromSource = void 0;
 const call_api_1 = require("../call-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const confirmDuplicatingProgrammaticallyDuplicatedSequences = (nodePathInfos, confirm) => {
@@ -61,11 +61,40 @@ const duplicateSequencesFromSource = (nodePathInfos, confirm) => {
 exports.duplicateSequencesFromSource = duplicateSequencesFromSource;
 const isDuplicatableSequenceRowSelection = (selection) => selection.type === 'sequence';
 exports.isDuplicatableSequenceRowSelection = isDuplicatableSequenceRowSelection;
+const isDuplicatableEffectSelection = (selection) => selection.type === 'sequence-effect';
+exports.isDuplicatableEffectSelection = isDuplicatableEffectSelection;
+const duplicateEffectsFromSource = (effects) => {
+    return (0, call_api_1.callApi)('/api/duplicate-effect', effects.map((effect) => {
+        const nodePath = effect.nodePathInfo.sequenceSubscriptionKey;
+        return {
+            fileName: nodePath.absolutePath,
+            sequenceNodePath: nodePath,
+            effectIndex: effect.i,
+        };
+    }))
+        .then((result) => {
+        if (result.success) {
+            (0, NotificationCenter_1.showNotification)(effects.length === 1
+                ? 'Duplicated effect in source file'
+                : 'Duplicated effects in source files', 2000);
+        }
+        else {
+            (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+        }
+    })
+        .catch((err) => {
+        (0, NotificationCenter_1.showNotification)(err.message, 4000);
+    });
+};
 const duplicateSelectedTimelineItems = ({ selections, confirm, }) => {
     const sequenceSelections = selections.filter(exports.isDuplicatableSequenceRowSelection);
-    if (sequenceSelections.length === 0) {
+    if (sequenceSelections.length > 0) {
+        return (0, exports.duplicateSequencesFromSource)(sequenceSelections.map((selection) => selection.nodePathInfo), confirm);
+    }
+    const effectSelections = selections.filter(exports.isDuplicatableEffectSelection);
+    if (effectSelections.length === 0) {
         return null;
     }
-    return (0, exports.duplicateSequencesFromSource)(sequenceSelections.map((selection) => selection.nodePathInfo), confirm);
+    return duplicateEffectsFromSource(effectSelections);
 };
 exports.duplicateSelectedTimelineItems = duplicateSelectedTimelineItems;

package/dist/components/Timeline/timeline-video-filmstrip-times.d.ts

@@ -0,0 +1,17 @@
+import type { LoopDisplay } from 'remotion';
+export type TimelineVideoFilmstripTimes = {
+    type: 'frozen';
+    timestampInSeconds: number;
+} | {
+    type: 'range';
+    fromSeconds: number;
+    toSeconds: number;
+};
+export declare const getTimelineVideoFilmstripTimes: ({ trimBefore, durationInFrames, playbackRate, fps, loopDisplay, frozenMediaFrame, }: {
+    trimBefore: number;
+    durationInFrames: number;
+    playbackRate: number;
+    fps: number;
+    loopDisplay: LoopDisplay | undefined;
+    frozenMediaFrame: number | null;
+}) => TimelineVideoFilmstripTimes;

package/dist/components/Timeline/timeline-video-filmstrip-times.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineVideoFilmstripTimes = void 0;
+const timeline_utils_1 = require("@remotion/timeline-utils");
+const getTimelineVideoFilmstripTimes = ({ trimBefore, durationInFrames, playbackRate, fps, loopDisplay, frozenMediaFrame, }) => {
+    if (frozenMediaFrame !== null) {
+        return {
+            type: 'frozen',
+            timestampInSeconds: Math.max(0, frozenMediaFrame / fps),
+        };
+    }
+    const fromSeconds = trimBefore / fps;
+    const visibleDurationInFrames = (0, timeline_utils_1.shouldTileLoopDisplay)(loopDisplay) && loopDisplay
+        ? loopDisplay.durationInFrames
+        : durationInFrames;
+    return {
+        type: 'range',
+        fromSeconds,
+        toSeconds: fromSeconds + (visibleDurationInFrames * playbackRate) / fps,
+    };
+};
+exports.getTimelineVideoFilmstripTimes = getTimelineVideoFilmstripTimes;

package/dist/components/import-assets.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentProp, type FileType, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
+import type { Dimensions } from '../helpers/is-current-selected-still';
 export type InsertElementDropPosition = {
     readonly centerX: number;
     readonly centerY: number;
@@ -8,7 +9,7 @@ export declare const getAssetElement: ({ fileType, src, }: {
     src: string;
 }) => {
     type: "asset";
-    assetType: "audio" | "gif" | "image" | "video";
+    assetType: "animated-image" | "audio" | "gif" | "image" | "video";
     src: string;
     srcType: "remote" | "static";
     dimensions: {
@@ -19,7 +20,7 @@ export declare const getAssetElement: ({ fileType, src, }: {
 } | null;
 export declare const getAssetElementFromPath: (assetPath: string) => {
     type: "asset";
-    assetType: "audio" | "gif" | "image" | "video";
+    assetType: "animated-image" | "audio" | "gif" | "image" | "video";
     src: string;
     srcType: "remote" | "static";
     dimensions: {
@@ -28,6 +29,13 @@ export declare const getAssetElementFromPath: (assetPath: string) => {
     } | null;
     position: InsertableCompositionElementPosition | null;
 } | null;
+export declare const getComponentDimensions: (component: {
+    componentName: string;
+    dimensions?: import("@remotion/studio-shared").ComponentDimensions | undefined;
+    importName: string;
+    importPath: string;
+    props: ComponentProp[];
+}) => Dimensions | null;
 export declare const pickFilesToImport: () => Promise<File[]>;
 export declare const importAssets: ({ compositionFile, compositionId, dropPosition, files, }: {
     compositionFile: string;
@@ -55,6 +63,7 @@ export declare const insertExistingAssets: ({ assetPaths, compositionFile, compo
 export declare const insertComponent: ({ component, compositionFile, compositionId, dropPosition, }: {
     component: {
         componentName: string;
+        dimensions?: import("@remotion/studio-shared").ComponentDimensions | undefined;
         importName: string;
         importPath: string;
         props: ComponentProp[];

package/dist/components/import-assets.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
+exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
 const media_utils_1 = require("@remotion/media-utils");
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
@@ -23,6 +23,16 @@ const getAssetElement = ({ fileType, src, }) => {
             position: null,
         };
     }
+    if (fileType.type === 'apng') {
+        return {
+            type: 'asset',
+            assetType: 'animated-image',
+            src,
+            srcType: 'static',
+            dimensions: fileType.dimensions,
+            position: null,
+        };
+    }
     if (fileType.type === 'gif') {
         return {
             type: 'asset',
@@ -81,6 +91,16 @@ const getAssetElementFromPath = (assetPath) => {
             position: null,
         };
     }
+    if (extension === 'apng') {
+        return {
+            type: 'asset',
+            assetType: 'animated-image',
+            src: assetPath,
+            srcType: 'static',
+            dimensions: null,
+            position: null,
+        };
+    }
     if (extension === 'gif') {
         return {
             type: 'asset',
@@ -127,6 +147,9 @@ const getAssetLabel = (element) => {
     if (element.assetType === 'gif') {
         return '<Gif>';
     }
+    if (element.assetType === 'animated-image') {
+        return '<AnimatedImage>';
+    }
     if (element.assetType === 'audio') {
         return '<Audio>';
     }
@@ -155,6 +178,9 @@ const getComponentPropNumber = (props, name) => {
     return typeof (prop === null || prop === void 0 ? void 0 : prop.value) === 'number' ? prop.value : null;
 };
 const getComponentDimensions = (component) => {
+    if (component.dimensions) {
+        return component.dimensions;
+    }
     const width = getComponentPropNumber(component.props, 'width');
     const height = getComponentPropNumber(component.props, 'height');
     if (width !== null && height !== null) {
@@ -166,6 +192,7 @@ const getComponentDimensions = (component) => {
     }
     return null;
 };
+exports.getComponentDimensions = getComponentDimensions;
 const getImageDimensions = ({ revokeObjectUrl, src, }) => {
     return new Promise((resolve, reject) => {
         const image = new Image();
@@ -199,6 +226,7 @@ const getFileDimensions = async ({ file, fileType, }) => {
         fileType.type === 'jpeg' ||
         fileType.type === 'webp' ||
         fileType.type === 'bmp' ||
+        fileType.type === 'apng' ||
         fileType.type === 'gif') {
         if (fileType.dimensions) {
             return fileType.dimensions;
@@ -225,7 +253,7 @@ const getStaticAssetDimensions = (assetPath) => {
     const extension = (_a = assetPath.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     const src = (0, remotion_1.staticFile)(assetPath);
     if (extension &&
-        ['png', 'jpg', 'jpeg', 'webp', 'bmp', 'gif'].includes(extension)) {
+        ['png', 'jpg', 'jpeg', 'webp', 'bmp', 'gif', 'apng'].includes(extension)) {
         return getImageDimensions({ revokeObjectUrl: false, src });
     }
     if (extension &&
@@ -250,6 +278,33 @@ const getStaticAssetDimensionsOrNull = async (assetPath) => {
         return null;
     }
 };
+const getStaticAssetFileType = async (assetPath) => {
+    var _a;
+    const extension = (_a = assetPath.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    if (extension !== 'png' && extension !== 'apng') {
+        return null;
+    }
+    try {
+        const response = await fetch((0, remotion_1.staticFile)(assetPath));
+        if (!response.ok) {
+            return null;
+        }
+        return (0, studio_shared_1.detectFileType)(new Uint8Array(await response.arrayBuffer()));
+    }
+    catch (_b) {
+        return null;
+    }
+};
+const getAssetElementFromStaticAsset = async (assetPath) => {
+    const fileType = await getStaticAssetFileType(assetPath);
+    if (fileType) {
+        const element = (0, exports.getAssetElement)({ fileType, src: assetPath });
+        if (element) {
+            return element;
+        }
+    }
+    return (0, exports.getAssetElementFromPath)(assetPath);
+};
 const pickFilesToImport = () => {
     return new Promise((resolve) => {
         const input = document.createElement('input');
@@ -456,18 +511,18 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
     const unsupportedFiles = [];
     try {
         for (const assetPath of assetPaths) {
-            const element = (0, exports.getAssetElementFromPath)(assetPath);
+            const element = await getAssetElementFromStaticAsset(assetPath);
             if (element === null) {
                 unsupportedFiles.push(assetPath);
                 continue;
             }
-            const dimensions = await getStaticAssetDimensionsOrNull(assetPath);
+            const dimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : (await getStaticAssetDimensionsOrNull(assetPath));
             const inserted = await insertAssetElement({
                 compositionFile,
                 compositionId,
                 element: {
                     ...element,
-                    dimensions: (_a = element.dimensions) !== null && _a !== void 0 ? _a : dimensions,
+                    dimensions,
                     position: getCenteredPosition({
                         dimensions,
                         dropPosition,
@@ -499,7 +554,7 @@ const insertComponent = async ({ component, compositionFile, compositionId, drop
                 importPath: component.importPath,
                 props: component.props,
                 position: getCenteredPosition({
-                    dimensions: getComponentDimensions(component),
+                    dimensions: (0, exports.getComponentDimensions)(component),
                     dropPosition,
                 }),
             },

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

@@ -1,6 +1,7 @@
 import type { GetDragOverrides, SequencePropsSubscriptionKey, SequenceSchema } 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 getSelectedOutlineDragStates: ({ dragTargets, getDragOverrides, timelinePosition, }: {
     readonly dragTargets: readonly SelectedOutlineDragTarget[];
@@ -114,4 +115,26 @@ export declare const compensateTranslateForTransformOrigin: ({ startTranslate, d
     readonly scale: readonly [number, number];
 }) => readonly [number, number];
 export declare const uvsEqual: (left: readonly [number, number], right: readonly [number, number]) => boolean;
+export type SelectedOutlineTransformOriginLockedAxis = 'x' | 'y' | null;
+export declare const getSelectedOutlineTransformOriginLockedAxis: ({ axisLocked, dimensions, startUv, uv, }: {
+    readonly axisLocked: boolean;
+    readonly dimensions: {
+        readonly width: number;
+        readonly height: number;
+    };
+    readonly startUv: UvCoordinate;
+    readonly uv: UvCoordinate;
+}) => SelectedOutlineTransformOriginLockedAxis;
+export declare const applySelectedOutlineTransformOriginAxisLock: ({ lockedAxis, startUv, uv, }: {
+    readonly lockedAxis: SelectedOutlineTransformOriginLockedAxis;
+    readonly startUv: UvCoordinate;
+    readonly uv: UvCoordinate;
+}) => UvCoordinate;
+export declare const selectedOutlineTransformOriginSnapThresholdPx = 10;
+export declare const snapSelectedOutlineTransformOriginUv: ({ point, points, thresholdPx, uv, }: {
+    readonly point: OutlinePoint;
+    readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
+    readonly thresholdPx?: number | undefined;
+    readonly uv: UvCoordinate;
+}) => UvCoordinate;
 export {};

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

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.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;
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const selected_outline_geometry_1 = require("./selected-outline-geometry");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
 const selected_outline_types_1 = require("./selected-outline-types");
+const selected_outline_uv_1 = require("./selected-outline-uv");
 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");
@@ -425,3 +426,50 @@ exports.compensateTranslateForTransformOrigin = compensateTranslateForTransformO
 const uvsEqual = (left, right) => Math.abs(left[0] - right[0]) < 0.000001 &&
     Math.abs(left[1] - right[1]) < 0.000001;
 exports.uvsEqual = uvsEqual;
+const getSelectedOutlineTransformOriginLockedAxis = ({ axisLocked, dimensions, startUv, uv, }) => {
+    if (!axisLocked) {
+        return null;
+    }
+    const deltaX = (uv[0] - startUv[0]) * dimensions.width;
+    const deltaY = (uv[1] - startUv[1]) * dimensions.height;
+    return Math.abs(deltaX) >= Math.abs(deltaY) ? 'x' : 'y';
+};
+exports.getSelectedOutlineTransformOriginLockedAxis = getSelectedOutlineTransformOriginLockedAxis;
+const applySelectedOutlineTransformOriginAxisLock = ({ lockedAxis, startUv, uv, }) => {
+    if (lockedAxis === 'x') {
+        return [uv[0], startUv[1]];
+    }
+    if (lockedAxis === 'y') {
+        return [startUv[0], uv[1]];
+    }
+    return uv;
+};
+exports.applySelectedOutlineTransformOriginAxisLock = applySelectedOutlineTransformOriginAxisLock;
+const transformOriginSnapTargets = [
+    [0, 0],
+    [0.5, 0],
+    [1, 0],
+    [1, 0.5],
+    [1, 1],
+    [0.5, 1],
+    [0, 1],
+    [0, 0.5],
+    [0.5, 0.5],
+];
+exports.selectedOutlineTransformOriginSnapThresholdPx = 10;
+const snapSelectedOutlineTransformOriginUv = ({ point, points, thresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx, uv, }) => {
+    var _a;
+    let best = null;
+    for (const snapUv of transformOriginSnapTargets) {
+        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) {
+            continue;
+        }
+        if (best === null || distance < best.distance) {
+            best = { distance, uv: snapUv };
+        }
+    }
+    return (_a = best === null || best === void 0 ? void 0 : best.uv) !== null && _a !== void 0 ? _a : uv;
+};
+exports.snapSelectedOutlineTransformOriginUv = snapSelectedOutlineTransformOriginUv;

package/dist/error-overlay/remotion-overlay/Overlay.js

@@ -4,6 +4,7 @@ exports.Overlay = exports.setErrorsRef = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const MenuToolbar_1 = require("../../components/MenuToolbar");
 const keybindings_1 = require("../../state/keybindings");
 const ErrorLoader_1 = require("./ErrorLoader");
 exports.setErrorsRef = (0, react_1.createRef)();
@@ -43,6 +44,8 @@ const Overlay = () => {
                 backgroundColor: BACKGROUND_COLOR,
                 overflow: 'auto',
                 color: 'white',
+                top: MenuToolbar_1.MENU_TOOLBAR_HEIGHT,
+                height: `calc(100% - ${MenuToolbar_1.MENU_TOOLBAR_HEIGHT}px)`,
             }, children: errors.errors.map((err, i) => {
                 var _a;
                 return (jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader