@hyperframes/studio 0.7.54 → 0.7.56

package/src/components/editor/anchoredResizeCommitFeedsOffset.test.ts

@@ -0,0 +1,214 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { DomEditSelection } from "./domEditing";
+import type { GestureState, UseDomEditOverlayGesturesOptions } from "./domEditOverlayGestures";
+
+// Origin box (overlay px). The gesture-start center is its centroid; the
+// center-anchored resize must keep THIS point planted, which means the release
+// must commit a nonzero offset equal to minus half the size growth.
+const ORIGIN = { left: 0, top: 0, width: 200, height: 100 };
+const ORIGIN_CENTER = {
+  x: ORIGIN.left + ORIGIN.width / 2,
+  y: ORIGIN.top + ORIGIN.height / 2,
+};
+
+// Consistent geometry stub: model the physical truth the real DOM would report.
+// A CSS width/height change grows the box from its top-left, so the rendered
+// center drifts by half the size delta; the manual offset the gesture applies
+// (read back from the element's studio vars) pulls it back. `elementCornerOverlayPoints`
+// returns the four corners of that drifted box; `overlayCornersCentroid` (kept
+// real) averages them so the anchor loop can measure the true center each frame.
+vi.mock("./domEditOverlayGeometry", async () => {
+  const actual = await vi.importActual<typeof import("./domEditOverlayGeometry")>(
+    "./domEditOverlayGeometry",
+  );
+  const { readStudioBoxSize, readStudioPathOffset } = await import("./manualEditsDom");
+  const physicalCenter = (element: HTMLElement) => {
+    const size = readStudioBoxSize(element);
+    const width = size.width > 0 ? size.width : ORIGIN.width;
+    const height = size.height > 0 ? size.height : ORIGIN.height;
+    const offset = readStudioPathOffset(element);
+    return {
+      x: ORIGIN_CENTER.x + (width - ORIGIN.width) / 2 + offset.x,
+      y: ORIGIN_CENTER.y + (height - ORIGIN.height) / 2 + offset.y,
+      width,
+      height,
+    };
+  };
+  return {
+    ...actual,
+    elementCornerOverlayPoints: (_o: unknown, _i: unknown, element: HTMLElement) => {
+      const c = physicalCenter(element);
+      const hw = c.width / 2;
+      const hh = c.height / 2;
+      return {
+        nw: { x: c.x - hw, y: c.y - hh },
+        ne: { x: c.x + hw, y: c.y - hh },
+        sw: { x: c.x - hw, y: c.y + hh },
+        se: { x: c.x + hw, y: c.y + hh },
+      };
+    },
+    orientedOverlayRect: (_o: unknown, _i: unknown, element: HTMLElement) => {
+      const c = physicalCenter(element);
+      return {
+        left: c.x - c.width / 2,
+        top: c.y - c.height / 2,
+        width: c.width,
+        height: c.height,
+        editScaleX: 1,
+        editScaleY: 1,
+        angle: 0,
+      };
+    },
+  };
+});
+
+const { createDomEditOverlayGestureHandlers } = await import("./useDomEditOverlayGestures");
+
+function ref<T>(current: T) {
+  return { current };
+}
+
+interface CommitCall {
+  size: { width: number; height: number };
+  offset: { x: number; y: number } | undefined;
+}
+
+function buildHarness() {
+  const element = document.createElement("div");
+  document.body.append(element);
+
+  const selection = {
+    element,
+    id: "box",
+    selector: "#box",
+    selectorIndex: 0,
+    sourceFile: "index.html",
+    tagName: "div",
+    label: "Box",
+    textContent: "",
+    textFields: [],
+    capabilities: {
+      canEditText: false,
+      canEditLayout: true,
+      canMove: true,
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: false,
+      canAdjustOpacity: true,
+      canAdjustFill: true,
+      canAdjustBorderRadius: true,
+      canAdjustStroke: true,
+      canAdjustShadow: true,
+      canAdjustZIndex: true,
+    },
+    computedStyle: { display: "block", position: "absolute" },
+  } as unknown as DomEditSelection;
+
+  const commits: CommitCall[] = [];
+  const overlayEl = document.createElement("div");
+  const iframe = document.createElement("iframe");
+
+  const opts: UseDomEditOverlayGesturesOptions = {
+    overlayRef: ref<HTMLDivElement | null>(overlayEl),
+    iframeRef: ref<HTMLIFrameElement | null>(iframe),
+    boxRef: ref<HTMLDivElement | null>(document.createElement("div")),
+    selectionRef: ref<DomEditSelection | null>(selection),
+    hoverSelectionRef: ref<DomEditSelection | null>(null),
+    overlayRectRef: ref<OverlayRectLike | null>({
+      left: ORIGIN.left,
+      top: ORIGIN.top,
+      width: ORIGIN.width,
+      height: ORIGIN.height,
+      editScaleX: 1,
+      editScaleY: 1,
+    }) as never,
+    groupOverlayItemsRef: ref([]),
+    gestureRef: ref<GestureState | null>(null),
+    groupGestureRef: ref(null),
+    blockedMoveRef: ref(null),
+    rafPausedRef: ref(false),
+    suppressNextBoxClickRef: ref(false),
+    setOverlayRect: () => {},
+    setGroupOverlayItems: () => {},
+    onBlockedMoveRef: ref(() => {}),
+    onManualDragStartRef: ref(() => {}),
+    onPathOffsetCommitRef: ref(() => {}),
+    onGroupPathOffsetCommitRef: ref(() => {}),
+    onBoxSizeCommitRef: ref((_s, size, offset) => {
+      commits.push({ size, offset });
+    }),
+    onRotationCommitRef: ref(() => {}),
+    onCanvasPointerMoveRef: ref(() => Promise.resolve(null)),
+    onCanvasMouseDown: () => {},
+    snapGuidesRef: ref(null),
+  };
+
+  const handlers = createDomEditOverlayGestureHandlers(opts);
+  return { handlers, commits, selection };
+}
+
+type OverlayRectLike = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  editScaleX: number;
+  editScaleY: number;
+};
+
+function evt(clientX: number, clientY: number) {
+  return {
+    clientX,
+    clientY,
+    pointerId: 1,
+    button: 0,
+    altKey: false,
+    shiftKey: false,
+    preventDefault() {},
+    stopPropagation() {},
+    currentTarget: { setPointerCapture() {} },
+  } as unknown as React.PointerEvent<HTMLDivElement>;
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("anchored corner resize — the release commit feeds the center-pin offset", () => {
+  it("onPointerUp passes a nonzero offset that keeps the center planted", () => {
+    const { handlers, commits } = buildHarness();
+
+    // Start an SE corner resize. Pointer starts 100px right of the center.
+    handlers.startGesture("resize", evt(ORIGIN_CENTER.x + 100, ORIGIN_CENTER.y), {
+      resizeHandle: "se",
+    });
+
+    // Drag outward to radial scale 1.5 (dist 150 / 100). Several frames so the
+    // per-frame center-pin anchor accumulates and converges into g.lastResizeAnchor.
+    for (let i = 0; i < 5; i++) {
+      handlers.onPointerMove(evt(ORIGIN_CENTER.x + 150, ORIGIN_CENTER.y));
+    }
+
+    handlers.onPointerUp(evt(ORIGIN_CENTER.x + 150, ORIGIN_CENTER.y));
+
+    expect(commits).toHaveLength(1);
+    const { size, offset } = commits[0]!;
+
+    // Proportional 1.5x growth of the 200x100 base.
+    expect(size.width).toBeCloseTo(300, 0);
+    expect(size.height).toBeCloseTo(150, 0);
+
+    // The committed offset must be present and nonzero — the open question.
+    expect(offset).toBeDefined();
+    if (!offset) return;
+    expect(offset.x).not.toBe(0);
+    expect(offset.y).not.toBe(0);
+
+    // And it must equal minus half the size growth, i.e. it re-pins the center to
+    // exactly the gesture-start center (offset = -(finalSize - origin)/2).
+    expect(offset.x).toBeCloseTo(-(size.width - ORIGIN.width) / 2, 0);
+    expect(offset.y).toBeCloseTo(-(size.height - ORIGIN.height) / 2, 0);
+  });
+});

package/src/components/editor/anchoredResizeReleaseShift.test.ts

@@ -0,0 +1,208 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  applyStudioBoxSize,
+  applyStudioPathOffset,
+  readStudioBoxSize,
+  reapplyPositionEditsAfterSeek,
+} from "./manualEditsDom";
+import { buildBoxSizePatches, buildPathOffsetPatches } from "./manualEditsDomPatches";
+import { createManualOffsetDragMember, applyManualOffsetDragCommit } from "./manualOffsetDrag";
+import { computeNextResizeAnchor } from "./domEditResizeLocal";
+import type { PatchOperation } from "../../utils/sourcePatcher";
+import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
+
+/**
+ * Center-anchored corner resize (CapCut model): the element scales about its
+ * CENTER, which must stay planted across the whole gesture — including after
+ * release, on every corner and at any rotation.
+ *
+ * Root cause of the original release "shift" (proved with a real-layout Chromium
+ * replay, see the anchor-loop test below): during a resize drag the per-frame
+ * anchor is derived from the element's LIVE measured center — which already carries
+ * the offset applied on the PREVIOUS frame — while `applyManualOffsetDragDraft`
+ * treats that anchor as the ABSOLUTE offset. So `fixedStart - centerNow` is really
+ * only the RESIDUAL correction, and using it as the absolute value makes the anchor
+ * OSCILLATE between the correct value and zero every frame:
+ *   frame 0: offset 0 → center shifted by the resize → anchor = full amount → apply
+ *   frame 1: offset applied → center back at fixedStart → anchor = 0 → apply 0 (un-pin!)
+ *   frame 2: offset 0 again → anchor = full amount → ...
+ * Release commits `g.lastResizeAnchor` from whichever parity the last pointermove
+ * landed on, so the element lands EITHER pinned OR un-pinned — an unpredictable
+ * post-release "shift".
+ *
+ * Fix (useDomEditOverlayGestures pointermove, resize branch, fa4f39168): accumulate
+ * the residual onto the previously-applied anchor instead of using it as the
+ * absolute offset, so the loop converges to a stable value on every frame. The
+ * per-frame accumulation is the exported `computeNextResizeAnchor` helper (the one
+ * call site in the pointermove resize branch); tests 1 & 2 drive it directly.
+ */
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+/** Apply a built PatchOperation[] to a live element, mirroring sourcePatcher's
+ * inline-style / attribute application — i.e. what the persisted source carries
+ * when it is re-parsed into the DOM on the next preview load. */
+function applyPatchesToElement(el: HTMLElement, ops: PatchOperation[]): void {
+  for (const op of ops) {
+    if (op.type === "inline-style") {
+      if (op.value === null) el.style.removeProperty(op.property);
+      else el.style.setProperty(op.property, op.value);
+    } else if (op.type === "attribute") {
+      if (op.value === null) el.removeAttribute(op.property);
+      else el.setAttribute(op.property, op.value);
+    }
+  }
+}
+
+/** Net translate applied to an element, resolving the studio offset var()
+ * expression to its px value so we compare the actually-rendered translation. */
+function resolvedTranslatePx(el: HTMLElement): { x: number; y: number } {
+  const raw = el.style.getPropertyValue("translate").trim();
+  if (!raw || raw === "none") return { x: 0, y: 0 };
+  const vx = Number.parseFloat(el.style.getPropertyValue("--hf-studio-offset-x")) || 0;
+  const vy = Number.parseFloat(el.style.getPropertyValue("--hf-studio-offset-y")) || 0;
+  const parts = splitTopLevelWhitespace(raw);
+  const parseAxis = (part: string, varVal: number): number => {
+    if (part && part.includes("--hf-studio-offset")) return varVal;
+    const n = Number.parseFloat(part);
+    return Number.isFinite(n) ? n : 0;
+  };
+  return {
+    x: parseAxis(parts[0] ?? "", vx),
+    y: parseAxis(parts[1] ?? "", vy),
+  };
+}
+
+describe("center-anchored corner resize — no shift after release", () => {
+  it("the per-frame center anchor converges (does NOT oscillate) — the release-shift root cause", () => {
+    // Model the pointermove anchor loop that pins the element's CENTER. The physical
+    // truth (confirmed in a real browser): the measured center sits at
+    // `fixedStart - appliedOffset` shifted by the resize — i.e. applying the offset
+    // moves the center back toward its gesture-start position. Here scale=1 so
+    // screen px == offset px. `trueAnchor` is the compensating offset that pins it.
+    const trueAnchor = { dx: -60, dy: -27 };
+    const fixedStart = { x: 500, y: 270 };
+
+    // `appliedOffset` mirrors what applyManualOffsetDragDraft set last frame.
+    let appliedOffset = { x: 0, y: 0 };
+    // `lastResizeAnchor` accumulator, exactly as g.lastResizeAnchor in the fix.
+    let lastResizeAnchor: { dx: number; dy: number } | undefined;
+
+    const anchorsSeen: Array<{ dx: number; dy: number }> = [];
+    for (let frame = 0; frame < 8; frame++) {
+      // Live measured center: the resize would put it at fixedStart + trueAnchor
+      // (un-anchored), and the currently-applied offset pulls it back by that
+      // offset. So centerNow = fixedStart - trueAnchor + appliedOffset.
+      const centerNow = {
+        x: fixedStart.x - trueAnchor.dx + appliedOffset.x,
+        y: fixedStart.y - trueAnchor.dy + appliedOffset.y,
+      };
+      // ── The fixed logic (accumulate residual onto the previous anchor) ──
+      const anchor = computeNextResizeAnchor(lastResizeAnchor, fixedStart, centerNow);
+      lastResizeAnchor = anchor;
+      anchorsSeen.push(anchor);
+      // applyManualOffsetDragDraft sets the absolute offset (scale 1) = anchor.
+      appliedOffset = { x: anchor.dx, y: anchor.dy };
+    }
+
+    // Every frame must report the same, correct anchor — no oscillation, so the
+    // committed value is parity-independent.
+    for (const a of anchorsSeen) {
+      expect(a).toEqual(trueAnchor);
+    }
+    // Guard against the OLD absolute formula regressing: with `anchor =
+    // fixedStart - centerNow` (no accumulation) the sequence would be
+    // [trueAnchor, 0, trueAnchor, 0, ...]; assert the last two frames agree.
+    expect(anchorsSeen.at(-1)).toEqual(anchorsSeen.at(-2));
+  });
+
+  it("the center stays fixed for every corner at any rotation (loop converges)", () => {
+    // The pin loop is handle- and rotation-independent: it always measures the
+    // element CENTER and drives it back to fixedStart. Simulate the loop for all
+    // four corners across unrotated + rotated gestures; the resize's raw center
+    // shift varies with corner/rotation (modelled as `rawShift`), but the loop must
+    // converge the measured center onto fixedStart every time.
+    const fixedStart = { x: 640, y: 360 };
+    const HANDLES = ["nw", "ne", "sw", "se"] as const;
+    const DEGS = [0, 30, 90, 137];
+    for (const handle of HANDLES) {
+      for (const deg of DEGS) {
+        const t = (deg * Math.PI) / 180;
+        // Raw (un-pinned) center shift the size write would cause this frame —
+        // a corner/rotation-dependent vector. Its exact value is irrelevant; the
+        // loop only needs to cancel it.
+        const seed = (HANDLES.indexOf(handle) + 1) * 11;
+        const rawShift = {
+          dx: Math.cos(t) * seed - Math.sin(t) * (seed / 2),
+          dy: Math.sin(t) * seed + Math.cos(t) * (seed / 2),
+        };
+        let appliedOffset = { x: 0, y: 0 };
+        let lastResizeAnchor: { dx: number; dy: number } | undefined;
+        let centerNow = { x: fixedStart.x, y: fixedStart.y };
+        for (let frame = 0; frame < 6; frame++) {
+          centerNow = {
+            x: fixedStart.x + rawShift.dx + appliedOffset.x,
+            y: fixedStart.y + rawShift.dy + appliedOffset.y,
+          };
+          const anchor = computeNextResizeAnchor(lastResizeAnchor, fixedStart, centerNow);
+          lastResizeAnchor = anchor;
+          appliedOffset = { x: anchor.dx, y: anchor.dy };
+        }
+        // After convergence the pinned center equals the gesture-start center.
+        const pinnedCenter = {
+          x: fixedStart.x + rawShift.dx + appliedOffset.x,
+          y: fixedStart.y + rawShift.dy + appliedOffset.y,
+        };
+        expect(pinnedCenter.x).toBeCloseTo(fixedStart.x, 9);
+        expect(pinnedCenter.y).toBeCloseTo(fixedStart.y, 9);
+      }
+    }
+  });
+
+  it("net translate after persist+reload equals the committed anchor offset (non-GSAP)", () => {
+    // The committed offset flows through the real apply → persist → reload chain
+    // unchanged (this hop was proved clean; the shift is upstream in the anchor
+    // loop above, not in persistence).
+    const el = document.createElement("div");
+    el.style.setProperty("width", "200px");
+    el.style.setProperty("height", "100px");
+    document.body.appendChild(el);
+
+    const anchorDx = -30;
+    const anchorDy = -18;
+    const finalSize = { width: 240, height: 130 };
+
+    applyStudioBoxSize(el, finalSize);
+    const memberResult = createManualOffsetDragMember({
+      key: "k",
+      selection: { element: el } as never,
+      element: el,
+      rect: { left: 0, top: 0, width: 240, height: 130, editScaleX: 1, editScaleY: 1 },
+    });
+    expect(memberResult.ok).toBe(true);
+    if (!memberResult.ok) return;
+
+    const finalOffset = applyManualOffsetDragCommit(memberResult.member, anchorDx, anchorDy);
+
+    applyStudioBoxSize(el, finalSize);
+    const patches = buildBoxSizePatches(el);
+    applyStudioPathOffset(el, finalOffset);
+    patches.push(...buildPathOffsetPatches(el));
+
+    expect(resolvedTranslatePx(el)).toEqual({ x: anchorDx, y: anchorDy });
+
+    // Persist → fresh element re-parsed from source → reload re-stamp.
+    const reloaded = document.createElement("div");
+    reloaded.style.setProperty("width", "200px");
+    reloaded.style.setProperty("height", "100px");
+    document.body.appendChild(reloaded);
+    applyPatchesToElement(reloaded, patches);
+    reapplyPositionEditsAfterSeek(reloaded.ownerDocument);
+
+    expect(resolvedTranslatePx(reloaded)).toEqual({ x: anchorDx, y: anchorDy });
+    expect(readStudioBoxSize(reloaded)).toEqual(finalSize);
+  });
+});