ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-10 22:20:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(studio): cover legacy resize boxes

Browse Source
This commit is contained in:
Miguel Ángel
2026-08-07 00:31:27 +00:00
parent a693b12cca
commit 12e637fb25
4 changed files with 44 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/hooks/gsapResizeDropPoint.test.ts
+16 -11
View File
@@ -77,6 +77,21 @@ interface ResizeCase {
positionWrite?: "static-set" | "keyframed-tween" | "none";
}
function createResizeElement(testCase: ResizeCase): HTMLElement {
const el = document.createElement("div");
el.id = "clip";
if (testCase.inlineSized) {
el.setAttribute("data-hf-studio-original-width", `${testCase.box.w}px`);
el.setAttribute("data-hf-studio-original-height", `${testCase.box.h}px`);
} else {
el.setAttribute("data-hf-studio-original-box-width", `${testCase.box.w}`);
el.setAttribute("data-hf-studio-original-box-height", `${testCase.box.h}`);
el.setAttribute("data-hf-studio-original-width", "");
el.setAttribute("data-hf-studio-original-height", "");
}
return el;
}
function scaleTween(longhand: boolean): GsapAnimation {
const at = (v: number) => (longhand ? { scaleX: v, scaleY: v } : { scale: v });
return {
@@ -180,17 +195,7 @@ function persistedScale(calls: unknown[][]): { x: number; y: number } | null {
async function runCase(testCase: ResizeCase) {
const rotation = testCase.rotation ?? 0;
const el = document.createElement("div");
el.id = "clip";
if (testCase.inlineSized) {
el.setAttribute("data-hf-studio-original-width", `${testCase.box.w}px`);
el.setAttribute("data-hf-studio-original-height", `${testCase.box.h}px`);
} else {
el.setAttribute("data-hf-studio-original-box-width", `${testCase.box.w}`);
el.setAttribute("data-hf-studio-original-box-height", `${testCase.box.h}`);
el.setAttribute("data-hf-studio-original-width", "");
el.setAttribute("data-hf-studio-original-height", "");
}
const el = createResizeElement(testCase);
// What the gesture stamps at drag start, and the draft it leaves applied.
el.setAttribute("data-hf-drag-gsap-base-x", `${testCase.base.x}`);
el.setAttribute("data-hf-drag-gsap-base-y", `${testCase.base.y}`);
packages/studio/src/hooks/gsapResizeIntercept.test.ts
+2
View File
@@ -293,6 +293,7 @@ it("non-uniform drag commits scaleX/scaleY longhands", async () => {
* left it rendering at 7532px, over three times where it was dropped, and the
* next drag compounded it.
*/
// fallow-ignore-next-line code-duplication
it("scales from the element's real box, not a hardcoded fallback", async () => {
const el = document.createElement("div");
el.id = "clip";
@@ -339,6 +340,7 @@ it("scales from the element's real box, not a hardcoded fallback", async () => {
* and the longhands won. The resize computed the right number, wrote it, and
* the element snapped straight back to its old size on release.
*/
// fallow-ignore-next-line code-duplication
it("does not mix the scale shorthand into a tween that speaks longhands", async () => {
const el = document.createElement("div");
el.id = "clip";