@hyperframes/studio 0.8.105 → 0.8.107

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -12,6 +12,7 @@ import {
 import { readCssRotationTarget, readRotationBase } from "./rotationDraft";
 import {
   beginStudioManualEditGesture,
+  endStudioManualEditGesture,
   captureStudioBoxSize,
   captureStudioPathOffset,
   captureStudioRotation,
@@ -81,48 +82,54 @@ export function startGroupDrag(
     }
     members.push(result.member);
   }
-  resetDragMoveLog();
-  logDrag("group-start", {
-    // A member whose mapping differs from its neighbours travels a different
-    // distance for the same pointer delta, which is the group coming apart.
-    members: Object.fromEntries(
-      members.map((member) => [
-        member.key,
-        {
-          map: `${member.screenToOffset.a.toFixed(3)},${member.screenToOffset.d.toFixed(3)}`,
-          base: `${Math.round(member.baseGsap.x)},${Math.round(member.baseGsap.y)}`,
-          offset: `${Math.round(member.initialOffset.x)},${Math.round(member.initialOffset.y)}`,
-        },
-      ]),
-    ),
-    at: readDragPositions(members),
-  });
+  try {
+    resetDragMoveLog();
+    logDrag("group-start", {
+      // A member whose mapping differs from its neighbours travels a different
+      // distance for the same pointer delta, which is the group coming apart.
+      members: Object.fromEntries(
+        members.map((member) => [
+          member.key,
+          {
+            map: `${member.screenToOffset.a.toFixed(3)},${member.screenToOffset.d.toFixed(3)}`,
+            base: `${Math.round(member.baseGsap.x)},${Math.round(member.baseGsap.y)}`,
+            offset: `${Math.round(member.initialOffset.x)},${Math.round(member.initialOffset.y)}`,
+          },
+        ]),
+      ),
+      at: readDragPositions(members),
+    });
 
-  const overlayEl = opts.overlayRef.current;
-  const iframe = opts.iframeRef.current;
-  const snapContext =
-    overlayEl && iframe
-      ? collectSnapContext({
-          overlayEl,
-          iframe,
-          excludeElements: buildExcludeElements({
+    const overlayEl = opts.overlayRef.current;
+    const iframe = opts.iframeRef.current;
+    const snapContext =
+      overlayEl && iframe
+        ? collectSnapContext({
+            overlayEl,
             iframe,
-            groupSelections: items.map((i) => i.selection),
-          }),
-        })
-      : undefined;
+            excludeElements: buildExcludeElements({
+              iframe,
+              groupSelections: items.map((i) => i.selection),
+            }),
+          })
+        : undefined;
 
-  e.preventDefault();
-  e.stopPropagation();
-  e.currentTarget.setPointerCapture(e.pointerId);
-  opts.rafPausedRef.current = true;
-  opts.groupGestureRef.current = {
-    startX: e.clientX,
-    startY: e.clientY,
-    originItems: items,
-    members,
-    snapContext,
-  };
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    opts.rafPausedRef.current = true;
+    opts.groupGestureRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      originItems: items,
+      members,
+      snapContext,
+    };
+  } catch (error) {
+    opts.groupGestureRef.current = null;
+    restoreManualOffsetDragMembers(members);
+    throw error;
+  }
   return true;
 }
 
@@ -212,91 +219,99 @@ export function startGesture(
         // Hold a % translate as the same px now, so a growing box can't drag it along mid-frame.
         if (result.member.plainTranslate) applyManualOffsetDragDraft(result.member, 0, 0);
       } else {
-        manualEditDragToken = beginStudioManualEditGesture(sel.element);
+        manualEditDragToken = beginStudioManualEditGesture(sel.element, "resize");
       }
     } else {
-      manualEditDragToken = beginStudioManualEditGesture(sel.element);
+      manualEditDragToken = beginStudioManualEditGesture(
+        sel.element,
+        kind === "rotate" ? "rotate" : "resize",
+      );
     }
   }
 
-  // Rotation base: the angle the element shows. An element GSAP does not turn, or a plain-translate
-  // move, never asks GSAP: reading a property makes it bake the CSS into its transform.
-  const plain = !!pathOffsetMember?.plainTranslate || !gsapWritesRotation(sel.element);
-  const plainRotation = plain && kind === "rotate" ? readCssRotationTarget(sel.element) : null;
-  const rotation = { angle: readRotationBase(sel.element, plain) };
-  const overlayBounds = overlayEl?.getBoundingClientRect();
-  const centerX = (overlayBounds?.left ?? 0) + rect.left + rect.width / 2;
-  const centerY = (overlayBounds?.top ?? 0) + rect.top + rect.height / 2;
+  // A throw before the gesture is armed would leave its mark, and the mark holds every reload.
+  try {
+    // Rotation base: the angle the element shows. An element GSAP does not turn, or a plain-translate
+    // move, never asks GSAP: reading a property makes it bake the CSS into its transform.
+    const plain = !!pathOffsetMember?.plainTranslate || !gsapWritesRotation(sel.element);
+    const plainRotation = plain && kind === "rotate" ? readCssRotationTarget(sel.element) : null;
+    const rotation = { angle: readRotationBase(sel.element, plain) };
+    const overlayBounds = overlayEl?.getBoundingClientRect();
+    const centerX = (overlayBounds?.left ?? 0) + rect.left + rect.width / 2;
+    const centerY = (overlayBounds?.top ?? 0) + rect.top + rect.height / 2;
 
-  const iframe = opts.iframeRef.current;
+    const iframe = opts.iframeRef.current;
 
-  // For a center-anchored corner resize, capture the element's rendered CENTER (the
-  // centroid of its four real, rotation-aware corners) now, so per-frame anchoring
-  // can pin that exact point instead of an axis-aligned width/height delta (which
-  // only holds the center still when the element grows symmetrically from an
-  // unrotated layout box). Present whenever an anchor member exists (all corners).
-  let resizeFixedCenterStart: { x: number; y: number } | undefined;
-  if (kind === "resize" && pathOffsetMember && overlayEl && iframe) {
-    const corners = elementCornerOverlayPoints(overlayEl, iframe, sel.element);
-    if (corners) resizeFixedCenterStart = overlayCornersCentroid(corners);
-  }
-  const snapContext =
-    (kind === "drag" || kind === "resize") && overlayEl && iframe
-      ? collectSnapContext({
-          overlayEl,
-          iframe,
-          excludeElements: buildExcludeElements({ iframe, selection: sel }),
-        })
-      : undefined;
-  e.preventDefault();
-  e.stopPropagation();
-  e.currentTarget.setPointerCapture(e.pointerId);
-  opts.rafPausedRef.current = true;
-  opts.gestureRef.current = {
-    kind,
-    mode,
-    selection: sel,
-    startX: e.clientX,
-    startY: e.clientY,
-    centerX,
-    centerY,
-    initialPathOffset,
-    initialRotation: captureStudioRotation(sel.element),
-    initialBoxSize: captureStudioBoxSize(sel.element),
-    pathOffsetMember,
-    originLeft: rect.left,
-    originTop: rect.top,
-    originWidth: rect.width,
-    originHeight: rect.height,
-    actualWidth,
-    actualHeight,
-    actualRotation: rotation.angle,
-    plainRotation,
-    editScaleX: rect.editScaleX,
-    editScaleY: rect.editScaleY,
-    contentScaleX,
-    contentScaleY,
-    manualEditDragToken,
-    snapContext,
-    resizeHandle: kind === "resize" ? (options?.resizeHandle ?? "se") : undefined,
-    resizeFixedCenterStart,
-  };
-  if (kind === "resize") {
-    resetResizeMoveLog();
-    logResize("start", {
-      handle: options?.resizeHandle ?? "se",
-      pointer: { x: e.clientX, y: e.clientY },
-      center: { x: centerX, y: centerY },
-      origin: { left: rect.left, top: rect.top, w: rect.width, h: rect.height },
-      actual: { w: actualWidth, h: actualHeight },
-      editScale: { x: rect.editScaleX, y: rect.editScaleY },
-      contentScale: { x: contentScaleX, y: contentScaleY },
-      rotation: rotation.angle,
-      hasOffsetMember: !!pathOffsetMember,
-      fixedCenterStart: resizeFixedCenterStart ?? null,
-      initialBoxSize: opts.gestureRef.current?.initialBoxSize ?? null,
-      initialInlineStyle: sel.element.getAttribute("style"),
-    });
+    // A corner resize pins the centroid of the four rotation-aware corners: an axis-aligned
+    // size delta only holds the centre still for a symmetric, unrotated growth.
+    let resizeFixedCenterStart: { x: number; y: number } | undefined;
+    if (kind === "resize" && pathOffsetMember && overlayEl && iframe) {
+      const corners = elementCornerOverlayPoints(overlayEl, iframe, sel.element);
+      if (corners) resizeFixedCenterStart = overlayCornersCentroid(corners);
+    }
+    const snapContext =
+      (kind === "drag" || kind === "resize") && overlayEl && iframe
+        ? collectSnapContext({
+            overlayEl,
+            iframe,
+            excludeElements: buildExcludeElements({ iframe, selection: sel }),
+          })
+        : undefined;
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    opts.rafPausedRef.current = true;
+    opts.gestureRef.current = {
+      kind,
+      mode,
+      selection: sel,
+      startX: e.clientX,
+      startY: e.clientY,
+      centerX,
+      centerY,
+      initialPathOffset,
+      initialRotation: captureStudioRotation(sel.element),
+      initialBoxSize: captureStudioBoxSize(sel.element),
+      pathOffsetMember,
+      originLeft: rect.left,
+      originTop: rect.top,
+      originWidth: rect.width,
+      originHeight: rect.height,
+      actualWidth,
+      actualHeight,
+      actualRotation: rotation.angle,
+      plainRotation,
+      editScaleX: rect.editScaleX,
+      editScaleY: rect.editScaleY,
+      contentScaleX,
+      contentScaleY,
+      manualEditDragToken,
+      snapContext,
+      resizeHandle: kind === "resize" ? (options?.resizeHandle ?? "se") : undefined,
+      resizeFixedCenterStart,
+    };
+    if (kind === "resize") {
+      resetResizeMoveLog();
+      logResize("start", {
+        handle: options?.resizeHandle ?? "se",
+        pointer: { x: e.clientX, y: e.clientY },
+        center: { x: centerX, y: centerY },
+        origin: { left: rect.left, top: rect.top, w: rect.width, h: rect.height },
+        actual: { w: actualWidth, h: actualHeight },
+        editScale: { x: rect.editScaleX, y: rect.editScaleY },
+        contentScale: { x: contentScaleX, y: contentScaleY },
+        rotation: rotation.angle,
+        hasOffsetMember: !!pathOffsetMember,
+        fixedCenterStart: resizeFixedCenterStart ?? null,
+        initialBoxSize: opts.gestureRef.current?.initialBoxSize ?? null,
+        initialInlineStyle: sel.element.getAttribute("style"),
+      });
+    }
+  } catch (error) {
+    opts.gestureRef.current = null;
+    if (pathOffsetMember) restoreManualOffsetDragMembers([pathOffsetMember]);
+    else if (manualEditDragToken) endStudioManualEditGesture(sel.element, manualEditDragToken);
+    throw error;
   }
   return true;
 }

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

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { expect, it } from "vitest";
-import { ensureImportedFontFace, injectPreviewImportedFont } from "../../utils/studioFontHelpers";
+import { importedFontFaceCssFor, injectPreviewImportedFont } from "../../utils/studioFontHelpers";
 import { importedFontFaceCss, type ImportedFontAsset } from "./fontAssets";
 
 const face = (file: string, extra: Partial<ImportedFontAsset> = {}): ImportedFontAsset => ({
@@ -30,24 +30,25 @@ it("a face says which weight and style it draws, a variable file its weight rang
   );
 });
 
-it("two weights of one family are both kept in the file and both drawn in the preview", () => {
+it("two weights of one family are both drawn in the preview", () => {
   const bold = face("Poppins-Bold.ttf", { weight: "700", style: "normal" });
   const regular = face("Poppins-Regular.ttf", { weight: "400", style: "normal" });
-  const html = "<html><head></head><body></body></html>";
-  const saved = ensureImportedFontFace(
-    ensureImportedFontFace(html, bold, "index.html"),
-    regular,
-    "index.html",
-  );
-  expect(saved).toContain("font-weight: 700;");
-  expect(saved).toContain("font-weight: 400;");
-  expect(ensureImportedFontFace(saved, bold, "index.html")).toBe(saved);
   injectPreviewImportedFont(document, bold);
   injectPreviewImportedFont(document, regular);
   injectPreviewImportedFont(document, bold);
   expect(document.head.querySelectorAll("style")).toHaveLength(2);
 });
 
+it("the saved rule points at the font from the file that uses it", () => {
+  const bold = face("Poppins-Bold.ttf");
+  expect(importedFontFaceCssFor(bold, "index.html")).toContain(
+    'url("assets/fonts/Poppins/Poppins-Bold.ttf")',
+  );
+  expect(importedFontFaceCssFor(bold, "compositions/intro.html")).toContain(
+    'url("../assets/fonts/Poppins/Poppins-Bold.ttf")',
+  );
+});
+
 it("a weight the browser would drop is left out, and a family cannot close the style block", () => {
   for (const weight of ["0", "5000", "bold", "700;}"])
     expect(importedFontFaceCss(face("x.ttf", { weight }))).not.toContain("font-weight");
@@ -56,14 +57,3 @@ it("a weight the browser would drop is left out, and a family cannot close the s
     "</style>",
   );
 });
-
-it("a file name with a replacement pattern is saved as written, not expanded into the page", () => {
-  const html = "<html><head></head><body>rest</body></html>";
-  const odd = { family: "Cash", path: "assets/Cash$'Font.ttf", url: "/Cash$'Font.ttf" };
-  const saved = ensureImportedFontFace(html, odd, "index.html");
-  expect(saved).toContain("Cash$'Font.ttf");
-  expect(saved.match(/<body>/g)).toHaveLength(1);
-  const again = ensureImportedFontFace(saved, { ...odd, path: "assets/Cash$&.ttf" }, "index.html");
-  expect(again).toContain("Cash$&.ttf");
-  expect(again.match(/<body>/g)).toHaveLength(1);
-});