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

feat(studio): GSAP tween editing in Design panel (#1102)

Browse Source 
* feat(studio): GSAP tween editing in Design panel

Add a GSAP animation editor to the studio Design panel: select an element,
view and edit its tweens (properties, easing, timing), add/delete animations,
and drag custom bezier speed curves — all persisted back to the composition
HTML. Gated behind VITE_STUDIO_ENABLE_GSAP_PANEL.

Parsing of existing GSAP source now uses a recast + Babel AST parser instead of
regex, giving scope resolution, stable tween IDs, and round-trip preservation of
extras and unresolved raw values.

recast compiles to CommonJS that calls require("fs"), which breaks browser and
Vite SSR bundles. To contain it, @hyperframes/core is split into an isomorphic
layer and a Node-only AST layer:

- gsapSerialize.ts holds the recast-free helpers (serialization, keyframe
  conversion, validation, shared types). htmlParser.ts is now fully isomorphic.
- parseGsapScript and the script-mutation helpers live in gsapParser.ts,
  reachable only via the @hyperframes/core/gsap-parser subpath, loaded
  server-side by the studio-api mutation routes and the linter via dynamic
  import (recast stays external under SSR).
- The barrel and the gsap-constants subpath are recast-free, so studio browser
  bundles never trace recast.

Adds AST parser unit + stress coverage and e2e helpers for the panel.

* fix(lint): await async lintHyperframeHtml in all callers

lintHyperframeHtml became async (gsap rules use dynamic import)
but lintProject and check-hyperframe-static weren't awaiting it,
causing typecheck failures and runtime crashes in CI.

Also wire LintRule type in gsap rules to fix fallow unused-type
finding, and suppress render.ts exported-for-tests symbols.
This commit is contained in:
Miguel Ángel
2026-05-28 19:16:34 -04:00
committed by GitHub
parent e16f916448
commit fb2e21090f
61 changed files with 4354 additions and 1128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/editor/manualOffsetDrag.test.ts
+42 -29
View File
@@ -1,8 +1,10 @@
import { Window } from "happy-dom";
import { describe, expect, it } from "vitest";
import {
applyManualOffsetDragCommit,
applyManualOffsetDragMatrix,
createManualOffsetDragMember,
endManualOffsetDragMembers,
invertManualOffsetDragMatrix,
measureManualOffsetDragScreenToOffsetMatrix,
resolveManualOffsetForPointerDelta,
@@ -140,8 +142,8 @@ describe("measureManualOffsetDragScreenToOffsetMatrix", () => {
});
});
describe("createManualOffsetDragMember GSAP translate compensation", () => {
it("folds GSAP translate from element.style.transform into initialOffset", () => {
describe("createManualOffsetDragMember uses raw CSS var offset", () => {
it("ignores GSAP transform — initialOffset comes from CSS vars only", () => {
const window = new Window();
const element = window.document.createElement("div");
window.document.body.append(element);
@@ -161,37 +163,13 @@ describe("createManualOffsetDragMember GSAP translate compensation", () => {
rect: { left: 10, top: 20, width: 100, height: 50, editScaleX: 1, editScaleY: 1 },
});
expect(result.ok).toBe(true);
if (!result.ok) return;
expect(result.member.initialOffset.x).toBe(0);
expect(result.member.initialOffset.y).toBe(-20);
});
it("leaves initialOffset unchanged when no GSAP transform is present", () => {
const window = new Window();
const element = window.document.createElement("div");
window.document.body.append(element);
element.getBoundingClientRect = () => {
const offsetX = Number.parseFloat(element.style.getPropertyValue(STUDIO_OFFSET_X_PROP)) || 0;
const offsetY = Number.parseFloat(element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP)) || 0;
return new window.DOMRect(10 + offsetX, 20 + offsetY, 100, 50);
};
const result = createManualOffsetDragMember({
key: "test",
selection: { element } as never,
element,
rect: { left: 10, top: 20, width: 100, height: 50, editScaleX: 1, editScaleY: 1 },
});
expect(result.ok).toBe(true);
if (!result.ok) return;
expect(result.member.initialOffset.x).toBe(0);
expect(result.member.initialOffset.y).toBe(0);
});
it("combines existing manual offset with GSAP translate", () => {
it("reads only the CSS var offset, not GSAP transform", () => {
const window = new Window();
const element = window.document.createElement("div");
window.document.body.append(element);
@@ -215,7 +193,42 @@ describe("createManualOffsetDragMember GSAP translate compensation", () => {
expect(result.ok).toBe(true);
if (!result.ok) return;
expect(result.member.initialOffset.x).toBe(80);
expect(result.member.initialOffset.y).toBe(-5);
expect(result.member.initialOffset.x).toBe(30);
expect(result.member.initialOffset.y).toBe(10);
});
it("does not accumulate drift across multiple drag cycles", () => {
const window = new Window();
const element = window.document.createElement("div");
window.document.body.append(element);
element.getBoundingClientRect = () => {
const offsetX = Number.parseFloat(element.style.getPropertyValue(STUDIO_OFFSET_X_PROP)) || 0;
const offsetY = Number.parseFloat(element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP)) || 0;
return new window.DOMRect(10 + offsetX, 20 + offsetY, 100, 50);
};
// Simulate GSAP baking a translate into transform each cycle
for (let cycle = 0; cycle < 3; cycle++) {
element.style.setProperty("transform", `translate(${50 * (cycle + 1)}px, 0px)`);
const result = createManualOffsetDragMember({
key: "test",
selection: { element } as never,
element,
rect: { left: 10, top: 20, width: 100, height: 50, editScaleX: 1, editScaleY: 1 },
});
expect(result.ok).toBe(true);
if (!result.ok) return;
// initialOffset should always be the CSS var value, never inflated by GSAP transform
const currentRawX =
Number.parseFloat(element.style.getPropertyValue(STUDIO_OFFSET_X_PROP)) || 0;
expect(result.member.initialOffset.x).toBe(currentRawX);
// Simulate drag commit: apply a small offset
applyManualOffsetDragCommit(result.member, 10, 0);
endManualOffsetDragMembers([result.member]);
}
});
});