fix(studio): rotate from the angle a CSS-rotated element shows, without GSAP too

Author: miguel-heygen

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

@@ -6,7 +6,7 @@ import { readElementGsapNumber } from "../../utils/elementGsap";
 import { type DomEditSelection } from "./domEditing";
 import {
   createManualOffsetDragMember,
-  readGsapRotation,
+  readRotationBase,
   restoreManualOffsetDragMembers,
   type ManualOffsetDragMember,
 } from "./manualOffsetDrag";
@@ -16,7 +16,6 @@ import {
   captureStudioPathOffset,
   captureStudioRotation,
   readStudioBoxSize,
-  readStudioRotation,
 } from "./manualEdits";
 import {
   type OverlayRect,
@@ -152,10 +151,10 @@ export function startGesture(
     return false;
 
   const size = readStudioBoxSize(sel.element);
-  // Single-source rotation base = the live GSAP transform rotation plus any legacy
-  // `--hf-studio-rotation` CSS var (old projects), so a rotate gesture starts from the
-  // element's actual visual angle and commits an absolute angle to the timeline.
-  const rotation = { angle: readGsapRotation(sel.element) + readStudioRotation(sel.element).angle };
+  // Single-source rotation base: GSAP's rotation plus any legacy `--hf-studio-rotation`, or
+  // without GSAP the CSS fold, so a rotate gesture starts from the element's visual angle
+  // and commits an absolute angle to the timeline.
+  const rotation = { angle: readRotationBase(sel.element) };
   // The draft writes CSS width/height, so the resize base must be the CSS
   // layout size. offsetWidth/Height are transform-free; the overlay-rect
   // fallback (rect / editScale) includes the element's own GSAP scale and

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

@@ -10,7 +10,6 @@ import {
   applyStudioPathOffset,
   applyStudioPathOffsetDraft,
   applyStudioRotation,
-  applyStudioRotationDraft,
   beginStudioManualEditGesture,
   captureStudioBoxSize,
   captureStudioRotation,
@@ -210,16 +209,11 @@ describe("studio manual edits", () => {
     expect(card.style.getPropertyValue("rotate")).toContain(STUDIO_ROTATION_PROP);
     expect(card.style.getPropertyValue("transform-origin")).toBe("center center");
 
-    applyStudioRotationDraft(card, { angle: -12.2604 });
-    expect(readStudioRotation(card)).toEqual({ angle: -12.26 });
-    expect(card.style.getPropertyValue("rotate")).toBe("calc(8deg + -12.26deg)");
-    expect(card.style.getPropertyValue("transform-origin")).toBe("center center");
-
     const snapshot = captureStudioRotation(card);
-    applyStudioRotationDraft(card, { angle: 45 });
+    applyStudioRotation(card, { angle: 45 });
     restoreStudioRotation(card, snapshot);
-    expect(readStudioRotation(card)).toEqual({ angle: -12.26 });
-    expect(card.style.getPropertyValue("rotate")).toBe("calc(8deg + -12.26deg)");
+    expect(readStudioRotation(card)).toEqual({ angle: 24.247 });
+    expect(card.style.getPropertyValue(STUDIO_ROTATION_PROP)).toBe("24.247deg");
     expect(card.style.getPropertyValue("transform-origin")).toBe("center center");
   });
 

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

@@ -29,7 +29,6 @@ export {
   applyStudioBoxSize,
   applyStudioBoxSizeDraft,
   applyStudioRotation,
-  applyStudioRotationDraft,
 } from "./manualEditsDom";
 
 export { reapplyPositionEditsAfterSeek } from "./manualEditsSeekReapply";

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

@@ -538,13 +538,3 @@ export function applyStudioRotation(element: HTMLElement, rotation: { angle: num
     composeStudioRotationValue(element, `var(${STUDIO_ROTATION_PROP}, 0deg)`),
   );
 }
-
-export function applyStudioRotationDraft(element: HTMLElement, rotation: { angle: number }): void {
-  promoteInlineForTransform(element);
-  writeStudioRotationVars(element, rotation, { updateBase: false });
-  element.setAttribute(STUDIO_ROTATION_DRAFT_ATTR, "true");
-  element.style.setProperty(
-    "rotate",
-    composeStudioRotationValue(element, `${roundTo3(rotation.angle)}deg`),
-  );
-}

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

@@ -4,6 +4,8 @@ import {
   applyManualOffsetDragCommit,
   resumeGsapTimelines,
   applyManualOffsetDragDraft,
+  applyRotationDraft,
+  readRotationBase,
   applyManualOffsetDragMatrix,
   applyManualOffsetNudgeDraft,
   createManualOffsetDragMember,
@@ -636,3 +638,37 @@ describe("a move of an element GSAP does not position", () => {
     expect(member().plainTranslate).toBe(false);
   });
 });
+
+describe("rotate in a composition without GSAP", () => {
+  it("starts from the authored CSS rotation and drafts the absolute angle the commit writes", () => {
+    const window = new Window();
+    window.document.head.innerHTML = "<style>#title { rotate: 30deg; }</style>";
+    const element = window.document.createElement("h1");
+    element.id = "title";
+    window.document.body.append(element);
+    const base = readRotationBase(element);
+    expect(base).toBeCloseTo(30);
+    applyRotationDraft(element, 55);
+    expect(element.style.getPropertyValue("rotate")).toBe("55deg");
+  });
+
+  it("drafts only the part of the angle the CSS rotate owns, leaving transform and scale theirs", () => {
+    const cases: Array<[string, number, number]> = [
+      ["transform: rotate(30deg);", 30, 25],
+      ["rotate: 20deg; transform: rotate(10deg);", 30, 45],
+      ["scale: -1 1;", 180, 25],
+      ["transform: scaleX(-1);", 180, 25],
+    ];
+    for (const [css, base, drafted] of cases) {
+      const window = new Window();
+      window.document.head.innerHTML = `<style>#title { ${css} }</style>`;
+      const element = window.document.createElement("h1");
+      element.id = "title";
+      window.document.body.append(element);
+      expect({ css, base: readRotationBase(element) }).toEqual({ css, base: expect.closeTo(base) });
+      applyRotationDraft(element, base + 25);
+      const rotate = Number.parseFloat(element.style.getPropertyValue("rotate"));
+      expect({ css, rotate }).toEqual({ css, rotate: expect.closeTo(drafted) });
+    }
+  });
+});

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

@@ -7,10 +7,13 @@ import {
   clearStudioPathOffset,
   endStudioManualEditGesture,
   readAppliedStudioPathOffset,
+  readStudioRotation,
   restoreStudioPathOffset,
+  restoreStudioRotation,
+  type StudioRotationSnapshot,
   type StudioPathOffsetSnapshot,
 } from "./manualEdits";
-import { computeDraggedGsapPosition } from "../../hooks/draggedGsapPosition";
+import { computeDraggedGsapPosition, readCssRotation } from "../../hooks/draggedGsapPosition";
 import { gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
 import { readTranslatePx, writeTranslatePx } from "./plainTranslate";
 
@@ -53,25 +56,34 @@ function applyOffsetDragDraftViaGsap(
   return true;
 }
 
-/**
- * Live rotation preview through the GSAP channel — the SAME channel the commit
- * lands in (a `tl.set`/keyframe rotation), mirroring `applyOffsetDragDraftViaGsap`.
- * GSAP owns the transform rotation, so neutralize the CSS `rotate` longhand to keep
- * the two channels from composing. `angle` is the absolute target rotation. Returns
- * false when gsap is unavailable (caller falls back to the CSS draft).
- */
-export function applyRotationDraftViaGsap(element: HTMLElement, angle: number): boolean {
+// The rotation draft shows the absolute angle the commit writes: GSAP's rotation, or without GSAP a
+// CSS `rotate` of the angle less what `scale` and `transform` already turn.
+export function applyRotationDraft(element: HTMLElement, angle: number): void {
   const gsap = getOffsetDragGsap(element);
-  if (!gsap) return false;
-  element.style.setProperty("rotate", "none");
-  gsap.set(element, { rotation: angle });
-  return true;
+  element.style.setProperty(
+    "rotate",
+    gsap ? "none" : `${angle - readCssRotation(element, false)}deg`,
+  );
+  gsap?.set(element, { rotation: angle });
+}
+
+/** Back to the gesture start: the CSS snapshot, and GSAP's rotation without the legacy var. */
+export function restoreRotationDraft(
+  element: HTMLElement,
+  angle: number,
+  snapshot: StudioRotationSnapshot,
+): void {
+  getOffsetDragGsap(element)?.set(element, {
+    rotation: angle - (Number.parseFloat(snapshot.studioRotation) || 0),
+  });
+  restoreStudioRotation(element, snapshot);
 }
 
-/** Current GSAP transform rotation — the single-source rotation base. 0 if gsap is unavailable. */
-export function readGsapRotation(element: HTMLElement): number {
+/** The angle a rotate gesture starts from, as the element shows it. */
+export function readRotationBase(element: HTMLElement): number {
   const gsap = getOffsetDragGsap(element);
-  return gsap ? Number(gsap.getProperty(element, "rotation")) || 0 : 0;
+  if (!gsap) return readCssRotation(element);
+  return Number(gsap.getProperty(element, "rotation")) + readStudioRotation(element).angle;
 }
 
 const DEFAULT_OFFSET_PROBE_PX = 100;

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

@@ -9,21 +9,19 @@ import { type DomEditSelection } from "./domEditing";
 import {
   applyManualOffsetDragCommit,
   applyManualOffsetDragDraft,
-  applyRotationDraftViaGsap,
+  applyRotationDraft,
   endManualOffsetDragMembers,
   restoreManualOffsetDragMembers,
+  restoreRotationDraft,
 } from "./manualOffsetDrag";
 import {
   applyStudioBoxSize,
   applyStudioBoxSizeDraft,
-  applyStudioRotation,
-  applyStudioRotationDraft,
   endStudioManualEditGesture,
   isStudioManualEditGestureCurrent,
   readStudioBoxSize,
   restoreStudioBoxSize,
   restoreStudioPathOffset,
-  restoreStudioRotation,
 } from "./manualEdits";
 import {
   type GroupOverlayItem,
@@ -166,9 +164,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         actualAngle: g.actualRotation,
         snap: e.shiftKey,
       });
-      if (!applyRotationDraftViaGsap(sel.element, rotated.angle)) {
-        applyStudioRotationDraft(sel.element, rotated);
-      }
+      applyRotationDraft(sel.element, rotated.angle);
       return;
     }
 
@@ -421,23 +417,15 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         actualAngle: g.actualRotation,
         snap: e.shiftKey,
       });
-      const restoreRotation = () => {
-        // Single source of truth: snap the GSAP rotation back to the gesture's base
-        // angle; fall back to the legacy CSS-var restore when gsap is unavailable.
-        if (!applyRotationDraftViaGsap(sel.element, g.actualRotation)) {
-          restoreStudioRotation(sel.element, g.initialRotation);
-        }
-      };
+      const restoreRotation = () =>
+        restoreRotationDraft(sel.element, g.actualRotation, g.initialRotation);
       if (!hasDomEditRotationChanged(g.actualRotation, finalRotation.angle)) {
         restoreRotation();
         endStudioManualEditGesture(sel.element, g.manualEditDragToken);
         return;
       }
-      // Keep the preview at the final angle through the GSAP channel (NOT the CSS var)
-      // while the commit lands a `tl.set`/keyframe rotation on the timeline.
-      if (!applyRotationDraftViaGsap(sel.element, finalRotation.angle)) {
-        applyStudioRotation(sel.element, finalRotation);
-      }
+      // Hold the final angle while the commit lands.
+      applyRotationDraft(sel.element, finalRotation.angle);
       void Promise.resolve(opts.onRotationCommitRef.current(sel, finalRotation))
         .catch((error) => {
           logGestureCommitFailure("rotate commit failed", error);
@@ -555,11 +543,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       restoreGestureOverlayRect(g);
     }
     if (g?.mode === "rotation" && sel) {
-      applyRotationDraftViaGsap(
-        sel.element,
-        g.actualRotation - (Number.parseFloat(g.initialRotation.studioRotation) || 0),
-      );
-      restoreStudioRotation(sel.element, g.initialRotation);
+      restoreRotationDraft(sel.element, g.actualRotation, g.initialRotation);
       endStudioManualEditGesture(sel.element, g.manualEditDragToken);
     }
     opts.blockedMoveRef.current = null;

packages/studio/src/hooks/draggedGsapPosition.ts

@@ -8,6 +8,34 @@ import { roundTo3 } from "../utils/rounding";
  * it without pulling the GSAP commit graph into its module scope.
  */
 
+const cssValue = (style: CSSStyleDeclaration, prop: string) => {
+  const value = style.getPropertyValue(prop).trim();
+  return value === "none" ? "" : value;
+};
+
+// Without GSAP, the rotation GSAP will parse from the CSS `rotate`, `scale` and `transform`; with
+// `withRotate` false, only the part `scale` and `transform` draw. GSAP folds them into one transform,
+// and a list the browser rejects (e.g. `rotate: x 30deg`) leaves it only the plain transform.
+export function readCssRotation(element: HTMLElement, withRotate = true): number {
+  const view = element.ownerDocument.defaultView;
+  if (!view) return 0;
+  const style = view.getComputedStyle(element);
+  const rotate = withRotate ? cssValue(style, "rotate") : "";
+  const scale = cssValue(style, "scale");
+  const transform = cssValue(style, "transform");
+  const angle = (list: string) => {
+    if (!list) return 0;
+    const m = new view.DOMMatrix(list);
+    return (Math.atan2(m.b, m.a) * 180) / Math.PI;
+  };
+  const folded = [rotate && `rotate(${rotate})`, scale && `scale(${scale.split(/\s+/).join(",")})`];
+  try {
+    return angle([...folded, transform].join(" ").trim());
+  } catch {
+    return angle(transform);
+  }
+}
+
 /**
  * Translate a studio drag offset into absolute GSAP x/y, accounting for the
  * element's rotation and its drag-start base pose. Reads the drag-start