@remotion/studio 4.0.518 → 4.0.519

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

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSelectedRotationInfo = exports.getSelectedTransformOriginInfo = exports.getSelectedCropInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
+exports.outlinesAreEqual = exports.measureOutlineTargets = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedRotationInfo = exports.getSelectedTransformOriginInfo = exports.getSelectedCropInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.cropOutlinePoints = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
+const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const colors_1 = require("../helpers/colors");
+const get_box_quads_polyfill_internals_js_1 = require("../helpers/get-box-quads-polyfill-internals.js");
+const get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
+const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const selected_outline_geometry_1 = require("./selected-outline-geometry");
 const selected_outline_types_1 = require("./selected-outline-types");
 const selected_outline_uv_1 = require("./selected-outline-uv");
@@ -104,6 +108,128 @@ const getSelectedOutlineRotationPivot = ({ dimensions, points, transformOriginVa
     return (0, selected_outline_uv_1.getUvHandlePosition)(points, uv);
 };
 exports.getSelectedOutlineRotationPivot = getSelectedOutlineRotationPivot;
+const rectToPoints = (elementRect, containerRect) => {
+    const left = elementRect.left - containerRect.left;
+    const top = elementRect.top - containerRect.top;
+    const right = elementRect.right - containerRect.left;
+    const bottom = elementRect.bottom - containerRect.top;
+    return [
+        { x: left, y: top },
+        { x: right, y: top },
+        { x: right, y: bottom },
+        { x: left, y: bottom },
+    ];
+};
+const getTransformedSvgViewportPoints = ({ viewport, ctm, containerRect, }) => {
+    const transformPoint = (x, y) => ({
+        x: ctm.a * x + ctm.c * y + ctm.e - containerRect.left,
+        y: ctm.b * x + ctm.d * y + ctm.f - containerRect.top,
+    });
+    const left = viewport.x;
+    const top = viewport.y;
+    const right = viewport.x + viewport.width;
+    const bottom = viewport.y + viewport.height;
+    return [
+        transformPoint(left, top),
+        transformPoint(right, top),
+        transformPoint(right, bottom),
+        transformPoint(left, bottom),
+    ];
+};
+exports.getTransformedSvgViewportPoints = getTransformedSvgViewportPoints;
+const quadToPoints = (quad, containerRect) => {
+    // `getBoxQuads`/the ponyfill returns the quad in viewport coordinates.
+    // The overlay <svg> is unscaled (the canvas `scale()`/pan live on a sibling
+    // container, not the svg), so 1 user unit == 1 px and we only need to move
+    // the quad into the svg's local space by subtracting its viewport origin.
+    // We deliberately do not pass `relativeTo` to the ponyfill: when the target
+    // is not an ancestor of the element, the polyfill cannot resolve the
+    // coordinate space and leaves the quad in viewport coordinates.
+    return [
+        { x: quad.p1.x - containerRect.left, y: quad.p1.y - containerRect.top },
+        { x: quad.p2.x - containerRect.left, y: quad.p2.y - containerRect.top },
+        { x: quad.p3.x - containerRect.left, y: quad.p3.y - containerRect.top },
+        { x: quad.p4.x - containerRect.left, y: quad.p4.y - containerRect.top },
+    ];
+};
+const isSvgSvgElement = (element) => {
+    var _a;
+    const ownerSvgSvgElement = (_a = element.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.SVGSVGElement;
+    return ((typeof SVGSVGElement !== 'undefined' &&
+        element instanceof SVGSVGElement) ||
+        (ownerSvgSvgElement !== undefined && element instanceof ownerSvgSvgElement));
+};
+const getSvgSvgElementViewport = (element) => {
+    const viewBox = element.viewBox.baseVal;
+    if (viewBox.width > 0 && viewBox.height > 0) {
+        return {
+            x: viewBox.x,
+            y: viewBox.y,
+            width: viewBox.width,
+            height: viewBox.height,
+        };
+    }
+    return {
+        x: 0,
+        y: 0,
+        width: element.width.baseVal.value,
+        height: element.height.baseVal.value,
+    };
+};
+const getSvgSvgElementOutlinePoints = (element, containerRect) => {
+    const ctm = element.getScreenCTM();
+    const viewport = getSvgSvgElementViewport(element);
+    if (ctm === null || (viewport.width === 0 && viewport.height === 0)) {
+        return null;
+    }
+    return (0, exports.getTransformedSvgViewportPoints)({
+        viewport,
+        ctm,
+        containerRect,
+    });
+};
+const getElementOutlinePoints = (element, containerRect, includeOutsideContainer) => {
+    const elementRect = element.getBoundingClientRect();
+    if (elementRect.width === 0 && elementRect.height === 0) {
+        return null;
+    }
+    if (!includeOutsideContainer &&
+        (elementRect.right <= containerRect.left ||
+            elementRect.left >= containerRect.right ||
+            elementRect.bottom <= containerRect.top ||
+            elementRect.top >= containerRect.bottom)) {
+        return null;
+    }
+    if (isSvgSvgElement(element)) {
+        return getSvgSvgElementOutlinePoints(element, containerRect);
+    }
+    const quads = (0, get_box_quads_ponyfill_1.getBoxQuadsPonyfill)(element, {
+        box: 'border',
+    });
+    const quad = quads === null || quads === void 0 ? void 0 : quads[0];
+    if (!quad) {
+        return rectToPoints(elementRect, containerRect);
+    }
+    return quadToPoints(quad, containerRect);
+};
+const cropOutlinePoints = (points, crop) => {
+    if (crop.left === 0 &&
+        crop.right === 0 &&
+        crop.top === 0 &&
+        crop.bottom === 0) {
+        return points;
+    }
+    const { left, top } = crop;
+    const right = 1 - crop.right;
+    const bottom = 1 - crop.bottom;
+    return [
+        (0, selected_outline_uv_1.getUvHandlePosition)(points, [left, top]),
+        (0, selected_outline_uv_1.getUvHandlePosition)(points, [right, top]),
+        (0, selected_outline_uv_1.getUvHandlePosition)(points, [right, bottom]),
+        (0, selected_outline_uv_1.getUvHandlePosition)(points, [left, bottom]),
+    ];
+};
+exports.cropOutlinePoints = cropOutlinePoints;
 const getSelectedSequenceKeys = (selectedItems) => {
     return new Set(selectedItems
         .filter((item) => item.type === 'sequence')
@@ -262,3 +388,115 @@ const getSelectedRotationInfo = (selectedItems) => {
     };
 };
 exports.getSelectedRotationInfo = getSelectedRotationInfo;
+const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths, compositions = [], timelinePosition, }) => {
+    return (0, calculate_timeline_1.calculateTimeline)({
+        sequences: [...sequences],
+        overrideIdsToNodePaths,
+        compositions,
+    })
+        .filter((track) => {
+        if (track.nodePathInfo === null) {
+            return false;
+        }
+        return (track.sequence.showInTimeline &&
+            timelinePosition >= track.sequence.from &&
+            timelinePosition < track.sequence.from + track.sequence.duration &&
+            track.nodePathInfo.auxiliaryKeys.length === 0);
+    })
+        .filter((track) => track.sequence.refForOutline !== null)
+        .sort((a, b) => a.depth - b.depth)
+        .map((track) => {
+        if (track.nodePathInfo === null) {
+            throw new Error('Expected selected outline to have a node path');
+        }
+        return {
+            depth: track.depth,
+            keyframeDisplayOffset: track.keyframeDisplayOffset,
+            key: (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(track.nodePathInfo),
+            nodePathInfo: track.nodePathInfo,
+            sequence: track.sequence,
+        };
+    });
+};
+exports.getSequencesWithSelectableOutlines = getSequencesWithSelectableOutlines;
+const measureOutlines = (container, targets, hoveredTimelineNodePathKey) => {
+    return (0, exports.measureOutlineTargets)(container, targets.map((target) => ({
+        crop: target.crop,
+        includeOutsideContainer: target.showSelectedOutline ||
+            (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(target.nodePathInfo.sequenceSubscriptionKey) === hoveredTimelineNodePathKey,
+        key: target.key,
+        ref: target.ref,
+    })));
+};
+exports.measureOutlines = measureOutlines;
+const measureOutlineTargets = (container, targets) => {
+    // Reuse shared ancestor geometry within this synchronous batch only.
+    (0, get_box_quads_polyfill_internals_js_1.useCache)();
+    const containerRect = container.getBoundingClientRect();
+    const outlines = [];
+    for (const target of targets) {
+        const element = target.ref.current;
+        if (element === null) {
+            continue;
+        }
+        const uncroppedPoints = getElementOutlinePoints(element, containerRect, target.includeOutsideContainer);
+        if (uncroppedPoints === null) {
+            continue;
+        }
+        const points = (0, exports.cropOutlinePoints)(uncroppedPoints, target.crop);
+        outlines.push({
+            key: target.key,
+            dimensions: element instanceof HTMLElement
+                ? {
+                    width: element.offsetWidth,
+                    height: element.offsetHeight,
+                }
+                : element instanceof SVGSVGElement
+                    ? {
+                        width: element.width.baseVal.value,
+                        height: element.height.baseVal.value,
+                    }
+                    : null,
+            uncroppedPoints,
+            points,
+        });
+    }
+    return outlines;
+};
+exports.measureOutlineTargets = measureOutlineTargets;
+const outlinesAreEqual = (a, b) => {
+    var _a, _b, _c, _d;
+    if (a.length !== b.length) {
+        return false;
+    }
+    for (let i = 0; i < a.length; i++) {
+        if (a[i].key !== b[i].key) {
+            return false;
+        }
+        if (((_a = a[i].dimensions) === null || _a === void 0 ? void 0 : _a.width) !== ((_b = b[i].dimensions) === null || _b === void 0 ? void 0 : _b.width) ||
+            ((_c = a[i].dimensions) === null || _c === void 0 ? void 0 : _c.height) !== ((_d = b[i].dimensions) === null || _d === void 0 ? void 0 : _d.height)) {
+            return false;
+        }
+        const aUncropped = a[i].uncroppedPoints;
+        const bUncropped = b[i].uncroppedPoints;
+        if ((aUncropped === null) !== (bUncropped === null)) {
+            return false;
+        }
+        if (aUncropped !== null && bUncropped !== null) {
+            for (let j = 0; j < aUncropped.length; j++) {
+                if (Math.abs(aUncropped[j].x - bUncropped[j].x) > 0.01 ||
+                    Math.abs(aUncropped[j].y - bUncropped[j].y) > 0.01) {
+                    return false;
+                }
+            }
+        }
+        for (let j = 0; j < a[i].points.length; j++) {
+            if (Math.abs(a[i].points[j].x - b[i].points[j].x) > 0.01 ||
+                Math.abs(a[i].points[j].y - b[i].points[j].y) > 0.01) {
+                return false;
+            }
+        }
+    }
+    return true;
+};
+exports.outlinesAreEqual = outlinesAreEqual;

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

@@ -0,0 +1,12 @@
+import type { SelectedOutline } from './selected-outline-geometry';
+import type { SelectedOutlineLayoutTarget } from './selected-outline-types';
+type OutlineSequenceParent = {
+    readonly id: string;
+    readonly parent: string | null;
+};
+export declare const orderOutlinesForRendering: ({ outlines, sequences, targetsByKey, }: {
+    readonly outlines: readonly SelectedOutline[];
+    readonly sequences: readonly OutlineSequenceParent[];
+    readonly targetsByKey: ReadonlyMap<string, SelectedOutlineLayoutTarget>;
+}) => readonly SelectedOutline[];
+export {};

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

@@ -0,0 +1,251 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.orderOutlinesForRendering = void 0;
+const outlinePointEqualityTolerance = 0.5;
+const outlineAreaEqualityTolerance = 0.5;
+const outlineBoundsOverlapTolerance = 0.5;
+const outlinePointsAreEquivalent = (a, b) => {
+    return (Math.abs(a.x - b.x) <= outlinePointEqualityTolerance &&
+        Math.abs(a.y - b.y) <= outlinePointEqualityTolerance);
+};
+const outlinesHaveEquivalentHitArea = (a, b) => {
+    if (a.points.length !== b.points.length) {
+        return false;
+    }
+    for (let startIndex = 0; startIndex < b.points.length; startIndex++) {
+        for (const direction of [1, -1]) {
+            const pointsMatch = a.points.every((point, index) => {
+                const bIndex = (startIndex + direction * index + b.points.length) % b.points.length;
+                return outlinePointsAreEquivalent(point, b.points[bIndex]);
+            });
+            if (pointsMatch) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+const getOutlineHitArea = (outline) => {
+    let area = 0;
+    for (let i = 0; i < outline.points.length; i++) {
+        const current = outline.points[i];
+        const next = outline.points[(i + 1) % outline.points.length];
+        area += current.x * next.y - next.x * current.y;
+    }
+    return Math.abs(area) / 2;
+};
+const getOutlineBounds = (outline) => {
+    const xs = outline.points.map((point) => point.x);
+    const ys = outline.points.map((point) => point.y);
+    return {
+        maxX: Math.max(...xs),
+        maxY: Math.max(...ys),
+        minX: Math.min(...xs),
+        minY: Math.min(...ys),
+    };
+};
+const outlineBoundsOverlap = (a, b) => {
+    const aBounds = getOutlineBounds(a);
+    const bBounds = getOutlineBounds(b);
+    return (aBounds.minX <= bBounds.maxX + outlineBoundsOverlapTolerance &&
+        aBounds.maxX + outlineBoundsOverlapTolerance >= bBounds.minX &&
+        aBounds.minY <= bBounds.maxY + outlineBoundsOverlapTolerance &&
+        aBounds.maxY + outlineBoundsOverlapTolerance >= bBounds.minY);
+};
+const getSequenceId = (target) => {
+    var _a;
+    var _b;
+    return (_b = (_a = target === null || target === void 0 ? void 0 : target.sequence) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null;
+};
+const getParentBySequenceId = ({ sequences, targetsByKey, }) => {
+    const parentBySequenceId = new Map();
+    for (const sequence of sequences) {
+        parentBySequenceId.set(sequence.id, sequence.parent);
+    }
+    for (const target of targetsByKey.values()) {
+        const sequenceId = getSequenceId(target);
+        if (sequenceId !== null && !parentBySequenceId.has(sequenceId)) {
+            parentBySequenceId.set(sequenceId, target.sequence.parent);
+        }
+    }
+    return parentBySequenceId;
+};
+const isAncestorTarget = ({ ancestor, descendant, parentBySequenceId, }) => {
+    var _a;
+    var _b, _c;
+    const ancestorId = getSequenceId(ancestor);
+    if (ancestorId === null) {
+        return false;
+    }
+    let parentId = (_b = (_a = descendant.sequence) === null || _a === void 0 ? void 0 : _a.parent) !== null && _b !== void 0 ? _b : null;
+    while (parentId !== null) {
+        if (parentId === ancestorId) {
+            return true;
+        }
+        parentId = (_c = parentBySequenceId.get(parentId)) !== null && _c !== void 0 ? _c : null;
+    }
+    return false;
+};
+const orderOutlineGroup = ({ outlines, parentBySequenceId, targetsByKey, }) => {
+    var _a;
+    var _b, _c, _d, _e;
+    const incomingEdges = new Map();
+    const outgoingEdges = new Map();
+    const outlinesByKey = new Map(outlines.map((outline) => [outline.key, outline]));
+    for (const outline of outlines) {
+        incomingEdges.set(outline.key, new Set());
+        outgoingEdges.set(outline.key, new Set());
+    }
+    const hasPath = ({ fromKey, seen, toKey, }) => {
+        var _a;
+        if (fromKey === toKey) {
+            return true;
+        }
+        if (seen.has(fromKey)) {
+            return false;
+        }
+        seen.add(fromKey);
+        for (const nextKey of (_a = outgoingEdges.get(fromKey)) !== null && _a !== void 0 ? _a : []) {
+            if (hasPath({ fromKey: nextKey, seen, toKey })) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const addEdge = (before, after, options) => {
+        if (before.key === after.key) {
+            return;
+        }
+        const incoming = incomingEdges.get(after.key);
+        const outgoing = outgoingEdges.get(before.key);
+        if (incoming === undefined || outgoing === undefined) {
+            throw new Error('Expected outline to be registered before adding edge');
+        }
+        if (outgoing.has(after.key)) {
+            return;
+        }
+        if (hasPath({ fromKey: after.key, seen: new Set(), toKey: before.key })) {
+            if (options === null || options === void 0 ? void 0 : options.skipIfCycle) {
+                return;
+            }
+            throw new Error('Could not determine a stable outline rendering order');
+        }
+        incoming.add(before.key);
+        outgoing.add(after.key);
+    };
+    const addAncestorConstraint = ({ ancestor, descendant, descendantContainsSelection, equivalentHitArea, }) => {
+        // Usually, children should be above parents so nested elements are directly
+        // selectable. If an unselected child has the same hit area as its parent, put
+        // it below the parent so the wrapper can be selected. Once the child or
+        // one of its properties is selected, keep it above the parent so it remains
+        // directly draggable.
+        if (equivalentHitArea && !descendantContainsSelection) {
+            addEdge(descendant, ancestor);
+        }
+        else {
+            addEdge(ancestor, descendant);
+        }
+    };
+    const outlineBySequenceId = new Map();
+    for (const outline of outlines) {
+        const sequenceId = getSequenceId(targetsByKey.get(outline.key));
+        if (sequenceId !== null) {
+            outlineBySequenceId.set(sequenceId, outline);
+        }
+    }
+    // Only constrain each outline against its nearest rendered ancestor. The
+    // resulting graph follows the sequence tree, so pairwise subpixel equivalence
+    // cannot introduce contradictory edges across three nested outlines.
+    for (const descendant of outlines) {
+        const descendantTarget = targetsByKey.get(descendant.key);
+        let parentId = (_b = (_a = descendantTarget === null || descendantTarget === void 0 ? void 0 : descendantTarget.sequence) === null || _a === void 0 ? void 0 : _a.parent) !== null && _b !== void 0 ? _b : null;
+        while (parentId !== null) {
+            const ancestor = outlineBySequenceId.get(parentId);
+            if (ancestor !== undefined) {
+                addAncestorConstraint({
+                    ancestor,
+                    descendant,
+                    descendantContainsSelection: ((_c = descendantTarget === null || descendantTarget === void 0 ? void 0 : descendantTarget.selected) !== null && _c !== void 0 ? _c : false) ||
+                        ((_d = descendantTarget === null || descendantTarget === void 0 ? void 0 : descendantTarget.containsSelection) !== null && _d !== void 0 ? _d : false),
+                    equivalentHitArea: outlinesHaveEquivalentHitArea(ancestor, descendant),
+                });
+                break;
+            }
+            parentId = (_e = parentBySequenceId.get(parentId)) !== null && _e !== void 0 ? _e : null;
+        }
+    }
+    // For unrelated overlapping outlines, put broader hit targets below
+    // smaller ones so a large selected sequence cannot swallow clicks on
+    // a more specific element in the same canvas area.
+    for (let i = 0; i < outlines.length; i++) {
+        for (let j = i + 1; j < outlines.length; j++) {
+            const a = outlines[i];
+            const b = outlines[j];
+            const aTarget = targetsByKey.get(a.key);
+            const bTarget = targetsByKey.get(b.key);
+            if (aTarget === undefined || bTarget === undefined) {
+                continue;
+            }
+            const aAncestorOfB = isAncestorTarget({
+                ancestor: aTarget,
+                descendant: bTarget,
+                parentBySequenceId,
+            });
+            const bAncestorOfA = isAncestorTarget({
+                ancestor: bTarget,
+                descendant: aTarget,
+                parentBySequenceId,
+            });
+            if (aAncestorOfB || bAncestorOfA || !outlineBoundsOverlap(a, b)) {
+                continue;
+            }
+            const aArea = getOutlineHitArea(a);
+            const bArea = getOutlineHitArea(b);
+            if (Math.abs(aArea - bArea) <= outlineAreaEqualityTolerance) {
+                continue;
+            }
+            if (aArea > bArea) {
+                addEdge(a, b, { skipIfCycle: true });
+            }
+            else {
+                addEdge(b, a, { skipIfCycle: true });
+            }
+        }
+    }
+    const emitted = new Set();
+    const visiting = new Set();
+    const ordered = [];
+    const visit = (outline) => {
+        var _a;
+        if (emitted.has(outline.key)) {
+            return;
+        }
+        if (visiting.has(outline.key)) {
+            throw new Error('Could not determine a stable outline rendering order');
+        }
+        visiting.add(outline.key);
+        for (const dependencyKey of (_a = incomingEdges.get(outline.key)) !== null && _a !== void 0 ? _a : []) {
+            const dependency = outlinesByKey.get(dependencyKey);
+            if (dependency === undefined) {
+                throw new Error('Expected outline dependency to exist');
+            }
+            visit(dependency);
+        }
+        visiting.delete(outline.key);
+        emitted.add(outline.key);
+        ordered.push(outline);
+    };
+    for (const outline of outlines) {
+        visit(outline);
+    }
+    return ordered;
+};
+const orderOutlinesForRendering = ({ outlines, sequences, targetsByKey, }) => {
+    const parentBySequenceId = getParentBySequenceId({ sequences, targetsByKey });
+    return orderOutlineGroup({
+        outlines,
+        parentBySequenceId,
+        targetsByKey,
+    });
+};
+exports.orderOutlinesForRendering = orderOutlinesForRendering;

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

@@ -1,15 +1,15 @@
-import type { CanvasOutlineTarget } from '@remotion/canvas';
 import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, InteractivitySchema, InteractivitySchemaField, SequencePropsSubscriptionKey, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 import type { ComboboxValue } from './NewComposition/ComboBox';
 import type { TimelineSelection } from './Timeline/TimelineSelection';
 export type SelectedOutlineContextMenuOpenResult = false | readonly ComboboxValue[];
 export type SelectedOutlineContextMenuOpenHandler = () => SelectedOutlineContextMenuOpenResult | Promise<SelectedOutlineContextMenuOpenResult>;
-export type SelectedOutlineLayoutTarget = CanvasOutlineTarget & {
+export type SelectedOutlineLayoutTarget = {
     readonly key: string;
     readonly containsSelection: boolean;
     readonly keyframeDisplayOffset: number;
     readonly nodePathInfo: SequenceNodePathInfo;
+    readonly ref: React.RefObject<Element | null>;
     readonly selected: boolean;
     readonly selectedForCrop: boolean;
     readonly selectedForRotation: boolean;
@@ -19,6 +19,12 @@ export type SelectedOutlineLayoutTarget = CanvasOutlineTarget & {
     readonly transformOriginValue: string;
     readonly selection: TimelineSelection;
     readonly sequence: TSequence;
+    readonly crop: {
+        readonly left: number;
+        readonly right: number;
+        readonly top: number;
+        readonly bottom: number;
+    };
 };
 export type SelectedOutlineTarget = SelectedOutlineLayoutTarget & {
     readonly canCrop: boolean;
@@ -139,6 +145,13 @@ export type SelectedOutlineRotationDragState = {
     readonly startValue: string;
     readonly target: SelectedOutlineRotationDragTarget;
 };
+export type SequenceWithSelectedOutline = {
+    readonly depth: number;
+    readonly keyframeDisplayOffset: number;
+    readonly key: string;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly sequence: TSequence;
+};
 export declare const translateFieldKey = "style.translate";
 export declare const scaleFieldKey = "style.scale";
 export declare const rotateFieldKey = "style.rotate";