@remotion/studio 4.0.506 → 4.0.507

package/dist/components/SelectedOutlineRotationCornerHandle.js

@@ -0,0 +1,269 @@
+"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.SelectedOutlineRotationCornerHandle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const pointer_session_1 = require("../helpers/pointer-session");
+const editor_snapping_1 = require("../state/editor-snapping");
+const ContextMenu_1 = require("./ContextMenu");
+const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const selected_outline_drag_1 = require("./selected-outline-drag");
+const selected_outline_measurement_1 = require("./selected-outline-measurement");
+const selected_outline_types_1 = require("./selected-outline-types");
+const svg_point_to_client_point_1 = require("./svg-point-to-client-point");
+const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
+const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
+const imperative_state_1 = require("./Timeline/imperative-state");
+const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
+const SelectedOutlineRotationCornerHandle = ({ getAllRotationDragTargets, corner, dragging, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
+    var _a, _b;
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
+    const rotationDrag = (_a = target === null || target === void 0 ? void 0 : target.rotationDrag) !== null && _a !== void 0 ? _a : null;
+    const selected = (_b = target === null || target === void 0 ? void 0 : target.selected) !== null && _b !== void 0 ? _b : false;
+    const circleRef = (0, react_1.useRef)(null);
+    const cornerInfo = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSelectedOutlineRotationCornerInfo)(outline.points, corner), [corner, outline.points]);
+    const onPointerDown = react_1.default.useCallback((event) => {
+        var _a;
+        if (event.button !== 0 || rotationDrag === null) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const svg = event.currentTarget.ownerSVGElement;
+        if (svg === null) {
+            return;
+        }
+        const interaction = (0, selected_outline_measurement_1.getOutlineSelectionInteraction)(event);
+        const shouldUpdateSelection = !selected || interaction.toggleKey;
+        if (shouldUpdateSelection && target !== undefined) {
+            onSelect(target.selection, {
+                shiftKey: false,
+                toggleKey: interaction.toggleKey,
+            });
+        }
+        if (interaction.toggleKey) {
+            return;
+        }
+        if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
+            return;
+        }
+        const startPointer = { x: event.clientX, y: event.clientY };
+        const svgRect = svg.getBoundingClientRect();
+        const center = (0, svg_point_to_client_point_1.svgPointToClientPoint)((0, selected_outline_measurement_1.getSelectedOutlineRotationPivot)({
+            dimensions: outline.dimensions,
+            points: (_a = outline.uncroppedPoints) !== null && _a !== void 0 ? _a : outline.points,
+            transformOriginValue: rotationDrag.transformOriginValue,
+        }), svgRect);
+        const dragStates = (0, selected_outline_drag_1.getSelectedOutlineRotationDragStates)({
+            dragTargets: selected ? getAllRotationDragTargets() : [rotationDrag],
+            getDragOverrides,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
+        });
+        let previousAngle = (0, selected_outline_measurement_1.getAngleDegrees)(center, {
+            x: event.clientX,
+            y: event.clientY,
+        });
+        let accumulatedDelta = 0;
+        let rotationLocked = event.shiftKey;
+        let lastValues = new Map();
+        let dragStarted = false;
+        const updateRotationDragOverrides = () => {
+            const rotationDeltaDegrees = rotationLocked && editorSnapping
+                ? (0, selected_outline_drag_1.snapSelectedOutlineRotationDeltaDegrees)({
+                    dragStates,
+                    rotationDeltaDegrees: accumulatedDelta,
+                })
+                : accumulatedDelta;
+            lastValues = (0, selected_outline_drag_1.getSelectedOutlineRotationDragValues)({
+                dragStates,
+                rotationDeltaDegrees,
+            });
+            (0, ForceSpecificCursor_1.forceSpecificCursor)((0, selected_outline_measurement_1.getRotationCursor)(cornerInfo.cursorDegrees + rotationDeltaDegrees));
+            for (const dragState of dragStates) {
+                const value = lastValues.get(dragState.key);
+                if (value === undefined) {
+                    throw new Error('Expected rotation drag value to be available');
+                }
+                if (dragState.target.propStatus.status === 'keyframed') {
+                    setDragOverrides(dragState.target.nodePath, selected_outline_types_1.rotateFieldKey, remotion_1.Internals.makeKeyframedDragOverride({
+                        status: dragState.target.propStatus,
+                        frame: dragState.sourceFrame,
+                        value,
+                    }));
+                }
+                else {
+                    setDragOverrides(dragState.target.nodePath, selected_outline_types_1.rotateFieldKey, remotion_1.Internals.makeStaticDragOverride(value));
+                }
+            }
+        };
+        const onPointerMove = (moveEvent) => {
+            moveEvent.preventDefault();
+            const screenDeltaX = moveEvent.clientX - startPointer.x;
+            const screenDeltaY = moveEvent.clientY - startPointer.y;
+            if (!dragStarted) {
+                if (!(0, selected_outline_drag_1.isSelectedOutlineDragPastThreshold)({
+                    deltaX: screenDeltaX,
+                    deltaY: screenDeltaY,
+                })) {
+                    return;
+                }
+                dragStarted = true;
+                onDraggingChange(true);
+            }
+            const nextAngle = (0, selected_outline_measurement_1.getAngleDegrees)(center, {
+                x: moveEvent.clientX,
+                y: moveEvent.clientY,
+            });
+            accumulatedDelta += (0, selected_outline_measurement_1.getSelectedOutlineRotationDeltaDegrees)({
+                from: previousAngle,
+                to: nextAngle,
+            });
+            previousAngle = nextAngle;
+            rotationLocked = moveEvent.shiftKey;
+            updateRotationDragOverrides();
+        };
+        const onKeyChange = (keyEvent) => {
+            if (keyEvent.key !== 'Shift') {
+                return;
+            }
+            const nextRotationLocked = keyEvent.type === 'keydown';
+            if (nextRotationLocked === rotationLocked) {
+                return;
+            }
+            rotationLocked = nextRotationLocked;
+            if (dragStarted) {
+                updateRotationDragOverrides();
+            }
+        };
+        const onPointerUp = () => {
+            window.removeEventListener('keydown', onKeyChange);
+            window.removeEventListener('keyup', onKeyChange);
+            if (dragStarted) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                onDraggingChange(false);
+            }
+            const changes = (0, selected_outline_drag_1.getSelectedOutlineRotationDragChanges)({
+                dragStates,
+                lastValues,
+            });
+            if (changes.length === 0) {
+                (0, selected_outline_drag_1.clearSelectedOutlineRotationDragOverrides)({
+                    clearDragOverrides,
+                    dragStates,
+                });
+                return;
+            }
+            const staticChanges = changes.filter((change) => change.type === 'static');
+            const keyframedChanges = changes.filter((change) => change.type === 'keyframed');
+            Promise.all([
+                staticChanges.length > 0
+                    ? (0, save_sequence_prop_1.saveSequenceProps)({
+                        changes: staticChanges,
+                        addedKeyframes: null,
+                        movedKeyframes: null,
+                        setPropStatuses,
+                        clientId: rotationDrag.clientId,
+                        undoLabel: changes.length > 1
+                            ? 'Rotate selected sequences'
+                            : 'Rotate sequence',
+                        redoLabel: changes.length > 1
+                            ? 'Rotate selected sequences back'
+                            : 'Rotate sequence back',
+                    })
+                    : Promise.resolve(),
+                (0, call_add_keyframe_1.callAddKeyframes)({
+                    sequenceKeyframes: keyframedChanges,
+                    effectKeyframes: [],
+                    setPropStatuses,
+                    clientId: rotationDrag.clientId,
+                }),
+            ])
+                .catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);
+            })
+                .finally(() => {
+                (0, selected_outline_drag_1.clearSelectedOutlineRotationDragOverrides)({
+                    clearDragOverrides,
+                    dragStates,
+                });
+            });
+        };
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
+        window.addEventListener('keydown', onKeyChange);
+        window.addEventListener('keyup', onKeyChange);
+    }, [
+        clearDragOverrides,
+        cornerInfo,
+        editorSnapping,
+        getDragOverrides,
+        getAllRotationDragTargets,
+        onDraggingChange,
+        outline.dimensions,
+        outline.points,
+        outline.uncroppedPoints,
+        onSelect,
+        rotationDrag,
+        selected,
+        setPropStatuses,
+        setDragOverrides,
+        target,
+    ]);
+    if (rotationDrag === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("circle", { ref: circleRef, cx: cornerInfo.point.x, cy: cornerInfo.point.y, r: 12, fill: colors_1.TRANSPARENT, stroke: colors_1.TRANSPARENT, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: cornerInfo.cursor, onPointerEnter: () => {
+                    if (!dragging) {
+                        onHoverChange(outline.key);
+                    }
+                }, onPointerLeave: () => {
+                    if (!dragging) {
+                        onHoverChange(null);
+                    }
+                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: circleRef, getItems: onContextMenuOpen })
+        ] }));
+};
+exports.SelectedOutlineRotationCornerHandle = SelectedOutlineRotationCornerHandle;

package/dist/components/SelectedOutlineScaleEdgeLine.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type SelectedOutlineScaleEdge } from './selected-outline-drag';
+import type { SelectedOutline } from './selected-outline-geometry';
+import { type SelectedOutlineContextMenuOpenHandler, type SelectedOutlineScaleDragTarget, type SelectedOutlineTarget } from './selected-outline-types';
+import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
+export declare const SelectedOutlineScaleEdgeLine: React.FC<{
+    readonly getAllScaleDragTargets: () => readonly SelectedOutlineScaleDragTarget[];
+    readonly dragging: boolean;
+    readonly edge: SelectedOutlineScaleEdge;
+    readonly outline: SelectedOutline;
+    readonly onDraggingChange: (dragging: boolean) => void;
+    readonly onContextMenuOpen: SelectedOutlineContextMenuOpenHandler;
+    readonly onHoverChange: (key: string | null) => void;
+    readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
+    readonly target: SelectedOutlineTarget | undefined;
+}>;

package/dist/components/SelectedOutlineScaleEdgeLine.js

@@ -0,0 +1,211 @@
+"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.SelectedOutlineScaleEdgeLine = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const pointer_session_1 = require("../helpers/pointer-session");
+const ContextMenu_1 = require("./ContextMenu");
+const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const selected_outline_drag_1 = require("./selected-outline-drag");
+const selected_outline_measurement_1 = require("./selected-outline-measurement");
+const selected_outline_types_1 = require("./selected-outline-types");
+const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
+const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
+const imperative_state_1 = require("./Timeline/imperative-state");
+const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
+const SelectedOutlineScaleEdgeLine = ({ getAllScaleDragTargets, dragging, edge, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
+    var _a, _b;
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const scaleDrag = (_a = target === null || target === void 0 ? void 0 : target.scaleDrag) !== null && _a !== void 0 ? _a : null;
+    const selected = (_b = target === null || target === void 0 ? void 0 : target.selected) !== null && _b !== void 0 ? _b : false;
+    const lineRef = (0, react_1.useRef)(null);
+    const edgeInfo = (0, react_1.useMemo)(() => (0, selected_outline_drag_1.getSelectedOutlineScaleEdgeInfo)(outline.points, edge), [edge, outline.points]);
+    const onPointerDown = react_1.default.useCallback((event) => {
+        if (event.button !== 0 || scaleDrag === null || edgeInfo === null) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const interaction = (0, selected_outline_measurement_1.getOutlineSelectionInteraction)(event);
+        const shouldUpdateSelection = !selected || interaction.shiftKey || interaction.toggleKey;
+        if (shouldUpdateSelection && target !== undefined) {
+            onSelect(target.selection, interaction);
+        }
+        if (interaction.shiftKey || interaction.toggleKey) {
+            return;
+        }
+        if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
+            return;
+        }
+        const startPointer = { x: event.clientX, y: event.clientY };
+        const dragStates = (0, selected_outline_drag_1.getSelectedOutlineScaleDragStates)({
+            dragTargets: selected ? getAllScaleDragTargets() : [scaleDrag],
+            getDragOverrides,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
+        });
+        let lastValues = new Map();
+        let dragStarted = false;
+        const onPointerMove = (moveEvent) => {
+            moveEvent.preventDefault();
+            const delta = {
+                x: moveEvent.clientX - startPointer.x,
+                y: moveEvent.clientY - startPointer.y,
+            };
+            if (!dragStarted) {
+                if (!(0, selected_outline_drag_1.isSelectedOutlineDragPastThreshold)({
+                    deltaX: delta.x,
+                    deltaY: delta.y,
+                })) {
+                    return;
+                }
+                dragStarted = true;
+                onDraggingChange(true);
+                (0, ForceSpecificCursor_1.forceSpecificCursor)(edgeInfo.cursor);
+            }
+            const projectedDelta = (0, selected_outline_measurement_1.dot)(delta, edgeInfo.normal);
+            const scaleFactor = Math.max(0.001, 1 + projectedDelta / edgeInfo.extent);
+            lastValues = (0, selected_outline_drag_1.getSelectedOutlineScaleDragValues)({
+                dragStates,
+                axis: edgeInfo.axis,
+                scaleFactor,
+            });
+            for (const dragState of dragStates) {
+                const value = lastValues.get(dragState.key);
+                if (value === undefined) {
+                    throw new Error('Expected scale drag value to be available');
+                }
+                if (dragState.target.propStatus.status === 'keyframed') {
+                    setDragOverrides(dragState.target.nodePath, selected_outline_types_1.scaleFieldKey, remotion_1.Internals.makeKeyframedDragOverride({
+                        status: dragState.target.propStatus,
+                        frame: dragState.sourceFrame,
+                        value,
+                    }));
+                }
+                else {
+                    setDragOverrides(dragState.target.nodePath, selected_outline_types_1.scaleFieldKey, remotion_1.Internals.makeStaticDragOverride(value));
+                }
+            }
+        };
+        const onPointerUp = () => {
+            if (dragStarted) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                onDraggingChange(false);
+            }
+            const changes = (0, selected_outline_drag_1.getSelectedOutlineScaleDragChanges)({
+                dragStates,
+                lastValues,
+            });
+            if (changes.length === 0) {
+                (0, selected_outline_drag_1.clearSelectedOutlineScaleDragOverrides)({
+                    clearDragOverrides,
+                    dragStates,
+                });
+                return;
+            }
+            const staticChanges = changes.filter((change) => change.type === 'static');
+            const keyframedChanges = changes.filter((change) => change.type === 'keyframed');
+            Promise.all([
+                staticChanges.length > 0
+                    ? (0, save_sequence_prop_1.saveSequenceProps)({
+                        changes: staticChanges,
+                        addedKeyframes: null,
+                        movedKeyframes: null,
+                        setPropStatuses,
+                        clientId: scaleDrag.clientId,
+                        undoLabel: changes.length > 1
+                            ? 'Scale selected sequences'
+                            : 'Scale sequence',
+                        redoLabel: changes.length > 1
+                            ? 'Scale selected sequences back'
+                            : 'Scale sequence back',
+                    })
+                    : Promise.resolve(),
+                (0, call_add_keyframe_1.callAddKeyframes)({
+                    sequenceKeyframes: keyframedChanges,
+                    effectKeyframes: [],
+                    setPropStatuses,
+                    clientId: scaleDrag.clientId,
+                }),
+            ])
+                .catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);
+            })
+                .finally(() => {
+                (0, selected_outline_drag_1.clearSelectedOutlineScaleDragOverrides)({
+                    clearDragOverrides,
+                    dragStates,
+                });
+            });
+        };
+        (0, pointer_session_1.startPointerSession)({
+            event,
+            target: event.currentTarget,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
+    }, [
+        clearDragOverrides,
+        getAllScaleDragTargets,
+        edgeInfo,
+        getDragOverrides,
+        onDraggingChange,
+        onSelect,
+        scaleDrag,
+        selected,
+        setPropStatuses,
+        setDragOverrides,
+        target,
+    ]);
+    if (scaleDrag === null || edgeInfo === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("line", { ref: lineRef, x1: edgeInfo.start.x, y1: edgeInfo.start.y, x2: edgeInfo.end.x, y2: edgeInfo.end.y, stroke: colors_1.TRANSPARENT, strokeWidth: 12, vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: edgeInfo.cursor, onPointerEnter: () => {
+                    if (!dragging) {
+                        onHoverChange(outline.key);
+                    }
+                }, onPointerLeave: () => {
+                    if (!dragging) {
+                        onHoverChange(null);
+                    }
+                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: lineRef, getItems: onContextMenuOpen })
+        ] }));
+};
+exports.SelectedOutlineScaleEdgeLine = SelectedOutlineScaleEdgeLine;

package/dist/components/SelectedOutlineSnapIndicators.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type SelectedOutlineSnapPoint } from './selected-outline-snap';
+export type UpdateSelectedOutlineSnapPoints = (snapPoints: readonly SelectedOutlineSnapPoint[]) => void;
+export declare const SelectedOutlineSnapIndicators: React.FC<{
+    readonly compositionHeight: number;
+    readonly compositionWidth: number;
+    readonly scale: number;
+    readonly updateSnapPointsRef: React.MutableRefObject<UpdateSelectedOutlineSnapPoints>;
+}>;

package/dist/components/SelectedOutlineSnapIndicators.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedOutlineSnapIndicators = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const selected_outline_snap_1 = require("./selected-outline-snap");
+const SelectedOutlineSnapIndicators = ({ compositionHeight, compositionWidth, scale, updateSnapPointsRef }) => {
+    const [activeSnapPoints, setActiveSnapPoints] = (0, react_1.useState)([]);
+    (0, react_1.useLayoutEffect)(() => {
+        updateSnapPointsRef.current = setActiveSnapPoints;
+        return () => {
+            if (updateSnapPointsRef.current === setActiveSnapPoints) {
+                updateSnapPointsRef.current = () => undefined;
+            }
+        };
+    }, [updateSnapPointsRef]);
+    if (activeSnapPoints.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("g", { pointerEvents: "none", children: activeSnapPoints.map((snapPoint) => {
+            if (snapPoint.target.axis === 'x') {
+                const x = snapPoint.target.position * scale;
+                return (jsx_runtime_1.jsx("line", { x1: x, x2: x, y1: 0, y2: compositionHeight * scale, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
+            }
+            const y = snapPoint.target.position * scale;
+            return (jsx_runtime_1.jsx("line", { x1: 0, x2: compositionWidth * scale, y1: y, y2: y, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
+        }) }));
+};
+exports.SelectedOutlineSnapIndicators = SelectedOutlineSnapIndicators;

package/dist/components/SelectedOutlineTransformOriginHandle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SelectedOutline } from './selected-outline-geometry';
+import { type SelectedOutlineLayoutTarget, type SelectedOutlineTarget } from './selected-outline-types';
+export declare const SelectedOutlineTransformOriginHandle: React.FC<{
+    readonly getLatestTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
+    readonly layoutTarget: SelectedOutlineLayoutTarget | undefined;
+    readonly outline: SelectedOutline;
+    readonly onDraggingChange: (dragging: boolean) => void;
+}>;