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): remove Ask agent popup, fix preview selection, fix manual edits in renderer

Browse Source 
Three interrelated studio UX and rendering fixes:

1. Remove the "Ask agent" popup that auto-triggered when clicking large
   raster elements in the preview. The modal intercepted clicks meant
   for editable elements and blocked normal selection workflow.

2. Rewrite preview click selection to respect visual stacking order.
   The previous scoring algorithm weighted DOM depth at 10,000× per
   level, causing elements inside sub-compositions to beat visually-
   on-top elements (e.g., clicking Pip Studio selected Sf Chrome
   instead). The new algorithm trusts elementsFromPoint order and only
   prefers a deeper candidate when it is a descendant of the current
   pick — never jumping to an unrelated element painted behind it.

3. Fix manual edits (resize) not surviving video rendering. The
   producer's seek-reapply script handled translate and rotation but
   was missing box-size (width/height) reapplication after each GSAP
   seek. Also added data-hf-studio-box-size to the detection list in
   htmlCompiler so the script is injected for resize-only edits.
This commit is contained in:
Miguel Ángel
2026-05-19 15:45:51 -04:00
parent f4e96a58ed
commit 8fd5bf8f51
5 changed files with 35 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/studio-api/helpers/manualEditsRenderScript.ts
+13
View File
@@ -25,8 +25,11 @@ export function createStudioPositionSeekReapplyScript(): string {
function studioPositionSeekReapplyRuntime(): void {
const OFFSET_X_PROP = "--hf-studio-offset-x";
const OFFSET_Y_PROP = "--hf-studio-offset-y";
const WIDTH_PROP = "--hf-studio-width";
const HEIGHT_PROP = "--hf-studio-height";
const ROTATION_PROP = "--hf-studio-rotation";
const PATH_OFFSET_ATTR = "data-hf-studio-path-offset";
const BOX_SIZE_ATTR = "data-hf-studio-box-size";
const ROTATION_ATTR = "data-hf-studio-rotation";
const ORIGINAL_TRANSLATE_ATTR = "data-hf-studio-original-translate";
const ORIGINAL_ROTATE_ATTR = "data-hf-studio-original-rotate";
@@ -36,6 +39,7 @@ function studioPositionSeekReapplyRuntime(): void {
if (
!document.querySelector("[" + PATH_OFFSET_ATTR + '="true"]') &&
!document.querySelector("[" + BOX_SIZE_ATTR + '="true"]') &&
!document.querySelector("[" + ROTATION_ATTR + '="true"]') &&
!document.querySelector("[" + MOTION_ATTR + "]")
)
@@ -209,6 +213,15 @@ function studioPositionSeekReapplyRuntime(): void {
);
}
}
const boxSizeEls = document.querySelectorAll("[" + BOX_SIZE_ATTR + '="true"]');
for (let i = 0; i < boxSizeEls.length; i++) {
const el = boxSizeEls[i] as HTMLElement;
if (!(el instanceof HTMLElement)) continue;
const w = el.style.getPropertyValue(WIDTH_PROP);
const h = el.style.getPropertyValue(HEIGHT_PROP);
if (w) el.style.setProperty("width", w);
if (h) el.style.setProperty("height", h);
}
const rotEls = document.querySelectorAll("[" + ROTATION_ATTR + '="true"]');
for (let i = 0; i < rotEls.length; i++) {
const el = rotEls[i] as HTMLElement;