@remotion/studio 4.0.486 → 4.0.487

package/dist/components/SnappingToggle.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnappingToggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const no_react_1 = require("remotion/no-react");
+const colors_1 = require("../helpers/colors");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const magnet_1 = require("../icons/magnet");
+const editor_snapping_1 = require("../state/editor-snapping");
+const ControlButton_1 = require("./ControlButton");
+const SnappingToggle = () => {
+    const { editorSnapping, setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
+    const onClick = (0, react_1.useCallback)(() => {
+        setEditorSnapping((current) => !current);
+    }, [setEditorSnapping]);
+    const color = editorSnapping ? colors_1.BLUE : colors_1.WHITE;
+    const accessibilityLabel = [
+        editorSnapping ? 'Disable snapping' : 'Enable snapping',
+        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(Shift+M)',
+    ]
+        .filter(no_react_1.NoReactInternals.truthy)
+        .join(' ');
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", onClick: onClick, children: jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 17, height: 17 }, fill: color, "aria-hidden": "true", focusable: "false" }) }));
+};
+exports.SnappingToggle = SnappingToggle;

package/dist/components/Splitter/SplitterContext.d.ts

@@ -14,7 +14,7 @@ export type TSplitterContext = {
     defaultFlex: number;
     id: string;
     persistFlex: (value: number) => void;
-    isDragging: React.MutableRefObject<false | {
+    isDragging: React.RefObject<false | {
         x: number;
         y: number;
     }>;

package/dist/components/Timeline/TimelineSelection.js

@@ -12,6 +12,7 @@ const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key")
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const z_index_1 = require("../../state/z-index");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
+const options_sidebar_tabs_1 = require("../options-sidebar-tabs");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
@@ -684,6 +685,7 @@ const TimelineSelectionProvider = ({ children }) => {
         if (!canSelectItem(item)) {
             return;
         }
+        (0, options_sidebar_tabs_1.selectOptionsSidebarInspectorPanel)();
         expandParentsForSelectionItem(item);
         if (options.reveal) {
             requestRevealSelectionItem(item);
@@ -714,6 +716,9 @@ const TimelineSelectionProvider = ({ children }) => {
         if (!items.every(canSelectItem)) {
             return;
         }
+        if (items.length > 0) {
+            (0, options_sidebar_tabs_1.selectOptionsSidebarInspectorPanel)();
+        }
         selectionScope.current = timelineSelectionScope;
         selectionAnchor.current =
             items.length === 0 ? null : items[items.length - 1];

package/dist/components/VisualControls/ClickableFileName.js

@@ -8,8 +8,8 @@ const open_in_editor_1 = require("../../helpers/open-in-editor");
 const Fieldset_1 = require("../RenderModal/SchemaEditor/Fieldset");
 const source_attribution_1 = require("../Timeline/TimelineStack/source-attribution");
 const container = {
-    paddingLeft: Fieldset_1.SCHEMA_EDITOR_FIELDSET_PADDING,
-    paddingTop: Fieldset_1.SCHEMA_EDITOR_FIELDSET_PADDING / 2,
+    paddingLeft: (0, Fieldset_1.getSchemaEditorFieldsetPadding)(),
+    paddingTop: (0, Fieldset_1.getSchemaEditorFieldsetPadding)() / 2,
 };
 const ClickableFileName = ({ originalFileName, }) => {
     const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);

package/dist/components/VisualControls/VisualControlsContent.js

@@ -37,15 +37,23 @@ exports.VisualControlsContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const VisualControls_1 = require("../../visual-controls/VisualControls");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+const Fieldset_1 = require("../RenderModal/SchemaEditor/Fieldset");
 const SchemaSeparationLine_1 = require("../RenderModal/SchemaEditor/SchemaSeparationLine");
 const VisualControlHandle_1 = require("./VisualControlHandle");
+const rootInset = (0, Fieldset_1.getSchemaEditorRootInset)(InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING);
+const container = {
+    boxSizing: 'border-box',
+    paddingLeft: rootInset,
+    paddingRight: rootInset,
+};
 const VisualControlsContent = () => {
     const { handles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
     const entries = Object.entries(handles);
     if (entries.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { children: entries.map(([key, value], i) => {
+    return (jsx_runtime_1.jsx("div", { style: container, children: entries.map(([key, value], i) => {
             return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
                     jsx_runtime_1.jsx(VisualControlHandle_1.VisualControlHandle, { keyName: key, value: value }), i === entries.length - 1 ? null : jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaSeparationLine, {})] }, key));
         }) }));

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

@@ -8,7 +8,9 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const hasEffectDragType = (dataTransfer) => {
     const types = Array.from(dataTransfer.types);
     const hasExplicitEffectType = types.includes(studio_shared_1.EFFECT_DRAG_MIME_TYPE);
-    if (!hasExplicitEffectType && hasImportableAssetDragType(dataTransfer)) {
+    if (!hasExplicitEffectType &&
+        (hasNonEffectRemotionDragType(dataTransfer) ||
+            hasNonRemotionImportableAssetDragType(dataTransfer))) {
         return false;
     }
     return types.some((type) => type === studio_shared_1.EFFECT_DRAG_MIME_TYPE || isGenericDragType(type));
@@ -21,14 +23,33 @@ exports.hasExplicitEffectDragType = hasExplicitEffectDragType;
 const isGenericDragType = (type) => {
     return type === 'application/json' || type === 'text/plain';
 };
-const hasImportableAssetDragType = (dataTransfer) => {
-    return Array.from(dataTransfer.types).some((type) => type === 'Files' ||
-        type === studio_shared_1.ASSET_DRAG_MIME_TYPE ||
-        type === studio_shared_1.COMPOSITION_DRAG_MIME_TYPE ||
-        type === studio_shared_1.COMPONENT_DRAG_MIME_TYPE ||
-        type === studio_shared_1.SFX_DRAG_MIME_TYPE ||
-        type === 'text/uri-list' ||
-        type === 'text/html');
+const isNonEffectRemotionDragType = (mimeType) => {
+    switch (mimeType) {
+        case studio_shared_1.EFFECT_DRAG_MIME_TYPE:
+            return false;
+        case studio_shared_1.ASSET_DRAG_MIME_TYPE:
+        case studio_shared_1.COMPOSITION_DRAG_MIME_TYPE:
+        case studio_shared_1.COMPONENT_DRAG_MIME_TYPE:
+        case studio_shared_1.ELEMENT_DRAG_MIME_TYPE:
+        case studio_shared_1.SFX_DRAG_MIME_TYPE:
+            return true;
+        default:
+            mimeType;
+            throw new Error(`Unhandled Remotion drag MIME type: ${mimeType}`);
+    }
+};
+const hasNonEffectRemotionDragType = (dataTransfer) => {
+    return Array.from(dataTransfer.types).some((type) => {
+        if (!(0, studio_shared_1.isRemotionDragMimeType)(type)) {
+            return false;
+        }
+        return isNonEffectRemotionDragType(type);
+    });
+};
+const hasNonRemotionImportableAssetDragType = (dataTransfer) => {
+    return Array.from(dataTransfer.types).some((type) => {
+        return type === 'Files' || type === 'text/uri-list' || type === 'text/html';
+    });
 };
 const getEffectDragData = (dataTransfer) => {
     for (const type of [

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

@@ -86,6 +86,6 @@ export declare const insertElement: ({ compositionFile, compositionId, dropPosit
         slug: string;
         displayName: string;
         sourceCode: string;
-        dimensions: import("@remotion/studio-shared").ComponentDimensions;
+        dimensions: import("@remotion/studio-shared").ComponentDimensions | null;
     };
 }) => Promise<void>;

package/dist/components/options-sidebar-tabs.d.ts

@@ -2,3 +2,4 @@ export declare const optionsSidebarTabs: import("react").RefObject<{
     selectInspectorPanel: () => void;
     selectRendersPanel: () => void;
 } | null>;
+export declare const selectOptionsSidebarInspectorPanel: () => void;

package/dist/components/options-sidebar-tabs.js

@@ -1,5 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.optionsSidebarTabs = void 0;
+exports.selectOptionsSidebarInspectorPanel = exports.optionsSidebarTabs = void 0;
 const react_1 = require("react");
 exports.optionsSidebarTabs = (0, react_1.createRef)();
+const selectOptionsSidebarInspectorPanel = () => {
+    var _a;
+    (_a = exports.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectInspectorPanel();
+};
+exports.selectOptionsSidebarInspectorPanel = selectOptionsSidebarInspectorPanel;

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

@@ -0,0 +1,36 @@
+import type { Guide } from '../state/editor-guides';
+import type { SelectedOutline } from './selected-outline-geometry';
+export declare const selectedOutlineSnapThresholdPx = 10;
+export declare const selectedOutlineSnapIndicatorColor = "#ff00ff";
+export type SelectedOutlineSnapAxis = 'x' | 'y';
+export type SelectedOutlineSnapTargetType = 'canvas-left' | 'canvas-right' | 'canvas-top' | 'canvas-bottom' | 'canvas-horizontal-center' | 'canvas-vertical-center' | 'guide-vertical' | 'guide-horizontal';
+export type SelectedOutlineSnapTarget = {
+    readonly axis: SelectedOutlineSnapAxis;
+    readonly position: number;
+    readonly type: SelectedOutlineSnapTargetType;
+};
+export type SelectedOutlineSnapEdge = 'left' | 'right' | 'center-x' | 'top' | 'bottom' | 'center-y';
+export type SelectedOutlineSnapPoint = {
+    readonly distance: number;
+    readonly edge: SelectedOutlineSnapEdge;
+    readonly target: SelectedOutlineSnapTarget;
+};
+export type SelectedOutlineSnapResult = {
+    readonly activeSnapPoints: readonly SelectedOutlineSnapPoint[];
+    readonly snapOffsetX: number | null;
+    readonly snapOffsetY: number | null;
+};
+export declare const getSelectedOutlineSnapTargets: ({ compositionHeight, compositionWidth, guides, }: {
+    readonly compositionHeight: number;
+    readonly compositionWidth: number;
+    readonly guides: readonly Guide[];
+}) => readonly SelectedOutlineSnapTarget[];
+export declare const findSelectedOutlineSnap: ({ allowX, allowY, deltaX, deltaY, outlines, scale, targets, }: {
+    readonly allowX: boolean;
+    readonly allowY: boolean;
+    readonly deltaX: number;
+    readonly deltaY: number;
+    readonly outlines: readonly SelectedOutline[];
+    readonly scale: number;
+    readonly targets: readonly SelectedOutlineSnapTarget[];
+}) => SelectedOutlineSnapResult;

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

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findSelectedOutlineSnap = exports.getSelectedOutlineSnapTargets = exports.selectedOutlineSnapIndicatorColor = exports.selectedOutlineSnapThresholdPx = void 0;
+exports.selectedOutlineSnapThresholdPx = 10;
+exports.selectedOutlineSnapIndicatorColor = '#ff00ff';
+const EPSILON = 0.000001;
+const getSelectedOutlineSnapTargets = ({ compositionHeight, compositionWidth, guides, }) => {
+    return [
+        { axis: 'x', position: 0, type: 'canvas-left' },
+        {
+            axis: 'x',
+            position: compositionWidth / 2,
+            type: 'canvas-horizontal-center',
+        },
+        { axis: 'x', position: compositionWidth, type: 'canvas-right' },
+        { axis: 'y', position: 0, type: 'canvas-top' },
+        {
+            axis: 'y',
+            position: compositionHeight / 2,
+            type: 'canvas-vertical-center',
+        },
+        { axis: 'y', position: compositionHeight, type: 'canvas-bottom' },
+        ...guides.flatMap((guide) => {
+            if (!guide.show) {
+                return [];
+            }
+            return [
+                guide.orientation === 'vertical'
+                    ? {
+                        axis: 'x',
+                        position: guide.position,
+                        type: 'guide-vertical',
+                    }
+                    : {
+                        axis: 'y',
+                        position: guide.position,
+                        type: 'guide-horizontal',
+                    },
+            ];
+        }),
+    ];
+};
+exports.getSelectedOutlineSnapTargets = getSelectedOutlineSnapTargets;
+const getSelectedOutlineBounds = ({ deltaX, deltaY, outlines, scale, }) => {
+    if (outlines.length === 0) {
+        return null;
+    }
+    const points = outlines.flatMap((outline) => outline.points);
+    const left = Math.min(...points.map((point) => point.x)) / scale + deltaX;
+    const right = Math.max(...points.map((point) => point.x)) / scale + deltaX;
+    const top = Math.min(...points.map((point) => point.y)) / scale + deltaY;
+    const bottom = Math.max(...points.map((point) => point.y)) / scale + deltaY;
+    return {
+        left,
+        right,
+        top,
+        bottom,
+        centerX: left + (right - left) / 2,
+        centerY: top + (bottom - top) / 2,
+    };
+};
+const canSnapEdgeToTarget = (edge, target) => {
+    if (target.type === 'canvas-horizontal-center') {
+        return edge === 'center-x';
+    }
+    if (target.type === 'canvas-vertical-center') {
+        return edge === 'center-y';
+    }
+    if (target.type === 'canvas-left' || target.type === 'canvas-right') {
+        return edge === 'left' || edge === 'right';
+    }
+    if (target.type === 'guide-vertical') {
+        return edge === 'left' || edge === 'right' || edge === 'center-x';
+    }
+    if (target.type === 'canvas-top' || target.type === 'canvas-bottom') {
+        return edge === 'top' || edge === 'bottom';
+    }
+    return edge === 'top' || edge === 'bottom' || edge === 'center-y';
+};
+const findBestSnapForAxis = ({ edges, targets, threshold, }) => {
+    var _a;
+    let bestDistance = Infinity;
+    let bestSnaps = [];
+    for (const target of targets) {
+        for (const edge of edges) {
+            if (!canSnapEdgeToTarget(edge.edge, target)) {
+                continue;
+            }
+            const distance = Math.abs(edge.position - target.position);
+            if (distance > threshold || distance > bestDistance + EPSILON) {
+                continue;
+            }
+            if (distance < bestDistance - EPSILON) {
+                bestSnaps = [];
+                bestDistance = distance;
+            }
+            bestSnaps.push({
+                offset: target.position - edge.position,
+                snapPoint: {
+                    distance,
+                    edge: edge.edge,
+                    target,
+                },
+            });
+        }
+    }
+    if (bestSnaps.length > 1) {
+        const centerSnap = bestSnaps.find((snap) => snap.snapPoint.target.type === 'canvas-horizontal-center' ||
+            snap.snapPoint.target.type === 'canvas-vertical-center');
+        if (centerSnap) {
+            return centerSnap;
+        }
+    }
+    return (_a = bestSnaps[0]) !== null && _a !== void 0 ? _a : null;
+};
+const findSelectedOutlineSnap = ({ allowX, allowY, deltaX, deltaY, outlines, scale, targets, }) => {
+    var _a, _b, _c, _d;
+    const bounds = getSelectedOutlineBounds({ deltaX, deltaY, outlines, scale });
+    if (bounds === null) {
+        return {
+            activeSnapPoints: [],
+            snapOffsetX: null,
+            snapOffsetY: null,
+        };
+    }
+    const threshold = exports.selectedOutlineSnapThresholdPx / scale;
+    const snapX = allowX
+        ? findBestSnapForAxis({
+            edges: [
+                { edge: 'left', position: bounds.left },
+                { edge: 'center-x', position: bounds.centerX },
+                { edge: 'right', position: bounds.right },
+            ],
+            targets: targets.filter((target) => target.axis === 'x'),
+            threshold,
+        })
+        : null;
+    const snapY = allowY
+        ? findBestSnapForAxis({
+            edges: [
+                { edge: 'top', position: bounds.top },
+                { edge: 'center-y', position: bounds.centerY },
+                { edge: 'bottom', position: bounds.bottom },
+            ],
+            targets: targets.filter((target) => target.axis === 'y'),
+            threshold,
+        })
+        : null;
+    return {
+        activeSnapPoints: [
+            (_a = snapX === null || snapX === void 0 ? void 0 : snapX.snapPoint) !== null && _a !== void 0 ? _a : null,
+            (_b = snapY === null || snapY === void 0 ? void 0 : snapY.snapPoint) !== null && _b !== void 0 ? _b : null,
+        ].filter((snapPoint) => snapPoint !== null),
+        snapOffsetX: (_c = snapX === null || snapX === void 0 ? void 0 : snapX.offset) !== null && _c !== void 0 ? _c : null,
+        snapOffsetY: (_d = snapY === null || snapY === void 0 ? void 0 : snapY.offset) !== null && _d !== void 0 ? _d : null,
+    };
+};
+exports.findSelectedOutlineSnap = findSelectedOutlineSnap;