@remotion/studio 4.0.505 → 4.0.507

package/dist/components/SelectedOutlinePolygon.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { SelectedOutline } from './selected-outline-geometry';
+import { type SelectedOutlineSnapPoint } from './selected-outline-snap';
+import { type SelectedOutlineContextMenuOpenHandler, type SelectedOutlineDragTarget, type SelectedOutlineLayoutTarget, type SelectedOutlineTarget } from './selected-outline-types';
+import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
+export declare const SelectedOutlinePolygon: React.NamedExoticComponent<{
+    readonly compositionHeight: number;
+    readonly compositionWidth: number;
+    readonly dragging: boolean;
+    readonly getAllDragOutlines: () => readonly SelectedOutline[];
+    readonly getAllDragTargets: () => readonly SelectedOutlineDragTarget[];
+    readonly getLayoutTarget: () => SelectedOutlineLayoutTarget | undefined;
+    readonly getTarget: () => SelectedOutlineTarget | undefined;
+    readonly hasTarget: boolean;
+    readonly hovered: boolean;
+    readonly onContextMenuOpen: SelectedOutlineContextMenuOpenHandler;
+    readonly outline: SelectedOutline;
+    readonly onDraggingChange: (dragging: boolean) => void;
+    readonly onHoverChange: (key: string | null) => void;
+    readonly onSnapPointsChange: (snapPoints: readonly SelectedOutlineSnapPoint[]) => void;
+    readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
+    readonly onDoubleClickTarget: (target: SelectedOutlineTarget, button: number) => boolean;
+    readonly scale: number;
+    readonly showSelectedOutline: boolean;
+}>;

package/dist/components/SelectedOutlinePolygon.js

@@ -0,0 +1,359 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedOutlinePolygon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
+const colors_1 = require("../helpers/colors");
+const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
+const pointer_session_1 = require("../helpers/pointer-session");
+const editor_guides_1 = require("../state/editor-guides");
+const editor_snapping_1 = require("../state/editor-snapping");
+const ContextMenu_1 = require("./ContextMenu");
+const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
+const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
+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_snap_1 = require("./selected-outline-snap");
+const selected_outline_types_1 = require("./selected-outline-types");
+const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
+const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
+const imperative_state_1 = require("./Timeline/imperative-state");
+const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
+const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth, dragging, getAllDragOutlines, getAllDragTargets, getLayoutTarget, getTarget, hasTarget, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, showSelectedOutline, }) => {
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
+    const { editorShowGuides, guidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const polygonRef = (0, react_1.useRef)(null);
+    const points = (0, react_1.useMemo)(() => outline.points.map(selected_outline_measurement_1.pointToString).join(' '), [outline.points]);
+    const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
+    const visible = showSelectedOutline || hovered;
+    const getEffectDropTarget = react_1.default.useCallback(() => {
+        var _a;
+        if (previewServerState.type !== 'connected' ||
+            !(0, interactivity_enabled_1.isStudioInteractivityEnabled)()) {
+            return null;
+        }
+        const target = getLayoutTarget();
+        if (((_a = target === null || target === void 0 ? void 0 : target.sequence.controls) === null || _a === void 0 ? void 0 : _a.supportsEffects) !== true) {
+            return null;
+        }
+        const nodePath = target.nodePathInfo.sequenceSubscriptionKey;
+        return {
+            clientId: previewServerState.clientId,
+            fileName: nodePath.absolutePath,
+            nodePath,
+        };
+    }, [getLayoutTarget, previewServerState]);
+    const onPointerDown = react_1.default.useCallback((event) => {
+        const target = getTarget();
+        if (event.button !== 0 || target === undefined) {
+            return;
+        }
+        const { drag, selected } = target;
+        event.preventDefault();
+        event.stopPropagation();
+        const interaction = (0, selected_outline_measurement_1.getOutlineSelectionInteraction)(event);
+        const shouldUpdateSelection = !selected || interaction.shiftKey || interaction.toggleKey;
+        if (shouldUpdateSelection) {
+            onSelect(target.selection, interaction);
+        }
+        if (drag === null || interaction.shiftKey || interaction.toggleKey) {
+            return;
+        }
+        if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
+            return;
+        }
+        const startPointerX = event.clientX;
+        const startPointerY = event.clientY;
+        const dragStates = (0, selected_outline_drag_1.getSelectedOutlineDragStates)({
+            dragTargets: selected ? getAllDragTargets() : [drag],
+            getDragOverrides,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
+        });
+        let lastValues = new Map();
+        let currentPointerX = startPointerX;
+        let currentPointerY = startPointerY;
+        let axisLocked = false;
+        let dragStarted = false;
+        let snappingDisabled = event.metaKey || event.ctrlKey;
+        let snapTargets = null;
+        const updateDragOverrides = () => {
+            const screenDeltaX = currentPointerX - startPointerX;
+            const screenDeltaY = currentPointerY - startPointerY;
+            if (!dragStarted) {
+                if (!(0, selected_outline_drag_1.isSelectedOutlineDragPastThreshold)({
+                    deltaX: screenDeltaX,
+                    deltaY: screenDeltaY,
+                })) {
+                    return;
+                }
+                dragStarted = true;
+                onDraggingChange(true);
+                (0, ForceSpecificCursor_1.forceSpecificCursor)('default');
+            }
+            const axisLockedDirection = axisLocked
+                ? Math.abs(screenDeltaX) >= Math.abs(screenDeltaY)
+                    ? 'horizontal'
+                    : 'vertical'
+                : null;
+            const dragDelta = (0, selected_outline_drag_1.applySelectedOutlineDragAxisLock)({
+                deltaX: screenDeltaX / scale,
+                deltaY: screenDeltaY / scale,
+                axisLocked,
+            });
+            let { deltaX, deltaY } = dragDelta;
+            if (editorSnapping && !snappingDisabled) {
+                snapTargets !== null && snapTargets !== void 0 ? snapTargets : (snapTargets = (0, selected_outline_snap_1.getSelectedOutlineSnapTargets)({
+                    compositionHeight,
+                    compositionWidth,
+                    guides: editorShowGuides && (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
+                        ? guidesList.filter((guide) => guide.compositionId === canvasContent.compositionId)
+                        : [],
+                }));
+                const snapResult = (0, selected_outline_snap_1.findSelectedOutlineSnap)({
+                    allowX: axisLockedDirection !== 'vertical',
+                    allowY: axisLockedDirection !== 'horizontal',
+                    deltaX,
+                    deltaY,
+                    outlines: selected ? getAllDragOutlines() : [outline],
+                    scale,
+                    targets: snapTargets,
+                });
+                if (snapResult.snapOffsetX !== null) {
+                    deltaX += snapResult.snapOffsetX;
+                }
+                if (snapResult.snapOffsetY !== null) {
+                    deltaY += snapResult.snapOffsetY;
+                }
+                onSnapPointsChange(snapResult.activeSnapPoints);
+            }
+            else {
+                onSnapPointsChange([]);
+            }
+            lastValues = (0, selected_outline_drag_1.getSelectedOutlineDragValues)({
+                dragStates,
+                deltaX,
+                deltaY,
+            });
+            for (const dragState of 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));
+                }
+            }
+        };
+        const onPointerMove = (moveEvent) => {
+            moveEvent.preventDefault();
+            currentPointerX = moveEvent.clientX;
+            currentPointerY = moveEvent.clientY;
+            axisLocked = moveEvent.shiftKey;
+            snappingDisabled = moveEvent.metaKey || moveEvent.ctrlKey;
+            updateDragOverrides();
+        };
+        const onKeyChange = (keyEvent) => {
+            if (keyEvent.key !== 'Shift') {
+                return;
+            }
+            const nextAxisLocked = keyEvent.type === 'keydown';
+            if (nextAxisLocked === axisLocked) {
+                return;
+            }
+            axisLocked = nextAxisLocked;
+            updateDragOverrides();
+        };
+        const onPointerUp = () => {
+            window.removeEventListener('keydown', onKeyChange);
+            window.removeEventListener('keyup', onKeyChange);
+            if (dragStarted) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                onSnapPointsChange([]);
+                onDraggingChange(false);
+            }
+            const changes = (0, selected_outline_drag_1.getSelectedOutlineDragChanges)({
+                dragStates,
+                lastValues,
+            });
+            if (changes.length === 0) {
+                (0, selected_outline_drag_1.clearSelectedOutlineDragOverrides)({ clearDragOverrides, 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: drag.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: drag.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 });
+            });
+        };
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
+        window.addEventListener('keydown', onKeyChange);
+        window.addEventListener('keyup', onKeyChange);
+    }, [
+        canvasContent,
+        clearDragOverrides,
+        compositionHeight,
+        compositionWidth,
+        editorShowGuides,
+        editorSnapping,
+        getAllDragOutlines,
+        getAllDragTargets,
+        getDragOverrides,
+        getTarget,
+        guidesList,
+        onDraggingChange,
+        onSelect,
+        onSnapPointsChange,
+        outline,
+        scale,
+        setPropStatuses,
+        setDragOverrides,
+    ]);
+    const onDoubleClick = react_1.default.useCallback((event) => {
+        const target = getTarget();
+        if (target === undefined) {
+            return;
+        }
+        if (!onDoubleClickTarget(target, event.button)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }, [getTarget, onDoubleClickTarget]);
+    const onEffectDragOver = react_1.default.useCallback((event) => {
+        if (!(0, effect_drag_and_drop_1.hasEffectDragType)(event.dataTransfer)) {
+            return;
+        }
+        const effectDrop = getEffectDropTarget();
+        if (effectDrop === null) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        event.dataTransfer.dropEffect = 'copy';
+        setEffectDropHovered(true);
+    }, [getEffectDropTarget]);
+    const onEffectDragLeave = react_1.default.useCallback((event) => {
+        if (event.currentTarget.contains(event.relatedTarget)) {
+            return;
+        }
+        setEffectDropHovered(false);
+    }, []);
+    const onEffectDrop = react_1.default.useCallback(async (event) => {
+        if (!(0, effect_drag_and_drop_1.hasEffectDragType)(event.dataTransfer)) {
+            return;
+        }
+        const effectDrop = getEffectDropTarget();
+        if (effectDrop === null) {
+            return;
+        }
+        const dragData = (0, effect_drag_and_drop_1.getEffectDragData)(event.dataTransfer);
+        if (!dragData) {
+            if ((0, effect_drag_and_drop_1.hasExplicitEffectDragType)(event.dataTransfer)) {
+                event.preventDefault();
+                event.stopPropagation();
+                setEffectDropHovered(false);
+                (0, NotificationCenter_1.showNotification)('Could not read effect drag data', 3000);
+            }
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        setEffectDropHovered(false);
+        await (0, effect_drag_and_drop_1.addEffectFromDragData)({
+            dragData,
+            fileName: effectDrop.fileName,
+            nodePath: effectDrop.nodePath,
+            clientId: effectDrop.clientId,
+        });
+    }, [getEffectDropTarget]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("polygon", { ref: polygonRef, points: points, fill: effectDropHovered ? colors_1.TIMELINE_DROP_BLUE_ALPHA_12 : colors_1.TRANSPARENT, stroke: colors_1.BLUE, strokeOpacity: visible || effectDropHovered ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: hasTarget ? 'all' : undefined, onPointerEnter: () => {
+                    if (!dragging) {
+                        onHoverChange(outline.key);
+                    }
+                }, onPointerLeave: () => {
+                    if (!dragging) {
+                        onHoverChange(null);
+                    }
+                }, onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onDragOver: onEffectDragOver, onDragLeave: onEffectDragLeave, onDrop: onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, getItems: onContextMenuOpen })
+        ] }));
+};
+exports.SelectedOutlinePolygon = react_1.default.memo(SelectedOutlinePolygonUnmemoized);

package/dist/components/SelectedOutlineRenderer.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { SelectedOutlineLayoutTarget, SelectedOutlineTarget } from './selected-outline-types';
+import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
+export declare const SelectedOutlineRenderer: React.NamedExoticComponent<{
+    readonly compositionHeight: number;
+    readonly compositionWidth: number;
+    readonly dragging: boolean;
+    readonly getLatestOutlineTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
+    readonly getOutlineTargets: () => readonly SelectedOutlineLayoutTarget[];
+    readonly onDraggingChange: (dragging: boolean) => void;
+    readonly onSelect: (item: TimelineSelection, interaction?: TimelineSelectionInteraction | undefined) => void;
+    readonly scale: number;
+    readonly sequences: readonly {
+        readonly id: string;
+        readonly parent: string | null;
+    }[];
+    readonly updateOutlinesRef: React.MutableRefObject<() => void>;
+}>;

package/dist/components/SelectedOutlineRenderer.js

@@ -0,0 +1,208 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedOutlineRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
+const selected_outline_measurement_1 = require("./selected-outline-measurement");
+const selected_outline_order_1 = require("./selected-outline-order");
+const SelectedOutlineElement_1 = require("./SelectedOutlineElement");
+const SelectedOutlineSnapIndicators_1 = require("./SelectedOutlineSnapIndicators");
+const SelectedOutlineTransformOriginHandle_1 = require("./SelectedOutlineTransformOriginHandle");
+const SelectedOutlineUvControls_1 = require("./SelectedOutlineUvControls");
+const outlineContainer = {
+    position: 'absolute',
+    inset: 0,
+    pointerEvents: 'none',
+    overflow: 'visible',
+};
+const emptyRenderState = {
+    outlines: [],
+    targets: [],
+};
+const SelectedOutlineHoverCleanup = ({ targets }) => {
+    const hoveredSequence = (0, timeline_sequence_hover_1.useTimelineSequenceHoverState)();
+    const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
+    (0, react_1.useEffect)(() => {
+        if ((hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'canvas' &&
+            !targets.some((target) => target.key === hoveredSequence.key)) {
+            setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
+        }
+    }, [hoveredSequence, setHoveredSequence, targets]);
+    return null;
+};
+const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth, dragging, getLatestOutlineTargetByKey, getOutlineTargets, onDraggingChange, onSelect, scale, sequences, updateOutlinesRef, }) => {
+    const [renderState, setRenderState] = (0, react_1.useState)(emptyRenderState);
+    const overlayRef = (0, react_1.useRef)(null);
+    const resizeObserverRef = (0, react_1.useRef)(null);
+    const resizeObserverAnimationFrameRef = (0, react_1.useRef)(null);
+    const observedOutlineElementsRef = (0, react_1.useRef)(new Set());
+    const updateOutlines = (0, react_1.useCallback)(() => {
+        const targets = getOutlineTargets();
+        if (overlayRef.current === null || targets.length === 0) {
+            setRenderState((prevState) => prevState.targets.length === 0 ? prevState : emptyRenderState);
+            return;
+        }
+        const nextOutlines = (0, selected_outline_measurement_1.measureOutlines)(overlayRef.current, targets);
+        setRenderState((prevState) => {
+            const outlines = (0, selected_outline_measurement_1.outlinesAreEqual)(prevState.outlines, nextOutlines)
+                ? prevState.outlines
+                : nextOutlines;
+            if (prevState.targets === targets && prevState.outlines === outlines) {
+                return prevState;
+            }
+            return { outlines, targets };
+        });
+    }, [getOutlineTargets]);
+    (0, react_1.useLayoutEffect)(() => {
+        updateOutlinesRef.current = updateOutlines;
+        updateOutlines();
+        return () => {
+            if (updateOutlinesRef.current === updateOutlines) {
+                updateOutlinesRef.current = () => undefined;
+            }
+        };
+    }, [updateOutlines, updateOutlinesRef]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            if (resizeObserverAnimationFrameRef.current !== null) {
+                return;
+            }
+            resizeObserverAnimationFrameRef.current = requestAnimationFrame(() => {
+                resizeObserverAnimationFrameRef.current = null;
+                updateOutlinesRef.current();
+            });
+        });
+        resizeObserverRef.current = resizeObserver;
+        return () => {
+            if (resizeObserverAnimationFrameRef.current !== null) {
+                cancelAnimationFrame(resizeObserverAnimationFrameRef.current);
+                resizeObserverAnimationFrameRef.current = null;
+            }
+            resizeObserver.disconnect();
+            resizeObserverRef.current = null;
+            observedOutlineElementsRef.current = new Set();
+        };
+    }, [updateOutlinesRef]);
+    (0, react_1.useLayoutEffect)(() => {
+        const resizeObserver = resizeObserverRef.current;
+        if (resizeObserver === null) {
+            return;
+        }
+        const nextObservedElements = new Set();
+        if (overlayRef.current !== null) {
+            nextObservedElements.add(overlayRef.current);
+        }
+        for (const target of renderState.targets) {
+            if (target.ref.current !== null) {
+                nextObservedElements.add(target.ref.current);
+            }
+        }
+        for (const element of observedOutlineElementsRef.current) {
+            if (!nextObservedElements.has(element)) {
+                resizeObserver.unobserve(element);
+            }
+        }
+        for (const element of nextObservedElements) {
+            if (!observedOutlineElementsRef.current.has(element)) {
+                resizeObserver.observe(element);
+            }
+        }
+        observedOutlineElementsRef.current = nextObservedElements;
+    }, [renderState.targets]);
+    const targetsByKey = (0, react_1.useMemo)(() => {
+        return new Map(renderState.targets.map((target) => [target.key, target]));
+    }, [renderState.targets]);
+    const outlinesForRendering = (0, react_1.useMemo)(() => {
+        return (0, selected_outline_order_1.orderOutlinesForRendering)({
+            outlines: renderState.outlines,
+            sequences,
+            targetsByKey,
+        });
+    }, [renderState.outlines, sequences, targetsByKey]);
+    const outlinesByKey = (0, react_1.useMemo)(() => {
+        return new Map(renderState.outlines.map((outline) => [outline.key, outline]));
+    }, [renderState.outlines]);
+    const targetsRef = (0, react_1.useRef)(renderState.targets);
+    const outlinesByKeyRef = (0, react_1.useRef)(outlinesByKey);
+    (0, react_1.useLayoutEffect)(() => {
+        targetsRef.current = renderState.targets;
+        outlinesByKeyRef.current = outlinesByKey;
+    }, [outlinesByKey, renderState.targets]);
+    const getAllDragTargets = (0, react_1.useCallback)(() => targetsRef.current.flatMap((target) => {
+        var _a;
+        var _b;
+        if (!target.selected && !target.containsSelection) {
+            return [];
+        }
+        const drag = (_b = (_a = getLatestOutlineTargetByKey(target.key)) === null || _a === void 0 ? void 0 : _a.drag) !== null && _b !== void 0 ? _b : null;
+        return drag === null ? [] : [drag];
+    }), [getLatestOutlineTargetByKey]);
+    const getAllDragOutlines = (0, react_1.useCallback)(() => targetsRef.current.flatMap((target) => {
+        var _a;
+        var _b;
+        if ((!target.selected && !target.containsSelection) ||
+            ((_b = (_a = getLatestOutlineTargetByKey(target.key)) === null || _a === void 0 ? void 0 : _a.drag) !== null && _b !== void 0 ? _b : null) === null) {
+            return [];
+        }
+        const outline = outlinesByKeyRef.current.get(target.key);
+        return outline === undefined ? [] : [outline];
+    }), [getLatestOutlineTargetByKey]);
+    const getAllScaleDragTargets = (0, react_1.useCallback)(() => targetsRef.current.flatMap((target) => {
+        var _a;
+        var _b;
+        const scaleDrag = target.selected
+            ? ((_b = (_a = getLatestOutlineTargetByKey(target.key)) === null || _a === void 0 ? void 0 : _a.scaleDrag) !== null && _b !== void 0 ? _b : null)
+            : null;
+        return scaleDrag === null ? [] : [scaleDrag];
+    }), [getLatestOutlineTargetByKey]);
+    const getAllRotationDragTargets = (0, react_1.useCallback)(() => targetsRef.current.flatMap((target) => {
+        var _a;
+        var _b;
+        const rotationDrag = target.selected
+            ? ((_b = (_a = getLatestOutlineTargetByKey(target.key)) === null || _a === void 0 ? void 0 : _a.rotationDrag) !== null && _b !== void 0 ? _b : null)
+            : null;
+        return rotationDrag === null ? [] : [rotationDrag];
+    }), [getLatestOutlineTargetByKey]);
+    const updateSnapPointsRef = (0, react_1.useRef)(() => undefined);
+    const onSnapPointsChange = (0, react_1.useCallback)((snapPoints) => updateSnapPointsRef.current(snapPoints), []);
+    return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [
+            jsx_runtime_1.jsx(SelectedOutlineHoverCleanup, { targets: renderState.targets }), jsx_runtime_1.jsx(SelectedOutlineSnapIndicators_1.SelectedOutlineSnapIndicators, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale, updateSnapPointsRef: updateSnapPointsRef }), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getAllRotationDragTargets: getAllRotationDragTargets, getAllScaleDragTargets: getAllScaleDragTargets, getLatestTargetByKey: getLatestOutlineTargetByKey, outline: outline, onDraggingChange: onDraggingChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, scale: scale, layoutTarget: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineTransformOriginHandle_1.SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, getLatestTargetByKey: getLatestOutlineTargetByKey, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-transform-origin`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: onSelect, outline: outline, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
+};
+exports.SelectedOutlineRenderer = react_1.default.memo(SelectedOutlineRendererUnmemoized);

package/dist/components/SelectedOutlineRotationCornerHandle.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { SelectedOutline } from './selected-outline-geometry';
+import { type SelectedOutlineRotationCorner } from './selected-outline-measurement';
+import { type SelectedOutlineContextMenuOpenHandler, type SelectedOutlineRotationDragTarget, type SelectedOutlineTarget } from './selected-outline-types';
+import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
+export declare const SelectedOutlineRotationCornerHandle: React.FC<{
+    readonly getAllRotationDragTargets: () => readonly SelectedOutlineRotationDragTarget[];
+    readonly corner: SelectedOutlineRotationCorner;
+    readonly dragging: boolean;
+    readonly outline: SelectedOutline;
+    readonly onDraggingChange: (dragging: boolean) => void;
+    readonly onContextMenuOpen: SelectedOutlineContextMenuOpenHandler;
+    readonly onHoverChange: (key: string | null) => void;
+    readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
+    readonly target: SelectedOutlineTarget | undefined;
+}>;