@remotion/studio 4.0.496 → 4.0.498

package/dist/components/import-assets.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertElement = exports.insertComposition = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.insertSvgMarkup = exports.importFigmaClipboard = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = exports.getAssetPositionForDrop = exports.getCompositionPositionForDrop = exports.getElementPositionForDrop = exports.hasSvgFile = exports.getAssetElementForDroppedFile = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
-const media_utils_1 = require("@remotion/media-utils");
+exports.insertElement = exports.insertComposition = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.insertSvgMarkup = exports.importFigmaClipboard = exports.importAssets = exports.pickFilesToImport = exports.getDurationInFrames = exports.getComponentDimensions = exports.getAssetPositionForDrop = exports.getCompositionPositionForDrop = exports.getElementPositionForDrop = exports.hasSvgFile = exports.getAssetElementForDroppedFile = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
@@ -9,6 +8,7 @@ const get_static_files_1 = require("../api/get-static-files");
 const write_static_file_1 = require("../api/write-static-file");
 const clipboard_figma_1 = require("../helpers/clipboard-figma");
 const install_required_package_1 = require("../helpers/install-required-package");
+const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const call_api_1 = require("./call-api");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const getAssetElement = ({ fileType, src, }) => {
@@ -19,6 +19,7 @@ const getAssetElement = ({ fileType, src, }) => {
             src,
             srcType: 'static',
             dimensions: fileType.dimensions,
+            durationInFrames: null,
             position: null,
         };
     }
@@ -32,6 +33,7 @@ const getAssetElement = ({ fileType, src, }) => {
             src,
             srcType: 'static',
             dimensions: fileType.dimensions,
+            durationInFrames: null,
             position: null,
         };
     }
@@ -42,6 +44,7 @@ const getAssetElement = ({ fileType, src, }) => {
             src,
             srcType: 'static',
             dimensions: fileType.dimensions,
+            durationInFrames: null,
             position: null,
         };
     }
@@ -52,6 +55,7 @@ const getAssetElement = ({ fileType, src, }) => {
             src,
             srcType: 'static',
             dimensions: fileType.dimensions,
+            durationInFrames: null,
             position: null,
         };
     }
@@ -65,6 +69,7 @@ const getAssetElement = ({ fileType, src, }) => {
             src,
             srcType: 'static',
             dimensions: null,
+            durationInFrames: null,
             position: null,
         };
     }
@@ -78,6 +83,7 @@ const getAssetElement = ({ fileType, src, }) => {
             src,
             srcType: 'static',
             dimensions: null,
+            durationInFrames: null,
             position: null,
         };
     }
@@ -100,6 +106,7 @@ const getAssetElementFromPath = (assetPath) => {
             src: assetPath,
             srcType: 'static',
             dimensions: null,
+            durationInFrames: null,
             position: null,
         };
     }
@@ -110,6 +117,7 @@ const getAssetElementFromPath = (assetPath) => {
             src: assetPath,
             srcType: 'static',
             dimensions: null,
+            durationInFrames: null,
             position: null,
         };
     }
@@ -120,6 +128,7 @@ const getAssetElementFromPath = (assetPath) => {
             src: assetPath,
             srcType: 'static',
             dimensions: null,
+            durationInFrames: null,
             position: null,
         };
     }
@@ -130,6 +139,7 @@ const getAssetElementFromPath = (assetPath) => {
             src: assetPath,
             srcType: 'static',
             dimensions: null,
+            durationInFrames: null,
             position: null,
         };
     }
@@ -140,6 +150,7 @@ const getAssetElementFromPath = (assetPath) => {
             src: assetPath,
             srcType: 'static',
             dimensions: null,
+            durationInFrames: null,
             position: null,
         };
     }
@@ -267,20 +278,47 @@ const getImageDimensions = ({ revokeObjectUrl, src, }) => {
         image.src = src;
     });
 };
-const getVideoDimensions = async (src) => {
-    const metadata = await (0, media_utils_1.getVideoMetadata)(src);
-    return { width: metadata.width, height: metadata.height };
+const getMediaAssetMetadata = async (src) => {
+    var _a;
+    const metadata = await (0, use_media_metadata_1.getMediaMetadata)(src);
+    return {
+        dimensions: (metadata === null || metadata === void 0 ? void 0 : metadata.width) === null || (metadata === null || metadata === void 0 ? void 0 : metadata.height) === null || !metadata
+            ? null
+            : { width: metadata.width, height: metadata.height },
+        durationInSeconds: (_a = metadata === null || metadata === void 0 ? void 0 : metadata.duration) !== null && _a !== void 0 ? _a : null,
+    };
 };
-const getFileDimensions = async ({ file, fileType, }) => {
+const getAnimatedImageAssetDuration = (src, contentType) => {
+    return remotion_1.Internals.getAnimatedImageDurationInSeconds({
+        resolvedSrc: src,
+        signal: new AbortController().signal,
+        contentType,
+    });
+};
+const assetTypeHasDuration = (assetType) => assetType !== 'image';
+const getFileMetadata = async ({ file, fileType, }) => {
+    var _a;
     if (fileType.type === 'unknown' && file.name.toLowerCase().endsWith('.svg')) {
         const objectUrl = URL.createObjectURL(file);
-        return getImageDimensions({ revokeObjectUrl: true, src: objectUrl });
+        return {
+            dimensions: await getImageDimensions({
+                revokeObjectUrl: true,
+                src: objectUrl,
+            }),
+            durationInSeconds: null,
+        };
     }
     if (fileType.type === 'wav' ||
         fileType.type === 'mp3' ||
         fileType.type === 'aac' ||
         fileType.type === 'flac') {
-        return null;
+        const objectUrl = URL.createObjectURL(file);
+        try {
+            return await getMediaAssetMetadata(objectUrl);
+        }
+        finally {
+            URL.revokeObjectURL(objectUrl);
+        }
     }
     if (fileType.type === 'png' ||
         fileType.type === 'jpeg' ||
@@ -288,11 +326,26 @@ const getFileDimensions = async ({ file, fileType, }) => {
         fileType.type === 'bmp' ||
         fileType.type === 'apng' ||
         fileType.type === 'gif') {
-        if (fileType.dimensions) {
-            return fileType.dimensions;
-        }
         const objectUrl = URL.createObjectURL(file);
-        return getImageDimensions({ revokeObjectUrl: true, src: objectUrl });
+        try {
+            const dimensions = (_a = fileType.dimensions) !== null && _a !== void 0 ? _a : (await getImageDimensions({ revokeObjectUrl: false, src: objectUrl }));
+            const isAnimated = fileType.type === 'gif' ||
+                fileType.type === 'apng' ||
+                (fileType.type === 'webp' && fileType.animated);
+            return {
+                dimensions,
+                durationInSeconds: isAnimated
+                    ? await getAnimatedImageAssetDuration(objectUrl, fileType.type === 'gif'
+                        ? 'image/gif'
+                        : fileType.type === 'webp'
+                            ? 'image/webp'
+                            : 'image/png')
+                    : null,
+            };
+        }
+        finally {
+            URL.revokeObjectURL(objectUrl);
+        }
     }
     if (fileType.type === 'riff' ||
         fileType.type === 'webm' ||
@@ -300,44 +353,65 @@ const getFileDimensions = async ({ file, fileType, }) => {
         fileType.type === 'transport-stream') {
         const objectUrl = URL.createObjectURL(file);
         try {
-            return await getVideoDimensions(objectUrl);
+            return await getMediaAssetMetadata(objectUrl);
         }
         finally {
             URL.revokeObjectURL(objectUrl);
         }
     }
-    return null;
+    return { dimensions: null, durationInSeconds: null };
 };
-const getStaticAssetDimensions = (assetPath) => {
+const getStaticAssetMetadata = (assetPath, assetType) => {
     var _a;
     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', 'apng', 'svg'].includes(extension)) {
-        return getImageDimensions({ revokeObjectUrl: false, src });
-    }
-    if (extension &&
-        ['mp4', 'm4v', 'mov', 'avi', 'webm', 'ts', 'm2ts'].includes(extension)) {
-        return getVideoDimensions(src);
-    }
-    return null;
-};
-const getFileDimensionsOrNull = async ({ file, fileType, }) => {
+        return Promise.all([
+            getImageDimensions({ revokeObjectUrl: false, src }),
+            assetType === 'gif' || assetType === 'animated-image'
+                ? getAnimatedImageAssetDuration(src, extension === 'gif'
+                    ? 'image/gif'
+                    : extension === 'webp'
+                        ? 'image/webp'
+                        : 'image/png')
+                : null,
+        ]).then(([dimensions, durationInSeconds]) => ({
+            dimensions,
+            durationInSeconds,
+        }));
+    }
+    if (assetType === 'video' || assetType === 'audio') {
+        return getMediaAssetMetadata(src);
+    }
+    return { dimensions: null, durationInSeconds: null };
+};
+const getFileMetadataOrNull = async ({ file, fileType, }) => {
     try {
-        return await getFileDimensions({ file, fileType });
+        return await getFileMetadata({ file, fileType });
     }
     catch (_a) {
-        return null;
+        return { dimensions: null, durationInSeconds: null };
     }
 };
-const getStaticAssetDimensionsOrNull = async (assetPath) => {
+const getStaticAssetMetadataOrNull = async (assetPath, assetType) => {
     try {
-        return await getStaticAssetDimensions(assetPath);
+        return await getStaticAssetMetadata(assetPath, assetType);
     }
     catch (_a) {
+        return { dimensions: null, durationInSeconds: null };
+    }
+};
+const getDurationInFrames = ({ durationInSeconds, fps, }) => {
+    if (durationInSeconds === null ||
+        !Number.isFinite(durationInSeconds) ||
+        durationInSeconds <= 0) {
         return null;
     }
+    const durationInFrames = Math.round(durationInSeconds * fps * 100) / 100;
+    return durationInFrames > 0 ? durationInFrames : null;
 };
+exports.getDurationInFrames = getDurationInFrames;
 const getStaticAssetFileType = async (assetPath) => {
     var _a;
     const extension = (_a = assetPath.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
@@ -410,13 +484,14 @@ const notifyUnsupportedFiles = (unsupportedFiles) => {
         (0, NotificationCenter_1.showNotification)(`Skipped ${unsupportedFiles.length} unsupported files`, 3000);
     }
 };
-const insertCompositionElement = async ({ compositionFile, compositionId, element, }) => {
+const insertCompositionElement = async ({ compositionFile, compositionId, element, from, }) => {
     const requiredPackage = (0, studio_shared_1.getRequiredPackageForInsertableElement)(element);
     await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [requiredPackage] : []);
     const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
         compositionFile,
         compositionId,
         element,
+        from,
     });
     if (!result.success) {
         (0, NotificationCenter_1.showNotification)(result.reason, 4000);
@@ -427,7 +502,7 @@ const insertCompositionElement = async ({ compositionFile, compositionId, elemen
 const downloadRemoteAsset = (url) => {
     return (0, call_api_1.callApi)('/api/download-remote-asset', { url });
 };
-const importAssets = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, svgImportMode, }) => {
+const importAssets = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, fps, from, svgImportMode, }) => {
     var _a;
     if (files.length === 0) {
         return;
@@ -460,16 +535,17 @@ const importAssets = async ({ compositionFile, compositionId, destinationDimensi
         for (const file of files) {
             const contents = await file.arrayBuffer();
             const fileType = (0, studio_shared_1.detectFileType)(new Uint8Array(contents));
-            const dimensions = await getFileDimensionsOrNull({ file, fileType });
+            const metadata = await getFileMetadataOrNull({ file, fileType });
             if (isSvgFile(file) && svgImportMode === 'inline') {
                 const svgInserted = await insertCompositionElement({
                     compositionFile,
                     compositionId,
+                    from,
                     element: {
                         type: 'svg',
                         markup: new TextDecoder().decode(contents),
                         position: (0, exports.getAssetPositionForDrop)({
-                            assetDimensions: dimensions,
+                            assetDimensions: metadata.dimensions,
                             destinationDimensions,
                             dropPosition,
                         }),
@@ -499,13 +575,20 @@ const importAssets = async ({ compositionFile, compositionId, destinationDimensi
                 });
                 addedStaticFiles.push(file.name);
             }
-            const resolvedDimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : dimensions;
+            const resolvedDimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : metadata.dimensions;
             const inserted = await insertCompositionElement({
                 compositionFile,
                 compositionId,
+                from,
                 element: {
                     ...element,
                     dimensions: resolvedDimensions,
+                    durationInFrames: assetTypeHasDuration(element.assetType)
+                        ? (0, exports.getDurationInFrames)({
+                            durationInSeconds: metadata.durationInSeconds,
+                            fps,
+                        })
+                        : null,
                     position: (0, exports.getAssetPositionForDrop)({
                         assetDimensions: resolvedDimensions,
                         destinationDimensions,
@@ -566,6 +649,7 @@ const insertSvgMarkup = async ({ compositionFile, compositionId, destinationDime
         const inserted = await insertCompositionElement({
             compositionFile,
             compositionId,
+            from: null,
             element: {
                 type: 'svg',
                 markup,
@@ -585,7 +669,8 @@ const insertSvgMarkup = async ({ compositionFile, compositionId, destinationDime
     }
 };
 exports.insertSvgMarkup = insertSvgMarkup;
-const importRemoteAsset = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, url, }) => {
+const importRemoteAsset = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, fps, from, url, }) => {
+    var _a;
     try {
         const { assetPath, created, element } = await downloadRemoteAsset(url);
         if (created) {
@@ -595,13 +680,23 @@ const importRemoteAsset = async ({ compositionFile, compositionId, destinationDi
             (0, NotificationCenter_1.showNotification)('Cannot add remote asset: Unsupported asset type', 3000);
             return;
         }
+        const metadata = await getStaticAssetMetadataOrNull(assetPath, element.assetType);
+        const dimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : metadata.dimensions;
         const inserted = await insertCompositionElement({
             compositionFile,
             compositionId,
+            from,
             element: {
                 ...element,
+                dimensions,
+                durationInFrames: assetTypeHasDuration(element.assetType)
+                    ? (0, exports.getDurationInFrames)({
+                        durationInSeconds: metadata.durationInSeconds,
+                        fps,
+                    })
+                    : null,
                 position: (0, exports.getAssetPositionForDrop)({
-                    assetDimensions: element.dimensions,
+                    assetDimensions: dimensions,
                     destinationDimensions,
                     dropPosition,
                 }),
@@ -617,24 +712,30 @@ const importRemoteAsset = async ({ compositionFile, compositionId, destinationDi
     }
 };
 exports.importRemoteAsset = importRemoteAsset;
-const insertRemoteAudio = async ({ compositionFile, compositionId, url, }) => {
+const insertRemoteAudio = async ({ compositionFile, compositionId, fps, from, url, }) => {
     if (!(0, studio_shared_1.isUrl)(url)) {
         (0, NotificationCenter_1.showNotification)('Cannot add sound effect: Unsupported URL', 3000);
         return;
     }
-    const element = {
-        type: 'asset',
-        assetType: 'audio',
-        src: url,
-        srcType: 'remote',
-        dimensions: null,
-        position: null,
-    };
     try {
+        const metadata = await getMediaAssetMetadata(url);
+        const element = {
+            type: 'asset',
+            assetType: 'audio',
+            src: url,
+            srcType: 'remote',
+            dimensions: null,
+            durationInFrames: (0, exports.getDurationInFrames)({
+                durationInSeconds: metadata.durationInSeconds,
+                fps,
+            }),
+            position: null,
+        };
         const inserted = await insertCompositionElement({
             compositionFile,
             compositionId,
             element,
+            from,
         });
         if (!inserted) {
             return;
@@ -646,7 +747,7 @@ const insertRemoteAudio = async ({ compositionFile, compositionId, url, }) => {
     }
 };
 exports.insertRemoteAudio = insertRemoteAudio;
-const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId, destinationDimensions, dropPosition, }) => {
+const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId, destinationDimensions, dropPosition, fps, from, }) => {
     var _a;
     if (assetPaths.length === 0) {
         return;
@@ -660,13 +761,21 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
                 unsupportedFiles.push(assetPath);
                 continue;
             }
-            const dimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : (await getStaticAssetDimensionsOrNull(assetPath));
+            const metadata = await getStaticAssetMetadataOrNull(assetPath, element.assetType);
+            const dimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : metadata.dimensions;
             const inserted = await insertCompositionElement({
                 compositionFile,
                 compositionId,
+                from,
                 element: {
                     ...element,
                     dimensions,
+                    durationInFrames: assetTypeHasDuration(element.assetType)
+                        ? (0, exports.getDurationInFrames)({
+                            durationInSeconds: metadata.durationInSeconds,
+                            fps,
+                        })
+                        : null,
                     position: (0, exports.getAssetPositionForDrop)({
                         assetDimensions: dimensions,
                         destinationDimensions,
@@ -687,11 +796,12 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
     }
 };
 exports.insertExistingAssets = insertExistingAssets;
-const insertComponent = async ({ component, compositionFile, compositionId, dropPosition, }) => {
+const insertComponent = async ({ component, compositionFile, compositionId, dropPosition, from, }) => {
     try {
         const inserted = await insertCompositionElement({
             compositionFile,
             compositionId,
+            from,
             element: {
                 type: 'component',
                 componentName: component.componentName,
@@ -721,7 +831,7 @@ const serializeResolvedPropsForSourceCode = (props) => {
         staticBase: window.remotion_staticBase,
     }).serializedString;
 };
-const insertComposition = async ({ composition, compositionFile, compositionId, destinationDimensions, dropPosition, }) => {
+const insertComposition = async ({ composition, compositionFile, compositionId, destinationDimensions, dropPosition, from, }) => {
     if (composition.compositionId === compositionId) {
         (0, NotificationCenter_1.showNotification)('Cannot add a composition to itself', 3000);
         return;
@@ -743,6 +853,7 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
         const inserted = await insertCompositionElement({
             compositionFile,
             compositionId,
+            from,
             element: {
                 type: 'composition',
                 compositionId: composition.compositionId,
@@ -768,13 +879,14 @@ const insertComposition = async ({ composition, compositionFile, compositionId,
     }
 };
 exports.insertComposition = insertComposition;
-const insertElement = async ({ compositionFile, compositionId, dropPosition, element, }) => {
+const insertElement = async ({ compositionFile, compositionId, dropPosition, element, from, }) => {
     try {
         await (0, install_required_package_1.installRequiredPackages)(element.dependencies);
         const response = await (0, call_api_1.callApi)('/api/insert-element', {
             compositionFile,
             compositionId,
             element,
+            from,
             position: (0, exports.getElementPositionForDrop)({
                 dimensions: element.dimensions,
                 dropPosition,

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

@@ -1,7 +1,8 @@
 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 { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineRotationDragTarget, SelectedOutlineScaleDragState, SelectedOutlineScaleDragTarget, SelectedOutlineDragTarget, SelectedOutlineTransformOriginDragTarget } from './selected-outline-types';
 import { type UvCoordinate } from './selected-outline-uv';
+import type { AddSequenceKeyframeChange } from './Timeline/call-add-keyframe';
 import type { SaveSequencePropChange } from './Timeline/save-sequence-prop';
 export declare const getSelectedOutlineActiveSchema: ({ schema, currentRuntimeValueDotNotation, dragOverrides, propStatus, frame, }: {
     readonly schema: InteractivitySchema;
@@ -126,6 +127,15 @@ export declare const compensateTranslateForTransformOrigin: ({ startTranslate, d
     readonly rotate: number;
     readonly scale: readonly [number, number];
 }) => readonly [number, number];
+export declare const getSelectedOutlineTransformOriginDragChanges: ({ target, startTranslate, origin, translate, }: {
+    readonly target: SelectedOutlineTransformOriginDragTarget;
+    readonly startTranslate: readonly [number, number];
+    readonly origin: string;
+    readonly translate: string;
+}) => {
+    readonly staticChanges: SaveSequencePropChange[];
+    readonly keyframedChanges: AddSequenceKeyframeChange[];
+};
 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, }: {

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.snapSelectedOutlineTransformOriginUv = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.snapSelectedOutlineUv = exports.selectedOutlineUvSnapThresholdPx = exports.applySelectedOutlineTransformOriginAxisLock = exports.getSelectedOutlineTransformOriginLockedAxis = exports.uvsEqual = exports.getSelectedOutlineTransformOriginDragChanges = 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");
@@ -446,6 +446,79 @@ const compensateTranslateForTransformOrigin = ({ startTranslate, deltaOrigin, ro
     return [startTranslate[0] - compensationX, startTranslate[1] - compensationY];
 };
 exports.compensateTranslateForTransformOrigin = compensateTranslateForTransformOrigin;
+const getSelectedOutlineTransformOriginDragChanges = ({ target, startTranslate, origin, translate, }) => {
+    const staticChanges = [];
+    const keyframedChanges = [];
+    const originChanged = origin !== target.originValue;
+    const translateChanged = translate !== target.translateValue;
+    if (originChanged) {
+        if (target.originPropStatus.status === 'keyframed') {
+            keyframedChanges.push({
+                fileName: target.nodePath.absolutePath,
+                nodePath: target.nodePath,
+                fieldKey: selected_outline_types_1.transformOriginFieldKey,
+                sourceFrame: target.sourceFrame,
+                value: origin,
+                schema: target.schema,
+            });
+        }
+        else {
+            staticChanges.push({
+                fileName: target.nodePath.absolutePath,
+                nodePath: target.nodePath,
+                fieldKey: selected_outline_types_1.transformOriginFieldKey,
+                value: origin,
+                defaultValue: target.originDefault === undefined
+                    ? null
+                    : JSON.stringify(target.originDefault),
+                schema: target.schema,
+            });
+        }
+    }
+    if (!translateChanged) {
+        return { staticChanges, keyframedChanges };
+    }
+    if (target.translatePropStatus.status === 'static') {
+        staticChanges.push({
+            fileName: target.nodePath.absolutePath,
+            nodePath: target.nodePath,
+            fieldKey: selected_outline_types_1.translateFieldKey,
+            value: translate,
+            defaultValue: target.translateDefault === undefined
+                ? null
+                : JSON.stringify(target.translateDefault),
+            schema: target.schema,
+        });
+        return { staticChanges, keyframedChanges };
+    }
+    if (target.originPropStatus.status === 'keyframed') {
+        keyframedChanges.push({
+            fileName: target.nodePath.absolutePath,
+            nodePath: target.nodePath,
+            fieldKey: selected_outline_types_1.translateFieldKey,
+            sourceFrame: target.sourceFrame,
+            value: translate,
+            schema: target.schema,
+        });
+        return { staticChanges, keyframedChanges };
+    }
+    const nextTranslate = (0, timeline_translate_utils_1.parseTranslate)(translate);
+    const deltaTranslateX = nextTranslate[0] - startTranslate[0];
+    const deltaTranslateY = nextTranslate[1] - startTranslate[1];
+    for (const keyframe of target.translatePropStatus.keyframes) {
+        const keyframeTranslate = (0, timeline_translate_utils_1.parseTranslate)(String(keyframe.value));
+        keyframedChanges.push({
+            fileName: target.nodePath.absolutePath,
+            nodePath: target.nodePath,
+            fieldKey: selected_outline_types_1.translateFieldKey,
+            sourceFrame: keyframe.frame,
+            value: (0, timeline_translate_utils_1.serializeTranslate)(keyframeTranslate[0] + deltaTranslateX, keyframeTranslate[1] + deltaTranslateY),
+            schema: target.schema,
+        });
+    }
+    return { staticChanges, keyframedChanges };
+};
+exports.getSelectedOutlineTransformOriginDragChanges = getSelectedOutlineTransformOriginDragChanges;
 const uvsEqual = (left, right) => Math.abs(left[0] - right[0]) < 0.000001 &&
     Math.abs(left[1] - right[1]) < 0.000001;
 exports.uvsEqual = uvsEqual;