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

fix(studio): stabilize manual drag targets (#1393)

Browse Source 
## Problem

Studio manual drag had two bad target paths in `hf-keyframes-test`:

- Drag could start from a cached hover selection instead of the selected overlay, so moving `#cta` could write an offset to the wrong element while the overlay appeared correct.
- `#stage` is the visual 1920x1080 canvas, but the composition metadata lives on `<html data-composition-id ...>`. Studio treated `#stage` as a normal movable layer, so dragging it moved the coordinate basis the overlay depends on and left Undo with no reliable saved edit to reverse.

## Fix

- Manual drag now starts only from the selected overlay bounds; canvas pointer-down no longer starts movement from `hoverSelectionRef`.
- Added a structural root-layer heuristic: a direct body child matching the composition root's declared `data-width` / `data-height` is selectable and style-editable, but cannot receive manual offset/size/rotation edits.
- Manual geometry commits now return/rethrow the save promise so failed writes roll back optimistic DOM changes instead of silently sticking.
- GSAP-targeted CSS fallback edits are blocked before applying manual geometry when the GSAP drag intercept is unavailable.

## Tests

- New regression coverage for stale-hover drag start and full-canvas root-stage capability resolution.
- Focused DOM-edit suite: 119/119 pass.
- Full Studio suite: 800 pass, 18 todo.
- Studio typecheck clean; oxlint/oxfmt clean; lefthook pre-commit clean.
- Studio build passes with the existing Vite chunk-size warning.
- Browser verified with `agent-browser`: attempted `#stage` drag writes no offset and keeps Undo disabled; `#cta` drag writes exactly one offset to `#cta`; Undo returns the fixture to zero offsets.

Local browser artifacts: `artifacts/studio-cta-drag/stage-cta-drag-fix.webm`, `artifacts/studio-cta-drag/stage-cta-drag-fix-final.png`.
This commit is contained in:
Miguel Ángel
2026-06-12 19:16:36 -04:00
committed by GitHub
parent d0a7f7d839
commit 1ea0ed55e3
8 changed files with 390 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/hooks/useDomEditCommits.ts
+44 -20
View File
@@ -36,6 +36,9 @@ import { useDomEditTextCommits } from "./useDomEditTextCommits";
// ── Helpers ──
type TimelineLike = { getChildren?: (nested: boolean) => Array<{ targets?: () => Element[] }> };
export const GSAP_CSS_FALLBACK_BLOCKED_MESSAGE =
"This element is GSAP-animated — dragging via CSS would corrupt keyframes";
// fallow-ignore-next-line complexity
function isElementGsapTargeted(iframe: HTMLIFrameElement | null, element: HTMLElement): boolean {
// When the GSAP drag intercept is disabled for debugging, treat every
@@ -291,7 +294,7 @@ export function useDomEditCommits({
patches: PatchOperation[],
options: { label: string; coalesceKey: string; skipRefresh?: boolean },
) => {
void queueDomEditSave(async () => {
return queueDomEditSave(async () => {
await persistDomEditOperations(selection, patches, {
label: options.label,
coalesceKey: options.coalesceKey,
@@ -309,6 +312,7 @@ export function useDomEditCommits({
target_selector: selection.selector ?? undefined,
target_source_file: selection.sourceFile ?? undefined,
});
throw error;
});
},
[persistDomEditOperations, queueDomEditSave, showToast],
@@ -318,57 +322,77 @@ export function useDomEditCommits({
const handleDomPathOffsetCommit = useCallback(
(selection: DomEditSelection, next: { x: number; y: number }) => {
if (isElementGsapTargeted(previewIframeRef.current, selection.element)) {
const error = new Error(GSAP_CSS_FALLBACK_BLOCKED_MESSAGE);
showToast(error.message, "error");
return Promise.reject(error);
}
applyStudioPathOffset(selection.element, next);
if (isElementGsapTargeted(previewIframeRef.current, selection.element)) return;
commitPositionPatchToHtml(selection, buildPathOffsetPatches(selection.element), {
return commitPositionPatchToHtml(selection, buildPathOffsetPatches(selection.element), {
label: "Move layer",
coalesceKey: `path-offset:${getDomEditTargetKey(selection)}`,
});
},
[commitPositionPatchToHtml, previewIframeRef],
[commitPositionPatchToHtml, previewIframeRef, showToast],
);
const handleDomGroupPathOffsetCommit = useCallback(
(updates: DomEditGroupPathOffsetCommit[]) => {
if (updates.length === 0) return;
if (updates.length === 0) return Promise.resolve();
const blockedUpdate = updates.find(({ selection }) =>
isElementGsapTargeted(previewIframeRef.current, selection.element),
);
if (blockedUpdate) {
const error = new Error(GSAP_CSS_FALLBACK_BLOCKED_MESSAGE);
showToast(error.message, "error");
return Promise.reject(error);
}
const coalesceKey = updates
.map((u) => getDomEditTargetKey(u.selection))
.sort()
.join(":");
for (const { selection, next } of updates) {
const saves = updates.map(({ selection, next }) => {
applyStudioPathOffset(selection.element, next);
if (isElementGsapTargeted(previewIframeRef.current, selection.element)) continue;
commitPositionPatchToHtml(selection, buildPathOffsetPatches(selection.element), {
return commitPositionPatchToHtml(selection, buildPathOffsetPatches(selection.element), {
label: `Move ${updates.length} layers`,
coalesceKey: `group-path-offset:${coalesceKey}`,
});
}
});
return Promise.all(saves).then(() => undefined);
},
[commitPositionPatchToHtml, previewIframeRef],
[commitPositionPatchToHtml, previewIframeRef, showToast],
);
const handleDomBoxSizeCommit = useCallback(
(selection: DomEditSelection, next: { width: number; height: number }) => {
if (isElementGsapTargeted(previewIframeRef.current, selection.element)) {
const error = new Error(GSAP_CSS_FALLBACK_BLOCKED_MESSAGE);
showToast(error.message, "error");
return Promise.reject(error);
}
applyStudioBoxSize(selection.element, next);
if (isElementGsapTargeted(previewIframeRef.current, selection.element)) return;
commitPositionPatchToHtml(selection, buildBoxSizePatches(selection.element), {
return commitPositionPatchToHtml(selection, buildBoxSizePatches(selection.element), {
label: "Resize layer box",
coalesceKey: `box-size:${getDomEditTargetKey(selection)}`,
});
},
[commitPositionPatchToHtml, previewIframeRef],
[commitPositionPatchToHtml, previewIframeRef, showToast],
);
const handleDomRotationCommit = useCallback(
(selection: DomEditSelection, next: { angle: number }) => {
if (isElementGsapTargeted(previewIframeRef.current, selection.element)) {
const error = new Error(GSAP_CSS_FALLBACK_BLOCKED_MESSAGE);
showToast(error.message, "error");
return Promise.reject(error);
}
applyStudioRotation(selection.element, next);
if (isElementGsapTargeted(previewIframeRef.current, selection.element)) return;
commitPositionPatchToHtml(selection, buildRotationPatches(selection.element), {
return commitPositionPatchToHtml(selection, buildRotationPatches(selection.element), {
label: "Rotate layer",
coalesceKey: `rotation:${getDomEditTargetKey(selection)}`,
});
},
[commitPositionPatchToHtml, previewIframeRef],
[commitPositionPatchToHtml, previewIframeRef, showToast],
);
const handleDomManualEditsReset = useCallback(
@@ -383,11 +407,11 @@ export function useDomEditCommits({
clearStudioBoxSize(element);
clearStudioRotation(element);
// skipRefresh:false triggers reloadPreview() which re-syncs selection on load
commitPositionPatchToHtml(selection, clearPatches, {
void commitPositionPatchToHtml(selection, clearPatches, {
label: "Reset layer edits",
coalesceKey: `manual-reset:${getDomEditTargetKey(selection)}`,
skipRefresh: false,
});
}).catch(() => undefined);
},
[commitPositionPatchToHtml],
);
@@ -490,7 +514,7 @@ export function useDomEditCommits({
} catch {
/* cross-origin or detached — skip */
}
commitPositionPatchToHtml(
void commitPositionPatchToHtml(
{
element: entry.element,
id: entry.id ?? null,
@@ -505,7 +529,7 @@ export function useDomEditCommits({
coalesceKey,
skipRefresh: i < entries.length - 1,
},
);
).catch(() => undefined);
}
},
[commitPositionPatchToHtml],