@remotion/studio 4.0.469 → 4.0.471

package/dist/components/SelectedOutlineOverlay.js

@@ -0,0 +1,710 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedOutlineOverlay = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineDragValues = exports.getSelectedEffectFieldsBySequenceKey = exports.getUvCoordinateForPoint = exports.getUvHandlePosition = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const calculate_timeline_1 = require("../helpers/calculate-timeline");
+const client_id_1 = require("../helpers/client-id");
+const colors_1 = require("../helpers/colors");
+const get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const save_effect_prop_1 = require("./Timeline/save-effect-prop");
+const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
+const timeline_field_utils_1 = require("./Timeline/timeline-field-utils");
+const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils");
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
+const translateFieldKey = 'style.translate';
+const outlineContainer = {
+    position: 'absolute',
+    inset: 0,
+    pointerEvents: 'none',
+    overflow: 'visible',
+};
+const pointToString = (point) => `${point.x},${point.y}`;
+const parseUvCoordinate = (value) => {
+    if (Array.isArray(value) &&
+        value.length === 2 &&
+        value.every((item) => typeof item === 'number' && Number.isFinite(item))) {
+        return [value[0], value[1]];
+    }
+    return null;
+};
+const tuplesEqual = (left, right) => {
+    if (!Array.isArray(left) || left.length !== 2) {
+        return false;
+    }
+    return left[0] === right[0] && left[1] === right[1];
+};
+const mix = (from, to, progress) => {
+    return from + (to - from) * progress;
+};
+const mixPoint = (from, to, progress) => {
+    return {
+        x: mix(from.x, to.x, progress),
+        y: mix(from.y, to.y, progress),
+    };
+};
+const getBilinearUvHandlePosition = (points, uv) => {
+    const [tl, tr, br, bl] = points;
+    const top = mixPoint(tl, tr, uv[0]);
+    const bottom = mixPoint(bl, br, uv[0]);
+    return 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);
+};
+exports.getUvHandlePosition = getUvHandlePosition;
+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: mix(tr.x - tl.x, br.x - bl.x, v),
+            y: mix(tr.y - tl.y, br.y - bl.y, v),
+        };
+        const dv = vectorBetween(mixPoint(tl, tr, u), 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,
+    ];
+};
+exports.getUvCoordinateForPoint = getUvCoordinateForPoint;
+const clamp = (value, min, max) => {
+    return Math.min(max, Math.max(min, value));
+};
+const roundToStep = (value, step) => {
+    if (step === undefined || !Number.isFinite(step) || step <= 0) {
+        return value;
+    }
+    const decimals = (0, timeline_field_utils_1.getDecimalPlaces)(step);
+    return Number((Math.round(value / step) * step).toFixed(decimals));
+};
+const constrainUv = (value, schema) => {
+    var _a, _b;
+    const min = (_a = schema.min) !== null && _a !== void 0 ? _a : -Infinity;
+    const max = (_b = schema.max) !== null && _b !== void 0 ? _b : Infinity;
+    return [
+        clamp(roundToStep(value[0], schema.step), min, max),
+        clamp(roundToStep(value[1], schema.step), min, max),
+    ];
+};
+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 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 getElementOutlinePoints = (element, containerRect) => {
+    const elementRect = element.getBoundingClientRect();
+    if (elementRect.width === 0 && elementRect.height === 0) {
+        return null;
+    }
+    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 getSelectedSequenceKeys = (selectedItems) => {
+    return new Set(selectedItems.map((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo)));
+};
+const getSelectedEffectFieldsBySequenceKey = (selectedItems) => {
+    var _a, _b;
+    const selectedEffects = new Map();
+    for (const item of selectedItems) {
+        if (item.type !== 'sequence-effect' &&
+            item.type !== 'sequence-effect-prop') {
+            continue;
+        }
+        const sequenceKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo);
+        const effectsForSequence = (_a = selectedEffects.get(sequenceKey)) !== null && _a !== void 0 ? _a : new Map();
+        const selectedFields = (_b = effectsForSequence.get(item.i)) !== null && _b !== void 0 ? _b : {
+            allFields: false,
+            fieldKeys: new Set(),
+        };
+        selectedFields.allFields = true;
+        effectsForSequence.set(item.i, selectedFields);
+        selectedEffects.set(sequenceKey, effectsForSequence);
+    }
+    return selectedEffects;
+};
+exports.getSelectedEffectFieldsBySequenceKey = getSelectedEffectFieldsBySequenceKey;
+const getSequencesWithSelectedOutlines = ({ selectedItems, sequences, overrideIdsToNodePaths, }) => {
+    const selectedSequenceKeys = getSelectedSequenceKeys(selectedItems);
+    if (selectedSequenceKeys.size === 0) {
+        return [];
+    }
+    return (0, calculate_timeline_1.calculateTimeline)({
+        sequences: [...sequences],
+        overrideIdsToNodePaths,
+    })
+        .filter((track) => {
+        if (track.nodePathInfo === null) {
+            return false;
+        }
+        return selectedSequenceKeys.has((0, TimelineSelection_1.getTimelineSequenceSelectionKey)(track.nodePathInfo));
+    })
+        .filter((track) => track.sequence.refForOutline !== null)
+        .map((track) => {
+        if (track.nodePathInfo === null) {
+            throw new Error('Expected selected outline to have a node path');
+        }
+        return {
+            key: (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(track.nodePathInfo),
+            nodePathInfo: track.nodePathInfo,
+            sequence: track.sequence,
+        };
+    });
+};
+const getSelectedUvHandles = ({ codeValues, clientId, getEffectDragOverrides, nodePath, selectedEffects, sequence, }) => {
+    if (clientId === null || selectedEffects === undefined) {
+        return [];
+    }
+    const handles = [];
+    for (const [effectIndex, selectedFields] of selectedEffects) {
+        const effect = sequence.effects[effectIndex];
+        if (!effect) {
+            continue;
+        }
+        const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
+            codeValues,
+            nodePath,
+            effectIndex,
+        });
+        if (effectStatus.type !== 'can-update-effect') {
+            continue;
+        }
+        const dragOverrides = getEffectDragOverrides(nodePath, effectIndex);
+        const activeSchema = remotion_1.Internals.flattenActiveSchema(effect.schema, (key) => {
+            const dragOverride = dragOverrides[key];
+            if (dragOverride !== undefined) {
+                return dragOverride;
+            }
+            const propStatus = effectStatus.props[key];
+            if (!(propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate)) {
+                return undefined;
+            }
+            return propStatus.codeValue;
+        });
+        for (const [fieldKey, fieldSchema] of Object.entries(activeSchema)) {
+            if (fieldSchema.type !== 'uv-coordinate' ||
+                (!selectedFields.allFields && !selectedFields.fieldKeys.has(fieldKey))) {
+                continue;
+            }
+            const propStatus = effectStatus.props[fieldKey];
+            if (!(propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate)) {
+                continue;
+            }
+            const dragOverrideValue = dragOverrides[fieldKey];
+            const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
+                codeValue: propStatus,
+                dragOverrideValue,
+                defaultValue: fieldSchema.default,
+                shouldResortToDefaultValueIfUndefined: true,
+            });
+            const value = parseUvCoordinate(effectiveValue);
+            if (value === null) {
+                continue;
+            }
+            handles.push({
+                clientId,
+                codeValue: propStatus,
+                effectIndex,
+                fieldDefault: fieldSchema.default,
+                fieldKey,
+                fieldSchema,
+                nodePath,
+                schema: effect.schema,
+                value,
+            });
+        }
+    }
+    return handles;
+};
+const measureOutlines = (container, targets) => {
+    const containerRect = container.getBoundingClientRect();
+    const outlines = [];
+    for (const target of targets) {
+        const element = target.ref.current;
+        if (element === null) {
+            continue;
+        }
+        const points = getElementOutlinePoints(element, containerRect);
+        if (points === null) {
+            continue;
+        }
+        outlines.push({ key: target.key, points });
+    }
+    return outlines;
+};
+const outlinesAreEqual = (a, b) => {
+    if (a.length !== b.length) {
+        return false;
+    }
+    for (let i = 0; i < a.length; i++) {
+        if (a[i].key !== b[i].key) {
+            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;
+};
+const getSelectedOutlineDragStates = ({ dragTargets, getDragOverrides, }) => {
+    return dragTargets.map((target) => {
+        var _a;
+        const dragOverrideValue = ((_a = getDragOverrides(target.nodePath)) !== null && _a !== void 0 ? _a : {})[translateFieldKey];
+        const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
+            codeValue: target.codeValue,
+            dragOverrideValue,
+            defaultValue: target.fieldDefault,
+            shouldResortToDefaultValueIfUndefined: true,
+        });
+        const [startX, startY] = (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px'));
+        return {
+            defaultValue: target.fieldDefault !== undefined
+                ? JSON.stringify(target.fieldDefault)
+                : null,
+            key: remotion_1.Internals.makeSequencePropsSubscriptionKey(target.nodePath),
+            startX,
+            startY,
+            target,
+        };
+    });
+};
+const getSelectedOutlineDragValues = ({ dragStates, deltaX, deltaY, }) => {
+    return new Map(dragStates.map((dragState) => [
+        dragState.key,
+        (0, timeline_translate_utils_1.serializeTranslate)(dragState.startX + deltaX, dragState.startY + deltaY),
+    ]));
+};
+exports.getSelectedOutlineDragValues = getSelectedOutlineDragValues;
+const getSelectedOutlineDragChanges = ({ dragStates, lastValues, }) => {
+    return dragStates.flatMap((dragState) => {
+        const value = lastValues.get(dragState.key);
+        if (value === undefined) {
+            return [];
+        }
+        const stringifiedValue = JSON.stringify(value);
+        const shouldSave = value !== dragState.target.codeValue.codeValue &&
+            !(dragState.defaultValue === stringifiedValue &&
+                dragState.target.codeValue.codeValue === undefined);
+        if (!shouldSave) {
+            return [];
+        }
+        return [
+            {
+                fileName: dragState.target.nodePath.absolutePath,
+                nodePath: dragState.target.nodePath,
+                fieldKey: translateFieldKey,
+                value,
+                defaultValue: dragState.defaultValue,
+                schema: dragState.target.schema,
+            },
+        ];
+    });
+};
+exports.getSelectedOutlineDragChanges = getSelectedOutlineDragChanges;
+const clearSelectedOutlineDragOverrides = ({ clearDragOverrides, dragStates, }) => {
+    for (const dragState of dragStates) {
+        clearDragOverrides(dragState.target.nodePath);
+    }
+};
+const SelectedOutlinePolygon = ({ allDragTargets, outline, scale, target }) => {
+    var _a;
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setCodeValues, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const points = (0, react_1.useMemo)(() => outline.points.map(pointToString).join(' '), [outline.points]);
+    const drag = (_a = target === null || target === void 0 ? void 0 : target.drag) !== null && _a !== void 0 ? _a : null;
+    const onPointerDown = react_1.default.useCallback((event) => {
+        if (event.button !== 0 || drag === null) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const startPointerX = event.clientX;
+        const startPointerY = event.clientY;
+        const dragStates = getSelectedOutlineDragStates({
+            dragTargets: allDragTargets,
+            getDragOverrides,
+        });
+        let lastValues = new Map();
+        const onPointerMove = (moveEvent) => {
+            moveEvent.preventDefault();
+            lastValues = (0, exports.getSelectedOutlineDragValues)({
+                dragStates,
+                deltaX: (moveEvent.clientX - startPointerX) / scale,
+                deltaY: (moveEvent.clientY - startPointerY) / scale,
+            });
+            for (const dragState of dragStates) {
+                const value = lastValues.get(dragState.key);
+                if (value === undefined) {
+                    throw new Error('Expected drag value to be available');
+                }
+                setDragOverrides(dragState.target.nodePath, translateFieldKey, value);
+            }
+        };
+        const onPointerUp = () => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerUp);
+            const changes = (0, exports.getSelectedOutlineDragChanges)({
+                dragStates,
+                lastValues,
+            });
+            if (changes.length === 0) {
+                clearSelectedOutlineDragOverrides({ clearDragOverrides, dragStates });
+                return;
+            }
+            (0, save_sequence_prop_1.saveSequenceProps)({
+                changes,
+                setCodeValues,
+                clientId: drag.clientId,
+                undoLabel: changes.length > 1 ? 'Move selected sequences' : null,
+                redoLabel: changes.length > 1 ? 'Move selected sequences back' : null,
+            })
+                .catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);
+            })
+                .finally(() => {
+                clearSelectedOutlineDragOverrides({ clearDragOverrides, dragStates });
+            });
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerUp);
+    }, [
+        allDragTargets,
+        clearDragOverrides,
+        drag,
+        getDragOverrides,
+        scale,
+        setCodeValues,
+        setDragOverrides,
+    ]);
+    return (jsx_runtime_1.jsx("polygon", { points: points, fill: drag === null ? 'none' : 'transparent', stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: drag === null ? undefined : 'all', onPointerDown: drag === null ? undefined : onPointerDown }));
+};
+const getSvgPointFromPointerEvent = ({ event, rect, }) => {
+    return {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+    };
+};
+const SelectedUvHandleCircle = ({ handle, outline }) => {
+    const { setEffectDragOverrides, clearEffectDragOverrides, setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const position = (0, react_1.useMemo)(() => (0, exports.getUvHandlePosition)(outline.points, handle.value), [handle.value, outline.points]);
+    const onPointerDown = react_1.default.useCallback((event) => {
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const svg = event.currentTarget.ownerSVGElement;
+        if (svg === null) {
+            return;
+        }
+        const svgRect = svg.getBoundingClientRect();
+        let lastValue = null;
+        const defaultValue = handle.fieldDefault !== undefined
+            ? JSON.stringify(handle.fieldDefault)
+            : null;
+        const updateFromPointerEvent = (pointerEvent) => {
+            const point = getSvgPointFromPointerEvent({
+                event: pointerEvent,
+                rect: svgRect,
+            });
+            const nextValue = constrainUv((0, exports.getUvCoordinateForPoint)(outline.points, point), handle.fieldSchema);
+            lastValue = nextValue;
+            setEffectDragOverrides(handle.nodePath, handle.effectIndex, handle.fieldKey, nextValue);
+        };
+        updateFromPointerEvent(event);
+        const onPointerMove = (moveEvent) => {
+            moveEvent.preventDefault();
+            updateFromPointerEvent(moveEvent);
+        };
+        const onPointerUp = () => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerUp);
+            const stringifiedValue = lastValue === null ? null : JSON.stringify(lastValue);
+            const shouldSave = lastValue !== null &&
+                !tuplesEqual(handle.codeValue.codeValue, lastValue) &&
+                !(defaultValue === stringifiedValue &&
+                    handle.codeValue.codeValue === undefined);
+            if (!shouldSave) {
+                clearEffectDragOverrides(handle.nodePath, handle.effectIndex);
+                return;
+            }
+            (0, save_effect_prop_1.saveEffectProp)({
+                fileName: handle.nodePath.absolutePath,
+                nodePath: handle.nodePath,
+                effectIndex: handle.effectIndex,
+                fieldKey: handle.fieldKey,
+                value: lastValue,
+                defaultValue,
+                schema: handle.schema,
+                setCodeValues,
+                clientId: handle.clientId,
+            }).finally(() => {
+                clearEffectDragOverrides(handle.nodePath, handle.effectIndex);
+            });
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerUp);
+    }, [
+        clearEffectDragOverrides,
+        handle,
+        outline.points,
+        setCodeValues,
+        setEffectDragOverrides,
+    ]);
+    return (jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: 6, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: "move", onPointerDown: onPointerDown }));
+};
+const SelectedOutlineOverlay = ({ scale }) => {
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const [outlines, setOutlines] = (0, react_1.useState)([]);
+    const overlayRef = (0, react_1.useRef)(null);
+    const selectedOutlineTargets = (0, react_1.useMemo)(() => {
+        if (!TimelineSelection_1.ENABLE_OUTLINES) {
+            return [];
+        }
+        const selectedEffectsBySequenceKey = (0, exports.getSelectedEffectFieldsBySequenceKey)(selectedItems);
+        const clientId = previewServerState.type === 'connected'
+            ? previewServerState.clientId
+            : null;
+        return getSequencesWithSelectedOutlines({
+            selectedItems,
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+        }).map(({ key, nodePathInfo, sequence }) => {
+            var _a;
+            if (sequence.refForOutline === null) {
+                throw new Error('Expected sequence to have a ref for outline');
+            }
+            const nodePath = nodePathInfo.sequenceSubscriptionKey;
+            const { controls } = sequence;
+            const fieldSchema = controls === null || controls === void 0 ? void 0 : controls.schema[translateFieldKey];
+            const codeValue = (_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[translateFieldKey];
+            const canDrag = previewServerState.type === 'connected' &&
+                controls !== null &&
+                (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) === 'translate' &&
+                (codeValue === null || codeValue === void 0 ? void 0 : codeValue.canUpdate) === true;
+            return {
+                key,
+                ref: sequence.refForOutline,
+                drag: canDrag
+                    ? {
+                        codeValue,
+                        clientId: previewServerState.clientId,
+                        fieldDefault: fieldSchema.default,
+                        nodePath,
+                        schema: controls.schema,
+                    }
+                    : null,
+                uvHandles: getSelectedUvHandles({
+                    codeValues,
+                    clientId,
+                    getEffectDragOverrides,
+                    nodePath,
+                    selectedEffects: selectedEffectsBySequenceKey.get(key),
+                    sequence,
+                }),
+            };
+        });
+    }, [
+        codeValues,
+        getEffectDragOverrides,
+        overrideIdToNodePathMappings,
+        previewServerState,
+        selectedItems,
+        sequences,
+    ]);
+    const targetsByKey = (0, react_1.useMemo)(() => {
+        return new Map(selectedOutlineTargets.map((target) => [target.key, target]));
+    }, [selectedOutlineTargets]);
+    const allDragTargets = (0, react_1.useMemo)(() => {
+        return selectedOutlineTargets.flatMap((target) => target.drag === null ? [] : [target.drag]);
+    }, [selectedOutlineTargets]);
+    (0, react_1.useEffect)(() => {
+        if (selectedOutlineTargets.length === 0) {
+            setOutlines((prevOutlines) => prevOutlines.length === 0 ? prevOutlines : []);
+            return;
+        }
+        let animationFrame = null;
+        const updateOutlines = () => {
+            if (overlayRef.current) {
+                const nextOutlines = measureOutlines(overlayRef.current, selectedOutlineTargets);
+                setOutlines((prevOutlines) => outlinesAreEqual(prevOutlines, nextOutlines)
+                    ? prevOutlines
+                    : nextOutlines);
+            }
+            animationFrame = requestAnimationFrame(updateOutlines);
+        };
+        updateOutlines();
+        return () => {
+            if (animationFrame !== null) {
+                cancelAnimationFrame(animationFrame);
+            }
+        };
+    }, [selectedOutlineTargets]);
+    if (selectedOutlineTargets.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: outlines.map((outline) => {
+            var _a;
+            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
+                    jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, outline: outline, scale: scale, target: targetsByKey.get(outline.key) }), (_a = targetsByKey.get(outline.key)) === null || _a === void 0 ? void 0 : _a.uvHandles.map((handle) => (jsx_runtime_1.jsx(SelectedUvHandleCircle, { handle: handle, outline: outline }, `${handle.effectIndex}-${handle.fieldKey}`)))] }, outline.key));
+        }) }));
+};
+exports.SelectedOutlineOverlay = SelectedOutlineOverlay;