fix(studio): a move keeps the route it chose at press through drop and save

Author: miguel-heygen

packages/studio/src/components/editor/DomEditOverlay.tsx

@@ -10,6 +10,7 @@ import {
   type BlockedMoveState,
   type DomEditGroupPathOffsetCommit,
   type FocusableDomEditOverlay,
+  type MoveCommitOptions,
   type GestureState,
   type GroupGestureState,
   focusDomEditOverlayElement,
@@ -45,7 +46,7 @@ export {
   hasDomEditRotationChanged,
   resolveDomEditRotationGesture,
 } from "./domEditOverlayGestures";
-export type { DomEditGroupPathOffsetCommit } from "./domEditOverlayGestures";
+export type { DomEditGroupPathOffsetCommit, MoveCommitOptions } from "./domEditOverlayGestures";
 
 export interface DomEditOverlayProps {
   iframeRef: RefObject<HTMLIFrameElement | null>;
@@ -81,7 +82,7 @@ export interface DomEditOverlayProps {
   onPathOffsetCommit: (
     selection: DomEditSelection,
     next: { x: number; y: number },
-    modifiers?: { altKey?: boolean },
+    modifiers?: MoveCommitOptions,
   ) => Promise<unknown> | void;
   onGroupPathOffsetCommit: (updates: DomEditGroupPathOffsetCommit[]) => Promise<unknown> | void;
   onBoxSizeCommit: (

packages/studio/src/components/editor/domEditOverlayGestures.ts

@@ -232,9 +232,15 @@ export function hasDomEditRotationChanged(initialAngle: number, nextAngle: numbe
 // These live here (rather than in DomEditOverlay.tsx or useDomEditOverlayGestures.ts)
 // to break circular imports between those files.
 
+export interface MoveCommitOptions {
+  altKey?: boolean;
+  plainTranslate?: boolean;
+}
+
 export interface DomEditGroupPathOffsetCommit {
   selection: DomEditSelection;
   next: { x: number; y: number };
+  plainTranslate?: boolean;
 }
 
 // Refs are stable across renders; values are read via .current.
@@ -259,7 +265,7 @@ export type UseDomEditOverlayGesturesOptions = {
     (
       s: DomEditSelection,
       n: { x: number; y: number },
-      m?: { altKey?: boolean },
+      m?: MoveCommitOptions,
     ) => Promise<unknown> | void
   >;
   onGroupPathOffsetCommitRef: RefObject<

packages/studio/src/components/editor/domEditOverlayStartGesture.test.ts

@@ -42,6 +42,14 @@ function pressOptions(element: HTMLElement) {
     rafPausedRef: ref(false),
     onManualDragStartRef: ref(vi.fn()),
     onBlockedMoveRef: ref(vi.fn()),
+    onPathOffsetCommitRef: ref(vi.fn()),
+    snapGuidesRef: ref(null),
+    groupGestureRef: ref(null),
+    blockedMoveRef: ref(null),
+    setOverlayRect: vi.fn(),
+    suppressNextBoxClickRef: ref(false),
+    hoverSelectionRef: ref(null),
+    onCanvasMouseDown: vi.fn(),
   };
 }
 
@@ -81,3 +89,27 @@ describe("a drag press on a centred element without GSAP", () => {
     expect(element.getAttribute("style")).toBe(style);
   });
 });
+
+describe("a drag on an element without GSAP", () => {
+  it("drops on the route it chose at press, even if GSAP takes the element over mid-drag", () => {
+    const element = document.createElement("div");
+    element.style.setProperty("translate", "40px 30px");
+    document.body.append(element);
+    const opts = pressOptions(element);
+    const handlers = createDomEditOverlayGestureHandlers(opts as never);
+    expect(handlers.startGesture("drag", PRESS as never)).toBe(true);
+    Object.assign(element, { _gsap: { renderTransform: () => {} } });
+    const release = {
+      ...PRESS,
+      clientX: 110,
+      clientY: 70,
+      currentTarget: { releasePointerCapture() {} },
+    };
+    handlers.onPointerUp(release as never);
+    expect(opts.onPathOffsetCommitRef.current).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.anything(),
+      expect.objectContaining({ plainTranslate: true }),
+    );
+  });
+});

packages/studio/src/components/editor/plainTranslate.ts

@@ -80,6 +80,6 @@ export function writeTranslatePx(el: HTMLElement, p: Point): void {
 }
 
 /** The position the panel shows and edits: the translate a move writes, unless GSAP positions it. */
-export function readMoveOffset(el: HTMLElement): Point {
-  return gsapWritesPosition(el) ? readStudioPathOffset(el) : readTranslatePx(el);
+export function readMoveOffset(el: HTMLElement, plainTranslate = !gsapWritesPosition(el)): Point {
+  return plainTranslate ? readTranslatePx(el) : readStudioPathOffset(el);
 }

packages/studio/src/components/editor/propertyPanelTransformCommit.test.ts

@@ -55,3 +55,32 @@ describe("createTransformCommitHandlers", () => {
     expect(onSetManualRotation).not.toHaveBeenCalled();
   });
 });
+
+describe("the panel's position fields", () => {
+  it("read and move an element without GSAP by its CSS translate, on the route they chose", async () => {
+    const onSetManualOffset = vi.fn();
+    const box = document.createElement("div");
+    box.style.setProperty("translate", "40px 30px");
+    const element = { id: "box", selector: "#box", element: box } as unknown as DomEditSelection;
+    const handlers = createTransformCommitHandlers({
+      element,
+      styles: {},
+      hasGsapAnimation: false,
+      gsapAnimId: null,
+      gsapKeyframes: null,
+      currentPct: 0,
+      onCommitAnimatedProperty: undefined,
+      onAddKeyframe: undefined,
+      onSetManualOffset,
+      onSetManualSize: vi.fn(),
+      onSetManualRotation: vi.fn(),
+      showToast: vi.fn(),
+    });
+    await handlers.commitManualOffset("x", "100px");
+    expect(onSetManualOffset).toHaveBeenCalledWith(
+      element,
+      { x: 100, y: 30 },
+      { plainTranslate: true },
+    );
+  });
+});

packages/studio/src/components/editor/propertyPanelTransformCommit.ts

@@ -1,3 +1,4 @@
+import { gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
 import type { DomEditSelection } from "./domEditingTypes";
 import { readStudioBoxSize } from "./manualEdits";
 import { readMoveOffset } from "./plainTranslate";
@@ -74,12 +75,14 @@ export function createTransformCommitHandlers({
       )
     )
       return;
-    const current = readMoveOffset(element.element);
+    const plainTranslate = !gsapWritesPosition(element.element);
+    const current = readMoveOffset(element.element, plainTranslate);
     await Promise.resolve(
-      onSetManualOffset(element, {
-        x: axis === "x" ? parsed : current.x,
-        y: axis === "y" ? parsed : current.y,
-      }),
+      onSetManualOffset(
+        element,
+        { x: axis === "x" ? parsed : current.x, y: axis === "y" ? parsed : current.y },
+        { plainTranslate },
+      ),
     );
   };
 

packages/studio/src/components/editor/propertyPanelTypes.ts

@@ -79,6 +79,7 @@ export interface PropertyPanelProps {
   onSetManualOffset: (
     element: DomEditSelection,
     next: { x: number; y: number },
+    route?: { plainTranslate: boolean },
   ) => void | Promise<void>;
   onSetManualSize: (
     element: DomEditSelection,

packages/studio/src/components/editor/useDomEditNudge.test.tsx

@@ -226,3 +226,36 @@ describe("useDomEditNudge — selection cleanup keyed on stable identity", () =>
     elementB.remove();
   });
 });
+
+describe("useDomEditNudge carries the route its press chose", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    __resetForTests();
+  });
+  afterEach(() => vi.useRealTimers());
+
+  it("commits an element without GSAP on the CSS route", () => {
+    const host = document.createElement("div");
+    const root = createRoot(host);
+    const element = document.createElement("div");
+    document.body.append(element);
+    const commit = vi.fn();
+    act(() => {
+      root.render(
+        React.createElement(Harness, {
+          selection: makeSelection("Dot", element),
+          onPathOffsetCommit: commit,
+        }),
+      );
+    });
+    act(() => dispatchArrowRight());
+    act(() => vi.advanceTimersByTime(CANVAS_NUDGE_COMMIT_DEBOUNCE_MS + 10));
+    expect(commit).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.anything(),
+      expect.objectContaining({ plainTranslate: true }),
+    );
+    act(() => root.unmount());
+    element.remove();
+  });
+});

packages/studio/src/components/editor/useDomEditNudge.ts

@@ -18,6 +18,7 @@ import {
 import type {
   BlockedMoveState,
   DomEditGroupPathOffsetCommit,
+  MoveCommitOptions,
   GestureState,
   GroupGestureState,
 } from "./domEditOverlayGestures";
@@ -59,7 +60,7 @@ export interface UseDomEditNudgeParams {
     (
       s: DomEditSelection,
       n: { x: number; y: number },
-      m?: { altKey?: boolean },
+      m?: MoveCommitOptions,
     ) => Promise<unknown> | void
   >;
   onGroupPathOffsetCommitRef: RefObject<
@@ -149,11 +150,12 @@ export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: ()
     const updates: DomEditGroupPathOffsetCommit[] = session.members.map((member) => ({
       selection: member.selection,
       next: applyManualOffsetNudgeCommit(member, session.accum),
+      plainTranslate: member.plainTranslate,
     }));
     const p = paramsRef.current;
     const commit = session.isGroup
       ? p.onGroupPathOffsetCommitRef.current(updates)
-      : p.onPathOffsetCommitRef.current(updates[0].selection, updates[0].next);
+      : p.onPathOffsetCommitRef.current(updates[0].selection, updates[0].next, updates[0]);
     void Promise.resolve(commit)
       .catch(() => {
         for (const member of session.members) {

packages/studio/src/components/editor/useDomEditOverlayGestures.ts

@@ -336,6 +336,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       const updates = groupG.members.map((member) => ({
         selection: member.selection,
         next: applyManualOffsetDragCommit(member, dx, dy),
+        plainTranslate: member.plainTranslate,
       }));
       logDrag("drop", {
         pointer: `${Math.round(rawDx)},${Math.round(rawDy)}`,
@@ -476,7 +477,10 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         box.style.top = `${nextBoxTop}px`;
       }
       void Promise.resolve(
-        opts.onPathOffsetCommitRef.current(sel, finalOffset, { altKey: e.altKey }),
+        opts.onPathOffsetCommitRef.current(sel, finalOffset, {
+          altKey: e.altKey,
+          plainTranslate: g.pathOffsetMember.plainTranslate,
+        }),
       )
         .catch(() => {
           if (