@remotion/studio 4.0.478 → 4.0.479

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addEffectFromDragData = exports.getEffectDragData = exports.hasExplicitEffectDragType = exports.hasEffectDragType = void 0;
+exports.addEffectToSequence = exports.addEffectFromDragData = exports.getEffectDragData = exports.hasExplicitEffectDragType = exports.hasEffectDragType = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const install_required_package_1 = require("../helpers/install-required-package");
 const call_api_1 = require("./call-api");
@@ -47,20 +47,29 @@ const getEffectDragData = (dataTransfer) => {
     return null;
 };
 exports.getEffectDragData = getEffectDragData;
-const addEffectFromDragData = async ({ clientId, dragData, fileName, nodePath, }) => {
+const addEffectFromDragData = ({ clientId, dragData, fileName, nodePath, }) => {
+    return (0, exports.addEffectToSequence)({
+        clientId,
+        effect: dragData.effect,
+        fileName,
+        nodePath,
+    });
+};
+exports.addEffectFromDragData = addEffectFromDragData;
+const addEffectToSequence = async ({ clientId, effect, fileName, nodePath, }) => {
     try {
-        const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(dragData.effect.importPath);
+        const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(effect.importPath);
         await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [requiredPackage] : []);
         const result = await (0, call_api_1.callApi)('/api/add-effect', {
             fileName,
             sequenceNodePath: nodePath,
-            effectName: dragData.effect.name,
-            effectImportPath: dragData.effect.importPath,
-            effectConfig: dragData.effect.config,
+            effectName: effect.name,
+            effectImportPath: effect.importPath,
+            effectConfig: effect.config,
             clientId,
         });
         if (result.success) {
-            (0, NotificationCenter_1.showNotification)(`Added ${dragData.effect.name}()`, 2000);
+            (0, NotificationCenter_1.showNotification)(`Added ${effect.name}()`, 2000);
         }
         else {
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);
@@ -70,4 +79,4 @@ const addEffectFromDragData = async ({ clientId, dragData, fileName, nodePath, }
         (0, NotificationCenter_1.showNotification)(err.message, 4000);
     }
 };
-exports.addEffectFromDragData = addEffectFromDragData;
+exports.addEffectToSequence = addEffectToSequence;

package/dist/components/effect-picker-search.d.ts

@@ -0,0 +1,5 @@
+import type { EffectCatalogItem } from '@remotion/studio-shared';
+export declare const filterEffectCatalog: ({ items, query, }: {
+    readonly items: readonly EffectCatalogItem[];
+    readonly query: string;
+}) => EffectCatalogItem[];

package/dist/components/effect-picker-search.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterEffectCatalog = void 0;
+const normalize = (value) => value.trim().toLowerCase();
+const compact = (value) => normalize(value).replace(/[^a-z0-9]/g, '');
+const fuzzyMatches = (query, value) => {
+    let index = -1;
+    for (const character of query) {
+        index = value.indexOf(character, index + 1);
+        if (index === -1) {
+            return false;
+        }
+    }
+    return true;
+};
+const getMatchScore = (item, query) => {
+    const normalizedQuery = normalize(query);
+    const compactQuery = compact(query);
+    if (normalizedQuery.length === 0) {
+        return 0;
+    }
+    const label = normalize(item.label);
+    const name = normalize(item.effect.name);
+    const primary = [label, name];
+    const compactPrimary = primary.map(compact);
+    if (primary.some((field) => field === normalizedQuery)) {
+        return 0;
+    }
+    if (compactQuery.length > 0) {
+        if (compactPrimary.some((field) => field === compactQuery)) {
+            return 1;
+        }
+        if (compactPrimary.some((field) => field.startsWith(compactQuery))) {
+            return 2;
+        }
+    }
+    if (primary.some((field) => field.startsWith(normalizedQuery))) {
+        return 2;
+    }
+    if (compactQuery.length > 0) {
+        if (compactPrimary.some((field) => field.includes(compactQuery))) {
+            return 3;
+        }
+    }
+    if (primary.some((field) => field.includes(normalizedQuery))) {
+        return 3;
+    }
+    const importPath = normalize(item.effect.importPath);
+    if (importPath.includes(normalizedQuery) ||
+        (compactQuery.length > 0 && compact(importPath).includes(compactQuery))) {
+        return 4;
+    }
+    const secondary = [normalize(item.category), normalize(item.description)];
+    const compactSecondary = secondary.map(compact);
+    if (secondary.some((field) => field.includes(normalizedQuery)) ||
+        (compactQuery.length > 0 &&
+            compactSecondary.some((field) => field.includes(compactQuery)))) {
+        return 5;
+    }
+    if (compactQuery.length > 0 &&
+        compactPrimary.some((field) => fuzzyMatches(compactQuery, field))) {
+        return 6;
+    }
+    return null;
+};
+const filterEffectCatalog = ({ items, query, }) => {
+    return items
+        .map((item, index) => ({
+        item,
+        index,
+        score: getMatchScore(item, query),
+    }))
+        .filter((candidate) => candidate.score !== null)
+        .sort((a, b) => a.score - b.score || a.index - b.index)
+        .map(({ item }) => item);
+};
+exports.filterEffectCatalog = filterEffectCatalog;

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

@@ -1,8 +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;
@@ -35,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;
@@ -90,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>;
@@ -130,6 +142,13 @@ export declare const applySelectedOutlineTransformOriginAxisLock: ({ lockedAxis,
     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;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.snapSelectedOutlineTransformOriginUv = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.applySelectedOutlineTransformOriginAxisLock = exports.getSelectedOutlineTransformOriginLockedAxis = exports.uvsEqual = exports.compensateTranslateForTransformOrigin = exports.parseCssRotationToRadians = exports.clearSelectedOutlineRotationDragOverrides = exports.clearSelectedOutlineScaleDragOverrides = exports.getSelectedOutlineKeyboardNudgeDirection = exports.clearSelectedOutlineDragOverrides = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragChanges = exports.isSelectedOutlineDragPastThreshold = exports.applySelectedOutlineDragAxisLock = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragStates = void 0;
+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");
@@ -11,6 +11,17 @@ 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;
@@ -304,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) {
@@ -445,7 +468,7 @@ const applySelectedOutlineTransformOriginAxisLock = ({ lockedAxis, startUv, uv,
     return uv;
 };
 exports.applySelectedOutlineTransformOriginAxisLock = applySelectedOutlineTransformOriginAxisLock;
-const transformOriginSnapTargets = [
+const selectedOutlineUvSnapTargets = [
     [0, 0],
     [0.5, 0],
     [1, 0],
@@ -456,11 +479,11 @@ const transformOriginSnapTargets = [
     [0, 0.5],
     [0.5, 0.5],
 ];
-exports.selectedOutlineTransformOriginSnapThresholdPx = 10;
-const snapSelectedOutlineTransformOriginUv = ({ point, points, thresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx, uv, }) => {
+exports.selectedOutlineUvSnapThresholdPx = 10;
+const snapSelectedOutlineUv = ({ point, points, thresholdPx = exports.selectedOutlineUvSnapThresholdPx, uv, }) => {
     var _a;
     let best = null;
-    for (const snapUv of transformOriginSnapTargets) {
+    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) {
@@ -472,4 +495,6 @@ const snapSelectedOutlineTransformOriginUv = ({ point, points, thresholdPx = exp
     }
     return (_a = best === null || best === void 0 ? void 0 : best.uv) !== null && _a !== void 0 ? _a : uv;
 };
-exports.snapSelectedOutlineTransformOriginUv = snapSelectedOutlineTransformOriginUv;
+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,