ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 04:38:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(studio): animate the implicitly-closed group too, add regression test

Browse Source
This commit is contained in:
Vance Ingalls
2026-07-14 15:51:56 -07:00
parent a0f2a65bc2
commit 2aefec3e68
3 changed files with 74 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/editor/PropertyPanel.test.tsx
+47
View File
@@ -899,3 +899,50 @@ describe("PropertyPanel — fixed headers + scrollable open section (Plan 11)",
RENDER_TIMEOUT_MS,
);
});
describe("PropertyPanel — flat group entrance animation scoping (fix round)", () => {
it(
"animates only the opening group and the implicitly-closed group on a non-adjacent toggle, never untouched siblings",
async () => {
const { host, root } = await renderPanel(true, sixGroupElement());
// sixGroupElement() opens Text by default; jump straight to Motion
// (skipping over Style/Layout) first, matching the Plan 11 worked
// example, then jump back to Text — non-adjacent from Motion, again
// skipping over Style/Layout. This is the exact array-slice-position-
// shift scenario the justToggledIds mechanism exists to guard: Style
// and Layout shift position in the before/after-open slices on both
// toggles even though neither of them is the group being toggled.
openFlatGroup(host, "Motion");
expect(openGroupText(host)).toContain("Motion");
openFlatGroup(host, "Text");
expect(openGroupText(host)).toContain("Text");
const collapsedRowByTitle = (title: string) => {
const row = Array.from(host.querySelectorAll('[data-flat-group-collapsed="true"]')).find(
(el) => el.textContent?.includes(title),
);
if (!row) throw new Error(`expected a collapsed ${title} row`);
return row;
};
// Untouched, non-adjacent siblings must NOT receive the entrance class,
// even though they shifted position in the collapsed-header list.
expect(collapsedRowByTitle("Style").classList.contains("hf-flat-group-enter")).toBe(false);
expect(collapsedRowByTitle("Layout").classList.contains("hf-flat-group-enter")).toBe(false);
expect(collapsedRowByTitle("Grade").classList.contains("hf-flat-group-enter")).toBe(false);
expect(collapsedRowByTitle("Media").classList.contains("hf-flat-group-enter")).toBe(false);
// Motion — open a moment ago, just implicitly closed by the click on
// Text — must still play its own collapse-entrance animation (Finding 1).
expect(collapsedRowByTitle("Motion").classList.contains("hf-flat-group-enter")).toBe(true);
// Text — the group actually clicked open — must animate too.
const openWrapper = host.querySelector('[data-flat-group-open="true"]');
if (!openWrapper) throw new Error("expected the open-group wrapper");
expect(openWrapper.querySelector(".hf-flat-group-enter")).not.toBeNull();
act(() => root.unmount());
},
RENDER_TIMEOUT_MS,
);
});
packages/studio/src/components/editor/PropertyPanelFlat.tsx
+26 -17
View File
@@ -235,17 +235,20 @@ export function PropertyPanelFlat({
: "layout",
);
// Tracks which single group is actively transitioning, so its header/body
// gets the fast entrance animation (hf-flat-group-enter) and no one else's
// does. Deliberately NOT derived from remounting alone: FlatGroupHeader
// instances are keyed by group id and React normally preserves them across
// re-renders, but toggling a non-adjacent group still shifts the untouched
// collapsed siblings between the before/after-open slices below, and
// Chromium restarts a CSS animation on that kind of position shift even
// though nothing about the sibling actually changed. Gating on this id
// (cleared shortly after the 120ms CSS animation finishes) keeps the
// animation scoped to only the group that actually just toggled.
const [justToggledId, setJustToggledId] = useState<string | null>(null);
// Tracks which group(s) are actively transitioning this toggle cycle, so
// their header/body gets the fast entrance animation (hf-flat-group-enter)
// and no one else's does. Deliberately NOT derived from remounting alone:
// FlatGroupHeader instances are keyed by group id and React normally
// preserves them across re-renders, but toggling a non-adjacent group still
// shifts the untouched collapsed siblings between the before/after-open
// slices below, and Chromium restarts a CSS animation on that kind of
// position shift even though nothing about the sibling actually changed.
// Gating on these ids (cleared shortly after the 120ms CSS animation
// finishes) keeps the animation scoped to only the groups that actually
// just toggled. Two ids, not one: the clicked (newly-opening/closing) group
// AND whichever group was open immediately before the click and got
// implicitly closed by it — both freshly-mounted headers need to animate.
const [justToggledIds, setJustToggledIds] = useState<string[]>([]);
const justToggledTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
useEffect(() => {
return () => {
@@ -270,10 +273,16 @@ export function PropertyPanelFlat({
const isTextEditable = isTextEditableSelection(element);
const elementKind = sections.media ? "media" : element.textFields.length > 0 ? "text" : "other";
const toggleOpen = (groupId: string) => {
// Capture what was open BEFORE this click (this render's closure over
// openGroupId), so the group that's about to be implicitly closed can be
// tracked too — not just the one the user clicked.
const previousOpenGroupId = openGroupId;
setOpenGroupId((current) => (current === groupId ? "" : groupId));
setJustToggledId(groupId);
const implicitlyClosedId =
previousOpenGroupId && previousOpenGroupId !== groupId ? previousOpenGroupId : null;
setJustToggledIds(implicitlyClosedId ? [groupId, implicitlyClosedId] : [groupId]);
if (justToggledTimeoutRef.current) clearTimeout(justToggledTimeoutRef.current);
justToggledTimeoutRef.current = setTimeout(() => setJustToggledId(null), 200);
justToggledTimeoutRef.current = setTimeout(() => setJustToggledIds([]), 200);
};
// Basis for the Layout keyframe gutter (X/Y/W/H/Angle + 3D Transform) —
// must agree with Motion's Timing row (FlatTimingRow), which infers the
@@ -510,7 +519,7 @@ export function PropertyPanelFlat({
isOpen={false}
onToggleOpen={() => toggleOpen(g.id)}
summary={g.summary}
animateEntrance={g.id === justToggledId}
animateEntrance={justToggledIds.includes(g.id)}
/>
))}
{openGroup && (
@@ -520,10 +529,10 @@ export function PropertyPanelFlat({
isOpen
onToggleOpen={() => toggleOpen(openGroup.id)}
accessory={openGroup.accessory}
animateEntrance={openGroup.id === justToggledId}
animateEntrance={justToggledIds.includes(openGroup.id)}
/>
<div
className={`${openGroup.id === justToggledId ? "hf-flat-group-enter " : ""}min-h-0 flex-1 overflow-y-auto border-b border-panel-hairline px-4 py-3`}
className={`${justToggledIds.includes(openGroup.id) ? "hf-flat-group-enter " : ""}min-h-0 flex-1 overflow-y-auto border-b border-panel-hairline px-4 py-3`}
>
{openGroup.content}
</div>
@@ -536,7 +545,7 @@ export function PropertyPanelFlat({
isOpen={false}
onToggleOpen={() => toggleOpen(g.id)}
summary={g.summary}
animateEntrance={g.id === justToggledId}
animateEntrance={justToggledIds.includes(g.id)}
/>
))}
</div>
packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
+1 -1
View File
@@ -157,7 +157,7 @@ export function FlatGroupHeader({
accessory?: ReactNode;
summary?: string;
/** Play the fast entrance animation on this render — set only for the one
* group actually transitioning (see PropertyPanelFlat's justToggledId).
* group(s) actually transitioning (see PropertyPanelFlat's justToggledIds).
* Not derived from `isOpen`/remounting alone: React's key-based diffing
* can still shift an unrelated collapsed sibling's position in the
* before/after-open arrays (e.g. when the newly opened group isn't