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

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

@@ -0,0 +1,1005 @@
+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
+        }
+      }
+    }
+  }
+}