npm - @hyperframes/studio - Versions diffs - 0.7.105 → 0.7.106 - Mend

@hyperframes/studio 0.7.105 → 0.7.106

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/assets/{hyperframes-player-Jx07OQgw.js → hyperframes-player-CvVcx_CV.js} +1 -1
package/dist/assets/{index-Dqi2GmOp.js → index-BbYg_isc.js} +1 -1
package/dist/assets/{index-CryZ0PGi.js → index-CRzCCuPH.js} +1 -1
package/dist/assets/{index-DuxKGsHZ.js → index-DerI0ikN.js} +115 -115
package/dist/index.html +1 -1
package/dist/index.js +92 -21
package/dist/index.js.map +1 -1
package/package.json +8 -7
package/src/components/editor/DomEditSelectionChrome.test.tsx +34 -31
package/src/components/editor/domEditOverlayCrop.test.ts +136 -2
package/src/components/editor/domEditOverlayCrop.ts +99 -15
package/src/components/editor/domEditOverlayGeometry.test.ts +13 -0
package/src/components/editor/domEditOverlayGeometry.ts +13 -10
package/src/components/editor/domEditOverlayTransform.ts +88 -0

package/dist/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-DuxKGsHZ.js"></script>
+    <script type="module" crossorigin src="/assets/index-DerI0ikN.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-tBPidglp.css">
   </head>
   <body>

package/dist/index.js CHANGED Viewed

@@ -23596,6 +23596,39 @@ function buildAgentContextPreview(selection, activeCompPath) {
   ].filter(Boolean).join("\n");
 }
+// src/components/editor/domEditOverlayTransform.ts
+var COMPOSITION_ROOT_ATTR = "data-composition-id";
+function individualRotateDegrees(value) {
+  if (!value || value === "none") return 0;
+  const parts = value.trim().split(/\s+/);
+  const angle = parts.at(-1);
+  if (!angle?.endsWith("deg")) return 0;
+  if (parts.length === 4) {
+    const [x, y, z] = parts;
+    if (Number(x) !== 0 || Number(y) !== 0 || Math.abs(Number(z)) !== 1) return 0;
+    const deg2 = Number.parseFloat(angle);
+    return Number.isFinite(deg2) ? deg2 * Math.sign(Number(z)) : 0;
+  }
+  if (parts.length !== 1) return 0;
+  const deg = Number.parseFloat(angle);
+  return Number.isFinite(deg) ? deg : 0;
+}
+function composeElementTransform(element, ops, getStyle) {
+  let acc = ops.identity();
+  for (let node = element; node; node = node.parentElement) {
+    const style = getStyle(node);
+    if (!style) return null;
+    const transform = style.transform;
+    let own = transform && transform !== "none" ? ops.fromTransform(transform) : ops.identity();
+    if (!own) return null;
+    const spin = individualRotateDegrees(style.rotate);
+    if (spin !== 0) own = ops.compose(ops.fromRotate(spin), own);
+    acc = ops.compose(own, acc);
+    if (node.hasAttribute(COMPOSITION_ROOT_ATTR)) break;
+  }
+  return acc;
+}
 // src/components/editor/clipPathHelpers.ts
 function formatClipNumber(value) {
   const rounded2 = roundToCenti(value);
@@ -23737,6 +23770,49 @@ function hugRectForElement(rect, element) {
     return rect;
   return cropRectFromInsets(rect, insets, rect.editScaleX, rect.editScaleY);
 }
+var IDENTITY = { a: 1, b: 0, c: 0, d: 1 };
+var PERSPECTIVE_EPSILON = 1e-6;
+function parseMatrixComponents(transform) {
+  const flat = /^matrix\(([^)]+)\)$/.exec(transform);
+  if (flat) {
+    const [a, b, c, d] = flat[1].split(",").map((v) => Number.parseFloat(v));
+    return [a, b, c, d].every(Number.isFinite) ? { a, b, c, d } : null;
+  }
+  const spatial = /^matrix3d\(([^)]+)\)$/.exec(transform);
+  if (!spatial) return null;
+  const m = spatial[1].split(",").map((v) => Number.parseFloat(v));
+  if (m.length !== 16 || !m.every(Number.isFinite)) return null;
+  const affine = [m[3], m[7], m[11]].every((v) => Math.abs(v) < PERSPECTIVE_EPSILON);
+  if (!affine) return null;
+  return { a: m[0], b: m[1], c: m[4], d: m[5] };
+}
+var PLANAR_2D_OPS = {
+  identity: () => IDENTITY,
+  fromTransform: parseMatrixComponents,
+  fromRotate: (degrees2) => {
+    const rad = degrees2 * Math.PI / 180;
+    return { a: Math.cos(rad), b: Math.sin(rad), c: -Math.sin(rad), d: Math.cos(rad) };
+  },
+  compose: (outer, inner) => ({
+    a: outer.a * inner.a + outer.c * inner.b,
+    b: outer.b * inner.a + outer.d * inner.b,
+    c: outer.a * inner.c + outer.c * inner.d,
+    d: outer.b * inner.c + outer.d * inner.d
+  })
+};
+function isIdentity(m) {
+  return Math.abs(m.a - 1) < PERSPECTIVE_EPSILON && Math.abs(m.b) < PERSPECTIVE_EPSILON && Math.abs(m.c) < PERSPECTIVE_EPSILON && Math.abs(m.d - 1) < PERSPECTIVE_EPSILON;
+}
+function readPlanarTransform(element) {
+  const acc = composeElementTransform(element, PLANAR_2D_OPS, (node) => {
+    try {
+      return node.ownerDocument.defaultView?.getComputedStyle(node) ?? null;
+    } catch {
+      return null;
+    }
+  });
+  return acc && !isIdentity(acc) ? acc : null;
+}
 function readElementCropFrame(element, overlayRect) {
   const editX = overlayRect.editScaleX > 0 ? overlayRect.editScaleX : 1;
   const editY = overlayRect.editScaleY > 0 ? overlayRect.editScaleY : 1;
@@ -23749,20 +23825,12 @@ function readElementCropFrame(element, overlayRect) {
     scaleX: editX,
     scaleY: editY
   };
-  let transform = "";
-  try {
-    transform = element.ownerDocument.defaultView?.getComputedStyle(element).transform ?? "";
-  } catch {
-    return aabb;
-  }
-  if (!transform || transform === "none") return aabb;
-  const m = /^matrix\(([^)]+)\)$/.exec(transform);
-  if (!m) return aabb;
-  const [a, b, c, d] = m[1].split(",").map((v) => Number.parseFloat(v));
-  if (![a, b, c, d].every(Number.isFinite)) return aabb;
+  const planar = readPlanarTransform(element);
+  if (!planar) return aabb;
+  const { a, b, c, d } = planar;
   const elScaleX = Math.hypot(a, b);
   const det = a * d - b * c;
-  const elScaleY = elScaleX !== 0 ? det / elScaleX : 1;
+  const elScaleY = elScaleX !== 0 ? Math.abs(det) / elScaleX : 1;
   if (elScaleX <= 0 || elScaleY <= 0) return aabb;
   const angleDeg = Math.atan2(b, a) * 180 / Math.PI;
   const scaleX = elScaleX * editX;
@@ -23827,16 +23895,19 @@ function readElementTransformSnapshot(win, element) {
   const DOMMatrixCtor = win.DOMMatrix;
   if (!DOMMatrixCtor) return null;
   const cs = win.getComputedStyle(element);
+  const ops = {
+    identity: () => new DOMMatrixCtor(),
+    fromTransform: (value) => new DOMMatrixCtor(value),
+    fromRotate: (degrees2) => new DOMMatrixCtor().rotateSelf(degrees2),
+    compose: (outer, inner) => outer.multiply(inner)
+  };
   try {
-    let matrix = new DOMMatrixCtor();
-    for (let node = element; node; node = node.parentElement) {
-      const transform = node === element ? cs.transform : win.getComputedStyle(node).transform;
-      if (transform && transform !== "none") {
-        matrix = new DOMMatrixCtor(transform).multiply(matrix);
-      }
-      if (node.hasAttribute("data-composition-id")) break;
-    }
-    return { matrix, cs };
+    const matrix = composeElementTransform(
+      element,
+      ops,
+      (node) => node === element ? cs : win.getComputedStyle(node)
+    );
+    return matrix ? { matrix, cs } : null;
   } catch {
     return null;
   }