@brightspot/ui 3.0.1-cms-ui-migration.1 → 3.0.1-cms-ui-migration.3

package/src/legacy/tool-ui/src/main/webapp/v4/PreviewOverlay.js

@@ -1,1005 +0,0 @@
-import create from './dom/create'
-import repaint from './util/repaint'
-import throttle from './util/throttle'
-
-export default class PreviewOverlay {
-  // Return the Greatest Common Denominator (GCD), recursively.
-  static gcd(a, b) {
-    return b ? PreviewOverlay.gcd(b, a % b) : a
-  }
-
-  static getObserver() {
-    /*
-      Note: The IntersectionObserver created below is never formally unobserved.
-      Because, currently, preview overlays are only ever removed
-      when their host frame is replaced which should in turn unobserve and GC automatically.
-    */
-    this._observer ??= new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          const tooltip = entry.target.querySelector('.Preview-overlayTooltip')
-          if (!entry.isIntersecting) {
-            if (entry.rootBounds === null) return
-
-            const irect = entry.intersectionRect
-            const overlayRect = entry.boundingClientRect
-
-            // Which portion of the overlay is offscreen?
-            if (overlayRect.bottom > irect.bottom) {
-              /* Bottom is offscreen */
-              tooltip?.setAttribute('position', 'top')
-            } else if (overlayRect.top < irect.top) {
-              /* Top is offscreen */
-              tooltip?.setAttribute('position', 'bottom')
-            }
-          } else {
-            tooltip?.setAttribute('position', 'top')
-          }
-        }
-      },
-      { threshold: 1.0 },
-    )
-
-    return this._observer
-  }
-
-  static _previewOverlays = new Map()
-  static _gapSize = 15
-
-  constructor() {
-    // static initialization
-  }
-
-  async initialize(data) {
-    this._previewContainerId = data.previewContainerId
-    this._allOverlays = data.overlays
-    this._pauseUpdate = false
-
-    const overlayFrame = document.createElement('iframe')
-    overlayFrame.src = 'about:blank'
-    overlayFrame.style = 'visibility:hidden;'
-    overlayFrame.setAttribute('onload', "this.style.visibility='visible';")
-    overlayFrame.scrolling = 'no'
-    overlayFrame.classList.add('Preview-overlayFrame')
-    overlayFrame.setAttribute('role', 'none')
-    const previewIframe = this.getPreviewFrame(this._previewContainerId)
-    const parent = previewIframe.parentNode
-    parent.insertBefore(overlayFrame, previewIframe.nextSibling)
-    overlayFrame?.contentDocument?.body.classList.add('overlay-hidden')
-    this._overlayWindow = overlayFrame.contentWindow
-    PreviewOverlay._previewOverlays.set(
-      this._previewContainerId,
-      this._overlayWindow,
-    )
-    this._overlayFrame = overlayFrame
-
-    Object.assign(overlayFrame.style, {
-      background: 'none',
-      backgroundColor: 'transparent',
-      transform: previewIframe.style.transform,
-      width: previewIframe.style.width,
-    })
-
-    this._viewport = parseInt(previewIframe.style.width, 10)
-
-    // initialize the deferInit state variable to false
-    // This will make sure init() is not triggered twice after overlay frame is loaded the first time
-    this._deferred = false
-
-    this._overlayWindow.addEventListener('message', async ({ data }) => {
-      if (typeof data !== 'object') return
-
-      const type = data.type
-      if (type === 'BSP.ContentEdit.UpdateOverlayBehaviors') {
-        const overlay = this.Overlays.get(data.key)
-        this.update(overlay, overlay.element, { behaviors: data.behaviors })
-      } else if (type === 'BSP.Preview.UpdateOverlays') {
-        const overlaysToUpdate = data.overlays
-        overlaysToUpdate.forEach((overlay) => {
-          const { id, name } = overlay
-          const ovr = this.Overlays.get(`${id}/${name}`)
-          ovr.hasFormField = true
-        })
-      } else if (type === 'BSP.Preview.UpdateInitToggle') {
-        this._deferred = data.deferPreviewInit
-      }
-    })
-
-    this._overlayWindow.addEventListener('click', (event) => {
-      if (!event.target.closest('.Preview-overlay')) {
-        this.Overlays?.forEach((ovr) => {
-          this.update(ovr, ovr.element, {
-            isSelected: false,
-          })
-        })
-      } else {
-        const element = event.target.closest('.Preview-overlay')
-        const key = element.dataset.id + '/' + element.getAttribute('data-type')
-        const overlay = this.Overlays.get(key)
-        if (overlay) {
-          this.update(overlay, overlay.element, { isSelected: true })
-          this.Overlays.forEach((ovr, ovrKey) => {
-            if (ovr.element) {
-              if (ovrKey !== key) {
-                this.update(ovr, ovr.element, {
-                  isSelected: false,
-                  isHover: false,
-                })
-              }
-            }
-          })
-          getSubTree(overlay)
-        }
-      }
-    })
-    const getSubTree = (overlay) => {
-      let parentKey = overlay.parentKey
-      let child = overlay
-      let subTree = []
-      const { left, right } = overlay.element.getBoundingClientRect()
-      const maxWidth = this._overlayWindow.innerWidth
-      const updateWidth =
-        left - overlay.depth * PreviewOverlay._gapSize >= 0 &&
-        right + overlay.depth * PreviewOverlay._gapSize <= maxWidth
-      while (parentKey !== null) {
-        const ovr = this.Overlays.get(parentKey)
-        const rect = child.element?.getBoundingClientRect()
-        subTree.push(ovr)
-        if (ovr.element) {
-          this.update(
-            ovr,
-            ovr.element,
-            { isVisible: true },
-            {
-              updateWidth,
-              maxWidth,
-              top: rect.top,
-              bottom: rect.bottom,
-              left: rect.left,
-              right: rect.right,
-            },
-          )
-        }
-        parentKey = ovr.parentKey
-        child = ovr
-      }
-    }
-    let prevHovered
-    let leafOverlay
-    let path = new Set()
-    let visibleImageToolTip
-
-    const showImageToolTip = throttle(100, (event) => {
-      if (this._deferred === undefined || this._deferred === true) return
-      const overlayDocument = this._overlayWindow.document
-      if (event.target.closest('.Preview-overlay')) {
-        // Find all the overlays stacked beneath the pointer
-        let els = overlayDocument.elementsFromPoint(
-          event.clientX,
-          event.clientY,
-        )
-
-        const imgTooltip = [...els].find((el) => {
-          return el.classList.contains('Preview-imageOverlay')
-        })
-
-        if (
-          (imgTooltip && !imgTooltip.isSameNode(visibleImageToolTip)) ||
-          (!imgTooltip && visibleImageToolTip)
-        ) {
-          overlayDocument
-            .querySelectorAll('.Preview-imageOverlay.is-visible')
-            .forEach((ovr) => ovr.classList.remove('is-visible'))
-        }
-        if (imgTooltip) {
-          imgTooltip.classList.add('is-visible')
-        }
-        visibleImageToolTip = imgTooltip
-      } else if (visibleImageToolTip) {
-        overlayDocument
-          .querySelectorAll('.Preview-imageOverlay.is-visible')
-          .forEach((ovr) => ovr.classList.remove('is-visible'))
-      }
-    })
-
-    this._overlayWindow.addEventListener('mousemove', (event) => {
-      showImageToolTip(event)
-    })
-
-    this._overlayWindow.addEventListener('mouseover', (event) => {
-      // trigger init() in preview if dom parsing was previously deferred
-      if (this._deferred === undefined || this._deferred === true) {
-        const previewFrame = this.getPreviewFrame(this._previewContainerId)
-        this._deferred = false
-        previewFrame.contentWindow.postMessage(
-          {
-            type: 'BSP.Preview.Init',
-          },
-          '*',
-        )
-        return
-      }
-      const element = event.target
-      const overlayDocument = this._overlayWindow.document
-      this._pauseUpdate = true
-      const overlaySelected = overlayDocument.querySelector(
-        '.Preview-overlay.is-selected',
-      )
-      let key
-      if (overlaySelected) {
-        key =
-          overlaySelected.dataset.id +
-          '/' +
-          overlaySelected.getAttribute('data-type')
-      }
-      if (!element.closest('.Preview-overlay')) {
-        this.Overlays?.forEach((ovr, ovrKey) => {
-          if (ovr.element) {
-            if (ovrKey !== key) {
-              this.update(ovr, ovr.element, {
-                isHover: false,
-                isVisible: false,
-                isSelected: ovr.isSelected,
-              })
-            }
-          }
-        })
-        prevHovered = null
-        leafOverlay = null
-        path.clear()
-      } else {
-        const element = event.target.closest('.Preview-overlay')
-        const key = element.dataset.id + '/' + element.getAttribute('data-type')
-        const overlay = this.Overlays.get(key)
-
-        if (overlay) {
-          this.update(overlay, overlay.element, { isHover: true })
-          let selectedOverlay
-          this.Overlays.forEach((ovr, ovrKey) => {
-            if (ovr.element) {
-              if (ovrKey !== key) {
-                this.update(ovr, ovr.element, {
-                  isHover: false,
-                  isVisible: false,
-                  isSelected: ovr.isSelected,
-                })
-              }
-            }
-          })
-          const prevHoverKey =
-            prevHovered?.element.dataset.id +
-            '/' +
-            prevHovered?.element.getAttribute('data-type')
-          if (prevHovered && prevHovered.parentKey === key) {
-            if (!path.has(key)) {
-              path.add(key)
-            }
-            getSubTree(leafOverlay)
-          } else if (
-            prevHovered &&
-            prevHoverKey === overlay.parentKey &&
-            path.has(key)
-          ) {
-            getSubTree(leafOverlay)
-          } else {
-            getSubTree(overlay)
-            leafOverlay = overlay
-            path.clear()
-            path.add(key)
-          }
-          prevHovered = overlay
-        }
-      }
-    })
-
-    overlayFrame?.addEventListener('mouseleave', () => {
-      overlayFrame?.contentDocument?.body.classList.remove('overlay-visible')
-      overlayFrame?.contentDocument?.body.classList.add('overlay-hidden')
-      this._pauseUpdate = false
-    })
-
-    overlayFrame?.addEventListener('mouseenter', () => {
-      overlayFrame?.contentDocument?.body.classList.add('overlay-visible')
-      overlayFrame?.contentDocument?.body.classList.remove('overlay-hidden')
-      this._pauseUpdate = false
-    })
-
-    this._updateInterval = setInterval(() => {
-      if (!this._pauseUpdate) {
-        this.updateOverlays()
-      }
-    }, 500)
-
-    window.addEventListener('scroll', this.updateOverlays)
-
-    const preload = async () => {
-      const overlayDocument = this._overlayWindow.document
-      const overlayHtml = overlayDocument.documentElement
-      const previewIframe = this.getPreviewFrame(this._previewContainerId)
-      const scale = parseFloat(previewIframe.getAttribute('previewScale'))
-      const html = window.document.documentElement
-      const dir = html.getAttribute('dir') ? html.getAttribute('dir') : 'ltr'
-      const savedTheme = html.getAttribute('data-theme')
-      const storedTheme = window.localStorage.getItem('BSP.Theme')
-      const placeholder = PREVIEW_EDIT_FIELD_PLACEHOLDER
-      const bodyElm = overlayDocument.body
-
-      const copyStylesAndScripts = () => {
-        const head = window.document.head
-        let stylesAndScripts = []
-        const distCss = head.querySelector('link[id="dist-v4-css"]')
-        const distCssv5 = head.querySelector('link[id="dist-v5-css"]')
-        const distJs = head.querySelector('script[id="dist-v4-js"]')
-        const distJsv5 = head.querySelector('script[id="dist-v5-js"]')
-        let next = distCss ? distCss : distCssv5 ? distCssv5 : head.firstChild
-        const js = distJsv5 ? distJsv5.nextSibling : distJs.nextSibling
-        while (next !== js) {
-          if (next.tagName === 'SCRIPT' || next.tagName === 'LINK') {
-            stylesAndScripts.push({
-              tag: next.tagName,
-              ref: next.getAttribute('href') || next.getAttribute('src'),
-              id: next.dataset.id,
-              text: next.textContent,
-              isv4: next === distJs || next === distCss ? true : false,
-            })
-          }
-          next = next.nextSibling
-        }
-        return stylesAndScripts
-      }
-
-      const createTag = async (source) => {
-        return new Promise((resolve) => {
-          const tag = source.tag
-          const ref = source.ref
-          const id = source.id
-
-          let elm = null
-          if (tag === 'LINK') {
-            elm = overlayDocument.createElement('link')
-            elm.setAttribute('rel', 'stylesheet')
-            elm.setAttribute('type', 'text/css')
-            elm.setAttribute('href', ref)
-
-            if (source.isv4) {
-              elm.onload = () => {
-                resolve()
-              }
-            } else {
-              resolve()
-            }
-          } else if (tag === 'SCRIPT') {
-            elm = overlayDocument.createElement('script')
-            elm.setAttribute('type', 'text/javascript')
-            elm.innerText = source.text
-            if (ref) {
-              elm.setAttribute('src', ref)
-            }
-            if (source.isv4) {
-              elm.onload = () => {
-                resolve()
-              }
-            } else {
-              resolve()
-            }
-          }
-          if (id) {
-            elm.setAttribute('id', id)
-          }
-          overlayDocument.head.appendChild(elm)
-        })
-      }
-
-      overlayHtml.setAttribute('dir', 'ltr')
-      overlayHtml.setAttribute('data-preview-overlay', true)
-      bodyElm.style.background = 'none'
-      bodyElm.style.backgroundColor = 'transparent'
-      bodyElm.style.visibility = 'hidden'
-
-      // Inject Font Family.
-      const link = overlayDocument.createElement('link')
-      overlayDocument.head.appendChild(link)
-      link.setAttribute(
-        'href',
-        `https://fonts.googleapis.com/css?family=Noto+Sans:400,700`,
-      )
-      const relList = link.relList
-      if (relList && relList.supports('preload')) {
-        link.setAttribute('as', 'style')
-        link.setAttribute('rel', 'preload')
-        link.setAttribute('onload', 'this.rel="stylesheet"')
-        link.setAttribute('crossOrigin', 'anonymous')
-      } else {
-        link.setAttribute('rel', 'stylesheet')
-      }
-      overlayHtml.style.setProperty('--PreviewScale', `${scale}`)
-      // Apply an upscale flag to the overlay at a certain threshold.
-      if (scale < 0.6) {
-        overlayHtml.classList.add('should-upscale')
-      }
-      overlayHtml.setAttribute('dir', dir)
-      if (savedTheme) {
-        overlayHtml.setAttribute('data-theme', savedTheme)
-      }
-      if (storedTheme) {
-        this._overlayWindow.localStorage.setItem('BSP.Theme', storedTheme)
-      }
-
-      overlayHtml.setAttribute('data-preview-field-placeholder', placeholder)
-      const stylesAndScripts = copyStylesAndScripts()
-
-      const waitForV4Deps = async () => {
-        await Promise.all(
-          stylesAndScripts.map(async (ss) => {
-            await createTag(ss)
-          }),
-        )
-        bodyElm.style.visibility = 'visible'
-      }
-
-      await waitForV4Deps()
-    }
-
-    this._overlayFrame.contentDocument
-      .getElementsByTagName('html')[0]
-      .style.setProperty(
-        '--PreviewScale',
-        this._overlayFrame.getAttribute('previewScale'),
-      )
-    if (
-      this._overlayWindow.document.readyState === 'complete' ||
-      this._overlayWindow.document.readyState === 'interactive'
-    ) {
-      await preload()
-    } else {
-      await new Promise((resolve) => {
-        this._overlayWindow.addEventListener('load', async () => {
-          await preload()
-          resolve()
-        })
-      })
-    }
-  }
-
-  static async create(data) {
-    const previewOverlay = new PreviewOverlay()
-    await previewOverlay.initialize(data)
-    return previewOverlay
-  }
-
-  static getOverlayWindow(previewContainerId) {
-    return PreviewOverlay._previewOverlays.get(previewContainerId)
-  }
-
-  reload(overlays, data, selectedViewport) {
-    this._previewContainerId = data.previewContainerId
-    this._allOverlays = data.overlays
-    if (selectedViewport && selectedViewport !== this._viewport) {
-      this._viewport = selectedViewport
-      this.updateOverlays()
-    }
-    const overlayKeys = [...data.overlays.keys()]
-    // reorder the filtered overlays based on the order in which markers appear in the template
-    const sortOverlays = (a, b) => {
-      if (a[1].parentKey === b[1].parentKey) {
-        return overlayKeys.indexOf(a[0]) - overlayKeys.indexOf(b[0])
-      } else if (a[0] === b[1].parentKey) {
-        return -1
-      } else if (b[0] === a[1].parentKey) {
-        return 1
-      } else {
-        return (
-          overlayKeys.indexOf(a[1].parentRoot) -
-          overlayKeys.indexOf(b[1].parentRoot)
-        )
-      }
-    }
-    overlays = new Map([...overlays.entries()].sort(sortOverlays))
-
-    // Update incoming overlays with metadata coming from preview markers
-    overlays.forEach((overlay, key) => {
-      const obj = this._allOverlays.get(key)
-      if (obj) {
-        Object.assign(overlay, obj)
-      }
-
-      // Prevent false positive linked overlays.
-      if (!overlay.isShared) {
-        overlay.linked = null
-      }
-
-      if (overlay.linked) {
-        const linkedOverlay = this._allOverlays.get(`${overlay.linked}`)
-        if (linkedOverlay) {
-          overlay.dimensions =
-            linkedOverlay.dimensions[`${overlay.linkedIdx}`] ??
-            overlay.dimensions
-        }
-      }
-    })
-
-    if (!this.Overlays) {
-      // When the preview overlay frame loads for the first time
-      this.Overlays = new Map(overlays)
-      this.Overlays.forEach((overlay, key) => {
-        this.renderOverlay(overlay, key)
-      })
-    } else {
-      // Every time preview refreshes
-      // update existing overlay element styling or renders overlay element for new incoming overlays
-      overlays.forEach((overlay, key) => {
-        const o = this.Overlays.get(key)
-        if (!o) {
-          this.Overlays.set(key, overlay)
-          this.renderOverlay(overlay, key)
-        } else {
-          this.update(o, o.element, overlay)
-        }
-      })
-
-      // Restore/Remove overlay elements after preview refresh to match content form fields
-      this.Overlays.forEach((o, k) => {
-        // Does this runtime overlay exist in overlay map generated by the preview marker data?
-        const obj = this._allOverlays.get(k)
-        if (obj) {
-          // Restore the overlay.
-          this.update(
-            o,
-            o.element,
-            Object.assign({}, obj, { isRemoved: false }),
-          )
-          if (o.parentKey) {
-            const parent = this.Overlays.get(o.parentKey)
-            // Restore the parent overlay.
-            if (parent) {
-              this.update(parent, parent.element, { isRemoved: false })
-            }
-          }
-          // Check if the overlay should be removed as a result of a removed content module.
-        } else {
-          if (o.parentKey && this.Overlays.get(o.parentKey)) {
-            const parent = this.Overlays.get(o.parentKey)
-            // Remove the parent overlay.
-            let refs = 0
-            this.Overlays.forEach((overlay) => {
-              if (overlay.parentKey && overlay.parentKey === o.parentKey) {
-                refs++
-              }
-            })
-            if (refs <= 1) {
-              this.update(parent, parent.element, { isRemoved: true })
-            }
-          }
-          this.update(o, o.element, { isRemoved: true })
-        }
-      })
-    }
-
-    // Re-render image overlay tooltips on preview refresh
-    this.ImageTooltips = new Map(data.imageData)
-    const imageTooltips = this._overlayWindow.document.querySelectorAll(
-      '.Preview-imageOverlay',
-    )
-    imageTooltips.forEach((tooltipEl) => {
-      tooltipEl.parentNode.removeChild(tooltipEl)
-    })
-    this.ImageTooltips.forEach((data, key) => {
-      this.renderImageTooltip(data)
-    })
-  }
-
-  destroy() {
-    clearInterval(this._updateInterval)
-  }
-
-  getPreviewFrame = (mainObjectId) => {
-    let frame
-    if (!mainObjectId) {
-      frame = document.querySelector(
-        '.ContentEdit-previewDisplay iframe:first-of-type',
-      )
-      if (!frame) {
-        frame = document.querySelector(
-          '.PreviewFrame-typeDisplay iframe:first-of-type',
-        )
-      }
-    } else {
-      frame = document.querySelector(
-        `iframe[data-container-id="${mainObjectId}"]`,
-      )
-    }
-    return frame
-  }
-
-  updateOverlays = repaint(() => {
-    // Always get the latest preview iframe. Each frame is removed during refresh.
-    const previewFrame = this.getPreviewFrame(this._previewContainerId)
-    Object.assign(this._overlayFrame.style, {
-      transform: previewFrame.style.transform,
-      width: previewFrame.style.width,
-    })
-
-    this.Overlays?.forEach((overlayObj) => {
-      this.setDimensions(overlayObj)
-    })
-  })
-
-  // Updates label position and content
-  updateLabel(overlay, label) {
-    const labelElm = overlay.querySelector('.Preview-overlayLabel')
-    if (!labelElm) return
-
-    labelElm.textContent = label
-    const parentHeight = overlay.getBoundingClientRect().height
-    const { height } = labelElm.getBoundingClientRect()
-    if (height >= parentHeight) {
-      labelElm.style.top = `-${labelElm.getBoundingClientRect().height}px`
-    } else {
-      labelElm.style.top = '0px'
-    }
-  }
-
-  update(overlayObj, overlay, newStates, childDimensions) {
-    if (!overlay) return
-
-    // Merge the new states into the current but ignore undefined and null values.
-    let update = Object.assign(
-      overlayObj,
-      Object.fromEntries(
-        Object.entries(newStates).filter(
-          ([key, value]) => value !== undefined && value !== null,
-        ),
-      ),
-    )
-
-    // string | null
-    if (update.isShared) {
-      overlay.classList.add('is-shared')
-      overlay.dataset.editAction = update.isShared
-    } else {
-      overlay.classList.remove('is-shared')
-      delete overlay.dataset.editAction
-    }
-
-    if (update.isLocked === true) {
-      overlay.classList.add('is-locked')
-    } else if (update.isLocked === false) {
-      overlay.classList.remove('is-locked')
-    }
-
-    if (update.isRoot === true) {
-      overlayObj.depth = 1
-      overlay.classList.add('is-root')
-    } else if (update.isRoot === false) {
-      const parent = this.Overlays.get(overlayObj.parentKey)
-      overlayObj.depth = parent?.depth + 1
-      overlayObj.parentRoot = parent?.parentRoot
-      if (parent?.isSelected) {
-        overlay.classList.add('is-visible')
-        overlayObj.isVisible = true
-      }
-    }
-
-    if (update.isVisible === true) {
-      overlay.classList.add('is-visible')
-    } else if (update.isVisible === false) {
-      overlay.classList.remove('is-visible')
-    }
-
-    if (update.isSelected === true) {
-      overlay.classList.add('is-selected')
-    } else if (update.isSelected === false) {
-      overlay.classList.remove('is-selected')
-    }
-
-    if (update.isHover === true) {
-      overlay.classList.add('is-hover')
-    } else if (update.isHover === false) {
-      overlay.classList.remove('is-hover')
-    }
-
-    if (update.isEmpty === true) {
-      overlay.classList.add('is-empty')
-    } else if (update.isEmpty === false) {
-      this.updateLabel(overlay, overlayObj.label || overlayObj.name)
-      overlay.classList.remove('is-empty')
-    }
-
-    if (update.isRemoved === true) {
-      overlay.classList.add('is-removed')
-    } else {
-      overlay.classList.remove('is-removed')
-    }
-
-    this.setDimensions(overlayObj, childDimensions)
-  }
-
-  renderImageTooltip(data) {
-    const overlayDocument = this._overlayWindow.document
-    const body = overlayDocument.body
-    const overlay = document.createElement('div')
-    overlay.classList.add('Preview-imageOverlay')
-    const labelElm = document.createElement('div')
-    labelElm.className = 'Preview-overlayTooltip'
-    labelElm.innerHTML = `<b>Image</b>`
-
-    // Supplemental UI when the visual is an image.
-    if (data) {
-      const width = +data.width
-      const height = +data.height
-      let aspectRatio = null
-
-      labelElm.classList.add('is-grid')
-      labelElm.append(
-        create(
-          'span',
-          (width > 0 ? width : 'auto') + ' x ' + (height > 0 ? height : 'auto'),
-        ),
-      )
-
-      if (width > 0 && height > 0) {
-        const divisor = PreviewOverlay.gcd(width, height)
-        if (divisor > 0) {
-          aspectRatio = `${width / divisor}:${height / divisor}`
-        }
-      }
-
-      labelElm.append(
-        create('hr'),
-        create('hr'),
-        create('span', window.BRIGHTSPOT?.ui?.tooltips?.size),
-        create('span', data.name),
-        aspectRatio !== null
-          ? create('span', window.BRIGHTSPOT?.ui?.tooltips?.aspectRatio)
-          : '',
-        aspectRatio !== null ? create('span', aspectRatio) : '',
-      )
-    }
-    overlay.append(labelElm)
-
-    // Attach all the tooltips first so that interactive overlays can layer ontop.
-    body.prepend(overlay)
-
-    window.requestAnimationFrame(() => {
-      const { x, y, width, height } = data.rect
-      const left = x + window.scrollX
-      Object.assign(overlay.style, {
-        height: height,
-        left: left,
-        position: 'absolute',
-        top: y + window.scrollY,
-        width: width,
-      })
-    })
-
-    this.constructor.getObserver().observe(overlay)
-  }
-
-  renderOverlay(overlayObj) {
-    const overlayDocument = this._overlayWindow.document
-    const overlayBody = overlayDocument.body
-    const isEmpty = !!overlayObj.isEmpty
-    const { id, name, type } = overlayObj
-
-    if (!id || !name) return
-
-    if (type === 'bspField' && !overlayObj.dimensions && !isEmpty) {
-      return
-    }
-    const overlay = overlayDocument.createElement('div')
-    overlay.classList.add('Preview-overlay')
-    overlay.dataset.id = id
-    overlay.dataset.type = name
-    const edit = window.parent.parent
-
-    overlay.onclick = (evt) => {
-      if (edit) {
-        const name = overlay.dataset.type
-        let rootOverlays = new Map()
-        this.Overlays?.forEach((itemToFilter, itemKey) => {
-          if (itemToFilter.isRoot) {
-            const payloadItem = this._allOverlays.get(itemKey)
-            if (payloadItem) {
-              payloadItem.isRoot = true
-              rootOverlays.set(itemKey, payloadItem)
-            }
-          }
-        })
-        let hasFormField = overlayObj.hasFormField
-        let parentKey = overlayObj.parentKey
-        let parentFields = []
-        while (!hasFormField && parentKey) {
-          const parent = this.Overlays.get(parentKey)
-          parentFields.push({
-            id: parent.id,
-            name: parent.name,
-            type: parent.type,
-            isShared: parent.isShared,
-            parentKey: parent.parentKey,
-          })
-          hasFormField = parent.hasFormField
-          parentKey = parent.parentKey
-        }
-        edit.postMessage(
-          {
-            type: 'BSP.Preview.OverlayClick',
-            id: overlay.dataset.id,
-            label: overlay.label,
-            name: name.split('/')[0],
-            behavior: overlay.dataset.editAction,
-            overlayType: overlayObj.type,
-            previewContainerId: this._previewContainerId,
-            overlays: this._allOverlays,
-            parentFields: parentFields.reverse(),
-            rootOverlays,
-            isEnhancement: overlayObj.isEnhancement,
-            hasFormField: overlayObj.hasFormField,
-          },
-          '*',
-        )
-      }
-    }
-
-    // Create overlay label when a overlay is rendered
-    overlay.querySelector('.Preview-overlayLabel')?.remove()
-    const labelElm = create(
-      'div',
-      {
-        className: 'Preview-overlayLabel',
-      },
-      overlayObj.label || overlayObj.name,
-    )
-
-    overlay.appendChild(labelElm)
-
-    let firstChildElm = null
-
-    if (overlayObj.type === 'bspModule' && !overlayObj.isShared) {
-      firstChildElm = overlayBody.querySelector(
-        `.Preview-overlay[data-id="${overlayObj.id}"]`,
-      )
-    }
-
-    if (firstChildElm) {
-      overlayBody.insertBefore(overlay, firstChildElm)
-    } else {
-      firstChildElm =
-        !overlayObj.isShared &&
-        overlayBody.querySelector(`.Preview-overlay.is-shared`)
-
-      if (firstChildElm) {
-        overlayBody.insertBefore(overlay, firstChildElm)
-      } else {
-        overlayBody.appendChild(overlay)
-      }
-    }
-    overlayObj.element = overlay
-
-    window.requestAnimationFrame(() => {
-      this.update(overlayObj, overlay, {
-        id,
-        name,
-        behaviors: overlayObj.behaviors,
-        isShared: overlayObj.isShared,
-        isEmpty: overlayObj.isEmpty === undefined ? false : overlayObj.isEmpty,
-        isLocked: overlayObj.isLocked,
-        isSelected: overlayObj.isSelected,
-        isRoot: overlayObj.isRoot,
-        isVisible: false,
-      })
-    })
-  }
-
-  setDimensions(overlayObj, childDimensions) {
-    const original = overlayObj.dimensions
-    const overlay = overlayObj.element
-    if (!overlay) return
-
-    const drawOverlay = (rect) => {
-      const { x, y, width, height } = rect
-      const left = x + window.scrollX
-      const totalWidth = left + width
-      Object.assign(overlay.style, {
-        height: height,
-        left:
-          left - (left !== 0 && overlayObj.internalType === 'text' ? 10 : 0),
-        position: 'absolute',
-        top: y + window.scrollY,
-        width:
-          width +
-          (totalWidth !== this._overlayWindow.innerWidth &&
-          overlayObj.internalType === 'text'
-            ? 20
-            : 0),
-      })
-    }
-
-    /**
-     * Depending on the type of field, overlay box dimensions are calculated as follows:
-     * Fields or shared modules rendered in preview - (leaf overlay) dimensions are calculated based on the underlying preview element
-     * Everything else:
-     * a). The dimensions are calculated based on child overlay dimensions
-     * b). If there are no children present, they are calculated using underlying preview element
-     */
-
-    const leafOverlay =
-      original &&
-      overlayObj.type === 'bspField' &&
-      ((!overlayObj.children && !overlayObj.fieldValue) || overlayObj.isShared)
-
-    if (leafOverlay) {
-      // leaf or last overlay in subtree
-      drawOverlay(original)
-    } else {
-      const children = [...this.Overlays.values()].filter((o) => {
-        return (
-          o.parentKey === overlayObj.id + '/' + overlayObj.name &&
-          o.dimensions &&
-          !Array.isArray(o.dimensions)
-        )
-      })
-      if (overlayObj.type === 'bspModule' && overlayObj.dimensions?.length) {
-        // use the dimensions array for bspModules if present
-        overlayObj.dimensions.forEach((dimension) => {
-          drawOverlay(dimension)
-        })
-      } else if (children.length) {
-        // if not calculate the dimensions of the field using it's child dimensions
-        let top = null,
-          left = null,
-          bottom = null,
-          right = null
-        children.forEach((child) => {
-          const rect = child.dimensions
-          if (rect) {
-            top = top !== null ? Math.min(top, rect.top) : rect.top
-            left = left !== null ? Math.min(left, rect.left) : rect.left
-            bottom =
-              bottom !== null ? Math.max(bottom, rect.bottom) : rect.bottom
-            right = right !== null ? Math.max(right, rect.right) : rect.right
-          }
-        })
-
-        Object.assign(overlay.style, {
-          width: right - left,
-          left: left,
-          position: 'absolute',
-          top: top,
-          height: bottom - top,
-        })
-      } else if (original) {
-        // fallback to the dimensions object if no valid children dimensions present
-        drawOverlay(original)
-      }
-    }
-    if (childDimensions) {
-      const { updateWidth, maxWidth } = childDimensions
-      const { top, bottom, left, right } = overlay.getBoundingClientRect()
-      let topPos = top
-      let bottomPos = bottom
-      let leftPos = left
-      let rightPos = right
-      if (top >= childDimensions.top) {
-        topPos = childDimensions.top - PreviewOverlay._gapSize
-      }
-      if (bottom <= childDimensions.bottom) {
-        bottomPos = childDimensions.bottom + PreviewOverlay._gapSize
-      }
-
-      overlay.style.top = topPos
-      overlay.style.height = bottomPos - topPos
-      if (updateWidth) {
-        if (left >= childDimensions.left) {
-          leftPos = childDimensions.left - PreviewOverlay._gapSize
-        }
-        if (right <= childDimensions.right) {
-          rightPos = childDimensions.right + PreviewOverlay._gapSize
-        }
-        if (leftPos >= 0 && rightPos <= maxWidth) {
-          overlay.style.left = leftPos
-          overlay.style.width = rightPos - leftPos
-        }
-      }
-    }
-  }
-}