@remotion/studio 4.0.474 → 4.0.476

package/dist/components/PlayPause.js

@@ -68,66 +68,22 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }
             pauseAndReturnToPlayStart();
         }
     }, [pauseAndReturnToPlayStart, playing]);
-    const onArrowLeft = (0, react_1.useCallback)((e) => {
-        e.preventDefault();
-        if (e.altKey) {
-            seek(0);
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-left',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: 0,
-            });
-        }
-        else if (e.shiftKey) {
-            frameBack((0, imperative_state_1.getCurrentFps)());
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-left',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: Math.max(0, getCurrentFrame() - (0, imperative_state_1.getCurrentFps)()),
-            });
-        }
-        else {
-            frameBack(1);
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-left',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: Math.max(0, getCurrentFrame() - 1),
-            });
-        }
-    }, [frameBack, seek, getCurrentFrame]);
-    const onArrowRight = (0, react_1.useCallback)((e) => {
-        if (e.altKey) {
-            seek((0, imperative_state_1.getCurrentDuration)() - 1);
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-right',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)() - 1,
-                frame: (0, imperative_state_1.getCurrentDuration)() - 1,
-            });
-        }
-        else if (e.shiftKey) {
-            frameForward((0, imperative_state_1.getCurrentFps)());
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-right',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, getCurrentFrame() + (0, imperative_state_1.getCurrentFps)()),
-            });
-        }
-        else {
-            frameForward(1);
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-right',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, getCurrentFrame() + 1),
-            });
-        }
-        e.preventDefault();
-    }, [frameForward, seek, getCurrentFrame]);
     const oneFrameBack = (0, react_1.useCallback)(() => {
         frameBack(1);
-    }, [frameBack]);
+        (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+            direction: 'fit-left',
+            durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+            frame: Math.max(0, getCurrentFrame() - 1),
+        });
+    }, [frameBack, getCurrentFrame]);
     const oneFrameForward = (0, react_1.useCallback)(() => {
         frameForward(1);
-    }, [frameForward]);
+        (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+            direction: 'fit-right',
+            durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+            frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, getCurrentFrame() + 1),
+        });
+    }, [frameForward, getCurrentFrame]);
     const jumpToStart = (0, react_1.useCallback)(() => {
         seek(inFrame !== null && inFrame !== void 0 ? inFrame : 0);
     }, [seek, inFrame]);
@@ -136,20 +92,20 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }
     }, [seek, outFrame]);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
-        const arrowLeft = keybindings.registerKeybinding({
+        const commandArrowLeft = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowLeft',
-            callback: onArrowLeft,
-            commandCtrlKey: false,
+            callback: oneFrameBack,
+            commandCtrlKey: true,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
-        const arrowRight = keybindings.registerKeybinding({
+        const commandArrowRight = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowRight',
-            callback: onArrowRight,
-            commandCtrlKey: false,
+            callback: oneFrameForward,
+            commandCtrlKey: true,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
@@ -191,8 +147,8 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }
             keepRegisteredWhenNotHighestContext: false,
         });
         return () => {
-            arrowLeft.unregister();
-            arrowRight.unregister();
+            commandArrowLeft.unregister();
+            commandArrowRight.unregister();
             space.unregister();
             enter.unregister();
             a.unregister();
@@ -202,10 +158,10 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }
         jumpToEnd,
         jumpToStart,
         keybindings,
-        onArrowLeft,
-        onArrowRight,
         onEnter,
         onSpace,
+        oneFrameBack,
+        oneFrameForward,
     ]);
     (0, react_1.useEffect)(() => {
         let timeout = null;

package/dist/components/PreviewToolbar.js

@@ -23,7 +23,6 @@ const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
 const PlayPause_1 = require("./PlayPause");
 const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
-const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
 const TOOLBAR_HEIGHT = 50;
@@ -96,7 +95,21 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     const isFullscreenSupported = (0, check_fullscreen_support_1.checkFullscreenSupport)();
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     (0, react_1.useEffect)(() => {
-        if (isMobileLayout && previewToolbarRef.current) {
+        if (!isMobileLayout) {
+            // The indicators are `position: fixed` and are shown/placed
+            // imperatively by the scroll handler below. Without this reset,
+            // leaving the mobile layout (window resized past the breakpoint)
+            // leaves them visible at stale viewport coordinates — an orphaned
+            // grey gradient rectangle floating over the canvas.
+            if (leftScrollIndicatorRef.current) {
+                leftScrollIndicatorRef.current.style.display = 'none';
+            }
+            if (rightScrollIndicatorRef.current) {
+                rightScrollIndicatorRef.current.style.display = 'none';
+            }
+            return;
+        }
+        if (previewToolbarRef.current) {
             const updateScrollableIndicatorProps = (target) => {
                 var _a;
                 const boundingBox = target.getBoundingClientRect();
@@ -152,7 +165,8 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                         ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), isVideoComposition ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: mediaMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
                 ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) }), TimelineSelection_1.ENABLE_OUTLINES ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })) : null] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })
+                ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
                     jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                 ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {}), jsx_runtime_1.jsx("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })

package/dist/components/RenderModal/RenderModalJSONPropsEditor.js

@@ -103,7 +103,8 @@ const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, ser
             }
             const { result } = e;
             if (result.canUpdate) {
-                const nextState = parseJS(result.currentDefaultProps, schema);
+                const deserialized = no_react_1.NoReactInternals.deserializeJSONWithSpecialTypes(JSON.stringify(result.currentDefaultProps));
+                const nextState = parseJS(deserialized, schema);
                 setLocalValue(nextState);
             }
         });

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -1,33 +1,9 @@
 import React from 'react';
 import type { CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, GetDragOverrides, OverrideIdToNodePaths, SequenceFieldSchema, SequencePropsSubscriptionKey, SequenceSchema, TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
+import { type OutlinePoint } from './selected-outline-geometry';
 import { type SaveSequencePropChange } from './Timeline/save-sequence-prop';
 import { type TimelineSelection, type TimelineSelectionInteraction } from './Timeline/TimelineSelection';
-type OutlinePoint = {
-    readonly x: number;
-    readonly y: number;
-};
-export type UvCoordinate = readonly [number, number];
-export type UvCoordinateFieldSchema = Extract<SequenceFieldSchema, {
-    type: 'uv-coordinate';
-}>;
-type SelectedOutlineUvHandle = {
-    readonly clientId: string;
-    readonly propStatus: CanUpdateSequencePropStatusStatic;
-    readonly effectIndex: number;
-    readonly fieldDefault: UvCoordinate | undefined;
-    readonly fieldKey: string;
-    readonly fieldSchema: UvCoordinateFieldSchema;
-    readonly nodePath: SequencePropsSubscriptionKey;
-    readonly schema: SequenceSchema;
-    readonly value: UvCoordinate;
-};
-type UvConnectionHandle = Pick<SelectedOutlineUvHandle, 'effectIndex' | 'fieldKey' | 'fieldSchema' | 'value'>;
-type UvHandleConnectionLine = {
-    readonly key: string;
-    readonly from: OutlinePoint;
-    readonly to: OutlinePoint;
-};
 type SelectedOutlineDragTarget = {
     readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
     readonly clientId: string;
@@ -39,15 +15,29 @@ type SelectedOutlineDragTarget = {
 type ScaleFieldSchema = Extract<SequenceFieldSchema, {
     type: 'scale';
 }>;
+type RotationFieldSchema = Extract<SequenceFieldSchema, {
+    type: 'rotation-css';
+}>;
 type SelectedOutlineScaleDragTarget = {
-    readonly propStatus: CanUpdateSequencePropStatusStatic;
+    readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
     readonly clientId: string;
     readonly fieldDefault: number | string | undefined;
     readonly fieldSchema: ScaleFieldSchema;
+    readonly keyframeDisplayOffset: number;
     readonly linked: boolean;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: SequenceSchema;
 };
+type SelectedOutlineRotationDragTarget = {
+    readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
+    readonly clientId: string;
+    readonly fieldDefault: string | undefined;
+    readonly fieldSchema: RotationFieldSchema;
+    readonly keyframeDisplayOffset: number;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: SequenceSchema;
+    readonly transformOriginValue: string;
+};
 export type SelectedOutlineDragState = {
     readonly defaultValue: string | null;
     readonly key: string;
@@ -59,11 +49,19 @@ export type SelectedOutlineDragState = {
 export type SelectedOutlineScaleDragState = {
     readonly defaultValue: string | null;
     readonly key: string;
+    readonly sourceFrame: number;
     readonly startX: number;
     readonly startY: number;
     readonly startZ: number;
     readonly target: SelectedOutlineScaleDragTarget;
 };
+export type SelectedOutlineRotationDragState = {
+    readonly defaultValue: string | null;
+    readonly key: string;
+    readonly sourceFrame: number;
+    readonly startDegrees: number;
+    readonly target: SelectedOutlineRotationDragTarget;
+};
 type SequenceWithSelectedOutline = {
     readonly depth: number;
     readonly keyframeDisplayOffset: number;
@@ -71,13 +69,38 @@ type SequenceWithSelectedOutline = {
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly sequence: TSequence;
 };
-export declare const getUvHandlePosition: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], uv: UvCoordinate) => OutlinePoint;
-export declare const getUvHandleConnectionLines: ({ handles, points, }: {
-    readonly handles: readonly UvConnectionHandle[];
+export declare const selectedOutlineDragThresholdPx = 4;
+export declare const getSelectedOutlineRotationDeltaDegrees: ({ from, to, }: {
+    readonly from: number;
+    readonly to: number;
+}) => number;
+export type SelectedOutlineRotationCorner = 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+export declare const getSelectedOutlineRotationCornerInfo: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], corner: SelectedOutlineRotationCorner) => {
+    center: OutlinePoint;
+    cursor: string;
+    cursorDegrees: number;
+    point: OutlinePoint;
+};
+export declare const getSelectedOutlineRotationPivot: ({ dimensions, points, transformOriginValue, }: {
+    readonly dimensions: {
+        readonly width: number;
+        readonly height: number;
+    } | null;
     readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
-}) => UvHandleConnectionLine[];
-export declare const getUvCoordinateForPoint: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], point: OutlinePoint) => UvCoordinate;
-export declare function constrainUv(value: UvCoordinate, schema: UvCoordinateFieldSchema): UvCoordinate;
+    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 getSelectedSequenceKeys: (selectedItems: readonly TimelineSelection[]) => Set<string>;
 export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlKey, }: {
     readonly shiftKey: boolean;
@@ -98,6 +121,18 @@ export declare const getSelectedOutlineDragValues: ({ dragStates, deltaX, deltaY
     readonly deltaX: number;
     readonly deltaY: number;
 }) => Map<string, string>;
+export declare const applySelectedOutlineDragAxisLock: ({ deltaX, deltaY, axisLocked, }: {
+    readonly deltaX: number;
+    readonly deltaY: number;
+    readonly axisLocked: boolean;
+}) => {
+    deltaX: number;
+    deltaY: number;
+};
+export declare const isSelectedOutlineDragPastThreshold: ({ deltaX, deltaY, }: {
+    readonly deltaX: number;
+    readonly deltaY: number;
+}) => boolean;
 export type SelectedOutlineStaticDragChange = SaveSequencePropChange & {
     readonly type: 'static';
 };
@@ -116,19 +151,34 @@ export declare const getSelectedOutlineDragChanges: ({ dragStates, lastValues, }
     readonly dragStates: readonly SelectedOutlineDragState[];
     readonly lastValues: ReadonlyMap<string, string>;
 }) => SelectedOutlineDragChange[];
+export type SelectedOutlineKeyboardNudgeDirection = 'left' | 'right' | 'up' | 'down';
+export declare const getSelectedOutlineKeyboardNudgeDelta: ({ direction, shiftKey, }: {
+    readonly direction: SelectedOutlineKeyboardNudgeDirection;
+    readonly shiftKey: boolean;
+}) => number;
+export declare const getSelectedOutlineKeyboardNudgeDeltas: ({ deltaX, deltaY, direction, shiftKey, }: {
+    readonly deltaX: number;
+    readonly deltaY: number;
+    readonly direction: SelectedOutlineKeyboardNudgeDirection;
+    readonly shiftKey: boolean;
+}) => {
+    deltaX: number;
+    deltaY: number;
+};
 export type SelectedOutlineScaleEdge = 'top' | 'right' | 'bottom' | 'left';
 type SelectedOutlineScaleEdgeInfo = {
     readonly axis: 'x' | 'y';
-    readonly cursor: React.CSSProperties['cursor'];
+    readonly cursor: string;
     readonly end: OutlinePoint;
     readonly extent: number;
     readonly normal: OutlinePoint;
     readonly start: OutlinePoint;
 };
 export declare const getSelectedOutlineScaleEdgeInfo: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], edge: SelectedOutlineScaleEdge) => SelectedOutlineScaleEdgeInfo | null;
-export declare const getSelectedOutlineScaleDragStates: ({ dragTargets, getDragOverrides, }: {
+export declare const getSelectedOutlineScaleDragStates: ({ dragTargets, getDragOverrides, timelinePosition, }: {
     readonly dragTargets: readonly SelectedOutlineScaleDragTarget[];
     readonly getDragOverrides: GetDragOverrides;
+    readonly timelinePosition: number;
 }) => SelectedOutlineScaleDragState[];
 export declare const getSelectedOutlineScaleDragValues: ({ axis, dragStates, scaleFactor, }: {
     readonly axis: "x" | "y";
@@ -138,14 +188,26 @@ export declare const getSelectedOutlineScaleDragValues: ({ axis, dragStates, sca
 export declare const getSelectedOutlineScaleDragChanges: ({ dragStates, lastValues, }: {
     readonly dragStates: readonly SelectedOutlineScaleDragState[];
     readonly lastValues: ReadonlyMap<string, string | number>;
-}) => {
-    fileName: string;
-    nodePath: SequencePropsSubscriptionKey;
-    fieldKey: string;
-    value: string | number;
-    defaultValue: string | null;
-    schema: SequenceSchema;
-}[];
+}) => SelectedOutlineDragChange[];
+export declare const getSelectedOutlineRotationDragStates: ({ dragTargets, getDragOverrides, timelinePosition, }: {
+    readonly dragTargets: readonly SelectedOutlineRotationDragTarget[];
+    readonly getDragOverrides: GetDragOverrides;
+    readonly timelinePosition: number;
+}) => SelectedOutlineRotationDragState[];
+export declare const getSelectedOutlineRotationDragValues: ({ dragStates, rotationDeltaDegrees, }: {
+    readonly dragStates: readonly SelectedOutlineRotationDragState[];
+    readonly rotationDeltaDegrees: number;
+}) => Map<string, string>;
+export declare const getSelectedOutlineRotationDragChanges: ({ dragStates, lastValues, }: {
+    readonly dragStates: readonly SelectedOutlineRotationDragState[];
+    readonly lastValues: ReadonlyMap<string, string>;
+}) => SelectedOutlineDragChange[];
+export declare const compensateTranslateForTransformOrigin: ({ startTranslate, deltaOrigin, rotate, scale, }: {
+    readonly startTranslate: readonly [number, number];
+    readonly deltaOrigin: readonly [number, number];
+    readonly rotate: number;
+    readonly scale: readonly [number, number];
+}) => readonly [number, number];
 export declare const SelectedOutlineOverlay: React.FC<{
     readonly scale: number;
 }>;