npm - @hyperframes/studio - Versions diffs - 0.7.96 → 0.7.98 - Mend

@hyperframes/studio 0.7.96 → 0.7.98

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 (17) hide show

package/dist/assets/{hyperframes-player-CogOkBTX.js → hyperframes-player-B-R_2cNr.js} +1 -1
package/dist/assets/{index-DfZlc9RM.js → index-ByovYZb8.js} +1 -1
package/dist/assets/{index-OMTw4iIl.js → index-C3VqFrrP.js} +1 -1
package/dist/assets/{index-YO-rhwSW.js → index-jdiZjBHE.js} +186 -186
package/dist/index.html +1 -1
package/dist/index.js +78 -29
package/dist/index.js.map +1 -1
package/package.json +7 -7
package/src/components/editor/manualEditsDom.ts +14 -0
package/src/components/editor/manualEditsDomPatches.test.ts +21 -2
package/src/components/editor/manualEditsDomPatches.ts +5 -0
package/src/components/editor/manualEditsSnapshot.ts +6 -0
package/src/components/editor/manualEditsTypes.ts +14 -0
package/src/hooks/gsapResizeDropPoint.test.ts +394 -0
package/src/hooks/gsapResizeIntercept.test.ts +198 -0
package/src/hooks/gsapResizeIntercept.ts +143 -35
package/src/utils/elementGsap.ts +14 -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-YO-rhwSW.js"></script>
+    <script type="module" crossorigin src="/assets/index-jdiZjBHE.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-tBPidglp.css">
   </head>
   <body>

package/dist/index.js CHANGED Viewed

@@ -24528,6 +24528,8 @@ var STUDIO_ORIGINAL_TRANSLATE_ATTR = "data-hf-studio-original-translate";
 var STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR = "data-hf-studio-original-inline-translate";
 var STUDIO_ORIGINAL_WIDTH_ATTR = "data-hf-studio-original-width";
 var STUDIO_ORIGINAL_HEIGHT_ATTR = "data-hf-studio-original-height";
+var STUDIO_ORIGINAL_BOX_WIDTH_ATTR = "data-hf-studio-original-box-width";
+var STUDIO_ORIGINAL_BOX_HEIGHT_ATTR = "data-hf-studio-original-box-height";
 var STUDIO_ORIGINAL_MIN_WIDTH_ATTR = "data-hf-studio-original-min-width";
 var STUDIO_ORIGINAL_MIN_HEIGHT_ATTR = "data-hf-studio-original-min-height";
 var STUDIO_ORIGINAL_MAX_WIDTH_ATTR = "data-hf-studio-original-max-width";
@@ -24858,6 +24860,12 @@ function restoreStaleStudioScaleResize(element) {
   element.removeAttribute(STUDIO_ORIGINAL_TRANSFORM_ORIGIN_ATTR);
 }
 function writeStudioBoxSizeVars(element, size) {
+  if (!element.hasAttribute(STUDIO_ORIGINAL_BOX_WIDTH_ATTR)) {
+    element.setAttribute(STUDIO_ORIGINAL_BOX_WIDTH_ATTR, String(element.offsetWidth));
+  }
+  if (!element.hasAttribute(STUDIO_ORIGINAL_BOX_HEIGHT_ATTR)) {
+    element.setAttribute(STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, String(element.offsetHeight));
+  }
   if (!element.hasAttribute(STUDIO_BOX_SIZE_ATTR)) {
     element.setAttribute(STUDIO_ORIGINAL_WIDTH_ATTR, element.style.getPropertyValue("width"));
     element.setAttribute(STUDIO_ORIGINAL_HEIGHT_ATTR, element.style.getPropertyValue("height"));
@@ -25070,6 +25078,8 @@ function captureStudioBoxSize(element) {
     marker: element.getAttribute(STUDIO_BOX_SIZE_ATTR),
     originalWidth: element.getAttribute(STUDIO_ORIGINAL_WIDTH_ATTR),
     originalHeight: element.getAttribute(STUDIO_ORIGINAL_HEIGHT_ATTR),
+    originalBoxWidth: element.getAttribute(STUDIO_ORIGINAL_BOX_WIDTH_ATTR),
+    originalBoxHeight: element.getAttribute(STUDIO_ORIGINAL_BOX_HEIGHT_ATTR),
     originalMinWidth: element.getAttribute(STUDIO_ORIGINAL_MIN_WIDTH_ATTR),
     originalMinHeight: element.getAttribute(STUDIO_ORIGINAL_MIN_HEIGHT_ATTR),
     originalMaxWidth: element.getAttribute(STUDIO_ORIGINAL_MAX_WIDTH_ATTR),
@@ -25132,6 +25142,8 @@ function restoreStudioBoxSize(element, previous) {
   restoreAttribute(element, STUDIO_BOX_SIZE_ATTR, previous.marker);
   restoreAttribute(element, STUDIO_ORIGINAL_WIDTH_ATTR, previous.originalWidth);
   restoreAttribute(element, STUDIO_ORIGINAL_HEIGHT_ATTR, previous.originalHeight);
+  restoreAttribute(element, STUDIO_ORIGINAL_BOX_WIDTH_ATTR, previous.originalBoxWidth);
+  restoreAttribute(element, STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, previous.originalBoxHeight);
   restoreAttribute(element, STUDIO_ORIGINAL_MIN_WIDTH_ATTR, previous.originalMinWidth);
   restoreAttribute(element, STUDIO_ORIGINAL_MIN_HEIGHT_ATTR, previous.originalMinHeight);
   restoreAttribute(element, STUDIO_ORIGINAL_MAX_WIDTH_ATTR, previous.originalMaxWidth);
@@ -25931,6 +25943,12 @@ function setElementGsapPosition(element, x, y) {
   gsap3.set(element, { x, y });
   return true;
 }
+function setElementGsapScale(element, x, y) {
+  const gsap3 = gsapOf(element);
+  if (!gsap3?.set) return false;
+  gsap3.set(element, { scaleX: x, scaleY: y });
+  return true;
+}
 function readElementGsapNumber(element, prop) {
   const value = Number(gsapOf(element)?.getProperty?.(element, prop));
   return Number.isFinite(value) ? value : null;
@@ -56698,6 +56716,9 @@ var BOX_SIZE_STYLE_PROPS = [
 var BOX_SIZE_ORIG_ATTRS = [
   [STUDIO_ORIGINAL_WIDTH_ATTR, "width"],
   [STUDIO_ORIGINAL_HEIGHT_ATTR, "height"],
+  // Records a measurement rather than a style, so it restores nothing.
+  [STUDIO_ORIGINAL_BOX_WIDTH_ATTR, ""],
+  [STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, ""],
   [STUDIO_ORIGINAL_MIN_WIDTH_ATTR, "min-width"],
   [STUDIO_ORIGINAL_MIN_HEIGHT_ATTR, "min-height"],
   [STUDIO_ORIGINAL_MAX_WIDTH_ATTR, "max-width"],
@@ -59528,6 +59549,21 @@ function synthesizeIdentityProps(source) {
   }
   return id;
 }
+function originalBoxSize(el, measuredAttr, inlineProperty) {
+  const measured = Number.parseFloat(el?.getAttribute(measuredAttr) ?? "");
+  if (Number.isFinite(measured) && measured > 0) return measured;
+  const inline = Number.parseFloat(
+    el?.getAttribute(`data-hf-studio-original-${inlineProperty}`) ?? ""
+  );
+  return Number.isFinite(inline) && inline > 0 ? inline : null;
+}
+function tweenUsesScaleLonghands(anim) {
+  const isLonghand = (name) => name === "scaleX" || name === "scaleY";
+  const inKeyframes = (anim?.keyframes?.keyframes ?? []).some(
+    (frame) => Object.keys(frame.properties ?? {}).some(isLonghand)
+  );
+  return inKeyframes || Object.keys(anim?.properties ?? {}).some(isLonghand);
+}
 async function tryGsapResizeIntercept(selection, size, animations, iframe, commitMutation, fetchFallbackAnimations) {
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
   const allKnownAnimations = [...animations, ...fetchedAnimations];
@@ -59596,13 +59632,13 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
   let resizeProps;
   let scaleDraftEl = null;
   let scaleDraftDropPoint = null;
+  let committedScale = null;
   let nonUniformScale = false;
+  let useScaleLonghands = false;
   if (resizeGroup === "scale") {
     const el = iframe?.contentDocument?.querySelector(selector ?? "");
-    const origW = Number.parseFloat(el?.getAttribute("data-hf-studio-original-width") ?? "");
-    const origH = Number.parseFloat(el?.getAttribute("data-hf-studio-original-height") ?? "");
-    const cssW = Number.isFinite(origW) && origW > 0 ? origW : 200;
-    const cssH = Number.isFinite(origH) && origH > 0 ? origH : cssW;
+    const cssW = originalBoxSize(el, STUDIO_ORIGINAL_BOX_WIDTH_ATTR, "width") ?? 200;
+    const cssH = originalBoxSize(el, STUDIO_ORIGINAL_BOX_HEIGHT_ATTR, "height") ?? cssW;
     const rawLiveScaleX = readGsapProperty(iframe, selector ?? null, "scaleX") ?? 1;
     const rawLiveScaleY = readGsapProperty(iframe, selector ?? null, "scaleY") ?? 1;
     const liveScaleX = rawLiveScaleX > 0 ? rawLiveScaleX : 1;
@@ -59610,7 +59646,8 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     const newScaleX = roundTo3(size.width * liveScaleX / cssW);
     const newScaleY = roundTo3(size.height * liveScaleY / cssH);
     nonUniformScale = Math.abs(newScaleX - newScaleY) > 0.01;
-    resizeProps = nonUniformScale ? { scaleX: newScaleX, scaleY: newScaleY } : { scale: newScaleX };
+    useScaleLonghands = nonUniformScale || tweenUsesScaleLonghands(anim);
+    resizeProps = useScaleLonghands ? { scaleX: newScaleX, scaleY: newScaleY } : { scale: newScaleX };
     logResize("intercept-route", {
       route: "scale-tween",
       cssW,
@@ -59622,6 +59659,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       nonUniformScale
     });
     scaleDraftEl = el;
+    committedScale = useScaleLonghands ? { x: newScaleX, y: newScaleY } : { x: newScaleX, y: newScaleX };
     if (el) {
       const dropRect = el.getBoundingClientRect();
       scaleDraftDropPoint = { x: dropRect.x, y: dropRect.y };
@@ -59636,46 +59674,57 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     if (!scaleDraftEl) return;
     clearStudioBoxSize(scaleDraftEl);
     if (!scaleDraftDropPoint || !selector) return;
-    const hasLivePositionTween = hasNonHoldTweenForElement(
-      iframe,
-      selector,
-      void 0,
-      POSITION_CHANNELS
-    );
-    if (hasLivePositionTween) {
-      logResize("scale-finalize", { skipped: "live-position-tween" });
-      return;
+    if (committedScale) {
+      setElementGsapScale(scaleDraftEl, committedScale.x, committedScale.y);
     }
+    const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
+    const { baseGsapX, baseGsapY } = computeDraggedGsapPosition(
+      selection.element,
+      { x: 0, y: 0 },
+      gsapPos
+    );
+    const base2 = { x: baseGsapX, y: baseGsapY };
+    setElementGsapPosition(scaleDraftEl, base2.x, base2.y);
     const post = scaleDraftEl.getBoundingClientRect();
     const residual = { x: scaleDraftDropPoint.x - post.x, y: scaleDraftDropPoint.y - post.y };
     if (!Number.isFinite(residual.x) || !Number.isFinite(residual.y)) return;
-    if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) return;
-    const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
+    if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
+      logResize("scale-finalize", { skipped: "already-on-drop-point", residual, base: base2 });
+      return;
+    }
     const corrected = {
-      x: Math.round(gsapPos.x + residual.x),
-      y: Math.round(gsapPos.y + residual.y)
+      x: Math.round(base2.x + residual.x),
+      y: Math.round(base2.y + residual.y)
     };
     logResize("scale-finalize", {
       dropPoint: scaleDraftDropPoint,
       post: { x: post.x, y: post.y },
       residual,
       gsapPos,
+      base: base2,
       corrected
     });
     setElementGsapPosition(scaleDraftEl, corrected.x, corrected.y);
     const currentAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : resolved?.animations ?? animations;
-    const existingSet = findExistingPositionWrite(currentAnimations, selector, selection.element);
-    await commitStaticGsapPosition(
-      selection,
-      { x: corrected.x - gsapPos.x, y: corrected.y - gsapPos.y },
-      gsapPos,
-      selector,
-      existingSet,
-      {
+    const delta = { x: corrected.x - base2.x, y: corrected.y - base2.y };
+    const positionTween = pickClosestToPlayhead(
+      currentAnimations.filter(
+        (a) => a.propertyGroup === "position" && !isInstantHold(a) && resolveTweenDuration(a) > 0
+      )
+    );
+    if (positionTween) {
+      logResize("scale-finalize", { route: "position-keyframe", tweenId: positionTween.id });
+      await commitGsapPositionFromDrag(selection, positionTween, delta, base2, iframe, selector, {
         commitMutation,
         fetchAnimations: fetchFallbackAnimations
-      }
-    );
+      });
+      return;
+    }
+    const existingSet = findExistingPositionWrite(currentAnimations, selector, selection.element);
+    await commitStaticGsapPosition(selection, delta, base2, selector, existingSet, {
+      commitMutation,
+      fetchAnimations: fetchFallbackAnimations
+    });
   };
   if (!usePlayerStore.getState().autoKeyframeEnabled) {
     if (activeKeyframePct != null) setActiveKeyframePct(null);
@@ -59715,7 +59764,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       }
     }
   }
-  if ((outsideRange || nonUniformScale) && ts !== null) {
+  if ((outsideRange || useScaleLonghands) && ts !== null) {
     const kfs = anim.keyframes?.keyframes ?? (() => {
       const fromProps = anim.method === "from" || anim.method === "fromTo" ? { ...anim.properties } : synthesizeIdentityProps(anim.properties);
       const toProps = anim.method === "from" ? synthesizeIdentityProps(anim.properties) : { ...anim.properties };