@remotion/studio 4.0.477 → 4.0.479

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

@@ -1,7 +1,15 @@
-import type { GetDragOverrides, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, DragOverrideValue, GetDragOverrides, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
 import { type OutlinePoint } from './selected-outline-geometry';
 import type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineRotationDragTarget, SelectedOutlineScaleDragState, SelectedOutlineScaleDragTarget, SelectedOutlineDragTarget } from './selected-outline-types';
+import { type UvCoordinate } from './selected-outline-uv';
 import type { SaveSequencePropChange } from './Timeline/save-sequence-prop';
+export declare const getSelectedOutlineActiveSchema: ({ schema, currentRuntimeValueDotNotation, dragOverrides, propStatus, frame, }: {
+    readonly schema: InteractivitySchema;
+    readonly currentRuntimeValueDotNotation: Record<string, unknown>;
+    readonly dragOverrides: Record<string, DragOverrideValue>;
+    readonly propStatus: Record<string, CanUpdateSequencePropStatus> | undefined;
+    readonly frame: number | null;
+}) => InteractivitySchema;
 export declare const getSelectedOutlineDragStates: ({ dragTargets, getDragOverrides, timelinePosition, }: {
     readonly dragTargets: readonly SelectedOutlineDragTarget[];
     readonly getDragOverrides: GetDragOverrides;
@@ -34,7 +42,7 @@ export type SelectedOutlineKeyframedDragChange = {
     readonly fieldKey: string;
     readonly sourceFrame: number;
     readonly value: unknown;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
     readonly clientId: string;
 };
 export type SelectedOutlineDragChange = SelectedOutlineStaticDragChange | SelectedOutlineKeyframedDragChange;
@@ -89,6 +97,11 @@ export declare const getSelectedOutlineRotationDragValues: ({ dragStates, rotati
     readonly dragStates: readonly SelectedOutlineRotationDragState[];
     readonly rotationDeltaDegrees: number;
 }) => Map<string, string>;
+export declare const selectedOutlineRotationSnapStepDegrees = 15;
+export declare const snapSelectedOutlineRotationDeltaDegrees: ({ dragStates, rotationDeltaDegrees, }: {
+    readonly dragStates: readonly SelectedOutlineRotationDragState[];
+    readonly rotationDeltaDegrees: number;
+}) => number;
 export declare const getSelectedOutlineRotationDragChanges: ({ dragStates, lastValues, }: {
     readonly dragStates: readonly SelectedOutlineRotationDragState[];
     readonly lastValues: ReadonlyMap<string, string>;
@@ -114,4 +127,33 @@ export declare const compensateTranslateForTransformOrigin: ({ startTranslate, d
     readonly scale: readonly [number, number];
 }) => readonly [number, number];
 export declare const uvsEqual: (left: readonly [number, number], right: readonly [number, number]) => boolean;
+export type SelectedOutlineTransformOriginLockedAxis = 'x' | 'y' | null;
+export declare const getSelectedOutlineTransformOriginLockedAxis: ({ axisLocked, dimensions, startUv, uv, }: {
+    readonly axisLocked: boolean;
+    readonly dimensions: {
+        readonly width: number;
+        readonly height: number;
+    };
+    readonly startUv: UvCoordinate;
+    readonly uv: UvCoordinate;
+}) => SelectedOutlineTransformOriginLockedAxis;
+export declare const applySelectedOutlineTransformOriginAxisLock: ({ lockedAxis, startUv, uv, }: {
+    readonly lockedAxis: SelectedOutlineTransformOriginLockedAxis;
+    readonly startUv: UvCoordinate;
+    readonly uv: UvCoordinate;
+}) => UvCoordinate;
+export declare const selectedOutlineUvSnapThresholdPx = 10;
+export declare const snapSelectedOutlineUv: ({ point, points, thresholdPx, uv, }: {
+    readonly point: OutlinePoint;
+    readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
+    readonly thresholdPx?: number | undefined;
+    readonly uv: UvCoordinate;
+}) => UvCoordinate;
+export declare const selectedOutlineTransformOriginSnapThresholdPx = 10;
+export declare const snapSelectedOutlineTransformOriginUv: ({ point, points, thresholdPx, uv, }: {
+    readonly point: OutlinePoint;
+    readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
+    readonly thresholdPx?: number | undefined;
+    readonly uv: UvCoordinate;
+}) => UvCoordinate;
 export {};

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

@@ -1,15 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.uvsEqual = exports.compensateTranslateForTransformOrigin = exports.parseCssRotationToRadians = exports.clearSelectedOutlineRotationDragOverrides = exports.clearSelectedOutlineScaleDragOverrides = exports.getSelectedOutlineKeyboardNudgeDirection = exports.clearSelectedOutlineDragOverrides = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragChanges = exports.isSelectedOutlineDragPastThreshold = exports.applySelectedOutlineDragAxisLock = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragStates = void 0;
+exports.snapSelectedOutlineTransformOriginUv = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.snapSelectedOutlineUv = exports.selectedOutlineUvSnapThresholdPx = exports.applySelectedOutlineTransformOriginAxisLock = exports.getSelectedOutlineTransformOriginLockedAxis = exports.uvsEqual = exports.compensateTranslateForTransformOrigin = exports.parseCssRotationToRadians = exports.clearSelectedOutlineRotationDragOverrides = exports.clearSelectedOutlineScaleDragOverrides = exports.getSelectedOutlineKeyboardNudgeDirection = exports.clearSelectedOutlineDragOverrides = exports.getSelectedOutlineRotationDragChanges = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineRotationSnapStepDegrees = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragChanges = exports.isSelectedOutlineDragPastThreshold = exports.applySelectedOutlineDragAxisLock = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragStates = exports.getSelectedOutlineActiveSchema = void 0;
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const selected_outline_geometry_1 = require("./selected-outline-geometry");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
 const selected_outline_types_1 = require("./selected-outline-types");
+const selected_outline_uv_1 = require("./selected-outline-uv");
 const timeline_field_utils_1 = require("./Timeline/timeline-field-utils");
 const timeline_rotation_utils_1 = require("./Timeline/timeline-rotation-utils");
 const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils");
 const TimelineScaleField_1 = require("./Timeline/TimelineScaleField");
+const getSelectedOutlineActiveSchema = ({ schema, currentRuntimeValueDotNotation, dragOverrides, propStatus, frame, }) => {
+    const { merged: valuesDotNotation } = remotion_1.Internals.computeEffectiveSchemaValuesDotNotation({
+        schema,
+        currentValue: currentRuntimeValueDotNotation,
+        overrideValues: dragOverrides,
+        propStatus,
+        frame,
+    });
+    return remotion_1.Internals.flattenActiveSchema(schema, (key) => valuesDotNotation[key]);
+};
+exports.getSelectedOutlineActiveSchema = getSelectedOutlineActiveSchema;
 const getSelectedOutlineDragStates = ({ dragTargets, getDragOverrides, timelinePosition, }) => {
     return dragTargets.map((target) => {
         var _a;
@@ -303,6 +315,18 @@ const getSelectedOutlineRotationDragValues = ({ dragStates, rotationDeltaDegrees
     }));
 };
 exports.getSelectedOutlineRotationDragValues = getSelectedOutlineRotationDragValues;
+exports.selectedOutlineRotationSnapStepDegrees = 15;
+const snapSelectedOutlineRotationDeltaDegrees = ({ dragStates, rotationDeltaDegrees, }) => {
+    const anchor = dragStates[0];
+    if (anchor === undefined) {
+        return rotationDeltaDegrees;
+    }
+    return (Math.round((anchor.startDegrees + rotationDeltaDegrees) /
+        exports.selectedOutlineRotationSnapStepDegrees) *
+        exports.selectedOutlineRotationSnapStepDegrees -
+        anchor.startDegrees);
+};
+exports.snapSelectedOutlineRotationDeltaDegrees = snapSelectedOutlineRotationDeltaDegrees;
 const getSelectedOutlineRotationDragChanges = ({ dragStates, lastValues, }) => {
     const changes = [];
     for (const dragState of dragStates) {
@@ -425,3 +449,52 @@ exports.compensateTranslateForTransformOrigin = compensateTranslateForTransformO
 const uvsEqual = (left, right) => Math.abs(left[0] - right[0]) < 0.000001 &&
     Math.abs(left[1] - right[1]) < 0.000001;
 exports.uvsEqual = uvsEqual;
+const getSelectedOutlineTransformOriginLockedAxis = ({ axisLocked, dimensions, startUv, uv, }) => {
+    if (!axisLocked) {
+        return null;
+    }
+    const deltaX = (uv[0] - startUv[0]) * dimensions.width;
+    const deltaY = (uv[1] - startUv[1]) * dimensions.height;
+    return Math.abs(deltaX) >= Math.abs(deltaY) ? 'x' : 'y';
+};
+exports.getSelectedOutlineTransformOriginLockedAxis = getSelectedOutlineTransformOriginLockedAxis;
+const applySelectedOutlineTransformOriginAxisLock = ({ lockedAxis, startUv, uv, }) => {
+    if (lockedAxis === 'x') {
+        return [uv[0], startUv[1]];
+    }
+    if (lockedAxis === 'y') {
+        return [startUv[0], uv[1]];
+    }
+    return uv;
+};
+exports.applySelectedOutlineTransformOriginAxisLock = applySelectedOutlineTransformOriginAxisLock;
+const selectedOutlineUvSnapTargets = [
+    [0, 0],
+    [0.5, 0],
+    [1, 0],
+    [1, 0.5],
+    [1, 1],
+    [0.5, 1],
+    [0, 1],
+    [0, 0.5],
+    [0.5, 0.5],
+];
+exports.selectedOutlineUvSnapThresholdPx = 10;
+const snapSelectedOutlineUv = ({ point, points, thresholdPx = exports.selectedOutlineUvSnapThresholdPx, uv, }) => {
+    var _a;
+    let best = null;
+    for (const snapUv of selectedOutlineUvSnapTargets) {
+        const snapPoint = (0, selected_outline_uv_1.getUvHandlePosition)(points, snapUv);
+        const distance = Math.hypot(point.x - snapPoint.x, point.y - snapPoint.y);
+        if (distance > thresholdPx) {
+            continue;
+        }
+        if (best === null || distance < best.distance) {
+            best = { distance, uv: snapUv };
+        }
+    }
+    return (_a = best === null || best === void 0 ? void 0 : best.uv) !== null && _a !== void 0 ? _a : uv;
+};
+exports.snapSelectedOutlineUv = snapSelectedOutlineUv;
+exports.selectedOutlineTransformOriginSnapThresholdPx = exports.selectedOutlineUvSnapThresholdPx;
+exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineUv;

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

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

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

@@ -1,7 +1,7 @@
-import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, GetEffectDragOverrides, PropStatuses, SequenceFieldSchema, SequencePropsSubscriptionKey, SequenceSchema, TSequence } from 'remotion';
+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];
-export type UvCoordinateFieldSchema = Extract<SequenceFieldSchema, {
+export type UvCoordinateFieldSchema = Extract<InteractivitySchemaField, {
     type: 'uv-coordinate';
 }>;
 export type SelectedOutlineUvHandle = {
@@ -11,8 +11,9 @@ export type SelectedOutlineUvHandle = {
     readonly fieldDefault: UvCoordinate | undefined;
     readonly fieldKey: string;
     readonly fieldSchema: UvCoordinateFieldSchema;
+    readonly isSelected: boolean;
     readonly nodePath: SequencePropsSubscriptionKey;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
     readonly sourceFrame: number;
     readonly value: UvCoordinate;
 };

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

@@ -196,6 +196,10 @@ const getSelectedUvHandles = ({ propStatuses, clientId, getEffectDragOverrides,
         if (effectStatus.type !== 'can-update-effect') {
             continue;
         }
+        const shouldShowUvHandles = selectedFields.allFields || selectedFields.fieldKeys.size > 0;
+        if (!shouldShowUvHandles) {
+            continue;
+        }
         const dragOverrides = getEffectDragOverrides(nodePath, effectIndex);
         const activeSchema = remotion_1.Internals.flattenActiveSchema(effect.schema, (key) => {
             const propStatus = effectStatus.props[key];
@@ -212,8 +216,7 @@ const getSelectedUvHandles = ({ propStatuses, clientId, getEffectDragOverrides,
             });
         });
         for (const [fieldKey, fieldSchema] of Object.entries(activeSchema)) {
-            if (fieldSchema.type !== 'uv-coordinate' ||
-                (!selectedFields.allFields && !selectedFields.fieldKeys.has(fieldKey))) {
+            if (fieldSchema.type !== 'uv-coordinate') {
                 continue;
             }
             const propStatus = effectStatus.props[fieldKey];
@@ -240,6 +243,7 @@ const getSelectedUvHandles = ({ propStatuses, clientId, getEffectDragOverrides,
                 fieldDefault: fieldSchema.default,
                 fieldKey,
                 fieldSchema,
+                isSelected: selectedFields.fieldKeys.has(fieldKey),
                 nodePath,
                 schema: effect.schema,
                 sourceFrame,

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

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