fix(webframe): hide iframe overlay during drag/pan/zoom to kill desync #23

Merged

AhmedHanafy725 merged 1 commit from development_webframe_iframe_drag_glitch into development

2026-04-21 10:47:25 +00:00

AhmedHanafy725 commented

2026-04-21 10:43:58 +00:00

Member

Summary

Eliminates the iframe glitchyness reported in issue #16. During drag, stage pan, and wheel-zoom, the HTML iframe overlay visibly lagged behind the Konva-rendered header, and inconsistent z-index layering made the header appear detached from the body when other canvas objects overlapped the web frame.

Closes #16

Changes

crates/hero_whiteboard_ui/static/web/js/whiteboard/webframe.js
- Add hideOverlay(id) / showOverlay(id, group) helpers and module-level hideAllOverlays() / showAllOverlays().
- Add an _hiddenForInteraction gate in updateOverlayPosition so the wrapper can't be re-revealed mid-interaction.
- Replace the per-frame group.on('dragmove', updateOverlayPosition) with dragstart -> hide and dragend -> show.
- Replace the per-frame stage.on('dragmove.wf_<id>', ...) with dragstart.wf_<id> / dragend.wf_<id>.
- Replace the 10 ms setTimeout wheel handler with a 150 ms debounced hide-then-show using _wheelTimeout.
- destroyOverlay / remapOverlay clean up the new listeners and cancel pending _wheelTimeout.
crates/hero_whiteboard_ui/static/web/js/whiteboard/tools.js
- transformer.on('transformstart') now also calls WhiteboardWebframe.hideAllOverlays().
- transformer.on('transformend') calls WhiteboardWebframe.showAllOverlays() after applyTransform has written the final bg dimensions.
crates/hero_whiteboard_ui/static/web/js/whiteboard/objects.js
- In the webframe branch of applyTransform, also update the .placeholder Text (width/height) and .label Text (width) to match the new bg dimensions, so the Konva stand-in visible during drag/pan/zoom always matches the real frame.

Test Results

cargo check --workspace: pass
cargo clippy --workspace -- -D warnings: pass
cargo fmt --check: pass
cargo test --workspace --lib: 0 passed / 0 failed (workspace has no Rust unit tests)

The changes are entirely vanilla JS and need manual UI verification in the browser.

Manual verification

Dragging a Web Frame: iframe hides on drag start, reappears on drag end exactly on top of the Konva bg.
Panning the stage: iframe hides on pan start, reappears correctly positioned on pan end.
Wheel-zooming: iframe hides immediately, returns ~150 ms after the last wheel event at correct position/size.
Resizing via transformer: iframe stays hidden throughout, reappears matching new bg dimensions.
Transformer can still resize a Web Frame even when the cursor crosses an iframe area.
Double-click-to-change-URL, undo/redo, and multi-user sync still work.

## Summary Eliminates the iframe glitchyness reported in issue #16. During drag, stage pan, and wheel-zoom, the HTML iframe overlay visibly lagged behind the Konva-rendered header, and inconsistent z-index layering made the header appear detached from the body when other canvas objects overlapped the web frame. ## Related Issue Closes https://forge.ourworld.tf/lhumina_code/hero_whiteboard/issues/16 ## Changes - `crates/hero_whiteboard_ui/static/web/js/whiteboard/webframe.js` - Add `hideOverlay(id)` / `showOverlay(id, group)` helpers and module-level `hideAllOverlays()` / `showAllOverlays()`. - Add an `_hiddenForInteraction` gate in `updateOverlayPosition` so the wrapper can't be re-revealed mid-interaction. - Replace the per-frame `group.on('dragmove', updateOverlayPosition)` with `dragstart` -> hide and `dragend` -> show. - Replace the per-frame `stage.on('dragmove.wf_<id>', ...)` with `dragstart.wf_<id>` / `dragend.wf_<id>`. - Replace the 10 ms `setTimeout` wheel handler with a 150 ms debounced hide-then-show using `_wheelTimeout`. - `destroyOverlay` / `remapOverlay` clean up the new listeners and cancel pending `_wheelTimeout`. - `crates/hero_whiteboard_ui/static/web/js/whiteboard/tools.js` - `transformer.on('transformstart')` now also calls `WhiteboardWebframe.hideAllOverlays()`. - `transformer.on('transformend')` calls `WhiteboardWebframe.showAllOverlays()` after `applyTransform` has written the final bg dimensions. - `crates/hero_whiteboard_ui/static/web/js/whiteboard/objects.js` - In the `webframe` branch of `applyTransform`, also update the `.placeholder` Text (width/height) and `.label` Text (width) to match the new bg dimensions, so the Konva stand-in visible during drag/pan/zoom always matches the real frame. ## Test Results - `cargo check --workspace`: pass - `cargo clippy --workspace -- -D warnings`: pass - `cargo fmt --check`: pass - `cargo test --workspace --lib`: 0 passed / 0 failed (workspace has no Rust unit tests) The changes are entirely vanilla JS and need manual UI verification in the browser. ## Manual verification - [ ] Dragging a Web Frame: iframe hides on drag start, reappears on drag end exactly on top of the Konva bg. - [ ] Panning the stage: iframe hides on pan start, reappears correctly positioned on pan end. - [ ] Wheel-zooming: iframe hides immediately, returns ~150 ms after the last wheel event at correct position/size. - [ ] Resizing via transformer: iframe stays hidden throughout, reappears matching new bg dimensions. - [ ] Transformer can still resize a Web Frame even when the cursor crosses an iframe area. - [ ] Double-click-to-change-URL, undo/redo, and multi-user sync still work.

AhmedHanafy725 added 1 commit

2026-04-21 10:43:58 +00:00

fix(webframe): hide iframe overlay during drag/pan/zoom to kill desync

CI / build (pull_request) Successful in 2m11s

Details

92df0ad454

Eliminates the visual glitch where the HTML iframe body lagged behind the
Konva-rendered header during webframe drag, stage pan, or wheel-zoom.

- Add hide/show helpers and an _hiddenForInteraction gate in webframe.js
- Swap per-frame dragmove overlay repositioning for dragstart/dragend
- Debounce wheel-zoom (150 ms) and use dragstart/dragend on stage pan
- Hide all overlays around transformer events so resize uses the Konva
  group as the sole visual, then show them after applyTransform writes
  final bg dimensions
- Keep placeholder and label widths in sync with bg on webframe resize

#16