Skip to content

#3475759 Implement an overlay component that handles all iFrame interaction

Jesse Baker requested to merge issue/experience_builder-3475759:iframeoverlayportal into 0.x

At a high level the solution in this MR is summed up as "prevent the user being able to interact with/focus into the preview iFrame".

There is some nuance to that statement in that, for drag and drop operations, there are still some points where the user is interacting directly in the iFrame.

  • Prevent interaction with the iFrame by covering it with an absolutely positioned element.
  • Prevent interaction with the iFrame by setting it's pointer-events to none and tabindex to -1
  • Cover each component in the layout with an overlay element that will handle interactions
    • Handle hover
    • Handle selecting (click)
    • Handle right click
    • Handle drag and drop
      • On drag start hide the overlay
      • On drag end, immediately/optimistically update the DOM in the iFrame to reflect move operation.
      • Refactor the "slot highlight" border when dropping into a slot
      • Bug dragging and dropping a component into the spot it originated from breaks things
      • Bug When dragging a component with slots it's possible to drop it inside itself 😖
  • Ensure each component overlay maintains size/position at all times
    • On panning/scrolling
    • On zooming
    • On browser resize
  • Refactor the component Outline.tsx to work with the new overlay
    • Move "Add section"
    • Move NameTag
    • Hide outline when panning/scrolling
      • Bug When scrolling with the touch pad, outlines are not hidden
    • Hide outline when dragging
    • Hide outline when zooming
  • Remove event listener code inside the iFrame for keyboard events
  • Remove event listener code inside the iFrame for mouse events
  • Remove code that listens for postmessage events from the iFrame
  • Bug After duplicating a component with 1 or more slots, the slots uuid in the JSON does not match the markup in the iFrame.
  • Bug When the page is loading the outlines show up in the wrong place before the canvas fades in
  • Code tidy 🧹
  • Typescript final implementation 🤓
  • Linting 💅🏻
  • Update cypress tests 💀
  • Documentation
  • New tests
Edited by Jesse Baker

Merge request reports