@remotion/studio 4.0.527 → 4.0.528

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

@@ -1,6 +1,26 @@
 import type { OverrideIdToNodePaths, TSequence } from 'remotion';
 import type { OutlinePoint, SelectedOutline } from './selected-outline-geometry';
-import type { SelectedOutlineLayoutTarget, SequenceWithSelectedOutline } from './selected-outline-types';
+export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlKey, }: {
+    readonly shiftKey: boolean;
+    readonly metaKey: boolean;
+    readonly ctrlKey: boolean;
+}) => import("@remotion/canvas").CanvasSelectionInteraction, getSelectedSequenceKeys: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => Set<string>, getSequenceKeysContainingSelection: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => Set<string>, cropOutlinePoints: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], crop: import("@remotion/canvas").CanvasOutlineCrop) => readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], getTransformedSvgViewportPoints: ({ viewport, ctm, containerRect, }: {
+    readonly viewport: {
+        readonly x: number;
+        readonly y: number;
+        readonly width: number;
+        readonly height: number;
+    };
+    readonly ctm: {
+        readonly a: number;
+        readonly b: number;
+        readonly c: number;
+        readonly d: number;
+        readonly e: number;
+        readonly f: number;
+    };
+    readonly containerRect: Pick<DOMRect, "left" | "top">;
+}) => readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], measureOutlineTargets: (container: Element, targets: readonly import("@remotion/canvas").CanvasOutlineTarget[]) => SelectedOutline[];
 export declare const pointToString: (point: OutlinePoint) => string;
 export declare const midpoint: (from: OutlinePoint, to: OutlinePoint) => OutlinePoint;
 export declare const getOutlineCenter: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint]) => OutlinePoint;
@@ -28,31 +48,6 @@ export declare const getSelectedOutlineRotationPivot: ({ dimensions, points, tra
     readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
     readonly transformOriginValue: string;
 }) => OutlinePoint;
-type SvgViewport = {
-    readonly x: number;
-    readonly y: number;
-    readonly width: number;
-    readonly height: number;
-};
-type SvgScreenCtm = Pick<DOMMatrixReadOnly, 'a' | 'b' | 'c' | 'd' | 'e' | 'f'>;
-export declare const getTransformedSvgViewportPoints: ({ viewport, ctm, containerRect, }: {
-    readonly viewport: SvgViewport;
-    readonly ctm: SvgScreenCtm;
-    readonly containerRect: Pick<DOMRect, "left" | "top">;
-}) => readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
-export declare const cropOutlinePoints: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], crop: {
-    readonly left: number;
-    readonly right: number;
-    readonly top: number;
-    readonly bottom: number;
-}) => readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
-export declare const getSelectedSequenceKeys: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => Set<string>;
-export declare const getSequenceKeysContainingSelection: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => Set<string>;
-export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlKey, }: {
-    readonly shiftKey: boolean;
-    readonly metaKey: boolean;
-    readonly ctrlKey: boolean;
-}) => import("@remotion/canvas").CanvasSelectionInteraction;
 type SelectedEffectFields = {
     allFields: boolean;
     fieldKeys: Set<string>;
@@ -77,19 +72,6 @@ export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideI
     readonly sequences: readonly TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly compositions?: readonly import("remotion").AnyComposition[] | undefined;
-    readonly timelinePosition: number;
-}) => SequenceWithSelectedOutline[];
-export declare const measureOutlines: (container: SVGSVGElement, targets: readonly SelectedOutlineLayoutTarget[], hoveredTimelineNodePathKey: string | null) => SelectedOutline[];
-export declare const measureOutlineTargets: (container: Element, targets: readonly {
-    readonly crop: {
-        readonly left: number;
-        readonly right: number;
-        readonly top: number;
-        readonly bottom: number;
-    };
-    readonly includeOutsideContainer: boolean;
-    readonly key: string;
-    readonly ref: import("react").RefObject<Element | null>;
-}[]) => SelectedOutline[];
-export declare const outlinesAreEqual: (a: readonly SelectedOutline[], b: readonly SelectedOutline[]) => boolean;
+    readonly timelinePosition: number | null;
+}) => import("@remotion/canvas").CanvasSelectableOutline[];
 export {};

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

@@ -1,17 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.getSequencesWithSelectableOutlines = exports.getSelectedRotationInfo = exports.getSelectedTransformOriginInfo = exports.getSelectedCropInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = exports.measureOutlineTargets = exports.getTransformedSvgViewportPoints = exports.cropOutlinePoints = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.getOutlineSelectionInteraction = void 0;
+const canvas_1 = require("@remotion/canvas");
 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 studio_css_variables_1 = require("../helpers/studio-css-variables");
 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");
 const parse_keyframe_field_from_node_path_1 = require("./Timeline/parse-keyframe-field-from-node-path");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const transform_origin_utils_1 = require("./Timeline/transform-origin-utils");
+const { getCanvasSelectableOutlines } = canvas_1.CanvasInternals;
+({ getCanvasOutlineSelectionInteraction: exports.getOutlineSelectionInteraction, getCanvasSelectedSequenceKeys: exports.getSelectedSequenceKeys, getCanvasSequenceKeysContainingSelection: exports.getSequenceKeysContainingSelection, cropCanvasOutlinePoints: exports.cropOutlinePoints, getTransformedSvgViewportPoints: exports.getTransformedSvgViewportPoints, measureCanvasOutlineTargets: exports.measureOutlineTargets } = canvas_1.CanvasInternals);
 const pointToString = (point) => `${point.x},${point.y}`;
 exports.pointToString = pointToString;
 const midpoint = (from, to) => {
@@ -56,7 +57,7 @@ const getRotationCursor = (rotation) => {
         ? ''
         : `<g transform="rotate(${normalizedRotation} 32 32)">`;
     const transformEnd = normalizedRotation === 0 ? '' : '</g>';
-    const svg = `<svg width="24" height="24" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">${transform}<g transform="scale(0.876712329)" filter="url(#filter0_d_1_14)"><path d="M10.9111 17.7687C10.3413 18.3701 10.367 19.3195 10.9684 19.8893L20.7687 29.1738C21.3701 29.7436 22.3195 29.7179 22.8893 29.1165C23.459 28.5151 23.4334 27.5657 22.832 26.996L14.1206 18.7431L22.3735 10.0316C22.9432 9.43022 22.9176 8.48082 22.3162 7.91107C21.7148 7.34133 20.7654 7.36699 20.1956 7.96839L10.9111 17.7687ZM49.3923 58.3118C49.9509 58.9235 50.8996 58.9667 51.5114 58.4081L61.481 49.3055C62.0927 48.7469 62.1359 47.7981 61.5773 47.1863C61.0187 46.5745 60.0699 46.5314 59.4581 47.09L50.5963 55.1812L42.5051 46.3194C41.9465 45.7076 40.9977 45.6645 40.386 46.2231C39.7742 46.7817 39.7311 47.7304 40.2896 48.3422L49.3923 58.3118ZM12.6747 18.7431L13 19.8893C22.1283 19.6426 30.7584 21.4283 37.8564 26.6927C44.8518 31.8809 49.734 39.8538 49 56H50.5963H51.5114C52.2774 39.1461 47.6482 30.2198 39.6436 24.2831C31.7416 18.4224 22.3717 17.2467 13 17.5L12.6747 18.7431Z" fill="${colors_1.BLACK}"/><path d="M19.1064 6.93652C20.2459 5.73379 22.1448 5.68278 23.3477 6.82227C24.5505 7.96181 24.6022 9.86076 23.4629 11.0635L18.7373 16.0508C26.3487 16.4239 33.9128 18.1651 40.5371 23.0781C44.7339 26.1907 48.0794 30.1189 50.2568 35.4834C51.9666 39.6958 52.9327 44.7395 53.0742 50.8867L58.4463 45.9824C59.6697 44.8654 61.5673 44.9514 62.6846 46.1748C63.8018 47.3985 63.7155 49.296 62.4922 50.4131L52.5225 59.5156C51.337 60.5979 49.5196 60.5507 48.3916 59.4346L48.2842 59.3232L39.1816 49.3535C38.0648 48.1301 38.1507 46.2324 39.374 45.1152C40.5975 43.9979 42.4961 44.0841 43.6133 45.3076L47.4756 49.5381C47.1908 44.7613 46.2876 40.9448 44.9482 37.8291C43.0666 33.4521 40.2851 30.3614 36.9629 27.8975C31.8259 24.0875 25.8071 22.1663 19.2891 21.5732L23.8633 25.9072C25.0662 27.0468 25.1178 28.9457 23.9785 30.1484C22.8746 31.3135 21.0576 31.3982 19.8516 30.3662L19.7373 30.2627L9.93652 20.9785C8.73384 19.839 8.6828 17.9401 9.82227 16.7373L19.1064 6.93652Z" stroke="${colors_1.WHITE}" stroke-width="3"/></g>${transformEnd}<defs><filter id="filter0_d_1_14" x="0" y="0" width="72.4696" height="72.3004" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="3.75"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_14"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_14" result="shape"/></filter></defs></svg>`;
+    const svg = `<svg width="24" height="24" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><style>${studio_css_variables_1.studioCssVariables}</style>${transform}<g transform="scale(0.876712329)" filter="url(#filter0_d_1_14)"><path d="M10.9111 17.7687C10.3413 18.3701 10.367 19.3195 10.9684 19.8893L20.7687 29.1738C21.3701 29.7436 22.3195 29.7179 22.8893 29.1165C23.459 28.5151 23.4334 27.5657 22.832 26.996L14.1206 18.7431L22.3735 10.0316C22.9432 9.43022 22.9176 8.48082 22.3162 7.91107C21.7148 7.34133 20.7654 7.36699 20.1956 7.96839L10.9111 17.7687ZM49.3923 58.3118C49.9509 58.9235 50.8996 58.9667 51.5114 58.4081L61.481 49.3055C62.0927 48.7469 62.1359 47.7981 61.5773 47.1863C61.0187 46.5745 60.0699 46.5314 59.4581 47.09L50.5963 55.1812L42.5051 46.3194C41.9465 45.7076 40.9977 45.6645 40.386 46.2231C39.7742 46.7817 39.7311 47.7304 40.2896 48.3422L49.3923 58.3118ZM12.6747 18.7431L13 19.8893C22.1283 19.6426 30.7584 21.4283 37.8564 26.6927C44.8518 31.8809 49.734 39.8538 49 56H50.5963H51.5114C52.2774 39.1461 47.6482 30.2198 39.6436 24.2831C31.7416 18.4224 22.3717 17.2467 13 17.5L12.6747 18.7431Z" fill="${colors_1.BLACK}"/><path d="M19.1064 6.93652C20.2459 5.73379 22.1448 5.68278 23.3477 6.82227C24.5505 7.96181 24.6022 9.86076 23.4629 11.0635L18.7373 16.0508C26.3487 16.4239 33.9128 18.1651 40.5371 23.0781C44.7339 26.1907 48.0794 30.1189 50.2568 35.4834C51.9666 39.6958 52.9327 44.7395 53.0742 50.8867L58.4463 45.9824C59.6697 44.8654 61.5673 44.9514 62.6846 46.1748C63.8018 47.3985 63.7155 49.296 62.4922 50.4131L52.5225 59.5156C51.337 60.5979 49.5196 60.5507 48.3916 59.4346L48.2842 59.3232L39.1816 49.3535C38.0648 48.1301 38.1507 46.2324 39.374 45.1152C40.5975 43.9979 42.4961 44.0841 43.6133 45.3076L47.4756 49.5381C47.1908 44.7613 46.2876 40.9448 44.9482 37.8291C43.0666 33.4521 40.2851 30.3614 36.9629 27.8975C31.8259 24.0875 25.8071 22.1663 19.2891 21.5732L23.8633 25.9072C25.0662 27.0468 25.1178 28.9457 23.9785 30.1484C22.8746 31.3135 21.0576 31.3982 19.8516 30.3662L19.7373 30.2627L9.93652 20.9785C8.73384 19.839 8.6828 17.9401 9.82227 16.7373L19.1064 6.93652Z" stroke="${colors_1.WHITE}" stroke-width="3"/></g>${transformEnd}<defs><filter id="filter0_d_1_14" x="0" y="0" width="72.4696" height="72.3004" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="3.75"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_14"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_14" result="shape"/></filter></defs></svg>`;
     return `url("data:image/svg+xml,${encodeURIComponent(svg)}") 12 12, alias`;
 };
 exports.getRotationCursor = getRotationCursor;
@@ -108,145 +109,6 @@ 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')
-        .map((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo)));
-};
-exports.getSelectedSequenceKeys = getSelectedSequenceKeys;
-const getSequenceKeysContainingSelection = (selectedItems) => {
-    return new Set(selectedItems
-        .filter((item) => item.type !== 'guide')
-        .map((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo)));
-};
-exports.getSequenceKeysContainingSelection = getSequenceKeysContainingSelection;
-const getOutlineSelectionInteraction = ({ shiftKey, metaKey, ctrlKey, }) => ({
-    shiftKey,
-    toggleKey: metaKey || ctrlKey,
-});
-exports.getOutlineSelectionInteraction = getOutlineSelectionInteraction;
 const getKeyframeOrEasingField = (item) => {
     if (item.type !== 'keyframe' && item.type !== 'easing') {
         return null;
@@ -389,114 +251,14 @@ 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,
-        };
+    return getCanvasSelectableOutlines({
+        tracks: (0, calculate_timeline_1.calculateTimeline)({
+            sequences: [...sequences],
+            overrideIdsToNodePaths,
+            compositions,
+        }),
+        timelinePosition,
+        resolveSequenceNodePathInfo: null,
     });
 };
 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

@@ -1,12 +1,5 @@
-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 {};
+    readonly outlines: readonly import("@remotion/canvas").CanvasOutline[];
+    readonly sequences: readonly import("@remotion/canvas").CanvasOutlineSequenceParent[];
+    readonly targetsByKey: ReadonlyMap<string, import("@remotion/canvas").CanvasOutlineOrderTarget>;
+}) => readonly import("@remotion/canvas").CanvasOutline[];

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

@@ -1,257 +1,5 @@
 "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 = (aBounds, bBounds) => {
-    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.
-    const bounds = outlines.map(getOutlineBounds);
-    const areas = outlines.map(getOutlineHitArea);
-    for (let i = 0; i < outlines.length; i++) {
-        const a = outlines[i];
-        const aTarget = targetsByKey.get(a.key);
-        if (aTarget === undefined) {
-            continue;
-        }
-        for (let j = i + 1; j < outlines.length; j++) {
-            if (!outlineBoundsOverlap(bounds[i], bounds[j])) {
-                continue;
-            }
-            const aArea = areas[i];
-            const bArea = areas[j];
-            if (Math.abs(aArea - bArea) <= outlineAreaEqualityTolerance) {
-                continue;
-            }
-            const b = outlines[j];
-            const bTarget = targetsByKey.get(b.key);
-            if (bTarget === undefined) {
-                continue;
-            }
-            const aAncestorOfB = isAncestorTarget({
-                ancestor: aTarget,
-                descendant: bTarget,
-                parentBySequenceId,
-            });
-            const bAncestorOfA = isAncestorTarget({
-                ancestor: bTarget,
-                descendant: aTarget,
-                parentBySequenceId,
-            });
-            if (aAncestorOfB || bAncestorOfA) {
-                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;
+const canvas_1 = require("@remotion/canvas");
+({ orderCanvasOutlinesForRendering: exports.orderOutlinesForRendering } = canvas_1.CanvasInternals);