Overview
I worked on a demo last Friday and realized that occasionally (e.g., after drag and dropping components), the annotations are misplaced relative to the preview. Unfortunately, I don't have consistent steps to reproduce this. After zooming in / out, the annotations get realigned. Here's how this looks like:

Proposed resolution
User interface changes
Steps to reproduce
See video attached here
You may need to play with it a little bit but I've reproduced it by:
1. Adding a 2 column with a hero in each slot and an image component.
2. Adding and removing elements from the 2 column component slots. In between putting and removing things into slots, zoom in and out. At the zoom change, the overlay seems to get misplaced somewhat consistently.
3. Changing the two column column width sometimes. (may be possible to reproduce without doing this? unsure.)
| Comment | File | Size | Author |
|---|---|---|---|
| #12 | preview-misplaced.gif | 1.79 MB | lauriii |
| #9 | misplaced-annotations.mov | 6.31 MB | hooroomoo |
| overlay-misplaced.gif | 2.52 MB | lauriii |
Issue fork experience_builder-3484140
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
lauriiiComment #3
jessebaker commentedComment #4
jessebaker commentedI've not got any further in providing steps to reproduce this, but it did happen to me just now and I was able to deduce that the issue is occuring in
ui/src/features/layout/previewOverlay/ViewportOverlay.tsx. It seems thatupdateRect()is either not being called, or being called and failing to correctly update the rect.I've raised an MR that I hope will be more reliable, but it's hard to be sure given I'm not sure the exact sequence of events that cause the issue.
Comment #6
jessebaker commentedComment #7
hooroomooI was able to reproduce the problem on the MR. Attached video
Comment #8
hooroomooUpdated issue summary with the steps i used to reproduce.
Comment #9
hooroomooReplacing with audio-free video
Comment #10
hooroomooComment #11
hooroomooComment #12
lauriiiI was recording some demos of XB yesterday and was running into this fairly consistently when placing sections.
Comment #13
jessebaker commentedHey @hooroomoo - could you please re-test.
1) I think the fix in the MR is still valuable
2) since this was last tested we introduced mutation observers elsewhere that have made the overlay generally more robust.
I don't seem to be able to reproduce the issue any more.
Comment #14
hooroomooTested manually and I also can't reproduce the issue anymore :D
Comment #16
hooroomoo