@remotion/studio 4.0.505 → 4.0.507

package/dist/components/SelectedOutlineKeyboardControls.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+import type { getSequencesWithSelectableOutlines } from './selected-outline-measurement';
+import { type SelectedOutlineTarget } from './selected-outline-types';
+export declare const SelectedOutlineKeyboardControls: React.FC<{
+    readonly getLatestOutlineTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
+    readonly getSelectableOutlines: () => ReturnType<typeof getSequencesWithSelectableOutlines>;
+}>;

package/dist/components/SelectedOutlineKeyboardControls.js

@@ -0,0 +1,261 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedOutlineKeyboardControls = void 0;
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const selected_outline_drag_1 = require("./selected-outline-drag");
+const selected_outline_measurement_1 = require("./selected-outline-measurement");
+const selected_outline_types_1 = require("./selected-outline-types");
+const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
+const imperative_state_1 = require("./Timeline/imperative-state");
+const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
+const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
+const SelectedOutlineKeyboardControls = ({ getLatestOutlineTargetByKey, getSelectableOutlines }) => {
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { frameBack, frameForward, getCurrentFrame, seek } = player_1.PlayerInternals.usePlayerMethods();
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const keyboardNudgeSessionRef = (0, react_1.useRef)(null);
+    const saveKeyboardNudgeSessionRef = (0, react_1.useRef)(() => undefined);
+    const saveKeyboardNudgeSession = (0, react_1.useCallback)(() => {
+        const session = keyboardNudgeSessionRef.current;
+        if (session === null) {
+            return;
+        }
+        keyboardNudgeSessionRef.current = null;
+        const changes = (0, selected_outline_drag_1.getSelectedOutlineDragChanges)({
+            dragStates: session.dragStates,
+            lastValues: session.lastValues,
+        });
+        if (changes.length === 0) {
+            (0, selected_outline_drag_1.clearSelectedOutlineDragOverrides)({
+                clearDragOverrides,
+                dragStates: session.dragStates,
+            });
+            return;
+        }
+        const staticChanges = changes.filter((change) => change.type === 'static');
+        const keyframedChanges = changes.filter((change) => change.type === 'keyframed');
+        Promise.all([
+            staticChanges.length > 0
+                ? (0, save_sequence_prop_1.saveSequenceProps)({
+                    changes: staticChanges,
+                    addedKeyframes: null,
+                    movedKeyframes: null,
+                    setPropStatuses,
+                    clientId: session.clientId,
+                    undoLabel: changes.length > 1 ? 'Move selected sequences' : 'Move sequence',
+                    redoLabel: changes.length > 1
+                        ? 'Move selected sequences back'
+                        : 'Move sequence back',
+                })
+                : Promise.resolve(),
+            (0, call_add_keyframe_1.callAddKeyframes)({
+                sequenceKeyframes: keyframedChanges,
+                effectKeyframes: [],
+                setPropStatuses,
+                clientId: session.clientId,
+            }),
+        ])
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);
+        })
+            .finally(() => {
+            (0, selected_outline_drag_1.clearSelectedOutlineDragOverrides)({
+                clearDragOverrides,
+                dragStates: session.dragStates,
+            });
+        });
+    }, [clearDragOverrides, setPropStatuses]);
+    (0, react_1.useEffect)(() => {
+        saveKeyboardNudgeSessionRef.current = saveKeyboardNudgeSession;
+    }, [saveKeyboardNudgeSession]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            saveKeyboardNudgeSessionRef.current();
+        };
+    }, []);
+    const seekWithArrowKey = (0, react_1.useCallback)((event, direction) => {
+        if (direction === 'up' || direction === 'down') {
+            return;
+        }
+        event.preventDefault();
+        if (direction === 'left') {
+            if (event.altKey) {
+                seek(0);
+                (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                    direction: 'fit-left',
+                    durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                    frame: 0,
+                });
+            }
+            else if (event.shiftKey) {
+                frameBack((0, imperative_state_1.getCurrentFps)());
+                (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                    direction: 'fit-left',
+                    durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                    frame: Math.max(0, getCurrentFrame() - (0, imperative_state_1.getCurrentFps)()),
+                });
+            }
+            else {
+                frameBack(1);
+                (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                    direction: 'fit-left',
+                    durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                    frame: Math.max(0, getCurrentFrame() - 1),
+                });
+            }
+            return;
+        }
+        if (event.altKey) {
+            seek((0, imperative_state_1.getCurrentDuration)() - 1);
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-right',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)() - 1,
+                frame: (0, imperative_state_1.getCurrentDuration)() - 1,
+            });
+        }
+        else if (event.shiftKey) {
+            frameForward((0, imperative_state_1.getCurrentFps)());
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-right',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, getCurrentFrame() + (0, imperative_state_1.getCurrentFps)()),
+            });
+        }
+        else {
+            frameForward(1);
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-right',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, getCurrentFrame() + 1),
+            });
+        }
+    }, [frameBack, frameForward, getCurrentFrame, seek]);
+    const onArrowKeyDown = (0, react_1.useCallback)((event) => {
+        var _a;
+        const direction = (0, selected_outline_drag_1.getSelectedOutlineKeyboardNudgeDirection)(event.key);
+        if (direction === null) {
+            return;
+        }
+        const { selectedItems } = currentSelection.current;
+        const selectedSequenceKeys = (0, selected_outline_measurement_1.getSelectedSequenceKeys)(selectedItems);
+        const sequenceKeysContainingSelection = (0, selected_outline_measurement_1.getSequenceKeysContainingSelection)(selectedItems);
+        const selectableOutlines = getSelectableOutlines();
+        const allDragTargets = selectableOutlines.flatMap(({ key }) => {
+            var _a;
+            var _b;
+            if (!selectedSequenceKeys.has(key) &&
+                !sequenceKeysContainingSelection.has(key)) {
+                return [];
+            }
+            const drag = (_b = (_a = getLatestOutlineTargetByKey(key)) === null || _a === void 0 ? void 0 : _a.drag) !== null && _b !== void 0 ? _b : null;
+            return drag === null ? [] : [drag];
+        });
+        if (selectedItems.length === 0 || allDragTargets.length === 0) {
+            seekWithArrowKey(event, direction);
+            return;
+        }
+        if (event.altKey) {
+            seekWithArrowKey(event, direction);
+            return;
+        }
+        event.preventDefault();
+        const activeSession = (_a = keyboardNudgeSessionRef.current) !== null && _a !== void 0 ? _a : (() => {
+            const [firstDragTarget] = allDragTargets;
+            if (firstDragTarget === undefined) {
+                throw new Error('Expected a drag target');
+            }
+            return {
+                clientId: firstDragTarget.clientId,
+                deltaX: 0,
+                deltaY: 0,
+                dragStates: (0, selected_outline_drag_1.getSelectedOutlineDragStates)({
+                    dragTargets: allDragTargets,
+                    getDragOverrides,
+                    timelinePosition: getCurrentFrame(),
+                }),
+                lastValues: new Map(),
+            };
+        })();
+        keyboardNudgeSessionRef.current = activeSession;
+        const nextDeltas = (0, selected_outline_drag_1.getSelectedOutlineKeyboardNudgeDeltas)({
+            deltaX: activeSession.deltaX,
+            deltaY: activeSession.deltaY,
+            direction,
+            shiftKey: event.shiftKey,
+        });
+        activeSession.deltaX = nextDeltas.deltaX;
+        activeSession.deltaY = nextDeltas.deltaY;
+        const lastValues = (0, selected_outline_drag_1.getSelectedOutlineDragValues)({
+            dragStates: activeSession.dragStates,
+            deltaX: activeSession.deltaX,
+            deltaY: activeSession.deltaY,
+        });
+        activeSession.lastValues = lastValues;
+        for (const dragState of activeSession.dragStates) {
+            const value = lastValues.get(dragState.key);
+            if (value === undefined) {
+                throw new Error('Expected drag value to be available');
+            }
+            if (dragState.target.propStatus.status === 'keyframed') {
+                setDragOverrides(dragState.target.nodePath, selected_outline_types_1.translateFieldKey, remotion_1.Internals.makeKeyframedDragOverride({
+                    status: dragState.target.propStatus,
+                    frame: dragState.sourceFrame,
+                    value,
+                }));
+            }
+            else {
+                setDragOverrides(dragState.target.nodePath, selected_outline_types_1.translateFieldKey, remotion_1.Internals.makeStaticDragOverride(value));
+            }
+        }
+    }, [
+        currentSelection,
+        getCurrentFrame,
+        getDragOverrides,
+        getLatestOutlineTargetByKey,
+        getSelectableOutlines,
+        seekWithArrowKey,
+        setDragOverrides,
+    ]);
+    const onArrowKeyUp = (0, react_1.useCallback)((event) => {
+        const direction = (0, selected_outline_drag_1.getSelectedOutlineKeyboardNudgeDirection)(event.key);
+        if (direction === null || keyboardNudgeSessionRef.current === null) {
+            return;
+        }
+        event.preventDefault();
+        saveKeyboardNudgeSession();
+    }, [saveKeyboardNudgeSession]);
+    (0, react_1.useEffect)(() => {
+        const keyDownBindings = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].map((key) => keybindings.registerKeybinding({
+            event: 'keydown',
+            key,
+            callback: onArrowKeyDown,
+            commandCtrlKey: false,
+            preventDefault: false,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        }));
+        const keyUpBindings = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].map((key) => keybindings.registerKeybinding({
+            event: 'keyup',
+            key,
+            callback: onArrowKeyUp,
+            commandCtrlKey: false,
+            preventDefault: false,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        }));
+        return () => {
+            for (const binding of [...keyDownBindings, ...keyUpBindings]) {
+                binding.unregister();
+            }
+        };
+    }, [keybindings, onArrowKeyDown, onArrowKeyUp]);
+    return null;
+};
+exports.SelectedOutlineKeyboardControls = SelectedOutlineKeyboardControls;

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -1,23 +1,16 @@
 import React from 'react';
-import { type SelectedOutline } from './selected-outline-geometry';
-import { type SelectedOutlineTarget } from './selected-outline-types';
+import { orderOutlinesForRendering } from './selected-outline-order';
+export { orderOutlinesForRendering };
 export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineCropDragChanges, getSelectedOutlineCropDragValues, getSelectedOutlineCropFollowingTransformOrigin, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginDragChanges, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
 export { getOutlineSelectionInteraction, getSelectedCropInfo, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
 export { selectedOutlineDragThresholdPx } from './selected-outline-types';
 export type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineScaleDragState, } from './selected-outline-types';
-type OutlineSequenceParent = {
-    readonly id: string;
-    readonly parent: string | null;
-};
-export declare const orderOutlinesForRendering: ({ outlines, sequences, targetsByKey, }: {
-    readonly outlines: readonly SelectedOutline[];
-    readonly sequences: readonly OutlineSequenceParent[];
-    readonly targetsByKey: ReadonlyMap<string, SelectedOutlineTarget>;
-}) => readonly SelectedOutline[];
-export declare const SelectedOutlineOverlay: React.FC<{
+type SelectedOutlineOverlayProps = {
+    readonly canvasHovered: boolean;
     readonly compositionHeight: number;
     readonly compositionWidth: number;
     readonly scale: number;
     readonly translationX: number;
     readonly translationY: number;
-}>;
+};
+export declare const SelectedOutlineOverlay: React.NamedExoticComponent<SelectedOutlineOverlayProps>;