@remotion/studio 4.0.527 → 4.0.529

package/dist/components/SelectedOutlinePathPoints.js

@@ -0,0 +1,457 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedOutlinePathPoints = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const paths_1 = require("@remotion/paths");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const pointer_session_1 = require("../helpers/pointer-session");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
+const get_timeline_keyframes_1 = require("./Timeline/get-timeline-keyframes");
+const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
+const SelectedOutlinePathPoints = ({ outline, pathDrag, onDraggingChange }) => {
+    const { setDragOverrides, clearDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { points, connections, implicitTControls } = (0, react_1.useMemo)(() => {
+        if (outline.path === null) {
+            return {
+                points: [],
+                connections: [],
+                implicitTControls: new Map(),
+            };
+        }
+        try {
+            const instructions = (0, paths_1.parsePath)((0, paths_1.normalizePath)(outline.path.d));
+            const pathPoints = [];
+            const pathConnections = [];
+            const pathImplicitTControls = new Map();
+            let x = 0;
+            let y = 0;
+            let subpathX = 0;
+            let subpathY = 0;
+            let previousCubicControl = null;
+            let previousQuadraticControl = null;
+            for (const [instructionIndex, instruction] of instructions.entries()) {
+                if (instruction.type === 'Z') {
+                    x = subpathX;
+                    y = subpathY;
+                    previousCubicControl = null;
+                    previousQuadraticControl = null;
+                    continue;
+                }
+                if (instruction.type === 'C') {
+                    pathConnections.push({
+                        x1: x,
+                        y1: y,
+                        x2: instruction.cp1x,
+                        y2: instruction.cp1y,
+                        key: `${instructionIndex}-start-handle`,
+                    }, {
+                        x1: instruction.x,
+                        y1: instruction.y,
+                        x2: instruction.cp2x,
+                        y2: instruction.cp2y,
+                        key: `${instructionIndex}-end-handle`,
+                    });
+                    pathPoints.push({
+                        x: instruction.cp1x,
+                        y: instruction.cp1y,
+                        key: `${instructionIndex}-cp1`,
+                        instructionIndex,
+                        role: 'cp1',
+                    }, {
+                        x: instruction.cp2x,
+                        y: instruction.cp2y,
+                        key: `${instructionIndex}-cp2`,
+                        instructionIndex,
+                        role: 'cp2',
+                    });
+                    previousCubicControl = { x: instruction.cp2x, y: instruction.cp2y };
+                    previousQuadraticControl = null;
+                }
+                else if (instruction.type === 'S') {
+                    if (previousCubicControl !== null) {
+                        const reflectedX = 2 * x - previousCubicControl.x;
+                        const reflectedY = 2 * y - previousCubicControl.y;
+                        if (reflectedX !== x || reflectedY !== y) {
+                            pathConnections.push({
+                                x1: x,
+                                y1: y,
+                                x2: reflectedX,
+                                y2: reflectedY,
+                                key: `${instructionIndex}-start-handle`,
+                            });
+                            pathPoints.push({
+                                x: reflectedX,
+                                y: reflectedY,
+                                key: `${instructionIndex}-reflected-cp`,
+                                instructionIndex,
+                                role: 'reflected-cp',
+                            });
+                        }
+                    }
+                    pathConnections.push({
+                        x1: instruction.x,
+                        y1: instruction.y,
+                        x2: instruction.cpx,
+                        y2: instruction.cpy,
+                        key: `${instructionIndex}-end-handle`,
+                    });
+                    pathPoints.push({
+                        x: instruction.cpx,
+                        y: instruction.cpy,
+                        key: `${instructionIndex}-cp`,
+                        instructionIndex,
+                        role: 'cp',
+                    });
+                    previousCubicControl = { x: instruction.cpx, y: instruction.cpy };
+                    previousQuadraticControl = null;
+                }
+                else if (instruction.type === 'Q') {
+                    pathConnections.push({
+                        x1: x,
+                        y1: y,
+                        x2: instruction.cpx,
+                        y2: instruction.cpy,
+                        key: `${instructionIndex}-start-handle`,
+                    }, {
+                        x1: instruction.x,
+                        y1: instruction.y,
+                        x2: instruction.cpx,
+                        y2: instruction.cpy,
+                        key: `${instructionIndex}-end-handle`,
+                    });
+                    pathPoints.push({
+                        x: instruction.cpx,
+                        y: instruction.cpy,
+                        key: `${instructionIndex}-cp`,
+                        instructionIndex,
+                        role: 'cp',
+                    });
+                    previousQuadraticControl = { x: instruction.cpx, y: instruction.cpy };
+                    previousCubicControl = null;
+                }
+                else if (instruction.type === 'T') {
+                    const control = previousQuadraticControl === null
+                        ? { x, y }
+                        : {
+                            x: 2 * x - previousQuadraticControl.x,
+                            y: 2 * y - previousQuadraticControl.y,
+                        };
+                    pathImplicitTControls.set(instructionIndex, control);
+                    if (control.x !== x || control.y !== y) {
+                        pathConnections.push({
+                            x1: x,
+                            y1: y,
+                            x2: control.x,
+                            y2: control.y,
+                            key: `${instructionIndex}-start-handle`,
+                        }, {
+                            x1: instruction.x,
+                            y1: instruction.y,
+                            x2: control.x,
+                            y2: control.y,
+                            key: `${instructionIndex}-end-handle`,
+                        });
+                        pathPoints.push({
+                            x: control.x,
+                            y: control.y,
+                            key: `${instructionIndex}-reflected-cp`,
+                            instructionIndex,
+                            role: 'reflected-cp',
+                        });
+                    }
+                    previousQuadraticControl = control;
+                    previousCubicControl = null;
+                }
+                else {
+                    previousCubicControl = null;
+                    previousQuadraticControl = null;
+                }
+                if (instruction.type === 'H') {
+                    x = instruction.x;
+                }
+                else if (instruction.type === 'V') {
+                    y = instruction.y;
+                }
+                else if ('x' in instruction && 'y' in instruction) {
+                    x = instruction.x;
+                    y = instruction.y;
+                }
+                if (instruction.type === 'M') {
+                    subpathX = x;
+                    subpathY = y;
+                }
+                pathPoints.push({
+                    x,
+                    y,
+                    key: `${instructionIndex}-end`,
+                    instructionIndex,
+                    role: 'end',
+                });
+            }
+            const { a, b, c, d, e, f } = outline.path.matrix;
+            const transformPoint = (localX, localY) => ({
+                x: a * localX + c * localY + e,
+                y: b * localX + d * localY + f,
+            });
+            return {
+                points: pathPoints.map((point) => ({
+                    ...transformPoint(point.x, point.y),
+                    localX: point.x,
+                    localY: point.y,
+                    key: point.key,
+                    instructionIndex: point.instructionIndex,
+                    role: point.role,
+                })),
+                connections: pathConnections.map((connection) => {
+                    const from = transformPoint(connection.x1, connection.y1);
+                    const to = transformPoint(connection.x2, connection.y2);
+                    return {
+                        x1: from.x,
+                        y1: from.y,
+                        x2: to.x,
+                        y2: to.y,
+                        key: connection.key,
+                    };
+                }),
+                implicitTControls: pathImplicitTControls,
+            };
+        }
+        catch (_a) {
+            return {
+                points: [],
+                connections: [],
+                implicitTControls: new Map(),
+            };
+        }
+    }, [outline.path]);
+    const onPointPointerDown = (event, point) => {
+        if (event.button !== 0 || outline.path === null) {
+            return;
+        }
+        const svg = event.currentTarget.ownerSVGElement;
+        if (svg === null) {
+            return;
+        }
+        const { a, b, c, d } = outline.path.matrix;
+        const determinant = a * d - b * c;
+        if (!Number.isFinite(determinant) || determinant === 0) {
+            return;
+        }
+        let instructions;
+        try {
+            instructions = (0, paths_1.parsePath)((0, paths_1.normalizePath)(outline.path.d));
+        }
+        catch (_a) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        onDraggingChange(true);
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const originalD = (0, paths_1.serializeInstructions)(instructions);
+        const sourceFrame = (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(pathDrag.sourceFrame, pathDrag.propStatus);
+        let lastD = originalD;
+        const updatePathOverride = (value) => {
+            setDragOverrides(pathDrag.nodePath, 'd', pathDrag.propStatus.status === 'keyframed'
+                ? remotion_1.Internals.makeKeyframedDragOverride({
+                    status: pathDrag.propStatus,
+                    frame: sourceFrame,
+                    value,
+                })
+                : remotion_1.Internals.makeStaticDragOverride(value));
+        };
+        (0, pointer_session_1.startCapturedPointerSession)({
+            event,
+            captureTarget: svg,
+            onMove: (moveEvent) => {
+                moveEvent.preventDefault();
+                const deltaX = moveEvent.clientX - startX;
+                const deltaY = moveEvent.clientY - startY;
+                const localDeltaX = Math.round(((d * deltaX - c * deltaY) / determinant) * 100) / 100;
+                const localDeltaY = Math.round(((a * deltaY - b * deltaX) / determinant) * 100) / 100;
+                if (localDeltaX === 0 && localDeltaY === 0) {
+                    if (lastD !== originalD) {
+                        lastD = originalD;
+                        updatePathOverride(originalD);
+                    }
+                    return;
+                }
+                const nextX = localDeltaX === 0
+                    ? point.localX
+                    : Math.round((point.localX + localDeltaX) * 100) / 100;
+                const nextY = localDeltaY === 0
+                    ? point.localY
+                    : Math.round((point.localY + localDeltaY) * 100) / 100;
+                const translatedX = (value) => nextX === point.localX
+                    ? value
+                    : Math.round((value + nextX - point.localX) * 100) / 100;
+                const translatedY = (value) => nextY === point.localY
+                    ? value
+                    : Math.round((value + nextY - point.localY) * 100) / 100;
+                const instruction = instructions[point.instructionIndex];
+                if (instruction === undefined) {
+                    return;
+                }
+                let updated;
+                if (point.role === 'end') {
+                    if (instruction.type === 'H') {
+                        updated =
+                            nextY === point.localY
+                                ? { ...instruction, x: nextX }
+                                : { type: 'L', x: nextX, y: nextY };
+                    }
+                    else if (instruction.type === 'V') {
+                        updated =
+                            nextX === point.localX
+                                ? { ...instruction, y: nextY }
+                                : { type: 'L', x: nextX, y: nextY };
+                    }
+                    else if (instruction.type === 'C') {
+                        updated = {
+                            ...instruction,
+                            cp2x: translatedX(instruction.cp2x),
+                            cp2y: translatedY(instruction.cp2y),
+                            x: nextX,
+                            y: nextY,
+                        };
+                    }
+                    else if (instruction.type === 'S' || instruction.type === 'Q') {
+                        updated = {
+                            ...instruction,
+                            cpx: translatedX(instruction.cpx),
+                            cpy: translatedY(instruction.cpy),
+                            x: nextX,
+                            y: nextY,
+                        };
+                    }
+                    else if (instruction.type === 'T') {
+                        const control = implicitTControls.get(point.instructionIndex);
+                        if (control === undefined) {
+                            return;
+                        }
+                        updated = {
+                            type: 'Q',
+                            cpx: translatedX(control.x),
+                            cpy: translatedY(control.y),
+                            x: nextX,
+                            y: nextY,
+                        };
+                    }
+                    else if ('x' in instruction && 'y' in instruction) {
+                        updated = { ...instruction, x: nextX, y: nextY };
+                    }
+                    else {
+                        return;
+                    }
+                }
+                else if (point.role === 'cp1' && instruction.type === 'C') {
+                    updated = { ...instruction, cp1x: nextX, cp1y: nextY };
+                }
+                else if (point.role === 'cp2' && instruction.type === 'C') {
+                    updated = { ...instruction, cp2x: nextX, cp2y: nextY };
+                }
+                else if (point.role === 'cp' &&
+                    (instruction.type === 'Q' || instruction.type === 'S')) {
+                    updated = { ...instruction, cpx: nextX, cpy: nextY };
+                }
+                else if (point.role === 'reflected-cp' && instruction.type === 'S') {
+                    updated = {
+                        type: 'C',
+                        cp1x: nextX,
+                        cp1y: nextY,
+                        cp2x: instruction.cpx,
+                        cp2y: instruction.cpy,
+                        x: instruction.x,
+                        y: instruction.y,
+                    };
+                }
+                else if (point.role === 'reflected-cp' && instruction.type === 'T') {
+                    updated = {
+                        type: 'Q',
+                        cpx: nextX,
+                        cpy: nextY,
+                        x: instruction.x,
+                        y: instruction.y,
+                    };
+                }
+                else {
+                    return;
+                }
+                const nextInstructions = instructions.slice();
+                nextInstructions[point.instructionIndex] = updated;
+                if (point.role === 'end') {
+                    const nextInstruction = instructions[point.instructionIndex + 1];
+                    if ((nextInstruction === null || nextInstruction === void 0 ? void 0 : nextInstruction.type) === 'C') {
+                        nextInstructions[point.instructionIndex + 1] = {
+                            ...nextInstruction,
+                            cp1x: translatedX(nextInstruction.cp1x),
+                            cp1y: translatedY(nextInstruction.cp1y),
+                        };
+                    }
+                    else if ((nextInstruction === null || nextInstruction === void 0 ? void 0 : nextInstruction.type) === 'Q') {
+                        nextInstructions[point.instructionIndex + 1] = {
+                            ...nextInstruction,
+                            cpx: translatedX(nextInstruction.cpx),
+                            cpy: translatedY(nextInstruction.cpy),
+                        };
+                    }
+                }
+                const nextD = (0, paths_1.serializeInstructions)(nextInstructions);
+                if (lastD === nextD) {
+                    return;
+                }
+                lastD = nextD;
+                updatePathOverride(nextD);
+            },
+            onEnd: (reason, endEvent) => {
+                onDraggingChange(false);
+                if (!(0, pointer_session_1.isPointerSessionRelease)(reason, endEvent) || lastD === originalD) {
+                    clearDragOverrides(pathDrag.nodePath);
+                    return;
+                }
+                const promise = pathDrag.propStatus.status === 'keyframed'
+                    ? (0, call_add_keyframe_1.callAddSequenceKeyframe)({
+                        fileName: pathDrag.nodePath.absolutePath,
+                        nodePath: pathDrag.nodePath,
+                        fieldKey: 'd',
+                        sourceFrame,
+                        value: lastD,
+                        schema: pathDrag.schema,
+                        setPropStatuses,
+                        clientId: pathDrag.clientId,
+                    })
+                    : (0, save_sequence_prop_1.saveSequenceProps)({
+                        changes: [
+                            {
+                                fileName: pathDrag.nodePath.absolutePath,
+                                nodePath: pathDrag.nodePath,
+                                fieldKey: 'd',
+                                value: lastD,
+                                defaultValue: null,
+                                schema: pathDrag.schema,
+                            },
+                        ],
+                        addedKeyframes: null,
+                        movedKeyframes: null,
+                        setPropStatuses,
+                        clientId: pathDrag.clientId,
+                        undoLabel: 'Edit path point',
+                        redoLabel: 'Edit path point back',
+                    });
+                promise
+                    .catch((error) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not save path: ${error instanceof Error ? error.message : String(error)}`, 3000);
+                })
+                    .finally(() => clearDragOverrides(pathDrag.nodePath));
+            },
+        });
+    };
+    return (jsx_runtime_1.jsxs("g", { children: [connections.map((connection) => (jsx_runtime_1.jsx("line", { x1: connection.x1, y1: connection.y1, x2: connection.x2, y2: connection.y2, stroke: colors_1.BLUE, strokeWidth: 2, pointerEvents: "none" }, connection.key))), points.map((point) => (jsx_runtime_1.jsxs("g", { children: [
+                    jsx_runtime_1.jsx("circle", { cx: point.x, cy: point.y, r: 10, fill: "transparent", pointerEvents: "all", onPointerDown: (event) => onPointPointerDown(event, point), style: { cursor: 'default' } }), jsx_runtime_1.jsx("circle", { cx: point.x, cy: point.y, r: 4.5, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, pointerEvents: "none" })
+                ] }, point.key)))] }));
+};
+exports.SelectedOutlinePathPoints = SelectedOutlinePathPoints;

package/dist/components/SelectedOutlinePolygon.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectedOutlinePolygon = exports.SELECTED_OUTLINE_KEY_ATTR = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_1 = require("@remotion/canvas");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
@@ -49,7 +50,6 @@ 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");
@@ -57,6 +57,8 @@ 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 should_clear_selection_on_pointer_down_1 = require("./Timeline/should-clear-selection-on-pointer-down");
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
+const { CanvasOutlinePolygon, handleCanvasOutlinePointerDown } = canvas_1.CanvasInternals;
 exports.SELECTED_OUTLINE_KEY_ATTR = 'data-remotion-studio-selected-outline-key';
 const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth, containsSelection, directlySelected, dragging, getAllDragOutlines, getAllDragTargets, getLayoutTarget, getTarget, hasTarget, hovered, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, showSelectedOutline, translateWithCommandKey, }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -67,7 +69,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
     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 { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
     const visible = showSelectedOutline || hovered;
     const getEffectDropTarget = react_1.default.useCallback(() => {
@@ -84,45 +86,26 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         return {
             clientId: previewServerState.clientId,
             fileName: nodePath.absolutePath,
-            nodePath,
+            nodePathInfo: target.nodePathInfo,
         };
     }, [getLayoutTarget, previewServerState]);
     const onPointerDown = react_1.default.useCallback((event) => {
         var _a;
         const target = getTarget();
-        if (event.button !== 0 || target === undefined) {
+        const decision = handleCanvasOutlinePointerDown({
+            event,
+            polygon: polygonRef.current,
+            hasTarget: target !== undefined,
+            selected: (_a = target === null || target === void 0 ? void 0 : target.selected) !== null && _a !== void 0 ? _a : false,
+            containsSelection,
+            translateWithCommandKey,
+            isMac: is_mac_1.isMac,
+        });
+        if (decision === null || target === undefined) {
             return;
         }
-        const { drag, selected } = target;
-        event.preventDefault();
-        event.stopPropagation();
-        const temporaryTranslate = translateWithCommandKey &&
-            (selected || containsSelection) &&
-            (is_mac_1.isMac ? event.metaKey : event.ctrlKey);
-        const interaction = temporaryTranslate
-            ? { shiftKey: false, toggleKey: false }
-            : (0, selected_outline_measurement_1.getOutlineSelectionInteraction)(event);
-        const shouldUpdateSelection = !selected || interaction.shiftKey || interaction.toggleKey;
-        const ownerSvg = (_a = polygonRef.current) === null || _a === void 0 ? void 0 : _a.ownerSVGElement;
-        let pointerInsideSelectedOutline = false;
-        if (ownerSvg) {
-            const screenPoint = ownerSvg.createSVGPoint();
-            screenPoint.x = event.clientX;
-            screenPoint.y = event.clientY;
-            pointerInsideSelectedOutline = Array.from(ownerSvg.querySelectorAll('polygon[data-remotion-directly-selected-outline="true"]')).some((selectedPolygon) => {
-                const screenTransform = selectedPolygon.getScreenCTM();
-                if (screenTransform === null) {
-                    return false;
-                }
-                const polygonPoint = screenPoint.matrixTransform(screenTransform.inverse());
-                return (selectedPolygon.isPointInFill(polygonPoint) ||
-                    selectedPolygon.isPointInStroke(polygonPoint));
-            });
-        }
-        const deferSelection = !selected &&
-            !interaction.shiftKey &&
-            !interaction.toggleKey &&
-            (containsSelection || pointerInsideSelectedOutline);
+        const { drag } = target;
+        const { interaction, temporaryTranslate, shouldUpdateSelection, deferSelection, dragExistingSelection, } = decision;
         if (!deferSelection && shouldUpdateSelection) {
             onSelect(target.selection, interaction);
         }
@@ -139,7 +122,6 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         }
         const startPointerX = event.clientX;
         const startPointerY = event.clientY;
-        const dragExistingSelection = selected || deferSelection;
         const dragTargets = dragExistingSelection
             ? getAllDragTargets()
             : drag === null
@@ -407,18 +389,11 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         await (0, effect_drag_and_drop_1.addEffectFromDragData)({
             dragData,
             fileName: effectDrop.fileName,
-            nodePath: effectDrop.nodePath,
+            nodePathInfo: effectDrop.nodePathInfo,
             clientId: effectDrop.clientId,
+            selectItems,
         });
-    }, [getEffectDropTarget]);
-    return (jsx_runtime_1.jsx("polygon", { ref: polygonRef, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', [exports.SELECTED_OUTLINE_KEY_ATTR]: outline.key, "data-remotion-directly-selected-outline": directlySelected ? 'true' : undefined, 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, onPointerDownCapture: dragAwareDoubleClick.beginPointerGesture, onClick: onClick, onDragOver: onEffectDragOver, onDragLeave: onEffectDragLeave, onDrop: onEffectDrop }));
+    }, [getEffectDropTarget, selectItems]);
+    return (jsx_runtime_1.jsx(CanvasOutlinePolygon, { ref: polygonRef, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', [exports.SELECTED_OUTLINE_KEY_ATTR]: outline.key, outline: outline, directlySelected: directlySelected, dragging: dragging, fill: effectDropHovered ? colors_1.TIMELINE_DROP_BLUE_ALPHA_12 : colors_1.TRANSPARENT, stroke: colors_1.BLUE, visible: visible || effectDropHovered, interactive: hasTarget, onHoverChange: onHoverChange, onPointerDown: onPointerDown, onPointerDownCapture: dragAwareDoubleClick.beginPointerGesture, onClick: onClick, onDragOver: onEffectDragOver, onDragLeave: onEffectDragLeave, onDrop: onEffectDrop }));
 };
 exports.SelectedOutlinePolygon = react_1.default.memo(SelectedOutlinePolygonUnmemoized);

package/dist/components/SelectedOutlineRenderer.d.ts

@@ -1,18 +1,16 @@
 import React from 'react';
-import type { SelectedOutlineLayoutTarget, SelectedOutlineTarget } from './selected-outline-types';
+import type { SelectedOutlineDragTarget, SelectedOutlineLayoutTarget, SelectedOutlineTarget } from './selected-outline-types';
 export declare const SelectedOutlineRenderer: React.NamedExoticComponent<{
     readonly compositionHeight: number;
     readonly compositionWidth: number;
     readonly dragging: boolean;
+    readonly getAllDragTargets: () => readonly SelectedOutlineDragTarget[];
     readonly getLatestOutlineTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
     readonly outlineTargets: readonly SelectedOutlineLayoutTarget[];
     readonly onDraggingChange: (dragging: boolean) => void;
     readonly onContextMenuOpenChange: (open: boolean) => void;
     readonly onSelect: (item: import("@remotion/canvas").CanvasSelectionItem, interaction?: import("@remotion/canvas").CanvasSelectionInteraction | undefined) => void;
     readonly scale: number;
-    readonly sequences: readonly {
-        readonly id: string;
-        readonly parent: string | null;
-    }[];
+    readonly sequences: readonly import("@remotion/canvas").CanvasOutlineSequenceParent[];
     readonly updateOutlinesRef: React.MutableRefObject<() => void>;
 }>;