fix(studio): a resized corner stays on the pointer when the size rounds to whole pixels

Resized sizes stay on whole CSS pixels (GSAP centres a -50% translate from the
integer offset size), so the centre-anchored resize left the grabbed corner up to
a third of a pixel times the element's scale off the pointer: 0.53 px on a 1.5x
scaled layer. The centre pin now takes half the rounding remainder along the
element's rendered edges, so the grabbed corner lands where the wanted size puts
it while the written size stays whole.

Author: miguel-heygen

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

@@ -259,6 +259,26 @@ describe("anchored corner resize — the release commit feeds the center-pin off
     expect(offset.y).toBeCloseTo(-(size.height - ORIGIN.height) / 2, 0);
   });
 
+  it("puts the grabbed corner on the pointer when the size rounds to whole px", () => {
+    const { handlers, commits } = buildHarness();
+    handlers.startGesture("resize", evt(ORIGIN_CENTER.x + 100, ORIGIN_CENTER.y), {
+      resizeHandle: "se",
+    });
+    // Radial scale 1.503: the pointer asks for 300.6 x 150.3, Studio writes 301 x 150.
+    for (let i = 0; i < 5; i++)
+      handlers.onPointerMove(evt(ORIGIN_CENTER.x + 150.3, ORIGIN_CENTER.y));
+    handlers.onPointerUp(evt(ORIGIN_CENTER.x + 150.3, ORIGIN_CENTER.y));
+
+    const { size, offset } = commits[0]!;
+    expect(size).toEqual({ width: 301, height: 150 });
+    const corner = {
+      x: ORIGIN_CENTER.x + (size.width - ORIGIN.width) / 2 + offset!.x + size.width / 2,
+      y: ORIGIN_CENTER.y + (size.height - ORIGIN.height) / 2 + offset!.y + size.height / 2,
+    };
+    expect(corner.x).toBeCloseTo(ORIGIN_CENTER.x + 300.6 / 2, 6);
+    expect(corner.y).toBeCloseTo(ORIGIN_CENTER.y + 150.3 / 2, 6);
+  });
+
   it("keeps the centre on the first frame when the authored translate is a percent", async () => {
     const { orientedOverlayRect } = await import("./domEditOverlayGeometry");
     authored.percent = 0.25;

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

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import {
+  resizeRemainderShift,
   resolveCenterResizeScale,
   resolveCenterResizeSize,
   resolveRotatedResizeCursor,
@@ -129,3 +130,36 @@ describe("resolveRotatedResizeCursor", () => {
     expect(resolveRotatedResizeCursor("se", -90)).toBe("nesw-resize");
   });
 });
+
+describe("resizeRemainderShift", () => {
+  // A 30 deg, 1.5x scaled box: local (u, v) px map to overlay px through M.
+  const angle = Math.PI / 6;
+  const k = 1.5;
+  const M = (u: number, v: number) => ({
+    x: k * (u * Math.cos(angle) - v * Math.sin(angle)),
+    y: k * (u * Math.sin(angle) + v * Math.cos(angle)),
+  });
+  const centre = { x: 400, y: 300 };
+  const at = (u: number, v: number) => ({ x: centre.x + M(u, v).x, y: centre.y + M(u, v).y });
+  const written = { width: 301, height: 150 };
+  const wanted = { width: 300.6, height: 150.3 };
+  const corners = {
+    nw: at(-written.width / 2, -written.height / 2),
+    ne: at(written.width / 2, -written.height / 2),
+    sw: at(-written.width / 2, written.height / 2),
+    se: at(written.width / 2, written.height / 2),
+  };
+
+  it.each([
+    ["nw", -1, -1],
+    ["ne", 1, -1],
+    ["sw", -1, 1],
+    ["se", 1, 1],
+  ] as const)("moves the %s corner to where the wanted size puts it", (handle, sx, sy) => {
+    const shift = resizeRemainderShift(corners, handle, wanted, written);
+    const grabbed = corners[handle];
+    const target = at((sx * wanted.width) / 2, (sy * wanted.height) / 2);
+    expect(grabbed.x + shift.x).toBeCloseTo(target.x, 9);
+    expect(grabbed.y + shift.y).toBeCloseTo(target.y, 9);
+  });
+});

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

@@ -14,6 +14,7 @@
  * rendered center, feeding the center-pin translate through the manual-offset
  * channel) lives in useDomEditOverlayGestures.ts.
  */
+import type { FixedCorner } from "./domEditOverlayGeometry";
 import type { ResizeHandle } from "./domEditOverlayGestures";
 
 /** Minimum element edge in LOCAL px — mirrors the old MIN_RESIZE_EDGE_PX clamp
@@ -112,6 +113,31 @@ export function resolveRotatedResizeCursor(handle: ResizeHandle, rotationDeg: nu
   return CURSORS_8[bucket]!;
 }
 
+type Size = { width: number; height: number };
+const HANDLE_SIGN: Record<ResizeHandle, readonly [number, number]> = {
+  nw: [-1, -1],
+  ne: [1, -1],
+  sw: [-1, 1],
+  se: [1, 1],
+};
+
+/** Overlay shift of the pinned center that puts the grabbed corner where the wanted size would: the
+ *  written size is whole px, so half the remainder moves along the element's own rendered edges. */
+export function resizeRemainderShift(
+  corners: Record<FixedCorner, { x: number; y: number }>,
+  handle: ResizeHandle,
+  wanted: Size,
+  written: Size,
+): { x: number; y: number } {
+  const [sx, sy] = HANDLE_SIGN[handle];
+  const kw = (sx * (wanted.width - written.width)) / (2 * written.width);
+  const kh = (sy * (wanted.height - written.height)) / (2 * written.height);
+  return {
+    x: (corners.ne.x - corners.nw.x) * kw + (corners.sw.x - corners.nw.x) * kh,
+    y: (corners.ne.y - corners.nw.y) * kw + (corners.sw.y - corners.nw.y) * kh,
+  };
+}
+
 /** Per-frame anchored-resize center accumulator: ADD the residual center correction
  *  (fixedStart − fixedNow) onto the previous anchor so the pin CONVERGES instead of
  *  oscillating (fa4f39168). Pure; exported for the release-shift characterization tests. */

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

@@ -36,7 +36,7 @@ import {
 } from "./manualEditsTypes";
 import { gsapWritesChannels } from "../../hooks/gsapRuntimeKeyframes";
 import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
-import { roundTo3, roundToLayoutPx } from "../../utils/rounding";
+import { roundTo3, roundToLayoutPx, roundToLayoutSize } from "../../utils/rounding";
 import { BOX_SIZE_STYLE_PROPS } from "./manualEditsDomPatches";
 
 /* ── Gesture tracking ─────────────────────────────────────────────── */
@@ -477,8 +477,8 @@ function writeStudioBoxSizeVars(
   }
 
   element.setAttribute(STUDIO_BOX_SIZE_ATTR, "true");
-  element.style.setProperty(STUDIO_WIDTH_PROP, `${roundToLayoutPx(Math.max(1, size.width))}px`);
-  element.style.setProperty(STUDIO_HEIGHT_PROP, `${roundToLayoutPx(Math.max(1, size.height))}px`);
+  element.style.setProperty(STUDIO_WIDTH_PROP, `${roundToLayoutSize(size).width}px`);
+  element.style.setProperty(STUDIO_HEIGHT_PROP, `${roundToLayoutSize(size).height}px`);
 }
 
 function applyStudioBoxSizeDimensions(
@@ -488,8 +488,7 @@ function applyStudioBoxSizeDimensions(
   writeStudioBoxSizeVars(element, size);
   restoreStaleStudioScaleResize(element);
 
-  const width = roundToLayoutPx(Math.max(1, size.width));
-  const height = roundToLayoutPx(Math.max(1, size.height));
+  const { width, height } = roundToLayoutSize(size);
   element.style.setProperty("box-sizing", "border-box");
   element.style.setProperty("width", `${width}px`);
   element.style.setProperty("height", `${height}px`);
@@ -533,12 +532,13 @@ export function forgetStudioBoxSizeDraftBase(element: HTMLElement): void {
 export function applyStudioBoxSizeDraft(
   element: HTMLElement,
   size: { width: number; height: number },
-): void {
+): { width: number; height: number } {
   if (!boxSizeDraftBases.has(element)) {
     boxSizeDraftBases.set(element, { width: element.offsetWidth, height: element.offsetHeight });
   }
   promoteInlineForTransform(element);
   applyStudioBoxSizeDimensions(element, size);
+  return roundToLayoutSize(size);
 }
 
 /* ── Rotation apply ───────────────────────────────────────────────── */

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

@@ -6,10 +6,13 @@ import {
   elementCornerOverlayPoints,
   overlayCornersCentroid,
 } from "./domEditOverlayGeometry";
-import { computeNextResizeAnchor } from "./domEditResizeLocal";
+import { computeNextResizeAnchor, resizeRemainderShift } from "./domEditResizeLocal";
 import { applyManualOffsetDragDraft } from "./manualOffsetDrag";
 
 type Corners = ReturnType<typeof elementCornerOverlayPoints>;
+type Size = { width: number; height: number };
+/** The size the pointer asks for and the whole-px size written for it. */
+type ResizeDraftSizes = { wanted: Size; written: Size };
 
 /**
  * The residual center-pin offset for this frame. With measurable corners and a
@@ -25,10 +28,18 @@ function resolveResizeAnchor(
   g: GestureState,
   corners: Corners | null,
   measureOrientedRect: () => OverlayRect | null,
+  sizes: ResizeDraftSizes,
 ): { dx: number; dy: number } {
   const fixedStart = g.resizeFixedCenterStart;
   if (corners && fixedStart) {
-    return computeNextResizeAnchor(g.lastResizeAnchor, fixedStart, overlayCornersCentroid(corners));
+    const shift = resizeRemainderShift(
+      corners,
+      g.resizeHandle ?? "se",
+      sizes.wanted,
+      sizes.written,
+    );
+    const target = { x: fixedStart.x + shift.x, y: fixedStart.y + shift.y };
+    return computeNextResizeAnchor(g.lastResizeAnchor, target, overlayCornersCentroid(corners));
   }
   const fallbackRect = measureOrientedRect();
   return resolveResizeCenterAnchorOffset({
@@ -52,11 +63,12 @@ function resolveAnchoredResizeDraft(
   overlayEl: HTMLDivElement | null,
   iframe: HTMLIFrameElement | null,
   measureOrientedRect: () => OverlayRect | null,
+  sizes: ResizeDraftSizes,
 ): OverlayRect {
   // Measure real corners ONCE — reused for the anchor and the fallback size.
   const corners =
     overlayEl && iframe ? elementCornerOverlayPoints(overlayEl, iframe, element) : null;
-  const anchor = resolveResizeAnchor(g, corners, measureOrientedRect);
+  const anchor = resolveResizeAnchor(g, corners, measureOrientedRect, sizes);
   g.lastResizeAnchor = anchor;
   applyManualOffsetDragDraft(member, anchor.dx, anchor.dy);
   // Re-measure AFTER the anchor translate so it hugs the element every frame.
@@ -80,6 +92,7 @@ export function resolveResizeDraftRect(
   overlayEl: HTMLDivElement | null,
   iframe: HTMLIFrameElement | null,
   measureOrientedRect: () => OverlayRect | null,
+  sizes: ResizeDraftSizes,
 ): OverlayRect {
   if (g.pathOffsetMember) {
     return resolveAnchoredResizeDraft(
@@ -89,6 +102,7 @@ export function resolveResizeDraftRect(
       overlayEl,
       iframe,
       measureOrientedRect,
+      sizes,
     );
   }
   // Re-measure the element's oriented box AFTER the size write. The size draft

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

@@ -257,7 +257,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         pointerStart: { x: g.startX, y: g.startY },
         centerStart: { x: g.centerX, y: g.centerY },
       });
-      applyStudioBoxSizeDraft(sel.element, nextSize);
+      const writtenSize = applyStudioBoxSizeDraft(sel.element, nextSize);
 
       const overlayEl = opts.overlayRef.current;
       const iframe = opts.iframeRef.current;
@@ -270,6 +270,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         overlayEl,
         iframe,
         measureOrientedRect,
+        { wanted: nextSize, written: writtenSize },
       );
       logResizeMove({
         pointer: { x: e.clientX, y: e.clientY },

packages/studio/src/utils/rounding.ts

@@ -8,6 +8,13 @@ export function roundToLayoutPx(val: number): number {
   return Math.round(val);
 }
 
+export function roundToLayoutSize(size: { width: number; height: number }) {
+  return {
+    width: roundToLayoutPx(Math.max(1, size.width)),
+    height: roundToLayoutPx(Math.max(1, size.height)),
+  };
+}
+
 /** Round to 2 decimal places (centisecond precision for timeline values). */
 export function roundToCenti(val: number): number {
   return Math.round(val * 100) / 100;