@remotion/studio 4.0.492 → 4.0.494

package/dist/components/Timeline/keyframe-clipboard.js

@@ -0,0 +1,278 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPasteKeyframeTarget = exports.getKeyframeClipboardDataFromSelections = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const remotion_1 = require("remotion");
+const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
+const getKeyframeClipboardFieldType = ({ schema, fieldKey, }) => {
+    const field = remotion_1.Internals.getFlatSchemaWithAllKeys(schema)[fieldKey];
+    if (!field) {
+        return null;
+    }
+    return (0, studio_shared_1.isKeyframeClipboardFieldType)(field.type) ? field.type : null;
+};
+const getKeyframeFieldIdentity = (selection) => {
+    if (selection.type === 'keyframe' || selection.type === 'easing') {
+        return (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(selection.nodePathInfo.auxiliaryKeys);
+    }
+    if (selection.type === 'sequence-prop') {
+        return { type: 'sequence', fieldKey: selection.key };
+    }
+    if (selection.type === 'sequence-effect-prop') {
+        return {
+            type: 'effect',
+            effectIndex: selection.i,
+            fieldKey: selection.key,
+        };
+    }
+    return null;
+};
+const resolveKeyframeField = ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    var _a, _b;
+    if (selection.type !== 'keyframe' &&
+        selection.type !== 'easing' &&
+        selection.type !== 'sequence-prop' &&
+        selection.type !== 'sequence-effect-prop') {
+        return null;
+    }
+    const identity = getKeyframeFieldIdentity(selection);
+    if (identity === null) {
+        return null;
+    }
+    const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+        sequences,
+        overrideIdsToNodePaths,
+        nodePathInfo: selection.nodePathInfo,
+    });
+    if (!track || track.nodePathInfo === null) {
+        return null;
+    }
+    const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
+    if (identity.type === 'sequence') {
+        if (!track.sequence.controls) {
+            return null;
+        }
+        const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[identity.fieldKey];
+        if (!sequencePropStatus || sequencePropStatus.status === 'computed') {
+            return null;
+        }
+        const { schema } = track.sequence.controls;
+        return {
+            identity,
+            nodePath,
+            fileName: nodePath.absolutePath,
+            schema,
+            fieldType: getKeyframeClipboardFieldType({
+                schema,
+                fieldKey: identity.fieldKey,
+            }),
+            propStatus: sequencePropStatus,
+            keyframeDisplayOffset: track.keyframeDisplayOffset,
+        };
+    }
+    const effect = track.sequence.effects[identity.effectIndex];
+    const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
+        nodePath,
+        effectIndex: identity.effectIndex,
+    });
+    const effectPropStatus = effectStatus.type === 'can-update-effect'
+        ? (_b = effectStatus.props) === null || _b === void 0 ? void 0 : _b[identity.fieldKey]
+        : null;
+    if (!effect || !effectPropStatus || effectPropStatus.status === 'computed') {
+        return null;
+    }
+    return {
+        identity,
+        nodePath,
+        fileName: nodePath.absolutePath,
+        schema: effect.schema,
+        fieldType: getKeyframeClipboardFieldType({
+            schema: effect.schema,
+            fieldKey: identity.fieldKey,
+        }),
+        propStatus: effectPropStatus,
+        keyframeDisplayOffset: track.keyframeDisplayOffset,
+    };
+};
+const areResolvedFieldsEqual = (first, second) => {
+    if (remotion_1.Internals.makeSequencePropsSubscriptionKey(first.nodePath) !==
+        remotion_1.Internals.makeSequencePropsSubscriptionKey(second.nodePath)) {
+        return false;
+    }
+    if (first.identity.type !== second.identity.type) {
+        return false;
+    }
+    if (first.identity.fieldKey !== second.identity.fieldKey) {
+        return false;
+    }
+    return (first.identity.type === 'sequence' ||
+        (second.identity.type === 'effect' &&
+            first.identity.effectIndex === second.identity.effectIndex));
+};
+const getKeyframeClipboardDataFromSelections = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    var _a, _b;
+    const keyframeSelections = selections.filter((selection) => selection.type === 'keyframe');
+    const easingSelections = selections.filter((selection) => selection.type === 'easing');
+    if (keyframeSelections.length + easingSelections.length !==
+        selections.length) {
+        return null;
+    }
+    const resolvedFields = keyframeSelections.map((selection) => ({
+        selection,
+        resolved: resolveKeyframeField({
+            selection,
+            sequences,
+            overrideIdsToNodePaths,
+            propStatuses,
+        }),
+    }));
+    const firstResolved = (_a = resolvedFields[0]) === null || _a === void 0 ? void 0 : _a.resolved;
+    if (firstResolved === null ||
+        firstResolved === undefined ||
+        resolvedFields.some(({ resolved }) => resolved === null || !areResolvedFieldsEqual(firstResolved, resolved))) {
+        return null;
+    }
+    const keyframedPropStatus = firstResolved.propStatus;
+    if (keyframedPropStatus.status !== 'keyframed') {
+        return null;
+    }
+    const keyframes = [];
+    for (const { selection } of resolvedFields) {
+        const sourceFrame = selection.frame - firstResolved.keyframeDisplayOffset;
+        const keyframe = keyframedPropStatus.keyframes.find((item) => item.frame === sourceFrame);
+        if (keyframe === undefined ||
+            JSON.stringify(keyframe.value) === undefined) {
+            return null;
+        }
+        keyframes.push({ frame: sourceFrame, value: keyframe.value });
+    }
+    keyframes.sort((first, second) => first.frame - second.frame);
+    const firstFrame = (_b = keyframes[0]) === null || _b === void 0 ? void 0 : _b.frame;
+    if (firstFrame === undefined) {
+        return null;
+    }
+    const keyframeIndexes = keyframes.map((keyframe) => keyframedPropStatus.keyframes.findIndex((item) => item.frame === keyframe.frame));
+    if (keyframeIndexes.some((index, position) => index === -1 ||
+        (position > 0 && index !== keyframeIndexes[position - 1] + 1))) {
+        return null;
+    }
+    const firstKeyframeIndex = keyframeIndexes[0];
+    const lastKeyframeIndex = keyframeIndexes.at(-1);
+    if (firstKeyframeIndex === undefined || lastKeyframeIndex === undefined) {
+        return null;
+    }
+    for (const easingSelection of easingSelections) {
+        const resolved = resolveKeyframeField({
+            selection: easingSelection,
+            sequences,
+            overrideIdsToNodePaths,
+            propStatuses,
+        });
+        if (resolved === null ||
+            !areResolvedFieldsEqual(firstResolved, resolved) ||
+            easingSelection.segmentIndex < firstKeyframeIndex ||
+            easingSelection.segmentIndex >= lastKeyframeIndex) {
+            return null;
+        }
+    }
+    return {
+        type: 'keyframe',
+        version: 1,
+        remotionClipboard: 'keyframe',
+        fieldType: firstResolved.fieldType,
+        keyframes: keyframes.map((keyframe) => {
+            return {
+                frameOffset: keyframe.frame - firstFrame,
+                value: keyframe.value,
+            };
+        }),
+        easing: keyframeIndexes.slice(0, -1).map((index) => {
+            var _a;
+            return (_a = keyframedPropStatus.easing[index]) !== null && _a !== void 0 ? _a : studio_shared_1.LINEAR_KEYFRAME_EASING;
+        }),
+    };
+};
+exports.getKeyframeClipboardDataFromSelections = getKeyframeClipboardDataFromSelections;
+const isKeyframeValueCompatible = ({ value, fieldType, }) => {
+    if (fieldType === null) {
+        return true;
+    }
+    if (fieldType === 'number' || fieldType === 'rotation-degrees') {
+        return typeof value === 'number' && Number.isFinite(value);
+    }
+    if (fieldType === 'scale') {
+        return ((typeof value === 'number' && Number.isFinite(value)) ||
+            typeof value === 'string');
+    }
+    if (fieldType === 'uv-coordinate') {
+        return (Array.isArray(value) &&
+            value.length === 2 &&
+            value.every((item) => typeof item === 'number' && Number.isFinite(item)));
+    }
+    return typeof value === 'string';
+};
+const getPasteKeyframeTarget = ({ selectedItems, payload, timelinePosition, sequences, overrideIdsToNodePaths, propStatuses, }) => {
+    var _a, _b;
+    if (selectedItems.length === 0) {
+        return { type: 'none' };
+    }
+    const selection = selectedItems[0];
+    if (!selection || getKeyframeFieldIdentity(selection) === null) {
+        return { type: 'none' };
+    }
+    const resolvedFields = selectedItems.map((item) => resolveKeyframeField({
+        selection: item,
+        sequences,
+        overrideIdsToNodePaths,
+        propStatuses,
+    }));
+    const resolved = resolvedFields[0];
+    if (resolved === null) {
+        return { type: 'uncopyable' };
+    }
+    if (resolvedFields.some((field) => field === null || !areResolvedFieldsEqual(resolved, field))) {
+        return { type: 'multiple' };
+    }
+    const keyframes = payload.keyframes.map((keyframe) => ({
+        sourceFrame: timelinePosition - resolved.keyframeDisplayOffset + keyframe.frameOffset,
+        value: keyframe.value,
+    }));
+    const firstFrame = (_a = keyframes[0]) === null || _a === void 0 ? void 0 : _a.sourceFrame;
+    const lastFrame = (_b = keyframes.at(-1)) === null || _b === void 0 ? void 0 : _b.sourceFrame;
+    if (firstFrame === undefined || lastFrame === undefined) {
+        return { type: 'incompatible' };
+    }
+    const existingFrames = resolved.propStatus.status === 'keyframed'
+        ? resolved.propStatus.keyframes.map((keyframe) => keyframe.frame)
+        : [];
+    const keyframesToDelete = existingFrames.filter((frame) => frame >= firstFrame && frame <= lastFrame);
+    const finalFrames = [
+        ...existingFrames.filter((frame) => frame < firstFrame || frame > lastFrame),
+        ...keyframes.map((keyframe) => keyframe.sourceFrame),
+    ].sort((first, second) => first - second);
+    const firstEasingSegmentIndex = finalFrames.indexOf(firstFrame);
+    if (resolved.fieldType !== payload.fieldType ||
+        payload.keyframes.some((keyframe) => !isKeyframeValueCompatible({
+            value: keyframe.value,
+            fieldType: payload.fieldType,
+        }))) {
+        return { type: 'incompatible' };
+    }
+    return {
+        type: 'valid',
+        fileName: resolved.fileName,
+        nodePath: resolved.nodePath,
+        fieldKey: resolved.identity.fieldKey,
+        effectIndex: resolved.identity.type === 'effect'
+            ? resolved.identity.effectIndex
+            : null,
+        keyframes,
+        keyframesToDelete,
+        easing: payload.easing,
+        firstEasingSegmentIndex,
+        schema: resolved.schema,
+    };
+};
+exports.getPasteKeyframeTarget = getPasteKeyframeTarget;

package/dist/components/Timeline/timeline-field-display-utils.js

@@ -241,10 +241,11 @@ const formatTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
         case 'boolean':
         case 'color':
         case 'enum':
+        case 'font-family':
         case 'hidden':
             return formatUnknownTimelineValueForDisplay(value);
         default:
-            return formatUnknownTimelineValueForDisplay(value);
+            throw new Error(`Unsupported field type: ${fieldSchema}`);
     }
 };
 exports.formatTimelineFieldValueForDisplay = formatTimelineFieldValueForDisplay;

package/dist/components/Timeline/update-selected-easing.d.ts

@@ -1,3 +1,4 @@
+export { canEditEasingForInterpolationFunction } from '@remotion/studio-shared';
 import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusEasing, DragOverrideValue, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, InteractivitySchema, TSequence } from 'remotion';
 import type { SetPropStatuses } from './save-sequence-prop';
 import type { TimelineEasingSelection, TimelineSelection } from './TimelineSelection';
@@ -23,7 +24,6 @@ export type SelectedEasingUpdate = {
     readonly currentEasing: TimelineEasingValue;
     readonly propStatus: CanUpdateSequencePropStatusKeyframed;
 };
-export declare const canEditEasingForInterpolationFunction: (interpolationFunction: string) => boolean;
 export declare const getSelectedEasingUpdate: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
     selection: {
         readonly type: "easing";

package/dist/components/Timeline/update-selected-easing.js

@@ -2,13 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateSelectedTimelineEasings = exports.getTimelineEasingValueForSelection = exports.getEasingSelections = exports.makeEasingDragOverride = exports.getSelectedEasingUpdates = exports.getSelectedEasingUpdate = exports.canEditEasingForInterpolationFunction = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const studio_shared_2 = require("@remotion/studio-shared");
+Object.defineProperty(exports, "canEditEasingForInterpolationFunction", { enumerable: true, get: function () { return studio_shared_2.canEditEasingForInterpolationFunction; } });
 const remotion_1 = require("remotion");
 const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
 const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
-const canEditEasingForInterpolationFunction = (interpolationFunction) => interpolationFunction === 'interpolate' ||
-    interpolationFunction === 'interpolateColors';
-exports.canEditEasingForInterpolationFunction = canEditEasingForInterpolationFunction;
 const isEasingSelection = (selection) => selection.type === 'easing';
 const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     var _a;
@@ -34,7 +33,7 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         }
         const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[field.fieldKey];
         if ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) !== 'keyframed' ||
-            !(0, exports.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction)) {
+            !(0, studio_shared_1.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction)) {
             return null;
         }
         return {
@@ -61,7 +60,7 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         ? effectStatus.props[field.fieldKey]
         : null;
     if ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed' ||
-        !(0, exports.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction)) {
+        !(0, studio_shared_1.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction)) {
         return null;
     }
     return {

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useExpandedTrackKeyframeRows = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -9,8 +10,6 @@ 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 canEditEasingForInterpolationFunction = (interpolationFunction) => interpolationFunction === 'interpolate' ||
-    interpolationFunction === 'interpolateColors';
 const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
     var _a;
     if (node.kind !== 'field' || node.field === null) {
@@ -19,7 +18,7 @@ const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
     if (node.field.kind === 'sequence-field') {
         const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key];
         return ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) === 'keyframed' &&
-            canEditEasingForInterpolationFunction(sequencePropStatus.interpolationFunction));
+            (0, studio_shared_1.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction));
     }
     const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
         propStatuses,
@@ -30,7 +29,7 @@ const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
         ? effectStatus.props[node.field.key]
         : null;
     return ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) === 'keyframed' &&
-        canEditEasingForInterpolationFunction(effectPropStatus.interpolationFunction));
+        (0, studio_shared_1.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction));
 };
 const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayOffset, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);

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

@@ -29,6 +29,20 @@ export declare const getAssetElementFromPath: (assetPath: string) => {
     } | null;
     position: InsertableCompositionElementPosition | null;
 } | null;
+export declare const getAssetElementForDroppedFile: ({ fileType, src, }: {
+    fileType: FileType;
+    src: string;
+}) => {
+    type: "asset";
+    assetType: "animated-image" | "audio" | "gif" | "image" | "video";
+    src: string;
+    srcType: "remote" | "static";
+    dimensions: {
+        width: number;
+        height: number;
+    } | null;
+    position: InsertableCompositionElementPosition | null;
+} | null;
 export declare const getElementPositionForDrop: ({ dimensions, dropPosition, }: {
     dimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
@@ -38,6 +52,11 @@ export declare const getCompositionPositionForDrop: ({ compositionDimensions, de
     destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
 }) => InsertableCompositionElementPosition | null;
+export declare const getAssetPositionForDrop: ({ assetDimensions, destinationDimensions, dropPosition, }: {
+    assetDimensions: Dimensions | null;
+    destinationDimensions: Dimensions | null;
+    dropPosition: InsertElementDropPosition | null;
+}) => InsertableCompositionElementPosition | null;
 export declare const getComponentDimensions: (component: {
     componentName: string;
     dimensions?: import("@remotion/studio-shared").ComponentDimensions | undefined;
@@ -48,15 +67,17 @@ export declare const getComponentDimensions: (component: {
 export declare const pickFilesToImport: ({ multiple, }?: {
     readonly multiple?: boolean | undefined;
 }) => Promise<File[]>;
-export declare const importAssets: ({ compositionFile, compositionId, dropPosition, files, }: {
+export declare const importAssets: ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, }: {
     compositionFile: string;
     compositionId: string;
+    destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
     files: File[];
 }) => Promise<void>;
-export declare const importRemoteAsset: ({ compositionFile, compositionId, dropPosition, url, }: {
+export declare const importRemoteAsset: ({ compositionFile, compositionId, destinationDimensions, dropPosition, url, }: {
     compositionFile: string;
     compositionId: string;
+    destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
     url: string;
 }) => Promise<void>;
@@ -65,10 +86,11 @@ export declare const insertRemoteAudio: ({ compositionFile, compositionId, url,
     compositionId: string;
     url: string;
 }) => Promise<void>;
-export declare const insertExistingAssets: ({ assetPaths, compositionFile, compositionId, dropPosition, }: {
+export declare const insertExistingAssets: ({ assetPaths, compositionFile, compositionId, destinationDimensions, dropPosition, }: {
     assetPaths: string[];
     compositionFile: string;
     compositionId: string;
+    destinationDimensions: Dimensions | null;
     dropPosition: InsertElementDropPosition | null;
 }) => Promise<void>;
 export declare const insertComponent: ({ component, compositionFile, compositionId, dropPosition, }: {

package/dist/components/import-assets.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertElement = exports.insertComposition = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = exports.getCompositionPositionForDrop = exports.getElementPositionForDrop = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
+exports.insertElement = exports.insertComposition = exports.insertComponent = exports.insertExistingAssets = exports.insertRemoteAudio = exports.importRemoteAsset = exports.importAssets = exports.pickFilesToImport = exports.getComponentDimensions = exports.getAssetPositionForDrop = exports.getCompositionPositionForDrop = exports.getElementPositionForDrop = exports.getAssetElementForDroppedFile = 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");
@@ -11,6 +11,16 @@ const install_required_package_1 = require("../helpers/install-required-package"
 const call_api_1 = require("./call-api");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const getAssetElement = ({ fileType, src, }) => {
+    if (fileType.type === 'webp' && fileType.animated) {
+        return {
+            type: 'asset',
+            assetType: 'animated-image',
+            src,
+            srcType: 'static',
+            dimensions: fileType.dimensions,
+            position: null,
+        };
+    }
     if (fileType.type === 'png' ||
         fileType.type === 'jpeg' ||
         fileType.type === 'webp' ||
@@ -82,7 +92,7 @@ const getAssetElementFromPath = (assetPath) => {
     if (!extension || extension === assetPath.toLowerCase()) {
         return null;
     }
-    if (['png', 'jpg', 'jpeg', 'webp', 'bmp'].includes(extension)) {
+    if (['png', 'jpg', 'jpeg', 'webp', 'bmp', 'svg'].includes(extension)) {
         return {
             type: 'asset',
             assetType: 'image',
@@ -135,6 +145,17 @@ const getAssetElementFromPath = (assetPath) => {
     return null;
 };
 exports.getAssetElementFromPath = getAssetElementFromPath;
+const getAssetElementForDroppedFile = ({ fileType, src, }) => {
+    const detectedElement = (0, exports.getAssetElement)({ fileType, src });
+    if (detectedElement !== null) {
+        return detectedElement;
+    }
+    if (fileType.type !== 'unknown' || !src.toLowerCase().endsWith('.svg')) {
+        return null;
+    }
+    return (0, exports.getAssetElementFromPath)(src);
+};
+exports.getAssetElementForDroppedFile = getAssetElementForDroppedFile;
 const getAssetLabel = (element) => {
     if (element.type !== 'asset') {
         throw new Error('Expected asset element');
@@ -194,6 +215,16 @@ const getCompositionPositionForDrop = ({ compositionDimensions, destinationDimen
     });
 };
 exports.getCompositionPositionForDrop = getCompositionPositionForDrop;
+const getAssetPositionForDrop = ({ assetDimensions, destinationDimensions, dropPosition, }) => {
+    if (assetDimensions !== null &&
+        destinationDimensions !== null &&
+        assetDimensions.width === destinationDimensions.width &&
+        assetDimensions.height === destinationDimensions.height) {
+        return null;
+    }
+    return getCenteredPosition({ dimensions: assetDimensions, dropPosition });
+};
+exports.getAssetPositionForDrop = getAssetPositionForDrop;
 const getComponentPropNumber = (props, name) => {
     const prop = props.find((p) => p.name === name);
     return typeof (prop === null || prop === void 0 ? void 0 : prop.value) === 'number' ? prop.value : null;
@@ -237,6 +268,10 @@ const getVideoDimensions = async (src) => {
     return { width: metadata.width, height: metadata.height };
 };
 const getFileDimensions = async ({ file, fileType, }) => {
+    if (fileType.type === 'unknown' && file.name.toLowerCase().endsWith('.svg')) {
+        const objectUrl = URL.createObjectURL(file);
+        return getImageDimensions({ revokeObjectUrl: true, src: objectUrl });
+    }
     if (fileType.type === 'wav' ||
         fileType.type === 'mp3' ||
         fileType.type === 'aac' ||
@@ -274,7 +309,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', 'apng'].includes(extension)) {
+        ['png', 'jpg', 'jpeg', 'webp', 'bmp', 'gif', 'apng', 'svg'].includes(extension)) {
         return getImageDimensions({ revokeObjectUrl: false, src });
     }
     if (extension &&
@@ -302,7 +337,7 @@ const getStaticAssetDimensionsOrNull = async (assetPath) => {
 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') {
+    if (extension !== 'png' && extension !== 'apng' && extension !== 'webp') {
         return null;
     }
     try {
@@ -388,7 +423,7 @@ const insertAssetElement = async ({ compositionFile, compositionId, element, })
 const downloadRemoteAsset = (url) => {
     return (0, call_api_1.callApi)('/api/download-remote-asset', { url });
 };
-const importAssets = async ({ compositionFile, compositionId, dropPosition, files, }) => {
+const importAssets = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, files, }) => {
     var _a;
     if (files.length === 0) {
         return;
@@ -418,7 +453,7 @@ const importAssets = async ({ compositionFile, compositionId, dropPosition, file
         for (const file of files) {
             const contents = await file.arrayBuffer();
             const fileType = (0, studio_shared_1.detectFileType)(new Uint8Array(contents));
-            const element = (0, exports.getAssetElement)({
+            const element = (0, exports.getAssetElementForDroppedFile)({
                 fileType,
                 src: file.name,
             });
@@ -436,14 +471,16 @@ const importAssets = async ({ compositionFile, compositionId, dropPosition, file
                 addedStaticFiles.push(file.name);
             }
             const dimensions = await getFileDimensionsOrNull({ file, fileType });
+            const resolvedDimensions = (_a = element.dimensions) !== null && _a !== void 0 ? _a : dimensions;
             const inserted = await insertAssetElement({
                 compositionFile,
                 compositionId,
                 element: {
                     ...element,
-                    dimensions: (_a = element.dimensions) !== null && _a !== void 0 ? _a : dimensions,
-                    position: getCenteredPosition({
-                        dimensions,
+                    dimensions: resolvedDimensions,
+                    position: (0, exports.getAssetPositionForDrop)({
+                        assetDimensions: resolvedDimensions,
+                        destinationDimensions,
                         dropPosition,
                     }),
                 },
@@ -463,7 +500,7 @@ const importAssets = async ({ compositionFile, compositionId, dropPosition, file
     }
 };
 exports.importAssets = importAssets;
-const importRemoteAsset = async ({ compositionFile, compositionId, dropPosition, url, }) => {
+const importRemoteAsset = async ({ compositionFile, compositionId, destinationDimensions, dropPosition, url, }) => {
     try {
         const { assetPath, created, element } = await downloadRemoteAsset(url);
         if (created) {
@@ -478,8 +515,9 @@ const importRemoteAsset = async ({ compositionFile, compositionId, dropPosition,
             compositionId,
             element: {
                 ...element,
-                position: getCenteredPosition({
-                    dimensions: element.dimensions,
+                position: (0, exports.getAssetPositionForDrop)({
+                    assetDimensions: element.dimensions,
+                    destinationDimensions,
                     dropPosition,
                 }),
             },
@@ -523,7 +561,7 @@ const insertRemoteAudio = async ({ compositionFile, compositionId, url, }) => {
     }
 };
 exports.insertRemoteAudio = insertRemoteAudio;
-const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId, dropPosition, }) => {
+const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId, destinationDimensions, dropPosition, }) => {
     var _a;
     if (assetPaths.length === 0) {
         return;
@@ -544,8 +582,9 @@ const insertExistingAssets = async ({ assetPaths, compositionFile, compositionId
                 element: {
                     ...element,
                     dimensions,
-                    position: getCenteredPosition({
-                        dimensions,
+                    position: (0, exports.getAssetPositionForDrop)({
+                        assetDimensions: dimensions,
+                        destinationDimensions,
                         dropPosition,
                     }),
                 },

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

@@ -48,10 +48,6 @@ export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlK
     readonly metaKey: boolean;
     readonly ctrlKey: boolean;
 }) => TimelineSelectionInteraction;
-export declare const getOutlineDoubleClickAction: ({ button, canOpenInEditor, }: {
-    readonly button: number;
-    readonly canOpenInEditor: boolean;
-}) => "open-in-editor" | null;
 type SelectedEffectFields = {
     allFields: boolean;
     fieldKeys: Set<string>;
@@ -62,9 +58,10 @@ type SelectedTransformOriginInfo = {
     readonly displayFrame: number | null;
 };
 export declare const getSelectedTransformOriginInfo: (selectedItems: readonly TimelineSelection[]) => SelectedTransformOriginInfo | null;
-export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, }: {
+export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, compositions, }: {
     readonly sequences: readonly TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly compositions?: readonly import("remotion").AnyComposition[] | undefined;
 }) => SequenceWithSelectedOutline[];
 export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineTarget[]) => SelectedOutline[];
 export declare const outlinesAreEqual: (a: readonly SelectedOutline[], b: readonly SelectedOutline[]) => boolean;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedTransformOriginInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineDoubleClickAction = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
+exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedTransformOriginInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const colors_1 = require("../helpers/colors");
 const get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
@@ -220,8 +220,6 @@ const getOutlineSelectionInteraction = ({ shiftKey, metaKey, ctrlKey, }) => ({
     toggleKey: metaKey || ctrlKey,
 });
 exports.getOutlineSelectionInteraction = getOutlineSelectionInteraction;
-const getOutlineDoubleClickAction = ({ button, canOpenInEditor, }) => button === 0 && canOpenInEditor ? 'open-in-editor' : null;
-exports.getOutlineDoubleClickAction = getOutlineDoubleClickAction;
 const getKeyframeOrEasingField = (item) => {
     if (item.type !== 'keyframe' && item.type !== 'easing') {
         return null;
@@ -308,10 +306,11 @@ const getSelectedTransformOriginInfo = (selectedItems) => {
     };
 };
 exports.getSelectedTransformOriginInfo = getSelectedTransformOriginInfo;
-const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths, }) => {
+const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths, compositions = [], }) => {
     return (0, calculate_timeline_1.calculateTimeline)({
         sequences: [...sequences],
         overrideIdsToNodePaths,
+        compositions,
     })
         .filter((track) => {
         if (track.nodePathInfo === null) {