@remotion/studio 4.0.516 → 4.0.518

package/dist/components/canvas-capture-drop.d.ts

@@ -0,0 +1,4 @@
+export declare const handleCanvasCaptureDrop: ({ files, setSelectedModal, }: {
+    readonly files: readonly File[];
+    readonly setSelectedModal: import("react").Dispatch<import("react").SetStateAction<import("../state/modals").ModalState | null>>;
+}) => Promise<boolean>;

package/dist/components/canvas-capture-drop.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleCanvasCaptureDrop = void 0;
+const get_canvas_capture_import_1 = require("../helpers/get-canvas-capture-import");
+const handleCanvasCaptureDrop = async ({ files, setSelectedModal, }) => {
+    if (files.length !== 1) {
+        return false;
+    }
+    const canvasCapture = await (0, get_canvas_capture_import_1.getCanvasCaptureImport)(files[0]);
+    if (canvasCapture === null) {
+        return false;
+    }
+    setSelectedModal({
+        type: 'new-comp',
+        canvasCapture,
+        folderName: null,
+        parentName: null,
+        stack: null,
+    });
+    return true;
+};
+exports.handleCanvasCaptureDrop = handleCanvasCaptureDrop;

package/dist/components/composition-menu-items.js

@@ -7,10 +7,16 @@ const open_in_editor_1 = require("../helpers/open-in-editor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const open_in_new_window_1 = require("./open-in-new-window");
 const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, includeCompositionManagementItems, editorId, editorName, }) => {
+    var _a;
     const fileLocation = (0, format_file_location_1.formatFileLocation)({
         location: resolvedLocation,
         root: window.remotion_cwd,
     });
+    const contextForAgents = (0, format_file_location_1.formatContextForAgents)({
+        location: resolvedLocation,
+        name: (_a = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _a !== void 0 ? _a : null,
+        root: window.remotion_cwd,
+    });
     const showInEditorDisabled = !editorId ||
         !composition ||
         connectionStatus !== 'connected' ||
@@ -154,6 +160,26 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 id: 'copy-actions-divider',
             }
             : null,
+        {
+            id: 'copy-context-for-agents',
+            keyHint: null,
+            label: `Copy context for agents`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                if (!contextForAgents) {
+                    return;
+                }
+                navigator.clipboard.writeText(contextForAgents).catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                });
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            type: 'item',
+            value: 'copy-context-for-agents',
+            disabled: !contextForAgents,
+        },
         {
             id: 'copy-file-location',
             keyHint: null,

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

@@ -1,21 +1,2 @@
-export type OutlinePoint = {
-    readonly x: number;
-    readonly y: number;
-};
-export type SelectedOutline = {
-    readonly key: string;
-    readonly dimensions: {
-        readonly width: number;
-        readonly height: number;
-    } | null;
-    readonly uncroppedPoints: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint] | null;
-    readonly points: readonly [
-        OutlinePoint,
-        OutlinePoint,
-        OutlinePoint,
-        OutlinePoint
-    ];
-};
-export declare const clamp: (value: number, min: number, max: number) => number;
-export declare const mix: (from: number, to: number, progress: number) => number;
-export declare const mixPoint: (from: OutlinePoint, to: OutlinePoint, progress: number) => OutlinePoint;
+export { clampCanvasOutlineValue as clamp, mixCanvasOutlinePoints as mixPoint, mixCanvasOutlineValues as mix, } from '@remotion/canvas';
+export type { CanvasOutline as SelectedOutline, CanvasOutlinePoint as OutlinePoint, } from '@remotion/canvas';

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

@@ -1,18 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mixPoint = exports.mix = exports.clamp = void 0;
-const clamp = (value, min, max) => {
-    return Math.min(max, Math.max(min, value));
-};
-exports.clamp = clamp;
-const mix = (from, to, progress) => {
-    return from + (to - from) * progress;
-};
-exports.mix = mix;
-const mixPoint = (from, to, progress) => {
-    return {
-        x: (0, exports.mix)(from.x, to.x, progress),
-        y: (0, exports.mix)(from.y, to.y, progress),
-    };
-};
-exports.mixPoint = mixPoint;
+exports.mix = exports.mixPoint = exports.clamp = void 0;
+const canvas_1 = require("@remotion/canvas");
+Object.defineProperty(exports, "clamp", { enumerable: true, get: function () { return canvas_1.clampCanvasOutlineValue; } });
+Object.defineProperty(exports, "mixPoint", { enumerable: true, get: function () { return canvas_1.mixCanvasOutlinePoints; } });
+Object.defineProperty(exports, "mix", { enumerable: true, get: function () { return canvas_1.mixCanvasOutlineValues; } });

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

@@ -1,7 +1,4 @@
-import type { OverrideIdToNodePaths, TSequence } from 'remotion';
-import type { OutlinePoint, SelectedOutline } from './selected-outline-geometry';
-import type { SelectedOutlineLayoutTarget, SequenceWithSelectedOutline } from './selected-outline-types';
-import { type TimelineSelection, type TimelineSelectionInteraction } from './Timeline/TimelineSelection';
+import type { OutlinePoint } from './selected-outline-geometry';
 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;
@@ -29,36 +26,18 @@ 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 TimelineSelection[]) => Set<string>;
-export declare const getSequenceKeysContainingSelection: (selectedItems: readonly TimelineSelection[]) => Set<string>;
+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;
-}) => TimelineSelectionInteraction;
+}) => import("@remotion/canvas").CanvasSelectionInteraction;
 type SelectedEffectFields = {
     allFields: boolean;
     fieldKeys: Set<string>;
 };
-export declare const getSelectedEffectFieldsBySequenceKey: (selectedItems: readonly TimelineSelection[]) => Map<string, Map<number, SelectedEffectFields>>;
+export declare const getSelectedEffectFieldsBySequenceKey: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => Map<string, Map<number, SelectedEffectFields>>;
 type SelectedTransformOriginInfo = {
     readonly sequenceKey: string;
     readonly displayFrame: number | null;
@@ -71,15 +50,7 @@ export type SelectedCropInfo = {
     readonly sequenceKey: string;
     readonly displayFrame: number | null;
 };
-export declare const getSelectedCropInfo: (selectedItems: readonly TimelineSelection[]) => SelectedCropInfo | null;
-export declare const getSelectedTransformOriginInfo: (selectedItems: readonly TimelineSelection[]) => SelectedTransformOriginInfo | null;
-export declare const getSelectedRotationInfo: (selectedItems: readonly TimelineSelection[]) => SelectedRotationInfo | null;
-export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, compositions, timelinePosition, }: {
-    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 outlinesAreEqual: (a: readonly SelectedOutline[], b: readonly SelectedOutline[]) => boolean;
+export declare const getSelectedCropInfo: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SelectedCropInfo | null;
+export declare const getSelectedTransformOriginInfo: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SelectedTransformOriginInfo | null;
+export declare const getSelectedRotationInfo: (selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[]) => SelectedRotationInfo | null;
 export {};

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

@@ -1,11 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.outlinesAreEqual = 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");
+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;
 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");
@@ -108,128 +104,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')
@@ -388,107 +262,3 @@ 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) => {
-    // 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 includeOutsideContainer = target.showSelectedOutline ||
-            (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(target.nodePathInfo.sequenceSubscriptionKey) === hoveredTimelineNodePathKey;
-        const uncroppedPoints = getElementOutlinePoints(element, containerRect, 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.measureOutlines = measureOutlines;
-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-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 = {
+export type SelectedOutlineLayoutTarget = CanvasOutlineTarget & {
     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,12 +19,6 @@ export type SelectedOutlineLayoutTarget = {
     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;
@@ -145,13 +139,6 @@ 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";

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSelectedUvHandles = exports.roundNumericUvEllipseValue = exports.getUvCoordinateForPoint = exports.getUvEllipseInteractiveControls = exports.getUvHandleConnectionEllipses = exports.getUvHandleConnectionLines = exports.getUvHandlePosition = exports.tuplesEqual = void 0;
 exports.constrainUv = constrainUv;
 exports.roundUvCoordinate = roundUvCoordinate;
+const canvas_1 = require("@remotion/canvas");
 const remotion_1 = require("remotion");
 const selected_outline_geometry_1 = require("./selected-outline-geometry");
 const timeline_field_utils_1 = require("./Timeline/timeline-field-utils");
@@ -91,55 +92,7 @@ const tuplesEqual = (left, right) => {
     return left[0] === right[0] && left[1] === right[1];
 };
 exports.tuplesEqual = tuplesEqual;
-const getBilinearUvHandlePosition = (points, uv) => {
-    const [tl, tr, br, bl] = points;
-    const top = (0, selected_outline_geometry_1.mixPoint)(tl, tr, uv[0]);
-    const bottom = (0, selected_outline_geometry_1.mixPoint)(bl, br, uv[0]);
-    return (0, selected_outline_geometry_1.mixPoint)(top, bottom, uv[1]);
-};
-const projectiveEpsilon = 0.000001;
-const getProjectiveTransform = (points) => {
-    const [tl, tr, br, bl] = points;
-    const dx1 = tr.x - br.x;
-    const dx2 = bl.x - br.x;
-    const dx3 = tl.x - tr.x + br.x - bl.x;
-    const dy1 = tr.y - br.y;
-    const dy2 = bl.y - br.y;
-    const dy3 = tl.y - tr.y + br.y - bl.y;
-    let g = 0;
-    let h = 0;
-    if (Math.abs(dx3) > projectiveEpsilon || Math.abs(dy3) > projectiveEpsilon) {
-        const determinant = dx1 * dy2 - dx2 * dy1;
-        if (Math.abs(determinant) < projectiveEpsilon) {
-            return null;
-        }
-        g = (dx3 * dy2 - dx2 * dy3) / determinant;
-        h = (dx1 * dy3 - dx3 * dy1) / determinant;
-    }
-    return {
-        a: tr.x - tl.x + g * tr.x,
-        b: bl.x - tl.x + h * bl.x,
-        c: tl.x,
-        d: tr.y - tl.y + g * tr.y,
-        e: bl.y - tl.y + h * bl.y,
-        f: tl.y,
-        g,
-        h,
-    };
-};
-const applyProjectiveTransform = (transform, uv) => {
-    const denominator = transform.g * uv[0] + transform.h * uv[1] + 1;
-    return {
-        x: (transform.a * uv[0] + transform.b * uv[1] + transform.c) / denominator,
-        y: (transform.d * uv[0] + transform.e * uv[1] + transform.f) / denominator,
-    };
-};
-const getUvHandlePosition = (points, uv) => {
-    const transform = getProjectiveTransform(points);
-    return transform === null
-        ? getBilinearUvHandlePosition(points, uv)
-        : applyProjectiveTransform(transform, uv);
-};
+const getUvHandlePosition = (points, uv) => (0, canvas_1.getCanvasOutlinePointAtUv)(points, uv);
 exports.getUvHandlePosition = getUvHandlePosition;
 const getUvHandleConnectionLines = ({ handles, points, }) => {
     const handlesByField = new Map(handles.map((handle) => [
@@ -337,63 +290,7 @@ const getUvEllipseInteractiveControls = ({ handles, dimensions, points, }) => {
     return controls;
 };
 exports.getUvEllipseInteractiveControls = getUvEllipseInteractiveControls;
-const vectorBetween = (from, to) => {
-    return { x: to.x - from.x, y: to.y - from.y };
-};
-const getBilinearUvCoordinateForPoint = (points, point) => {
-    const [tl, tr, br, bl] = points;
-    let u = 0.5;
-    let v = 0.5;
-    for (let i = 0; i < 8; i++) {
-        const current = getBilinearUvHandlePosition(points, [u, v]);
-        const errorX = current.x - point.x;
-        const errorY = current.y - point.y;
-        if (Math.abs(errorX) + Math.abs(errorY) < 0.001) {
-            break;
-        }
-        const du = {
-            x: (0, selected_outline_geometry_1.mix)(tr.x - tl.x, br.x - bl.x, v),
-            y: (0, selected_outline_geometry_1.mix)(tr.y - tl.y, br.y - bl.y, v),
-        };
-        const dv = vectorBetween((0, selected_outline_geometry_1.mixPoint)(tl, tr, u), (0, selected_outline_geometry_1.mixPoint)(bl, br, u));
-        const determinant = du.x * dv.y - du.y * dv.x;
-        if (Math.abs(determinant) < 0.000001) {
-            break;
-        }
-        u -= (errorX * dv.y - errorY * dv.x) / determinant;
-        v -= (du.x * errorY - du.y * errorX) / determinant;
-    }
-    return [u, v];
-};
-const getUvCoordinateForPoint = (points, point) => {
-    const transform = getProjectiveTransform(points);
-    if (transform === null) {
-        return getBilinearUvCoordinateForPoint(points, point);
-    }
-    const determinant = transform.a * (transform.e - transform.f * transform.h) -
-        transform.b * (transform.d - transform.f * transform.g) +
-        transform.c * (transform.d * transform.h - transform.e * transform.g);
-    if (Math.abs(determinant) < projectiveEpsilon) {
-        return getBilinearUvCoordinateForPoint(points, point);
-    }
-    const inverseA = transform.e - transform.f * transform.h;
-    const inverseB = transform.c * transform.h - transform.b;
-    const inverseC = transform.b * transform.f - transform.c * transform.e;
-    const inverseD = transform.f * transform.g - transform.d;
-    const inverseE = transform.a - transform.c * transform.g;
-    const inverseF = transform.c * transform.d - transform.a * transform.f;
-    const inverseG = transform.d * transform.h - transform.e * transform.g;
-    const inverseH = transform.b * transform.g - transform.a * transform.h;
-    const inverseI = transform.a * transform.e - transform.b * transform.d;
-    const denominator = inverseG * point.x + inverseH * point.y + inverseI;
-    if (Math.abs(denominator) < projectiveEpsilon) {
-        return getBilinearUvCoordinateForPoint(points, point);
-    }
-    return [
-        (inverseA * point.x + inverseB * point.y + inverseC) / denominator,
-        (inverseD * point.x + inverseE * point.y + inverseF) / denominator,
-    ];
-};
+const getUvCoordinateForPoint = (points, point) => (0, canvas_1.getCanvasOutlineUvForPoint)(points, point);
 exports.getUvCoordinateForPoint = getUvCoordinateForPoint;
 function constrainUv(value, schema) {
     var _a, _b;