@remotion/studio 4.0.515 → 4.0.516

package/dist/components/SegmentedButton.js

@@ -0,0 +1,226 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
+const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
+const mobile_layout_1 = require("../helpers/mobile-layout");
+const noop_1 = require("../helpers/noop");
+const z_index_1 = require("../state/z-index");
+const is_menu_item_1 = require("./Menu/is-menu-item");
+const portals_1 = require("./Menu/portals");
+const styles_1 = require("./Menu/styles");
+const MenuContent_1 = require("./NewComposition/MenuContent");
+const SEGMENTED_BUTTON_BORDER_RADIUS = 6;
+const containerStyle = {
+    alignItems: 'center',
+    borderRadius: SEGMENTED_BUTTON_BORDER_RADIUS,
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    flexDirection: 'row',
+    flexShrink: 0,
+    gap: 1,
+    height: 24,
+    overflow: 'hidden',
+};
+const segmentStyle = {
+    alignItems: 'center',
+    appearance: 'none',
+    border: 'none',
+    boxSizing: 'border-box',
+    cursor: 'default',
+    display: 'inline-flex',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    height: '100%',
+    justifyContent: 'center',
+    lineHeight: '16px',
+    margin: 0,
+    minWidth: 0,
+    padding: '0 6px',
+    whiteSpace: 'nowrap',
+};
+const getSegmentBorderRadius = ({ index, segmentCount, }) => {
+    if (segmentCount === 1) {
+        return SEGMENTED_BUTTON_BORDER_RADIUS;
+    }
+    if (index === 0) {
+        return `${SEGMENTED_BUTTON_BORDER_RADIUS}px 0 0 ${SEGMENTED_BUTTON_BORDER_RADIUS}px`;
+    }
+    if (index === segmentCount - 1) {
+        return `0 ${SEGMENTED_BUTTON_BORDER_RADIUS}px ${SEGMENTED_BUTTON_BORDER_RADIUS}px 0`;
+    }
+    return 0;
+};
+const preventPointerFocus = (event) => {
+    if (event.button !== 0) {
+        return;
+    }
+    if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+    }
+    event.preventDefault();
+};
+const preventMouseFocus = (event) => {
+    event.stopPropagation();
+    if (event.button !== 0) {
+        return;
+    }
+    if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+    }
+    event.preventDefault();
+};
+const SegmentedButtonAction = ({ index, segment, segmentCount }) => {
+    var _a, _b;
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...segmentStyle,
+            borderRadius: getSegmentBorderRadius({ index, segmentCount }),
+            opacity: segment.disabled ? 0.5 : 1,
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: colors_1.TRANSPARENT,
+                hoverBackground: segment.disabled
+                    ? colors_1.TRANSPARENT
+                    : (0, colors_1.getBackgroundFromHoverState)({ hovered: true, selected: false }),
+                idleColor: segment.idleColor,
+                hoverColor: segment.disabled ? segment.idleColor : colors_1.WHITE,
+            }),
+            ...segment.style,
+        };
+    }, [index, segment, segmentCount]);
+    const onClick = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        segment.onClick(event);
+    }, [segment]);
+    const onPointerDown = (0, react_1.useCallback)((event) => {
+        var _a;
+        event.stopPropagation();
+        (_a = segment.onPointerDown) === null || _a === void 0 ? void 0 : _a.call(segment, event);
+        preventPointerFocus(event);
+    }, [segment]);
+    return (jsx_runtime_1.jsx("button", { "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: (_b = segment.title) !== null && _b !== void 0 ? _b : undefined, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }));
+};
+const SegmentedButtonMenu = ({ index, segment, segmentCount }) => {
+    var _a, _b;
+    const [opened, setOpened] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    const { currentZIndex, tabIndex } = (0, z_index_1.useZIndex)();
+    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
+    const size = player_1.PlayerInternals.useElementSize(ref, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const refresh = size === null || size === void 0 ? void 0 : size.refresh;
+    const onHide = (0, react_1.useCallback)(() => {
+        var _a;
+        setOpened(false);
+        (_a = segment.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(segment, false);
+    }, [segment]);
+    const onOutsideClick = (0, react_1.useCallback)((target) => {
+        var _a;
+        if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(target)) {
+            return;
+        }
+        onHide();
+    }, [onHide]);
+    const onClick = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (segment.values.length === 0) {
+            return;
+        }
+        refresh === null || refresh === void 0 ? void 0 : refresh();
+        setOpened((currentlyOpened) => {
+            var _a;
+            const next = !currentlyOpened;
+            (_a = segment.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(segment, next);
+            return next;
+        });
+    }, [refresh, segment]);
+    const onPointerDown = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        preventPointerFocus(event);
+    }, []);
+    const spaceToBottom = (0, react_1.useMemo)(() => {
+        if (!size || !opened) {
+            return 0;
+        }
+        return size.windowSize.height - (size.top + size.height) - 10;
+    }, [opened, size]);
+    const spaceToTop = (0, react_1.useMemo)(() => {
+        if (!size || !opened) {
+            return 0;
+        }
+        return size.top - 10;
+    }, [opened, size]);
+    const portalStyle = (0, react_1.useMemo)(() => {
+        if (!opened || !size) {
+            return null;
+        }
+        const minSpaceRequired = isMobileLayout
+            ? styles_1.MAX_MOBILE_MENU_WIDTH
+            : styles_1.MAX_MENU_WIDTH;
+        const spaceToRight = size.windowSize.width - size.left;
+        const spaceToLeft = size.left + size.width;
+        const canOpenOnLeft = spaceToLeft >= minSpaceRequired;
+        const canOpenOnRight = spaceToRight >= minSpaceRequired;
+        const openTowardsTop = spaceToTop > spaceToBottom;
+        return {
+            ...(openTowardsTop
+                ? {
+                    ...styles_1.menuContainerTowardsTop,
+                    bottom: size.windowSize.height - size.top,
+                }
+                : {
+                    ...styles_1.menuContainerTowardsBottom,
+                    top: size.top + size.height,
+                }),
+            ...(canOpenOnRight
+                ? { left: size.left }
+                : canOpenOnLeft
+                    ? { right: size.windowSize.width - size.left - size.width }
+                    : { left: 0 }),
+        };
+    }, [isMobileLayout, opened, size, spaceToBottom, spaceToTop]);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...segmentStyle,
+            borderRadius: getSegmentBorderRadius({ index, segmentCount }),
+            opacity: segment.disabled ? 0.5 : 1,
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: opened
+                    ? (0, colors_1.getBackgroundFromHoverState)({ hovered: false, selected: true })
+                    : colors_1.TRANSPARENT,
+                hoverBackground: segment.disabled
+                    ? colors_1.TRANSPARENT
+                    : (0, colors_1.getBackgroundFromHoverState)({ hovered: true, selected: opened }),
+                idleColor: opened ? colors_1.WHITE : segment.idleColor,
+                hoverColor: segment.disabled ? segment.idleColor : colors_1.WHITE,
+            }),
+            ...segment.style,
+        };
+    }, [index, opened, segment, segmentCount]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("button", { ref: ref, "aria-expanded": opened, "aria-haspopup": "menu", "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${is_menu_item_1.MENU_INITIATOR_CLASSNAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: (_b = segment.title) !== null && _b !== void 0 ? _b : undefined, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }), portalStyle
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: (event) => event.stopPropagation(), children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onOutsideClick, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { fixedHeight: Math.max(spaceToBottom, spaceToTop), leaveLeftSpace: segment.leaveLeftSpace, onHide: onHide, onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, preselectIndex: segment.selectedId === null
+                                        ? false
+                                        : segment.values.findIndex((value) => value.id === segment.selectedId), topItemCanBeUnselected: false, values: segment.values }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
+};
+const SegmentedButton = ({ segments, style, title }) => {
+    return (jsx_runtime_1.jsx("div", { style: { ...containerStyle, ...style }, title: title !== null && title !== void 0 ? title : undefined, children: segments.map((segment, index) => {
+            if (segment.type === 'action') {
+                return (jsx_runtime_1.jsx(SegmentedButtonAction, { index: index, segment: segment, segmentCount: segments.length }, segment.segmentId));
+            }
+            return (jsx_runtime_1.jsx(SegmentedButtonMenu, { index: index, segment: segment, segmentCount: segments.length }, segment.segmentId));
+        }) }));
+};
+exports.SegmentedButton = SegmentedButton;

package/dist/components/SelectedOutlineEditingHandles.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { SelectedOutline } from './selected-outline-geometry';
+import type { SelectedOutlineContextMenuOpenHandler, SelectedOutlineLayoutTarget, SelectedOutlineRotationDragTarget, SelectedOutlineScaleDragTarget, SelectedOutlineTarget } from './selected-outline-types';
+import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
+export declare const SelectedOutlineEditingHandles: React.FC<{
+    readonly dragging: boolean;
+    readonly getAllRotationDragTargets: () => readonly SelectedOutlineRotationDragTarget[];
+    readonly getAllScaleDragTargets: () => readonly SelectedOutlineScaleDragTarget[];
+    readonly getContextMenuOpenByKey: (key: string) => SelectedOutlineContextMenuOpenHandler | undefined;
+    readonly getLatestTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
+    readonly layoutTarget: SelectedOutlineLayoutTarget | undefined;
+    readonly onContextMenuOpenChange: (open: boolean) => void;
+    readonly onDraggingChange: (dragging: boolean) => void;
+    readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
+    readonly outline: SelectedOutline;
+}>;

package/dist/components/SelectedOutlineEditingHandles.js

@@ -0,0 +1,66 @@
+"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.SelectedOutlineEditingHandles = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const selected_outline_control_layout_1 = require("./selected-outline-control-layout");
+const SelectedOutlineCropControls_1 = require("./SelectedOutlineCropControls");
+const SelectedOutlineRotationCornerHandle_1 = require("./SelectedOutlineRotationCornerHandle");
+const SelectedOutlineScaleEdgeLine_1 = require("./SelectedOutlineScaleEdgeLine");
+const use_selected_outline_control_target_1 = require("./use-selected-outline-control-target");
+const SelectedOutlineEditingHandles = ({ dragging, getAllRotationDragTargets, getAllScaleDragTargets, getContextMenuOpenByKey, getLatestTargetByKey, layoutTarget, onContextMenuOpenChange, onDraggingChange, onSelect, outline, }) => {
+    const { controlTarget, hovered, onHoverChange } = (0, use_selected_outline_control_target_1.useSelectedOutlineControlTarget)({
+        getLatestTargetByKey,
+        layoutTarget,
+    });
+    const controlLayout = (0, react_1.useMemo)(() => (0, selected_outline_control_layout_1.getSelectedOutlineControlLayout)(outline.points), [outline.points]);
+    const onContextMenuOpen = react_1.default.useCallback(() => {
+        var _a;
+        var _b;
+        return (_b = (_a = getContextMenuOpenByKey(outline.key)) === null || _a === void 0 ? void 0 : _a()) !== null && _b !== void 0 ? _b : false;
+    }, [getContextMenuOpenByKey, outline.key]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: controlTarget }), (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
+                ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
+                ? controlLayout.scaleEdges.map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine_1.SelectedOutlineScaleEdgeLine, { getAllScaleDragTargets: getAllScaleDragTargets, dragging: dragging, edge: edge, hitWidth: edge === 'top' || edge === 'bottom'
+                        ? controlLayout.scaleHitWidth.horizontal
+                        : controlLayout.scaleHitWidth.vertical, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: controlTarget }, edge)))
+                : null, (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
+                ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
+                ? controlLayout.rotationCorners.map(({ corner, point }) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle_1.SelectedOutlineRotationCornerHandle, { getAllRotationDragTargets: getAllRotationDragTargets, corner: corner, dragging: dragging, handlePoint: point, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, radius: controlLayout.rotationHandleRadius, target: controlTarget }, corner)))
+                : null] }));
+};
+exports.SelectedOutlineEditingHandles = SelectedOutlineEditingHandles;

package/dist/components/SelectedOutlineElement.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineSnapPoint } from './selected-outline-snap';
-import { type SelectedOutlineDragTarget, type SelectedOutlineLayoutTarget, type SelectedOutlineRotationDragTarget, type SelectedOutlineScaleDragTarget, type SelectedOutlineTarget } from './selected-outline-types';
+import { type SelectedOutlineContextMenuOpenHandler, type SelectedOutlineDragTarget, type SelectedOutlineLayoutTarget, type SelectedOutlineTarget } from './selected-outline-types';
 import { type TimelineSelection, type TimelineSelectionInteraction } from './Timeline/TimelineSelection';
 type SelectedOutlineElementProps = {
     readonly compositionHeight: number;
@@ -9,15 +9,13 @@ type SelectedOutlineElementProps = {
     readonly dragging: boolean;
     readonly getAllDragOutlines: () => readonly SelectedOutline[];
     readonly getAllDragTargets: () => readonly SelectedOutlineDragTarget[];
-    readonly getAllRotationDragTargets: () => readonly SelectedOutlineRotationDragTarget[];
-    readonly getAllScaleDragTargets: () => readonly SelectedOutlineScaleDragTarget[];
     readonly getLatestTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
     readonly layoutTarget: SelectedOutlineLayoutTarget | undefined;
     readonly outline: SelectedOutline;
     readonly onDraggingChange: (dragging: boolean) => void;
-    readonly onContextMenuOpenChange: (open: boolean) => void;
     readonly onSnapPointsChange: (snapPoints: readonly SelectedOutlineSnapPoint[]) => void;
     readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
+    readonly registerContextMenuOpen: (key: string, handler: SelectedOutlineContextMenuOpenHandler | null) => void;
     readonly scale: number;
 };
 export declare const SelectedOutlineElement: React.NamedExoticComponent<SelectedOutlineElementProps>;

package/dist/components/SelectedOutlineElement.js

@@ -42,21 +42,15 @@ const get_connected_compositions_1 = require("../helpers/get-connected-compositi
 const get_sequence_double_click_action_1 = require("../helpers/get-sequence-double-click-action");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const open_in_editor_1 = require("../helpers/open-in-editor");
-const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const modals_1 = require("../state/modals");
-const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
 const transform_3d_mode_1 = require("../state/transform-3d-mode");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const delete_jsx_node_api_1 = require("./delete-jsx-node-api");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const selected_outline_control_layout_1 = require("./selected-outline-control-layout");
 const selected_outline_types_1 = require("./selected-outline-types");
 const SelectedOutlineCanvasRotation_1 = require("./SelectedOutlineCanvasRotation");
-const SelectedOutlineCropControls_1 = require("./SelectedOutlineCropControls");
 const SelectedOutlinePolygon_1 = require("./SelectedOutlinePolygon");
-const SelectedOutlineRotationCornerHandle_1 = require("./SelectedOutlineRotationCornerHandle");
-const SelectedOutlineScaleEdgeLine_1 = require("./SelectedOutlineScaleEdgeLine");
 const disable_sequence_interactivity_1 = require("./Timeline/disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./Timeline/duplicate-selected-timeline-item");
 const get_sequence_context_menu_items_1 = require("./Timeline/get-sequence-context-menu-items");
@@ -65,7 +59,8 @@ const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const get_stack_1 = require("./Timeline/TimelineStack/get-stack");
 const use_default_editor_info_1 = require("./use-default-editor-info");
 const use_select_asset_1 = require("./use-select-asset");
-const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth, dragging, getAllDragOutlines, getAllDragTargets, getAllRotationDragTargets, getAllScaleDragTargets, getLatestTargetByKey, layoutTarget, outline, onDraggingChange, onContextMenuOpenChange, onSnapPointsChange, onSelect, scale, }) => {
+const use_selected_outline_control_target_1 = require("./use-selected-outline-control-target");
+const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth, dragging, getAllDragOutlines, getAllDragTargets, getLatestTargetByKey, layoutTarget, outline, onDraggingChange, onSnapPointsChange, onSelect, registerContextMenuOpen, scale, }) => {
     var _a;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canConfigureApps, canOpenInEditor: editorAvailable, defaultEditorId, editorInfo, } = (0, use_default_editor_info_1.useEditorOpening)(previewServerState.type === 'connected');
@@ -78,43 +73,10 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { setManuallyEnabled } = (0, react_1.useContext)(transform_3d_mode_1.Transform3DModeStateContext);
-    const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
-    const targetRef = (0, react_1.useRef)(layoutTarget);
-    const controlLayout = (0, react_1.useMemo)(() => (0, selected_outline_control_layout_1.getSelectedOutlineControlLayout)(outline.points), [outline.points]);
-    (0, react_1.useLayoutEffect)(() => {
-        targetRef.current = layoutTarget;
-    }, [layoutTarget]);
-    const getTarget = react_1.default.useCallback(() => {
-        const currentTarget = targetRef.current;
-        if (currentTarget === undefined) {
-            return undefined;
-        }
-        return getLatestTargetByKey(currentTarget.key);
-    }, [getLatestTargetByKey]);
-    const getLayoutTarget = react_1.default.useCallback(() => targetRef.current, []);
-    const hoveredNodePathKey = (0, react_1.useMemo)(() => layoutTarget === undefined
-        ? null
-        : (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(layoutTarget.nodePathInfo.sequenceSubscriptionKey), [layoutTarget]);
-    const hovered = (0, timeline_sequence_hover_1.useIsTimelineSequenceHovered)(hoveredNodePathKey);
-    const controlTarget = layoutTarget !== undefined && (layoutTarget.containsSelection || hovered)
-        ? getLatestTargetByKey(layoutTarget.key)
-        : undefined;
-    const onHoverChange = react_1.default.useCallback((key) => {
-        setHoveredSequence((currentHover) => {
-            if (key !== null) {
-                const hoverTarget = targetRef.current;
-                if (hoverTarget === undefined || hoverTarget.key !== key) {
-                    return currentHover;
-                }
-                return {
-                    key,
-                    nodePathKey: (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(hoverTarget.nodePathInfo.sequenceSubscriptionKey),
-                    source: 'canvas',
-                };
-            }
-            return (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover;
-        });
-    }, [setHoveredSequence]);
+    const { controlTarget, getLayoutTarget, getTarget, hovered, onHoverChange } = (0, use_selected_outline_control_target_1.useSelectedOutlineControlTarget)({
+        getLatestTargetByKey,
+        layoutTarget,
+    });
     const resolveOriginalLocation = react_1.default.useCallback(async (resolveTarget) => {
         const stack = resolveTarget.sequence.getStack();
         if (!stack) {
@@ -130,7 +92,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         updateResolvedStackTrace(stack, originalLocation);
         return originalLocation;
     }, [updateResolvedStackTrace]);
-    const onDoubleClickTarget = react_1.default.useCallback((doubleClickTarget, button) => {
+    const onDoubleClickTarget = react_1.default.useCallback((doubleClickTarget, button, sequenceWasDragged) => {
         const connectedCompositions = (0, get_connected_compositions_1.getConnectedCompositions)({
             compositions,
             singleChildComponent: doubleClickTarget.sequence.singleChildComponent,
@@ -139,6 +101,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
             button,
             canOpenInEditor: editorAvailable,
             numberOfConnectedCompositions: connectedCompositions.length,
+            sequenceWasDragged,
         });
         if (action === null) {
             return false;
@@ -392,15 +355,13 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         setSelectedModal,
         setPropStatuses,
     ]);
+    (0, react_1.useLayoutEffect)(() => {
+        registerContextMenuOpen(outline.key, onContextMenuOpen);
+        return () => {
+            registerContextMenuOpen(outline.key, null);
+        };
+    }, [onContextMenuOpen, outline.key, registerContextMenuOpen]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon_1.SelectedOutlinePolygon, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, containsSelection: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) === true, directlySelected: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selected) === true, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLayoutTarget: getLayoutTarget, getTarget: getTarget, hasTarget: layoutTarget !== undefined, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, showSelectedOutline: (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.showSelectedOutline) !== null && _a !== void 0 ? _a : false }), (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) && (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) ? (jsx_runtime_1.jsx(SelectedOutlineCanvasRotation_1.SelectedOutlineCanvasRotation, { getLatestTargetByKey: getLatestTargetByKey, layoutTarget: layoutTarget, onDraggingChange: onDraggingChange, outline: outline, transform3DMode: controlTarget.rotationDrag.transform3DMode })) : null, jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: controlTarget }), (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
-                ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
-                ? controlLayout.scaleEdges.map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine_1.SelectedOutlineScaleEdgeLine, { getAllScaleDragTargets: getAllScaleDragTargets, dragging: dragging, edge: edge, hitWidth: edge === 'top' || edge === 'bottom'
-                        ? controlLayout.scaleHitWidth.horizontal
-                        : controlLayout.scaleHitWidth.vertical, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: controlTarget }, edge)))
-                : null, (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
-                ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
-                ? controlLayout.rotationCorners.map(({ corner, point }) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle_1.SelectedOutlineRotationCornerHandle, { getAllRotationDragTargets: getAllRotationDragTargets, corner: corner, dragging: dragging, handlePoint: point, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, radius: controlLayout.rotationHandleRadius, target: controlTarget }, corner)))
-                : null] }));
+            jsx_runtime_1.jsx(SelectedOutlinePolygon_1.SelectedOutlinePolygon, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, containsSelection: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) === true, directlySelected: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selected) === true, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLayoutTarget: getLayoutTarget, getTarget: getTarget, hasTarget: layoutTarget !== undefined, hovered: hovered, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, showSelectedOutline: (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.showSelectedOutline) !== null && _a !== void 0 ? _a : false }), (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) && (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) ? (jsx_runtime_1.jsx(SelectedOutlineCanvasRotation_1.SelectedOutlineCanvasRotation, { getLatestTargetByKey: getLatestTargetByKey, layoutTarget: layoutTarget, onDraggingChange: onDraggingChange, outline: outline, transform3DMode: controlTarget.rotationDrag.transform3DMode })) : null] }));
 };
 exports.SelectedOutlineElement = react_1.default.memo(SelectedOutlineElementUnmemoized);

package/dist/components/SelectedOutlineOverlay.js

@@ -485,14 +485,38 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
         ];
     });
 };
-const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurrentState, compositionHeight, compositionWidth, draggingOutline, getLatestOutlineTargetByKey, getSelectableOutlines, onDraggingChange, onContextMenuOpenChange, onSelect, scale, selectedSequenceKeys, sequenceKeysContainingSelection, sequences, translationX, translationY, }) => {
+const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurrentState, compositionHeight, compositionWidth, draggingOutline, getLatestOutlineTargetByKey, getSelectableOutlines, hoveredTimelineNodePathKey, measureAllOutlines, onDraggingChange, onContextMenuOpenChange, onSelect, scale, selectedSequenceKeys, sequenceKeysContainingSelection, sequences, translationX, translationY, }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const updateOutlinesRef = (0, react_1.useRef)(() => undefined);
     const selectableOutlines = (0, react_1.useMemo)(() => {
         return getSelectableOutlines(timelinePosition);
     }, [getSelectableOutlines, timelinePosition]);
+    const selectableOutlinesForLayout = (0, react_1.useMemo)(() => {
+        if (measureAllOutlines) {
+            return selectableOutlines;
+        }
+        // A timeline item can represent multiple connected canvas instances.
+        // Keep every instance of an active source node without calculating targets
+        // for unrelated timeline items while the canvas itself is inactive.
+        const activeNodePathKeys = new Set();
+        for (const { key, nodePathInfo } of selectableOutlines) {
+            const nodePathKey = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(nodePathInfo.sequenceSubscriptionKey);
+            if (selectedSequenceKeys.has(key) ||
+                sequenceKeysContainingSelection.has(key) ||
+                nodePathKey === hoveredTimelineNodePathKey) {
+                activeNodePathKeys.add(nodePathKey);
+            }
+        }
+        return selectableOutlines.filter(({ nodePathInfo }) => activeNodePathKeys.has((0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(nodePathInfo.sequenceSubscriptionKey)));
+    }, [
+        hoveredTimelineNodePathKey,
+        measureAllOutlines,
+        selectableOutlines,
+        selectedSequenceKeys,
+        sequenceKeysContainingSelection,
+    ]);
     const outlineRuntimeControls = (0, react_1.useMemo)(() => {
-        return selectableOutlines.flatMap(({ key, sequence }) => {
+        return selectableOutlinesForLayout.flatMap(({ key, sequence }) => {
             if (!selectedSequenceKeys.has(key) &&
                 !sequenceKeysContainingSelection.has(key)) {
                 return [];
@@ -500,7 +524,7 @@ const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurr
             return sequence.controls ? [sequence.controls] : [];
         });
     }, [
-        selectableOutlines,
+        selectableOutlinesForLayout,
         selectedSequenceKeys,
         sequenceKeysContainingSelection,
     ]);
@@ -512,13 +536,13 @@ const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurr
     const outlineTargets = (0, react_1.useMemo)(() => calculateOutlineTargetsForCurrentState({
         mode: 'layout',
         runtimeValuesByStore: outlineRuntimeValuesByStore,
-        selectableOutlines,
+        selectableOutlines: selectableOutlinesForLayout,
         targetKey: null,
         targetTimelinePosition: timelinePosition,
     }), [
         calculateOutlineTargetsForCurrentState,
         outlineRuntimeValuesByStore,
-        selectableOutlines,
+        selectableOutlinesForLayout,
         timelinePosition,
     ]);
     const outlineTargetsRef = (0, react_1.useRef)(outlineTargets);
@@ -658,6 +682,8 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
         canvasContextMenuOpen ||
         sequenceKeysContainingSelection.size > 0 ||
         (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'timeline';
+    const measureAllOutlines = canvasHovered || draggingOutline || canvasContextMenuOpen;
+    const hoveredTimelineNodePathKey = (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'timeline' ? hoveredSequence.nodePathKey : null;
     (0, react_1.useLayoutEffect)(() => {
         if (measurementActive) {
             return;
@@ -665,6 +691,6 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
         setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
     }, [measurementActive, setHoveredSequence]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlineKeyboardControls_1.SelectedOutlineKeyboardControls, { getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getSelectableOutlines: getCurrentSelectableOutlines }), measurementActive ? (jsx_runtime_1.jsx(ActiveSelectedOutlineOverlay, { calculateOutlineTargetsForCurrentState: calculateOutlineTargetsForCurrentState, compositionHeight: compositionHeight, compositionWidth: compositionWidth, draggingOutline: draggingOutline, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getSelectableOutlines: getSelectableOutlines, onDraggingChange: onDraggingChange, onContextMenuOpenChange: setCanvasContextMenuOpen, onSelect: selectOutlineItem, scale: scale, selectedSequenceKeys: selectedSequenceKeys, sequenceKeysContainingSelection: sequenceKeysContainingSelection, sequences: sequences, translationX: translationX, translationY: translationY })) : null] }));
+            jsx_runtime_1.jsx(SelectedOutlineKeyboardControls_1.SelectedOutlineKeyboardControls, { getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getSelectableOutlines: getCurrentSelectableOutlines }), measurementActive ? (jsx_runtime_1.jsx(ActiveSelectedOutlineOverlay, { calculateOutlineTargetsForCurrentState: calculateOutlineTargetsForCurrentState, compositionHeight: compositionHeight, compositionWidth: compositionWidth, draggingOutline: draggingOutline, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getSelectableOutlines: getSelectableOutlines, hoveredTimelineNodePathKey: hoveredTimelineNodePathKey, measureAllOutlines: measureAllOutlines, onDraggingChange: onDraggingChange, onContextMenuOpenChange: setCanvasContextMenuOpen, onSelect: selectOutlineItem, scale: scale, selectedSequenceKeys: selectedSequenceKeys, sequenceKeysContainingSelection: sequenceKeysContainingSelection, sequences: sequences, translationX: translationX, translationY: translationY })) : null] }));
 };
 exports.SelectedOutlineOverlay = react_1.default.memo(SelectedOutlineOverlayUnmemoized);

package/dist/components/SelectedOutlinePolygon.d.ts

@@ -1,8 +1,9 @@
 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 SelectedOutlineDragTarget, type SelectedOutlineLayoutTarget, type SelectedOutlineTarget } from './selected-outline-types';
 import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
+export declare const SELECTED_OUTLINE_KEY_ATTR = "data-remotion-studio-selected-outline-key";
 export declare const SelectedOutlinePolygon: React.NamedExoticComponent<{
     readonly compositionHeight: number;
     readonly compositionWidth: number;
@@ -15,14 +16,12 @@ export declare const SelectedOutlinePolygon: React.NamedExoticComponent<{
     readonly getTarget: () => SelectedOutlineTarget | undefined;
     readonly hasTarget: boolean;
     readonly hovered: boolean;
-    readonly onContextMenuOpen: SelectedOutlineContextMenuOpenHandler;
-    readonly onContextMenuOpenChange: (open: boolean) => void;
     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 onDoubleClickTarget: (target: SelectedOutlineTarget, button: number, sequenceWasDragged: boolean) => boolean;
     readonly scale: number;
     readonly showSelectedOutline: boolean;
 }>;