@remotion/studio 4.0.481 → 4.0.483

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getElementDragData = exports.hasElementDragType = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const hasElementDragType = (dataTransfer) => {
+    var _a;
+    return Array.from((_a = dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.types) !== null && _a !== void 0 ? _a : []).includes(studio_shared_1.ELEMENT_DRAG_MIME_TYPE);
+};
+exports.hasElementDragType = hasElementDragType;
+const getElementDragData = (dataTransfer) => {
+    if (!dataTransfer) {
+        return null;
+    }
+    for (const type of [
+        studio_shared_1.ELEMENT_DRAG_MIME_TYPE,
+        'application/json',
+        'text/plain',
+    ]) {
+        const raw = dataTransfer.getData(type);
+        if (!raw) {
+            continue;
+        }
+        const parsed = (0, studio_shared_1.parseElementDragData)(raw);
+        if (parsed) {
+            return parsed;
+        }
+    }
+    return null;
+};
+exports.getElementDragData = getElementDragData;

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

@@ -72,3 +72,14 @@ export declare const insertComponent: ({ component, compositionFile, composition
     compositionId: string;
     dropPosition: InsertElementDropPosition | null;
 }) => Promise<void>;
+export declare const insertElement: ({ compositionFile, compositionId, dropPosition, element, }: {
+    compositionFile: string;
+    compositionId: string;
+    dropPosition: InsertElementDropPosition | null;
+    element: {
+        slug: string;
+        displayName: string;
+        sourceCode: string;
+        dimensions: import("@remotion/studio-shared").ComponentDimensions;
+    };
+}) => Promise<void>;

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.getComponentDimensions = exports.getAssetElementFromPath = exports.getAssetElement = void 0;
+exports.insertElement = 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");
@@ -569,3 +569,25 @@ const insertComponent = async ({ component, compositionFile, compositionId, drop
     }
 };
 exports.insertComponent = insertComponent;
+const insertElement = async ({ compositionFile, compositionId, dropPosition, element, }) => {
+    try {
+        const response = await (0, call_api_1.callApi)('/api/insert-element', {
+            compositionFile,
+            compositionId,
+            element,
+            position: getCenteredPosition({
+                dimensions: element.dimensions,
+                dropPosition,
+            }),
+        });
+        if (!response.success) {
+            (0, NotificationCenter_1.showNotification)(`Could not add Element: ${response.reason}`, 4000);
+            return;
+        }
+        (0, NotificationCenter_1.showNotification)(`Added ${element.displayName} to source file`, 2000);
+    }
+    catch (error) {
+        (0, NotificationCenter_1.showNotification)(`Could not add Element: ${error instanceof Error ? error.message : String(error)}`, 4000);
+    }
+};
+exports.insertElement = insertElement;

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

@@ -1,13 +1,35 @@
 import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, GetEffectDragOverrides, PropStatuses, InteractivitySchemaField, SequencePropsSubscriptionKey, InteractivitySchema, TSequence } from 'remotion';
 import { type OutlinePoint } from './selected-outline-geometry';
 export type UvCoordinate = readonly [number, number];
+type UvEllipseDimensions = {
+    readonly width: number;
+    readonly height: number;
+};
 export type UvCoordinateFieldSchema = Extract<InteractivitySchemaField, {
     type: 'uv-coordinate';
 }>;
+export type NumericUvEllipseFieldSchema = Extract<InteractivitySchemaField, {
+    type: 'number' | 'rotation-degrees';
+}>;
+export type UvEllipseControlField = {
+    readonly fieldKey: string;
+    readonly fieldSchema: NumericUvEllipseFieldSchema;
+    readonly fieldDefault: number | null | undefined;
+    readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
+    readonly value: number;
+};
+export type UvEllipseControls = {
+    readonly width: UvEllipseControlField;
+    readonly height: UvEllipseControlField;
+    readonly rotation: UvEllipseControlField | null;
+    readonly innerScale: UvEllipseControlField | null;
+};
 export type SelectedOutlineUvHandle = {
     readonly clientId: string;
     readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
     readonly effectIndex: number;
+    readonly effectValues: Record<string, unknown>;
+    readonly ellipseControls: UvEllipseControls | null;
     readonly fieldDefault: UvCoordinate | undefined;
     readonly fieldKey: string;
     readonly fieldSchema: UvCoordinateFieldSchema;
@@ -17,12 +39,49 @@ export type SelectedOutlineUvHandle = {
     readonly sourceFrame: number;
     readonly value: UvCoordinate;
 };
-type UvConnectionHandle = Pick<SelectedOutlineUvHandle, 'effectIndex' | 'fieldKey' | 'fieldSchema' | 'value'>;
+type UvConnectionHandle = Pick<SelectedOutlineUvHandle, 'effectIndex' | 'fieldKey' | 'fieldSchema' | 'value'> & {
+    readonly effectValues?: Record<string, unknown>;
+    readonly ellipseControls?: UvEllipseControls | null;
+};
 type UvHandleConnectionLine = {
     readonly key: string;
     readonly from: OutlinePoint;
     readonly to: OutlinePoint;
 };
+type UvHandleConnectionEllipse = {
+    readonly key: string;
+    readonly points: readonly OutlinePoint[];
+};
+export type UvEllipseResizeAxis = 'width' | 'height';
+export type UvEllipseResizeControl = {
+    readonly key: string;
+    readonly axis: UvEllipseResizeAxis;
+    readonly field: UvEllipseControlField;
+    readonly position: OutlinePoint;
+    readonly cursor: string;
+};
+export type UvEllipseRotationControl = {
+    readonly key: string;
+    readonly field: UvEllipseControlField;
+    readonly position: OutlinePoint;
+    readonly cursor: string;
+};
+export type UvEllipseStartControl = {
+    readonly key: string;
+    readonly field: UvEllipseControlField;
+    readonly position: OutlinePoint;
+    readonly cursor: string;
+};
+export type UvEllipseInteractiveControls = {
+    readonly handle: SelectedOutlineUvHandle;
+    readonly center: OutlinePoint;
+    readonly width: number;
+    readonly height: number;
+    readonly rotation: number;
+    readonly resize: readonly UvEllipseResizeControl[];
+    readonly rotationControl: UvEllipseRotationControl | null;
+    readonly startControl: UvEllipseStartControl | null;
+};
 type SelectedEffectFields = {
     readonly allFields: boolean;
     readonly fieldKeys: ReadonlySet<string>;
@@ -33,9 +92,20 @@ export declare const getUvHandleConnectionLines: ({ handles, points, }: {
     readonly handles: readonly UvConnectionHandle[];
     readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
 }) => UvHandleConnectionLine[];
+export declare const getUvHandleConnectionEllipses: ({ handles, dimensions, points, }: {
+    readonly handles: readonly UvConnectionHandle[];
+    readonly dimensions?: UvEllipseDimensions | null | undefined;
+    readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
+}) => UvHandleConnectionEllipse[];
+export declare const getUvEllipseInteractiveControls: ({ handles, dimensions, points, }: {
+    readonly handles: readonly SelectedOutlineUvHandle[];
+    readonly dimensions?: UvEllipseDimensions | null | undefined;
+    readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
+}) => UvEllipseInteractiveControls[];
 export declare const getUvCoordinateForPoint: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], point: OutlinePoint) => UvCoordinate;
 export declare function constrainUv(value: UvCoordinate, schema: UvCoordinateFieldSchema): UvCoordinate;
 export declare function roundUvCoordinate(value: UvCoordinate, schema: UvCoordinateFieldSchema): UvCoordinate;
+export declare const roundNumericUvEllipseValue: (value: number, schema: NumericUvEllipseFieldSchema) => number;
 export declare const getSelectedUvHandles: ({ propStatuses, clientId, getEffectDragOverrides, nodePath, selectedEffects, sequence, sourceFrame, }: {
     readonly propStatuses: PropStatuses;
     readonly clientId: string | null;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSelectedUvHandles = exports.getUvCoordinateForPoint = exports.getUvHandleConnectionLines = exports.getUvHandlePosition = exports.tuplesEqual = void 0;
+exports.getSelectedUvHandles = exports.roundNumericUvEllipseValue = exports.getUvCoordinateForPoint = exports.getUvEllipseInteractiveControls = exports.getUvHandleConnectionEllipses = exports.getUvHandleConnectionLines = exports.getUvHandlePosition = exports.tuplesEqual = void 0;
 exports.constrainUv = constrainUv;
 exports.roundUvCoordinate = roundUvCoordinate;
 const remotion_1 = require("remotion");
@@ -14,6 +14,76 @@ const parseUvCoordinate = (value) => {
     }
     return null;
 };
+const parseFiniteNumber = (value) => {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return value;
+    }
+    return null;
+};
+const getResizeCursor = (degrees) => {
+    const normalizedDegrees = ((degrees % 180) + 180) % 180;
+    const snappedDegrees = Math.round(normalizedDegrees / 45) * 45;
+    if (snappedDegrees === 0 || snappedDegrees === 180) {
+        return 'ew-resize';
+    }
+    if (snappedDegrees === 45) {
+        return 'nwse-resize';
+    }
+    if (snappedDegrees === 90) {
+        return 'ns-resize';
+    }
+    return 'nesw-resize';
+};
+const getRotatedEllipseUv = ({ center, dimensions, width, height, rotation, angle, radiusOffset = 0, }) => {
+    const rotationRadians = (rotation / 180) * Math.PI;
+    const cosRotation = Math.cos(rotationRadians);
+    const sinRotation = Math.sin(rotationRadians);
+    if (dimensions !== null &&
+        dimensions !== undefined &&
+        dimensions.width > 0 &&
+        dimensions.height > 0) {
+        const radiusX = width * dimensions.width * 0.5 + radiusOffset * dimensions.width;
+        const radiusY = height * dimensions.height * 0.5 + radiusOffset * dimensions.height;
+        const pixelLocalX = Math.cos(angle) * radiusX;
+        const pixelLocalY = Math.sin(angle) * radiusY;
+        const rotatedX = pixelLocalX * cosRotation - pixelLocalY * sinRotation;
+        const rotatedY = pixelLocalX * sinRotation + pixelLocalY * cosRotation;
+        return [
+            center[0] + rotatedX / dimensions.width,
+            center[1] + rotatedY / dimensions.height,
+        ];
+    }
+    const radiusU = width / 2 + radiusOffset;
+    const radiusV = height / 2 + radiusOffset;
+    const localX = Math.cos(angle) * radiusU;
+    const localY = Math.sin(angle) * radiusV;
+    return [
+        center[0] + localX * cosRotation - localY * sinRotation,
+        center[1] + localX * sinRotation + localY * cosRotation,
+    ];
+};
+const getUvEllipseValues = (handle) => {
+    var _a, _b, _c, _d, _e, _f;
+    var _g, _h, _j, _k;
+    const { visual } = handle.fieldSchema;
+    if ((visual === null || visual === void 0 ? void 0 : visual.type) !== 'ellipse') {
+        return null;
+    }
+    const ellipseMetadata = visual;
+    const controls = handle.ellipseControls;
+    const width = (_g = controls === null || controls === void 0 ? void 0 : controls.width.value) !== null && _g !== void 0 ? _g : parseFiniteNumber((_a = handle.effectValues) === null || _a === void 0 ? void 0 : _a[ellipseMetadata.width]);
+    const height = (_h = controls === null || controls === void 0 ? void 0 : controls.height.value) !== null && _h !== void 0 ? _h : parseFiniteNumber((_b = handle.effectValues) === null || _b === void 0 ? void 0 : _b[ellipseMetadata.height]);
+    const rotation = ellipseMetadata.rotation
+        ? ((_j = (_c = controls === null || controls === void 0 ? void 0 : controls.rotation) === null || _c === void 0 ? void 0 : _c.value) !== null && _j !== void 0 ? _j : parseFiniteNumber((_d = handle.effectValues) === null || _d === void 0 ? void 0 : _d[ellipseMetadata.rotation]))
+        : 0;
+    const innerScale = ellipseMetadata.innerScale
+        ? ((_k = (_e = controls === null || controls === void 0 ? void 0 : controls.innerScale) === null || _e === void 0 ? void 0 : _e.value) !== null && _k !== void 0 ? _k : parseFiniteNumber((_f = handle.effectValues) === null || _f === void 0 ? void 0 : _f[ellipseMetadata.innerScale]))
+        : null;
+    if (width === null || height === null || rotation === null) {
+        return null;
+    }
+    return { width, height, rotation, innerScale };
+};
 const tuplesEqual = (left, right) => {
     if (!Array.isArray(left) || left.length !== 2) {
         return false;
@@ -79,24 +149,24 @@ const getUvHandleConnectionLines = ({ handles, points, }) => {
     const seenPairs = new Set();
     const lines = [];
     for (const handle of handles) {
-        const targetFieldKey = handle.fieldSchema.lineTo;
-        if (targetFieldKey === undefined || targetFieldKey === handle.fieldKey) {
+        const { visual } = handle.fieldSchema;
+        if ((visual === null || visual === void 0 ? void 0 : visual.type) !== 'line' || visual.to === handle.fieldKey) {
             continue;
         }
-        const target = handlesByField.get(`${handle.effectIndex}\u0000${targetFieldKey}`);
+        const target = handlesByField.get(`${handle.effectIndex}\u0000${visual.to}`);
         if (target === undefined) {
             continue;
         }
         const pairKey = [
             handle.effectIndex,
-            ...[handle.fieldKey, targetFieldKey].sort(),
+            ...[handle.fieldKey, visual.to].sort(),
         ].join('\u0000');
         if (seenPairs.has(pairKey)) {
             continue;
         }
         seenPairs.add(pairKey);
         lines.push({
-            key: `${handle.effectIndex}-${handle.fieldKey}-${targetFieldKey}`,
+            key: `${handle.effectIndex}-${handle.fieldKey}-${visual.to}`,
             from: (0, exports.getUvHandlePosition)(points, handle.value),
             to: (0, exports.getUvHandlePosition)(points, target.value),
         });
@@ -104,6 +174,169 @@ const getUvHandleConnectionLines = ({ handles, points, }) => {
     return lines;
 };
 exports.getUvHandleConnectionLines = getUvHandleConnectionLines;
+const getUvHandleConnectionEllipses = ({ handles, dimensions, points, }) => {
+    var _a, _b;
+    const ellipses = [];
+    for (const handle of handles) {
+        const { visual } = handle.fieldSchema;
+        if ((visual === null || visual === void 0 ? void 0 : visual.type) === 'ellipse') {
+            const ellipseMetadata = visual;
+            const ellipseValues = getUvEllipseValues(handle);
+            if (ellipseValues === null) {
+                continue;
+            }
+            const rotatedEllipsePoints = [];
+            for (let i = 0; i <= 64; i++) {
+                const angle = (i / 64) * Math.PI * 2;
+                const uv = getRotatedEllipseUv({
+                    center: handle.value,
+                    dimensions,
+                    width: ellipseValues.width,
+                    height: ellipseValues.height,
+                    rotation: ellipseValues.rotation,
+                    angle,
+                });
+                rotatedEllipsePoints.push((0, exports.getUvHandlePosition)(points, uv));
+            }
+            ellipses.push({
+                key: [
+                    handle.effectIndex,
+                    handle.fieldKey,
+                    ellipseMetadata.width,
+                    ellipseMetadata.height,
+                    (_a = ellipseMetadata.rotation) !== null && _a !== void 0 ? _a : 'rotation',
+                ].join('-'),
+                points: rotatedEllipsePoints,
+            });
+            if (ellipseMetadata.innerScale !== undefined &&
+                ellipseValues.innerScale !== null) {
+                const startEllipsePoints = [];
+                for (let i = 0; i <= 64; i++) {
+                    const angle = (i / 64) * Math.PI * 2;
+                    const uv = getRotatedEllipseUv({
+                        center: handle.value,
+                        dimensions,
+                        width: ellipseValues.width * ellipseValues.innerScale,
+                        height: ellipseValues.height * ellipseValues.innerScale,
+                        rotation: ellipseValues.rotation,
+                        angle,
+                    });
+                    startEllipsePoints.push((0, exports.getUvHandlePosition)(points, uv));
+                }
+                ellipses.push({
+                    key: [
+                        handle.effectIndex,
+                        handle.fieldKey,
+                        ellipseMetadata.width,
+                        ellipseMetadata.height,
+                        (_b = ellipseMetadata.rotation) !== null && _b !== void 0 ? _b : 'rotation',
+                        ellipseMetadata.innerScale,
+                    ].join('-'),
+                    points: startEllipsePoints,
+                });
+            }
+            continue;
+        }
+    }
+    return ellipses;
+};
+exports.getUvHandleConnectionEllipses = getUvHandleConnectionEllipses;
+const getUvEllipseInteractiveControls = ({ handles, dimensions, points, }) => {
+    var _a;
+    const controls = [];
+    for (const handle of handles) {
+        if (((_a = handle.fieldSchema.visual) === null || _a === void 0 ? void 0 : _a.type) !== 'ellipse' ||
+            handle.ellipseControls === null ||
+            handle.ellipseControls === undefined) {
+            continue;
+        }
+        const ellipseValues = getUvEllipseValues(handle);
+        if (ellipseValues === null) {
+            continue;
+        }
+        const center = (0, exports.getUvHandlePosition)(points, handle.value);
+        const { rotation } = ellipseValues;
+        const widthPoint = (0, exports.getUvHandlePosition)(points, getRotatedEllipseUv({
+            center: handle.value,
+            dimensions,
+            width: ellipseValues.width,
+            height: 0,
+            rotation,
+            angle: 0,
+        }));
+        const heightPoint = (0, exports.getUvHandlePosition)(points, getRotatedEllipseUv({
+            center: handle.value,
+            dimensions,
+            width: 0,
+            height: ellipseValues.height,
+            rotation,
+            angle: Math.PI / 2,
+        }));
+        const rotationPoint = handle.ellipseControls.rotation === null
+            ? null
+            : (0, exports.getUvHandlePosition)(points, getRotatedEllipseUv({
+                center: handle.value,
+                dimensions,
+                width: 0,
+                height: Math.max(ellipseValues.height, 0.001),
+                rotation,
+                angle: Math.PI / 2,
+                radiusOffset: 0.08,
+            }));
+        const startPoint = handle.ellipseControls.innerScale === null ||
+            ellipseValues.innerScale === null
+            ? null
+            : (0, exports.getUvHandlePosition)(points, getRotatedEllipseUv({
+                center: handle.value,
+                dimensions,
+                width: ellipseValues.width * ellipseValues.innerScale,
+                height: 0,
+                rotation,
+                angle: 0,
+            }));
+        controls.push({
+            handle,
+            center,
+            width: ellipseValues.width,
+            height: ellipseValues.height,
+            rotation,
+            resize: [
+                {
+                    key: `${handle.effectIndex}-${handle.fieldKey}-width`,
+                    axis: 'width',
+                    field: handle.ellipseControls.width,
+                    position: widthPoint,
+                    cursor: getResizeCursor(rotation),
+                },
+                {
+                    key: `${handle.effectIndex}-${handle.fieldKey}-height`,
+                    axis: 'height',
+                    field: handle.ellipseControls.height,
+                    position: heightPoint,
+                    cursor: getResizeCursor(rotation + 90),
+                },
+            ],
+            rotationControl: handle.ellipseControls.rotation === null || rotationPoint === null
+                ? null
+                : {
+                    key: `${handle.effectIndex}-${handle.fieldKey}-rotation`,
+                    field: handle.ellipseControls.rotation,
+                    position: rotationPoint,
+                    cursor: getResizeCursor(rotation + 90),
+                },
+            startControl: handle.ellipseControls.innerScale === null || startPoint === null
+                ? null
+                : {
+                    key: `${handle.effectIndex}-${handle.fieldKey}-start`,
+                    field: handle.ellipseControls.innerScale,
+                    position: startPoint,
+                    cursor: getResizeCursor(rotation),
+                },
+        });
+    }
+    return controls;
+};
+exports.getUvEllipseInteractiveControls = getUvEllipseInteractiveControls;
 const vectorBetween = (from, to) => {
     return { x: to.x - from.x, y: to.y - from.y };
 };
@@ -178,6 +411,77 @@ function roundUvCoordinate(value, schema) {
         (0, timeline_field_utils_1.roundToDecimalPlaces)(value[1], decimalPlaces),
     ];
 }
+const roundNumericUvEllipseValue = (value, schema) => {
+    var _a, _b;
+    const min = (_a = schema.min) !== null && _a !== void 0 ? _a : -Infinity;
+    const max = (_b = schema.max) !== null && _b !== void 0 ? _b : Infinity;
+    const decimalPlaces = (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: schema.type === 'rotation-degrees' ? 1 : 3,
+        step: schema.step,
+    });
+    return (0, timeline_field_utils_1.roundToDecimalPlaces)((0, selected_outline_geometry_1.clamp)(value, min, max), decimalPlaces);
+};
+exports.roundNumericUvEllipseValue = roundNumericUvEllipseValue;
+const getNumericUvEllipseControlField = ({ activeSchema, effectStatus, effectValues, fieldKey, }) => {
+    const fieldSchema = activeSchema[fieldKey];
+    if ((fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) !== 'number' &&
+        (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) !== 'rotation-degrees') {
+        return null;
+    }
+    const propStatus = effectStatus.props[fieldKey];
+    if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'static' && (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'keyframed') {
+        return null;
+    }
+    const value = parseFiniteNumber(effectValues[fieldKey]);
+    if (value === null) {
+        return null;
+    }
+    return {
+        fieldKey,
+        fieldSchema,
+        fieldDefault: fieldSchema.default,
+        propStatus,
+        value,
+    };
+};
+const getUvEllipseControls = ({ activeSchema, effectStatus, effectValues, fieldSchema, }) => {
+    const { visual } = fieldSchema;
+    if ((visual === null || visual === void 0 ? void 0 : visual.type) !== 'ellipse') {
+        return null;
+    }
+    const width = getNumericUvEllipseControlField({
+        activeSchema,
+        effectStatus,
+        effectValues,
+        fieldKey: visual.width,
+    });
+    const height = getNumericUvEllipseControlField({
+        activeSchema,
+        effectStatus,
+        effectValues,
+        fieldKey: visual.height,
+    });
+    const rotation = visual.rotation === undefined
+        ? null
+        : getNumericUvEllipseControlField({
+            activeSchema,
+            effectStatus,
+            effectValues,
+            fieldKey: visual.rotation,
+        });
+    const innerScale = visual.innerScale === undefined
+        ? null
+        : getNumericUvEllipseControlField({
+            activeSchema,
+            effectStatus,
+            effectValues,
+            fieldKey: visual.innerScale,
+        });
+    if (width === null || height === null) {
+        return null;
+    }
+    return { width, height, rotation, innerScale };
+};
 const getSelectedUvHandles = ({ propStatuses, clientId, getEffectDragOverrides, nodePath, selectedEffects, sequence, sourceFrame, }) => {
     if (clientId === null || selectedEffects === undefined) {
         return [];
@@ -215,8 +519,9 @@ const getSelectedUvHandles = ({ propStatuses, clientId, getEffectDragOverrides,
                 shouldResortToDefaultValueIfUndefined: false,
             });
         });
+        const effectValues = {};
         for (const [fieldKey, fieldSchema] of Object.entries(activeSchema)) {
-            if (fieldSchema.type !== 'uv-coordinate') {
+            if (fieldSchema.type === 'hidden') {
                 continue;
             }
             const propStatus = effectStatus.props[fieldKey];
@@ -224,14 +529,24 @@ const getSelectedUvHandles = ({ propStatuses, clientId, getEffectDragOverrides,
                 (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'keyframed') {
                 continue;
             }
-            const dragOverrideValue = dragOverrides[fieldKey];
-            const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
+            effectValues[fieldKey] = remotion_1.Internals.getEffectiveVisualModeValue({
                 propStatus,
-                dragOverrideValue,
+                dragOverrideValue: dragOverrides[fieldKey],
                 defaultValue: fieldSchema.default,
                 frame: sourceFrame,
                 shouldResortToDefaultValueIfUndefined: true,
             });
+        }
+        for (const [fieldKey, fieldSchema] of Object.entries(activeSchema)) {
+            if (fieldSchema.type !== 'uv-coordinate') {
+                continue;
+            }
+            const propStatus = effectStatus.props[fieldKey];
+            if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'static' &&
+                (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'keyframed') {
+                continue;
+            }
+            const effectiveValue = effectValues[fieldKey];
             const value = parseUvCoordinate(effectiveValue);
             if (value === null) {
                 continue;
@@ -240,6 +555,13 @@ const getSelectedUvHandles = ({ propStatuses, clientId, getEffectDragOverrides,
                 clientId,
                 propStatus,
                 effectIndex,
+                effectValues,
+                ellipseControls: getUvEllipseControls({
+                    activeSchema,
+                    effectStatus,
+                    effectValues,
+                    fieldSchema,
+                }),
                 fieldDefault: fieldSchema.default,
                 fieldKey,
                 fieldSchema,