@brightspot/ui 3.0.1-cms-ui-migration.2 → 3.0.1-cms-ui-migration.4

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

@@ -1,2403 +0,0 @@
-import closest from './dom/closest'
-import create from './dom/create'
-import Cropper from 'cropperjs'
-import find from './dom/find'
-import Noise from './util/noise'
-import onFind from './dom/onFind'
-import PlainDraggable from 'plain-draggable/plain-draggable.esm.js'
-import TabContainer from './TabContainer'
-import findAll from './dom/findAll'
-import { toggleMenu, setupMenuForAria } from '../../../dom/popupMenu'
-import 'cropperjs/dist/cropper.css'
-import onRemove from './dom/onRemove'
-
-if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
-  await import('./ImageEditor.less')
-}
-
-const tooltips = window.BRIGHTSPOT?.ui.tooltips
-const zIndex = '400'
-const SPOT_SIZE = 40
-const filtersApplied = new Map()
-const FILTERABLE_SELECTORS =
-  '.cropper-canvas > img, .cropper-view-box > img, .imageEditor-sizePreview'
-
-export default class ImageEditor {
-  constructor(element) {
-    // Then convert it to a popup.
-    const STATE_OPEN = 'is-imageEditorOpen'
-    const STATE_LOADING = 'is-imageEditorLoading'
-    const STATE_LOADED = 'is-imageEditorLoaded'
-    const STATE_READY = 'is-imageEditorReady'
-    const row = closest(element, '.inputContainer')
-    const fileSelector = find(row, '.fileSelector')
-    const large = element.parentNode
-    const image = find(element, '.imageEditor-image > img')
-    const rcigItem = element.closest('.RCIG-item')
-
-    if (!large || !image) return
-
-    this._element = element
-    this._renditions = new Map()
-    this._focusUI = null
-    this._editUI = null
-    this._initialContainerHeight = null
-    this._form = this._element.closest('form')
-    this._implicitFocus = element.dataset.implicitFocus
-    this._isContextual = 'contextual' in element.dataset
-
-    // Hide the whole editor from screen readers.
-    this._element.setAttribute('hidden', '')
-
-    let rootCIG = large
-    while (rootCIG.parentElement?.closest('.CIG-row')) {
-      rootCIG = rootCIG.parentElement?.closest('.CIG-row')
-    }
-
-    // Hide hotspot inputs from the content edit UI.
-    const fields = this.getForm().querySelector(
-      '.inputContainer[data-name$=".hotspots"]',
-    )
-    if (fields) fields.style.display = 'none'
-
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
-        this.repaint(entry.contentRect.height)
-      }
-    })
-
-    resizeObserver.observe(document.body)
-
-    const loader = create('div', { className: 'ImageEditor-preview-loader' })
-    const previewImage = image.cloneNode()
-    previewImage.onload = () => {
-      large.classList.add('is-imagePreview')
-      large.classList.add(STATE_LOADING)
-      this.getElement().classList.add(STATE_LOADING)
-      loader.style.width = `${previewImage.offsetWidth}px`
-      loader.style.height = `${previewImage.offsetHeight}px`
-    }
-
-    const escapeToClose = (event) => {
-      if (event.key === 'Escape') {
-        this._element.querySelector('.ImageEditor-closeButton')?.click()
-      }
-    }
-
-    const editButton = create('button', {
-      className:
-        this.getElement().getAttribute('editor') === 'true'
-          ? 'ImageEditor-open'
-          : 'ImageEditor-open noEditor',
-      'aria-haspopup': true,
-      'aria-label': tooltips.imageEditor.open,
-      title: tooltips.imageEditor.open,
-      type: 'button',
-      onclick: (event) => {
-        this._element.removeAttribute('hidden')
-        large.classList.add(STATE_OPEN)
-        rootCIG.style.zIndex = zIndex
-        const left = this.getElement().closest('.ContentEdit-left')
-        if (left) {
-          left.style.position = 'fixed'
-          left.style.zIndex = zIndex
-        }
-
-        // If this is the first time opening the editor UI...
-        if (!large.classList.contains(STATE_READY)) {
-          large.classList.add(STATE_READY)
-          this._initialContainerHeight = this.getElement().offsetHeight
-          this._renditions = this.flattenAndSortRenditions(this.getRenditions())
-          this.renderRenditionPreviews(this._renditions)
-          this.renderTabs()
-        }
-        if (rcigItem) {
-          rcigItem.classList.add(STATE_OPEN)
-        }
-
-        this._element.querySelector('.ImageEditor-edit button')?.focus()
-        window.addEventListener('keydown', escapeToClose)
-
-        // TODO: repaint after open transition completes instead of guessing.
-        setTimeout(() => {
-          this.repaint(document.body.offsetHeight)
-          if (this._hotspotUI) {
-            this._hotspotUI.reflow()
-            this._hotspotUI.reveal()
-          }
-        }, 250)
-      },
-    })
-
-    const aside = find(this.getElement(), '.imageEditor-aside')
-    const editList = find(aside, '.imageEditor-tools ul')
-    editList.classList.add('ImageEditor-editTools')
-    editList.setAttribute('role', 'menu')
-
-    const editToggle = create('button', {
-      className: 'ImageEditor-editToggle',
-      type: 'button',
-      title: tooltips.imageEditor.actions,
-      'aria-label': tooltips.imageEditor.actions,
-      'aria-haspopup': 'menu',
-      'aria-expanded': false,
-      onclick: (event) => {
-        toggleMenu(editList, editToggle)
-      },
-    })
-
-    setupMenuForAria(editList, editToggle)
-
-    const ratios = find(this.getElement(), '.ImageEditor-groups')
-    if (ratios) {
-      onRemove.pause()
-      large.appendChild(ratios)
-      requestAnimationFrame(onRemove.resume)
-    }
-
-    const focusText = this.getElement().getAttribute('data-focus-message')
-    const message = create(
-      'div',
-      {
-        className: 'ImageEditor-focusMessage',
-      },
-      focusText,
-    )
-    const implicitFocusMessage = create(
-      'span',
-      { className: `ImageEditor-implicitMessage is-hidden` },
-      this.getElement().dataset.implicitFocusMessage,
-    )
-
-    const showFocusMessage = function (size) {
-      message.textContent = focusText + ' ' + size
-      message.classList.remove('is-hidden')
-    }
-
-    this._cropSelect = large.querySelector('.ImageEditor-groups > select')
-    if (this._cropSelect) {
-      this._cropSelect.addEventListener('change', (event) => {
-        const index = this._cropSelect.selectedIndex
-        const selectedCrop = this._cropSelect.options[index]
-        message.classList.remove('is-hidden')
-        showFocusMessage(selectedCrop.textContent)
-        let coords = this._focusUI.getFocusCoordinatesRelative(
-          selectedCrop.value,
-        )
-        const focusPoint = find(large, '.ImageEditor-focus-point')
-        if (coords) {
-          const focusPointCoords = this.getFocusCoords(selectedCrop.value)
-          // remove implicit info if set.
-          if (
-            focusPointCoords.xPercent !== null &&
-            focusPointCoords.yPercent !== null
-          ) {
-            focusPoint && focusPoint.classList.remove('is-implicit')
-            implicitFocusMessage.classList.add('is-hidden')
-          } else if (this.getImplicitFocus()) {
-            focusPoint && focusPoint.classList.add('is-implicit')
-            focusPoint && focusPoint.classList.remove('is-hidden')
-            implicitFocusMessage.classList.remove('is-hidden')
-          }
-          focusPoint && focusPoint.classList.remove('is-hidden')
-          this._focusUI.moveTo(coords)
-        } else {
-          if (this.getImplicitFocus()) {
-            const implicitFocus = this.getImplicitFocus().split(',')
-            coords = {
-              x: implicitFocus[0],
-              xPercent: implicitFocus[0] * 100,
-              y: implicitFocus[1],
-              yPercent: implicitFocus[1] * 100,
-            }
-            implicitFocusMessage.classList.remove('is-hidden')
-            focusPoint && focusPoint.classList.add('is-implicit')
-            this._focusUI.moveTo(coords)
-          } else {
-            focusPoint && focusPoint.classList.add('is-hidden')
-          }
-        }
-        this.showPreview()
-      })
-    }
-
-    if (fileSelector) {
-      find(fileSelector, 'select').addEventListener('change', (e) => {
-        editButton.style.display = e.target.value === 'keep' ? '' : 'none'
-        editToggle.style.display = e.target.value === 'keep' ? '' : 'none'
-      })
-    }
-
-    large.insertBefore(
-      create('div', { className: 'ImageEditor-preview' }, previewImage, loader),
-      element,
-    )
-
-    large.append(editButton, editToggle, editList)
-
-    const done = create(
-      'button',
-      {
-        className: 'ImageEditor-closeButton',
-        name: 'action-done',
-        onclick: (event) => {
-          rootCIG.style.zIndex = 'auto'
-          const left = this.getElement().closest('.ContentEdit-left')
-          if (left) {
-            left.style.position = 'initial'
-            left.style.zIndex = 'auto'
-          }
-          this._element.setAttribute('hidden', '')
-
-          this.renderPreview()
-          if (this._focusUI) {
-            this.showPreview()
-          }
-          large.classList.remove(STATE_OPEN)
-          if (rcigItem) {
-            rcigItem.classList.remove(STATE_OPEN)
-          }
-          editButton.focus()
-          window.removeEventListener('keydown', escapeToClose)
-          event.preventDefault()
-        },
-      },
-      'Done',
-    )
-
-    this.getElement().appendChild(
-      create('div', { className: 'ActionBar' }, done),
-    )
-
-    const applyEditsOnPreview = (data) => {
-      const {
-        brightness,
-        contrast,
-        invert,
-        grayscale,
-        sepia,
-        flipH,
-        flipV,
-        rotate,
-      } = { ...data }
-      this.applyFilter(
-        'brightness',
-        `${this.convertValueToPercent(brightness)}%`,
-      )
-      this.applyFilter('contrast', `${this.convertValueToPercent(contrast)}%`)
-      this.applyFilter('sepia', sepia ? '100%' : null)
-      this.applyFilter('invert', invert ? '100%' : null)
-      this.applyFilter('grayscale', grayscale ? '100%' : null)
-      flipH
-        ? this._croptool.scale(-1, flipV ? -1 : 1)
-        : this._croptool.scale(1, flipV ? -1 : 1)
-
-      flipV
-        ? this._croptool.scale(flipH ? -1 : 1, -1)
-        : this._croptool.scale(flipH ? -1 : 1, 1)
-
-      if (rotate) {
-        this._croptool.rotateTo(rotate)
-      }
-    }
-
-    const calculatePreviewRatios = () => {
-      const groups = findAll(this._cropSelect, 'option:not([value=""])')
-      const sizeInfos = Object.values(this.getRenditions())
-      groups.forEach((group) => {
-        const filtered = sizeInfos.filter((obj) => {
-          return obj.group === group.value && obj.aspectRatio !== 0
-        })
-
-        if (filtered.length > 0) {
-          const avgAspectRatio =
-            filtered.reduce((a, b) => a + b.aspectRatio, 0) / filtered.length
-          group.setAttribute('data-preview-ratio', avgAspectRatio)
-        } else {
-          this._cropSelect.removeChild(group)
-        }
-      })
-      if (this._cropSelect.children.length === 1) {
-        const input = find(ratios, '.ComboInput')
-        if (input) {
-          input.style.display = 'none'
-        }
-      }
-    }
-
-    const handleImageLoaded = (image) => {
-      this.initCropTool(image).then((data) => {
-        this.getElement().classList.remove(STATE_LOADING)
-        large.classList.remove(STATE_LOADING)
-        large.classList.add(STATE_LOADED)
-        applyEditsOnPreview(this.getEditValues())
-        this.renderPreview()
-        if (implicitFocusMessage) {
-          large.appendChild(implicitFocusMessage)
-        }
-        if (this._cropSelect) {
-          if (message) {
-            large.appendChild(message)
-          }
-          const index = this._cropSelect.selectedIndex
-          const selectedCrop = this._cropSelect.options[index]
-          showFocusMessage(selectedCrop.textContent)
-          this.imageMask = create('div', {
-            className: 'ImageEditor-preview-border',
-          })
-          large.querySelector('.ImageEditor-preview').append(this.imageMask)
-          this._focusUI = this.createFocusUI(large, () => {
-            this.updateAllRenditionPreviews()
-          })
-          calculatePreviewRatios()
-          this.showPreview()
-        }
-      })
-    }
-
-    if (!image.complete) {
-      image.onload = (event) => {
-        handleImageLoaded(image)
-      }
-    } else {
-      handleImageLoaded(image)
-    }
-  }
-
-  // Applies a CSS filter to the "filterable" images.
-  // Combines filters if multiple are used in the UI.
-  // @name: the CSS filter function to use.
-  // @val: the CSS filter function percentage to use. *Note: passing null will remove the filter.
-  applyFilter(name, val) {
-    let cssFilterProp = ''
-    const images = [
-      ...this.getElement().querySelectorAll(FILTERABLE_SELECTORS),
-      this.getPreviewContainer(),
-    ]
-
-    val ? filtersApplied.set(name, val) : filtersApplied.delete(name)
-
-    filtersApplied.forEach((val, name) => {
-      cssFilterProp += ` ${name}(${val}) `
-    })
-
-    images.forEach((image) => (image.style.filter = `${cssFilterProp.trim()}`))
-  }
-
-  // Server values range from -1 to 1 and must be converted to percentage.
-  convertValueToPercent(val) {
-    let amount = parseFloat(val)
-    amount = amount * 100 + 100
-    return amount
-  }
-
-  async initCropTool(image) {
-    await new Promise((resolve, reject) => {
-      this._croptool = new Cropper(image, {
-        autoCrop: false,
-        autoCropArea: 1,
-        movable: false,
-        restore: false,
-        responsive: true,
-        scalable: true, // needed for flipping
-        toggleDragModeOnDblclick: false,
-        viewMode: 1,
-        zoomable: false,
-        zoomOnTouch: false,
-        zoomOnWheel: false,
-        // calculates the correct width & height of the container
-        // instead of setting them to default dimensions (200px x 100px) when 'resize' is triggered
-        minContainerHeight: -1,
-        minContainerWidth: -1,
-
-        ready: (event) => {
-          resolve()
-        },
-
-        crop: (event) => {
-          const rendition = this.getCurrentRendition()
-          if (rendition) {
-            this.updateRenditionPreview(
-              rendition,
-              this._croptool.getCroppedCanvas(),
-            )
-          }
-        },
-
-        // synonymous with "the crop was changed"
-        cropend: (event) => {
-          const rendition = this.getCurrentRendition()
-          const cropData = this._croptool.getCropBoxData()
-          if (rendition) {
-            rendition.modifiedCropData = cropData
-            this.showRenditionResetButton(rendition)
-            const renditionEl = this.getRenditionElFromRendition(rendition)
-            renditionEl.classList.add('ImageEditor-sizeModified')
-            this.setCropInputValues(rendition)
-          }
-        },
-      })
-    })
-  }
-
-  // To trigger the (private) resize handler in Cropper.js utility which renders the canvas again in the right size.
-  // This is needed because it sometimes incorrectly resizes the canvas within the container
-  // causing the image to be cropped off or misaligned within the container, usually when rotating.
-  // see: Cropper.js - handlers.resize()
-  repaint(height) {
-    const imageEditorMain = this.getElement().querySelector('.ImageEditor-main')
-    const containerHeight =
-      height - document.querySelector('.Page-header').offsetHeight
-    const containerWidth = imageEditorMain.getBoundingClientRect().width
-    window.dispatchEvent(new Event('resize'))
-    if (containerHeight === this._croptool?.getCanvasData().height) {
-      this._croptool.setCanvasData({
-        top: this._croptool.getCanvasData().top + 24,
-        left: this._croptool.getCanvasData().left + 24,
-        height: this._croptool.getCanvasData().height - 48,
-      })
-    }
-    if (containerWidth === this._croptool?.getCanvasData().width) {
-      this._croptool.setCanvasData({
-        top: this._croptool.getCanvasData().top + 24,
-        left: this._croptool.getCanvasData().left + 24,
-        width: this._croptool.getCanvasData().width - 48,
-      })
-    }
-    this.updateAllRenditionPreviews()
-  }
-
-  // Returns the x,y whole percentage values eg: x: 75.33 (%)
-  // If a focus point is not set this returns null values.
-  getFocusCoords(cropRatio) {
-    let inputX, inputY
-    if (this._cropSelect) {
-      const index = this._cropSelect.selectedIndex
-      if (!cropRatio) {
-        cropRatio = this._cropSelect.options[index].value
-      }
-    }
-    if (!cropRatio || cropRatio === '' || cropRatio === 'independent') {
-      inputX = this.getElement().querySelector('input[name$=".focusX"]')
-      inputY = this.getElement().querySelector('input[name$=".focusY"]')
-    } else {
-      inputX = this.getElement().querySelector(
-        'input[name$=".focusX.' + cropRatio + '"]',
-      )
-      inputY = this.getElement().querySelector(
-        'input[name$=".focusY.' + cropRatio + '"]',
-      )
-      if (inputX.value === '' || inputY.value === '') {
-        inputX = this.getElement().querySelector('input[name$=".focusX"]')
-        inputY = this.getElement().querySelector('input[name$=".focusY"]')
-      }
-    }
-    return {
-      xPercent: inputX.value !== '' ? inputX.value * 100 : null,
-      yPercent: inputY.value !== '' ? inputY.value * 100 : null,
-    }
-  }
-
-  getDefaults() {
-    let defaults = {
-      brightness: 0,
-      contrast: 0,
-      flipH: false,
-      flipV: false,
-      grayscale: false,
-      invert: false,
-      rotate: '0',
-      sepia: false,
-      'no-filter': true,
-    }
-
-    if (!this._isContextual) return defaults
-    // In contextual image editing
-    // Update the image defaults with original shared image edits (if there are any)
-    let defaultMetadata = this._element.dataset.defaultEdits
-    if (!defaultMetadata) return defaults
-    const parentDefaults = JSON.parse(defaultMetadata)
-    const { grayscale, sepia, invert } = parentDefaults
-    if (grayscale || sepia || invert) {
-      parentDefaults['no-filter'] = false
-    }
-    defaults = Object.assign(defaults, parentDefaults)
-    return defaults
-  }
-
-  getEditValues() {
-    const editorAccess = this.getElement().getAttribute('editor')
-    return [
-      ...(editorAccess === 'true'
-        ? this.getElement().querySelectorAll('.ImageEditor-edit input[name]')
-        : Object.entries(JSON.parse(this.getElement().getAttribute('edits')))),
-    ].reduce((accum, val) => {
-      if (editorAccess === 'true') {
-        const propname = val.name.substring(val.name.lastIndexOf('.') + 1)
-        Object.assign(accum, {
-          [propname]: val.type === 'checkbox' ? val.checked : val.value,
-        })
-      } else {
-        const propname = val[0]
-        Object.assign(accum, {
-          [propname]: val[1],
-        })
-      }
-      return accum
-    }, {})
-  }
-
-  createHotspotUI(tab, areaWidthUnscaled, areaHeightUnscaled, callback) {
-    let isDragging = false
-
-    const inputAddHotspot = this.getForm().querySelector(
-      '.inputContainer[data-name$=".hotspots"]',
-    )
-
-    // Abort creating the Hotspot UI if the hotspot form controls aren't present.
-    if (!inputAddHotspot) return
-
-    // Reveal hotspot inputs within the image editor hotspot tab UI.
-    inputAddHotspot.style.display = 'block'
-
-    const hotspotContainer = create('div', {
-      class: 'ImageEditor-hotspot-container',
-      onclick: (event) => {
-        event.preventDefault()
-      },
-    })
-
-    const hotspotArea = create('div', {
-      class: 'ImageEditor-hotspotableArea',
-      onclick: (event) => {
-        // Allow positioning of hotspot overlays when hotspots tab is active.
-        if (!hotspotContainer.classList.contains('is-hidden')) {
-          const clickCoords = this.getClickCoordsLocal(event.target, event)
-          clickCoords.xPercent *= 100
-          clickCoords.yPercent *= 100
-          // NOTE: this is where we could add the feature to create a new hotspot overlay when clicking the image.
-        }
-      },
-    })
-
-    hotspotContainer.appendChild(hotspotArea)
-
-    this.getElement()
-      .querySelector('.ImageEditor-main')
-      .appendChild(hotspotContainer)
-
-    tab.append(inputAddHotspot)
-
-    onFind(tab, '.ImageEditor-hotspot-item', (hotspotItem) => {
-      const onClassChange = (mutations) => {
-        mutations.forEach((mutation) => {
-          const target = mutation.target
-          const isRemoving = target.classList.contains('is-removing')
-          isRemoving
-            ? _handleHotspotItemRemove(hotspotItem)
-            : _handleHotspotItemRestore(hotspotItem)
-        })
-      }
-      const observer = new MutationObserver(onClassChange)
-      observer.observe(hotspotItem, { attributeFilter: ['class'] })
-    })
-
-    // Reflow the hotspot area UI by dispatching a browser-resize event and
-    // recalculating the relative pixel coordinates for all hotspot overlays.
-    // (needed to support responsive viewport).
-    const reflow = () => {
-      // Position each hotspot overlay.
-      tab
-        .querySelectorAll('.ImageEditor-hotspot-item')
-        .forEach((hotspotItem) => {
-          const spotSizeOffset = SPOT_SIZE / 2
-          const { x: offsetX, y: offsetY } = hotspotArea.getBoundingClientRect()
-          const areaWidth = hotspotArea.offsetWidth
-          const areaHeight = hotspotArea.offsetHeight
-          const draggable = hotspotItem.draggableRef
-
-          // Convert from normalized coordinates back to the relative pixels
-          const { x: normalX, y: normalY } = _getInputCoordsByItem(hotspotItem)
-          const { xPercent, yPercent } = _getNormalizedPointInPercent({
-            x: normalX,
-            y: normalY,
-          })
-          const relX = areaWidth * (xPercent / 100)
-          const relY = areaHeight * (yPercent / 100)
-
-          // Sync the draggable model (specific to the library)
-          draggable.position()
-
-          // Reposition the draggable element to the relative pixels.
-          draggable.left = relX + offsetX - spotSizeOffset
-          draggable.top = relY + offsetY - spotSizeOffset
-        })
-
-      window.dispatchEvent(new Event('resize'))
-    }
-
-    const _handleHotspotItemRemove = (itemEl) => {
-      itemEl.hotspotRefEl.classList.add('is-removing')
-    }
-
-    const _handleHotspotItemRestore = (itemEl) => {
-      itemEl.hotspotRefEl.classList.remove('is-removing')
-    }
-
-    const _getInputCoordsByItem = (item) => {
-      return {
-        x: item.querySelector('input[name$="cms.image.x"]').value,
-        y: item.querySelector('input[name$="cms.image.y"]').value,
-      }
-    }
-
-    // Convert a Point (x,y) from the scaled coordinate space in the editor UI
-    // to a new Point (x,y) as a percentage relative to the natural image's coordinate space.
-    const _getNormalizedPointInPercent = ({ x, y }) => {
-      const xPercent = (x / areaWidthUnscaled) * 100
-      const yPercent = (y / areaHeightUnscaled) * 100
-
-      return {
-        xPercent,
-        yPercent,
-      }
-    }
-
-    // Visualize all the Hotspot overlays whether they are pre-existing or are added at runtime.
-    const _visualizeHotspots = () => {
-      let currentHotspot = null
-
-      const _setInputCoordsByItem = (item, coords) => {
-        const inputX = item.querySelector('input[name$="/cms.image.x"]')
-        const inputY = item.querySelector('input[name$="/cms.image.y"]')
-
-        inputX.value = coords.x
-        inputY.value = coords.y
-
-        inputX.dispatchEvent(new Event('change', { bubbles: true }))
-        inputY.dispatchEvent(new Event('change', { bubbles: true }))
-      }
-
-      // Convert a Point (x,y) from the scaled coordinate space in the editor UI
-      // to a new Point (x,y) as pixels relative to the natural image's coordinate space.
-      const _getNormalizedPointInPixels = ({ x, y }) => {
-        const scaleX = hotspotArea.offsetWidth / areaWidthUnscaled
-        const scaleY = hotspotArea.offsetHeight / areaHeightUnscaled
-
-        x = parseInt(x / scaleX)
-        y = parseInt(y / scaleY)
-
-        return {
-          x,
-          y,
-        }
-      }
-
-      const _updatePosition = (spot, position) => {
-        // Get the offset coords since drag API returns global coords.
-        const parentCoords = spot.parentNode.getBoundingClientRect()
-        let localLeft = position.left - parentCoords.left
-        let localTop = position.top - parentCoords.top
-
-        // convert from top-left origin to center origin based on spot size
-        localLeft = localLeft + spot.offsetWidth / 2
-        localTop = localTop + spot.offsetHeight / 2
-
-        _setInputCoordsByItem(
-          spot.itemRefEl,
-          _getNormalizedPointInPixels({ x: localLeft, y: localTop }),
-        )
-      }
-
-      const _collapseAllHotspotItems = (item) => {
-        const hotspotItemList = item.parentNode
-
-        // Collapse all hotspot items in the list.
-        hotspotItemList
-          .querySelectorAll(
-            '.ImageEditor-hotspot-item:not(.collapsed):not(.is-collapsed)',
-          )
-          .forEach((item) => {
-            item.classList.add('is-collapsed')
-            item.classList.add('collapsed')
-          })
-      }
-
-      // Create a single hotspot overlay given the item that has the form inputs and an x/y initial position.
-      // Returns a reference to the newly created element.
-      const _visualizeHotspot = ({ item, x, y, label }) => {
-        const _handleClick = (spot) => {
-          const hotspotItem = spot.itemRefEl
-
-          spot.classList.remove('is-added')
-
-          if (hotspotItem.classList.contains('is-collapsed')) {
-            hotspotItem.querySelector(':scope .repeatableLabel')?.click()
-          }
-
-          // Delayed to provide a better UX.
-          setTimeout(() => {
-            hotspotItem.scrollIntoView({
-              behavior: 'smooth',
-              block: 'start',
-              inline: 'nearest',
-            })
-          }, 100)
-
-          currentHotspot = spot
-        }
-
-        const spot = create('div', {
-          className: 'ImageEditor-hotspot',
-          onclick: (event) => {
-            _handleClick(event.target)
-          },
-          onmouseenter: (event) => {
-            if (!isDragging) {
-              event.target.classList.remove('is-added')
-              event.target.classList.add('is-hovered')
-              event.target.itemRefEl.classList.add('is-hovered')
-              event.preventDefault()
-              event.stopPropagation()
-            }
-          },
-          onmouseleave: (event) => {
-            if (!isDragging) {
-              event.target.classList.remove('is-hovered')
-              event.target.itemRefEl.classList.remove('is-hovered')
-              event.preventDefault()
-              event.stopPropagation()
-            }
-          },
-        })
-
-        spot.innerHTML = label
-        spot.itemRefEl = item
-        hotspotArea.appendChild(spot)
-
-        // Make the hotspot overlay draggable.
-        const draggable = new PlainDraggable(spot, {
-          leftTop: false,
-          containment: hotspotArea,
-        })
-
-        PlainDraggable.draggableClass = 'is-draggable'
-        PlainDraggable.draggingClass = 'is-dragging'
-        PlainDraggable.movingClass = 'is-moving'
-
-        draggable.onMove = (position) => {
-          hotspotArea.classList.add('is-dragging')
-          isDragging = true
-        }
-
-        draggable.onDragEnd = (position) => {
-          isDragging = false
-          hotspotArea.classList.remove('is-dragging')
-          _updatePosition(spot, position)
-        }
-
-        // keep a reference to the draggable object on the DOM node.
-        item.draggableRef = draggable
-
-        // Initially position a runtime added spot.
-        if (x === '' && y === '') {
-          // Gentle randomization of starting coordinates.
-          // This positions the overlay around the center of the image.
-          const noise = new Noise()
-          const distribution = 0.3
-          const plusOrMinusX = Math.random() < 0.5 ? -1 : 1
-          const plusOrMinusY = Math.random() < 0.5 ? -1 : 1
-          const parentCoords = spot.parentNode.getBoundingClientRect()
-          const globalCenterX = parentCoords.left + parentCoords.width / 2
-          const globalCenterY = parentCoords.top + parentCoords.height / 2
-          const globalLeft =
-            globalCenterX +
-            plusOrMinusX *
-              (SPOT_SIZE * noise.getVal(plusOrMinusX * distribution))
-          const globalTop =
-            globalCenterY +
-            plusOrMinusY *
-              (SPOT_SIZE * noise.getVal(plusOrMinusY * distribution))
-          _updatePosition(spot, { left: globalLeft, top: globalTop })
-          reflow()
-          spot.classList.add('is-added')
-        }
-
-        return spot
-      }
-
-      // Process Hotspot items from the list.
-      onFind(tab, '.RCIG-item[data-hotspot-point]', (item) => {
-        const { x, y } = _getInputCoordsByItem(item)
-
-        // Collapse hotspot items.
-        _collapseAllHotspotItems(item)
-
-        // Scroll to this item in the list.
-        // Delayed to provide a better UX.
-        setTimeout(() => {
-          item.scrollIntoView({
-            behavior: 'smooth',
-            block: 'start',
-            inline: 'nearest',
-          })
-        }, 100)
-
-        item.classList.add('ImageEditor-hotspot-item')
-        item.hotspotRefEl = _visualizeHotspot({
-          item,
-          x,
-          y,
-          label: Array.from(item.parentElement.children).indexOf(item) + 1,
-        })
-
-        item.onmouseenter = (event) => {
-          event.target.hotspotRefEl.classList.remove('is-added')
-          event.target.hotspotRefEl.classList.add('is-hovered')
-          event.preventDefault()
-          event.stopPropagation()
-        }
-
-        item.onmouseleave = (event) => {
-          event.target.hotspotRefEl.classList.remove('is-hovered')
-          event.preventDefault()
-          event.stopPropagation()
-        }
-      })
-    }
-
-    // Observe size changes to the cropped image to keep the hotspot area
-    // dimensions and position in sync (mostly to support browser resize).
-    const mutations = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        if (mutation.attributeName === 'style') {
-          _hotspotAreaResize(mutation.target)
-        }
-      }
-    })
-    mutations.observe(this.getElement().querySelector('.cropper-canvas'), {
-      attributes: true,
-    })
-
-    // Resize the hotspot area according to the reference element
-    const _hotspotAreaResize = (referenceEl) => {
-      hotspotArea.style.height = `${referenceEl.offsetHeight}px`
-      hotspotArea.style.width = `${referenceEl.offsetWidth}px`
-      hotspotArea.style.transform = referenceEl.style.transform
-
-      reflow()
-    }
-
-    // Show all hotspot overlays.
-    const reveal = () => {
-      tab
-        .querySelectorAll('.ImageEditor-hotspot-item')
-        .forEach((hotspotItem) => {
-          hotspotItem.hotspotRefEl.classList.remove('is-hidden')
-        })
-    }
-
-    // Initialize the size of the hotspot area to match the croppable canvas.
-    _hotspotAreaResize(this.getElement().querySelector('.cropper-canvas'))
-
-    _visualizeHotspots()
-
-    // Hide all the initial hotspot overlays while they are being positioned.
-    hotspotArea
-      .querySelectorAll('.ImageEditor-hotspot')
-      .forEach((hotspotOverlay) => {
-        hotspotOverlay.classList.add('is-hidden')
-      })
-
-    callback()
-
-    return {
-      reflow,
-      reveal,
-    }
-  }
-
-  createFocusUI(preview, syncRenditions) {
-    const focusPoint = create('div', {
-      className: 'ImageEditor-focus-point',
-      title: tooltips.imageEditor.focus,
-    })
-
-    let initialFocusX = this.getElement().querySelector(
-      'input[name$=".focusX"]',
-    ).value
-    let initialFocusY = this.getElement().querySelector(
-      'input[name$=".focusY"]',
-    ).value
-
-    if (!initialFocusX && !initialFocusY) {
-      if (this.getImplicitFocus()) {
-        const implicitFocus = this.getImplicitFocus().split(',')
-        initialFocusX = implicitFocus[0]
-        initialFocusY = implicitFocus[1]
-        focusPoint.classList.add('is-implicit')
-        preview
-          .querySelector('.ImageEditor-implicitMessage')
-          .classList.remove('is-hidden')
-      }
-    }
-
-    const focusRender = (xPercent, yPercent) => {
-      focusPoint.style.left = `${xPercent}%`
-      focusPoint.style.top = `${yPercent}%`
-    }
-
-    const enable = () => {
-      focusContainer.style.pointerEvents = 'initial'
-    }
-
-    const disable = () => {
-      focusContainer.style.pointerEvents = 'none'
-    }
-
-    const resetFocusValues = () => {
-      const cropSizes = this._cropSelect.querySelectorAll(
-        'option:not([value=""])',
-      )
-      cropSizes.forEach((size) => {
-        const inputX = this.getElement().querySelector(
-          'input[name$=".focusX.' + size.value + '"]',
-        )
-        const inputY = this.getElement().querySelector(
-          'input[name$=".focusY.' + size.value + '"]',
-        )
-        if (inputX && inputY) {
-          inputX.value = ''
-          inputY.value = ''
-        }
-      })
-    }
-
-    const setFocusInputValues = ({ xPercent, yPercent }) => {
-      const index = this._cropSelect.selectedIndex
-      const selectedCrop = this._cropSelect.options[index]
-      const inputX =
-        selectedCrop.value === ''
-          ? this.getElement().querySelector('input[name$=".focusX"]')
-          : this.getElement().querySelector(
-              'input[name$=".focusX.' + selectedCrop.value + '"]',
-            )
-      const inputY =
-        selectedCrop.value === ''
-          ? this.getElement().querySelector('input[name$=".focusY"]')
-          : this.getElement().querySelector(
-              'input[name$=".focusY.' + selectedCrop.value + '"]',
-            )
-      const coords = getFocusCoordinatesNormalized({ xPercent, yPercent })
-
-      inputX.value = coords.xPercent / 100
-      inputY.value = coords.yPercent / 100
-
-      if (selectedCrop.value === '') {
-        resetFocusValues()
-      }
-
-      inputX.dispatchEvent(new Event('change', { bubbles: true }))
-      inputY.dispatchEvent(new Event('change', { bubbles: true }))
-    }
-
-    const moveTo = ({ xPercent, yPercent }) => {
-      if (!find(preview, '.ImageEditor-focus-point')) {
-        preview.append(focusPoint)
-      }
-      focusPoint.classList.remove('is-hidden')
-      focusRender(xPercent, yPercent)
-    }
-
-    // Normalizing the coordinates undoes the client-side transformations (eg: rotation and flipping)
-    // This is needed for storing the x/y coordinates on the backend.
-    const getFocusCoordinatesNormalized = ({ xPercent, yPercent }) => {
-      let focusPointData = {}
-
-      // no focus point is set; exit early.
-      if (xPercent === '' && yPercent === '') {
-        return null
-      }
-
-      const { rotate, scaleX, scaleY } = this._croptool.getImageData()
-      const { width, height } = this._croptool.getImageData()
-      const { width: nWidth, height: nHeight } = this._croptool.getCanvasData()
-
-      const x = (width * xPercent) / 100
-      const y = (height * yPercent) / 100
-
-      focusPointData = { xPercent, yPercent }
-
-      const rotateCoords = (r, x, y, width, height, focusPointData) => {
-        let newX
-        let newY
-
-        if (r === 90 || r === -270) {
-          newX = y
-          newY = width - x
-        } else if (r === 180 || r === -180) {
-          newX = width - x
-          newY = height - y
-        } else if (r === -90 || r === 270) {
-          newX = height - y
-          newY = x
-        } else {
-          newX = x
-          newY = y
-        }
-        focusPointData.xPercent = (newX / nWidth) * 100
-        focusPointData.yPercent = (newY / nHeight) * 100
-      }
-
-      rotateCoords(rotate, x, y, width, height, focusPointData)
-
-      // Translate point for flip:
-      if (scaleX === -1 && scaleY === -1) {
-        // if both have flipped, just calculate the new rotation from that.
-        let newRotate = rotate - 180
-        rotateCoords(newRotate, x, y, width, height, focusPointData)
-      } else {
-        // image flipped horizontally?
-        if (scaleX === -1) {
-          if (rotate === 90 || rotate === -270) {
-            focusPointData.xPercent = 100 - focusPointData.xPercent
-          } else if (rotate === 180 || rotate === -180) {
-            focusPointData.xPercent = xPercent
-          } else if (rotate === -90 || rotate === 270) {
-            focusPointData.xPercent = 100 - focusPointData.xPercent
-          } else {
-            focusPointData.xPercent = 100 - xPercent
-          }
-        }
-
-        // image flipped vertically?
-        if (scaleY === -1) {
-          if (rotate === 90 || rotate === -270) {
-            focusPointData.xPercent = yPercent
-            focusPointData.yPercent = xPercent
-          } else if (rotate === 180 || rotate === -180) {
-            focusPointData.xPercent = 100 - xPercent
-            focusPointData.yPercent = yPercent
-          } else if (rotate === -90 || rotate === 270) {
-            focusPointData.xPercent = 100 - focusPointData.yPercent
-            focusPointData.yPercent = focusPointData.xPercent
-          } else {
-            focusPointData.yPercent = 100 - yPercent
-          }
-        }
-      }
-
-      return {
-        x: focusPointData.xPercent / 100,
-        y: focusPointData.yPercent / 100,
-        xPercent: focusPointData.xPercent,
-        yPercent: focusPointData.yPercent,
-      }
-    }
-
-    // returns normalized x/y percentages which factor in rotation.
-    // typically used for the realtime/client positioning.
-    const getFocusCoordinatesRelative = (cropRatio) => {
-      let focusPointData = {}
-
-      const focusPointCoords = this.getFocusCoords(cropRatio)
-
-      // no focus point is set; exit early.
-      if (
-        focusPointCoords.xPercent === null &&
-        focusPointCoords.yPercent === null
-      ) {
-        if (this.getImplicitFocus()) {
-          const implicitFocus = this.getImplicitFocus().split(',')
-          focusPointCoords.xPercent = implicitFocus[0] * 100
-          focusPointCoords.yPercent = implicitFocus[1] * 100
-        } else {
-          return null
-        }
-      }
-
-      const { rotate, scaleX, scaleY } = this._croptool.getImageData()
-      const { width, height } = this._croptool.getImageData()
-      const { width: nWidth, height: nHeight } = this._croptool.getCanvasData()
-      const x = (width * focusPointCoords.xPercent) / 100
-      const y = (height * focusPointCoords.yPercent) / 100
-
-      focusPointData = { ...focusPointCoords }
-
-      const rotateCoords = (r, x, y, width, height, focusPointData) => {
-        let newX
-        let newY
-
-        if (r === 90 || r === -270) {
-          newX = height - y
-          newY = x
-        } else if (r === 180 || r === -180) {
-          newX = width - x
-          newY = height - y
-        } else if (r === -90 || r === 270) {
-          newX = y
-          newY = width - x
-        } else {
-          newX = x
-          newY = y
-        }
-        focusPointData.xPercent = (newX / nWidth) * 100
-        focusPointData.yPercent = (newY / nHeight) * 100
-      }
-
-      rotateCoords(rotate, x, y, width, height, focusPointData)
-
-      // Translate point for flip:
-      if (scaleX === -1 && scaleY === -1) {
-        // if both have flipped, just calculate the new rotation from that.
-        let newRotate = rotate - 180
-        rotateCoords(newRotate, x, y, width, height, focusPointData)
-      } else {
-        // image flipped horizontally?
-        if (scaleX === -1) {
-          if (rotate === 90 || rotate === -270) {
-            focusPointData.yPercent = 100 - focusPointCoords.xPercent
-          } else if (rotate === 180 || rotate === -180) {
-            focusPointData.xPercent = focusPointCoords.xPercent
-          } else if (rotate === -90 || rotate === 270) {
-            focusPointData.yPercent = focusPointCoords.xPercent
-          } else {
-            focusPointData.xPercent = 100 - focusPointCoords.xPercent
-          }
-        }
-
-        // image flipped vertically?
-        if (scaleY === -1) {
-          if (rotate === 90 || rotate === -270) {
-            focusPointData.xPercent = focusPointCoords.yPercent
-          } else if (rotate === 180 || rotate === -180) {
-            focusPointData.xPercent = 100 - focusPointCoords.xPercent
-            focusPointData.yPercent = focusPointCoords.yPercent
-          } else if (rotate === 270) {
-            focusPointData.xPercent = 100 - focusPointData.xPercent
-          } else {
-            focusPointData.yPercent = 100 - focusPointCoords.yPercent
-          }
-        }
-      }
-
-      return {
-        x: focusPointData.xPercent / 100,
-        y: focusPointData.yPercent / 100,
-        xPercent: focusPointData.xPercent,
-        yPercent: focusPointData.yPercent,
-      }
-    }
-
-    const focusContainer = create('div', {
-      class: 'ImageEditor-focus-container',
-      dblclick: (event) => event.preventDefault(),
-      onclick: (event) => {
-        event.preventDefault()
-        const focusPoint = find(preview, '.ImageEditor-focus-point')
-        const implicitMessage = find(preview, '.ImageEditor-implicitMessage')
-        if (focusPoint) {
-          focusPoint.classList.remove('is-implicit')
-        }
-        if (implicitMessage) {
-          implicitMessage.classList.add('is-hidden')
-        }
-        const message = find(preview, '.ImageEditor-focusMessage')
-        message.classList.add('is-hidden')
-        const clickCoords = this.getClickCoordsLocal(event.target, event)
-        clickCoords.xPercent *= 100
-        clickCoords.yPercent *= 100
-        const { xPercent, yPercent } = clickCoords
-        setFocusInputValues({ xPercent, yPercent })
-        moveTo({ xPercent, yPercent })
-        this.showPreview()
-        syncRenditions()
-      },
-    })
-
-    const imageContainer = this.getPreviewContainer()
-    imageContainer.appendChild(focusContainer)
-
-    if (initialFocusX !== '' && initialFocusY !== '') {
-      const xPercent = initialFocusX * 100
-      const yPercent = initialFocusY * 100
-      moveTo({ xPercent, yPercent })
-    }
-
-    return {
-      disable,
-      enable,
-      moveTo,
-      getFocusCoordinatesRelative,
-    }
-  }
-
-  applyAllEdits(data) {
-    const {
-      brightness,
-      contrast,
-      invert,
-      grayscale,
-      sepia,
-      flipH,
-      flipV,
-      rotate,
-    } = { ...data }
-
-    this.applyFilter('brightness', `${this.convertValueToPercent(brightness)}%`)
-    this.applyFilter('contrast', `${this.convertValueToPercent(contrast)}%`)
-    this.applyFilter('sepia', sepia ? '100%' : null)
-    this.applyFilter('invert', invert ? '100%' : null)
-    this.applyFilter('grayscale', grayscale ? '100%' : null)
-
-    flipH
-      ? this._croptool.scale(-1, flipV ? -1 : 1)
-      : this._croptool.scale(1, flipV ? -1 : 1)
-
-    flipV
-      ? this._croptool.scale(flipH ? -1 : 1, -1)
-      : this._croptool.scale(flipH ? -1 : 1, 1)
-
-    if (rotate) {
-      this._croptool.rotateTo(rotate)
-      this.moveFocusCoords()
-      this.updateAllRenditionPreviews()
-      this.repaint(document.body.offsetHeight)
-    }
-  }
-
-  createEditUI(target, ui, croptool, focusUI, syncRenditions, repaintHandler) {
-    const defaults = this.getDefaults()
-    const tools = target.querySelector('.imageEditor-tools')
-    const adjustments = target.querySelector('.imageEditor-edit')
-
-    const editableArea = create('div', {
-      class: 'ImageEditor-editableArea',
-      onclick: (event) => event.preventDefault(),
-      dblclick: (event) => event.preventDefault(),
-    })
-
-    this.getElement()
-      .querySelector('.ImageEditor-main')
-      .appendChild(editableArea)
-
-    // Server values range from -1 to 1 and must be converted to percentage.
-    const convertValueToPercent = (val) => {
-      let amount = parseFloat(val)
-      amount = amount * 100 + 100
-      return amount
-    }
-
-    const e = this.getElement()
-    const brightnessInput = e.querySelector('input[name$=".brightness"]')
-    const contrastInput = e.querySelector('input[name$=".contrast"]')
-    const sepiaToggle = e.querySelector('input[name$=".sepia"]')
-    const invertToggle = e.querySelector('input[name$=".invert"]')
-    const grayscaleToggle = e.querySelector('input[name$=".grayscale"]')
-    const noFilterToggle = e.querySelector('input[name$=".no-filter"]')
-
-    const updateAllInputs = (data) => {
-      const context = this.getElement()
-      Object.entries(data).forEach(([key, val]) => {
-        const input = context.querySelector(
-          `.ImageEditor-edit input[name$='.${key}']`,
-        )
-        input.type === 'checkbox' ? (input.checked = val) : (input.value = val)
-      })
-    }
-
-    brightnessInput.onchange = (event) => {
-      this.applyFilter(
-        'brightness',
-        `${convertValueToPercent(event.target.value)}%`,
-      )
-    }
-
-    contrastInput.onchange = (event) => {
-      this.applyFilter(
-        'contrast',
-        `${convertValueToPercent(event.target.value)}%`,
-      )
-    }
-
-    const filters = {
-      grayscale: grayscaleToggle,
-      invert: invertToggle,
-      sepia: sepiaToggle,
-      ['no-filter']: noFilterToggle,
-    }
-
-    /* The checkbox inputs function as radio buttons, meaning when an input is clicked, it should not be uncheckable if it was already checked */
-    const toggleCheckedFilter = (filterName) => {
-      if (!filters[filterName].checked) {
-        filters[filterName].checked = true
-      } else if (filterName !== 'no-filter') {
-        this.applyFilter(
-          filterName,
-          filters[filterName].checked ? '100%' : null,
-        )
-      }
-      for (const filter in filters) {
-        if (filter !== filterName) {
-          this.applyFilter(filter, null)
-          filters[filter].checked = false
-        }
-      }
-    }
-
-    sepiaToggle.onchange = () => {
-      toggleCheckedFilter('sepia')
-    }
-
-    invertToggle.onchange = () => {
-      toggleCheckedFilter('invert')
-    }
-
-    grayscaleToggle.onchange = () => {
-      toggleCheckedFilter('grayscale')
-    }
-
-    noFilterToggle.onchange = () => {
-      toggleCheckedFilter('no-filter')
-    }
-
-    const rotateLeftButton = create(
-      'button',
-      {
-        class: 'ImageEditor-rotate-left',
-        'aria-label': tooltips.imageEditor.rotateLeft,
-        title: tooltips.imageEditor.rotateLeft,
-        type: 'button',
-        onclick: (event) => {
-          croptool.rotate(-90)
-          this.moveFocusCoords()
-          syncRenditions()
-          repaintHandler()
-          setRotationInputValue(croptool.getData().rotate)
-        },
-      },
-      tooltips.imageEditor.rotateLeft,
-    )
-
-    const rotateRightButton = create(
-      'button',
-      {
-        class: 'ImageEditor-rotate-right',
-        'aria-label': tooltips.imageEditor.rotateRight,
-        title: tooltips.imageEditor.rotateRight,
-        type: 'button',
-        onclick: (event) => {
-          croptool.rotate(90)
-          this.moveFocusCoords()
-          syncRenditions()
-          repaintHandler()
-          setRotationInputValue(croptool.getData().rotate)
-        },
-      },
-      tooltips.imageEditor.rotateRight,
-    )
-
-    const flipHorizontalButton = create(
-      'button',
-      {
-        class: 'ImageEditor-flip-h',
-        'aria-label': tooltips.imageEditor.flipH,
-        title: tooltips.imageEditor.flipH,
-        type: 'button',
-        onclick: (event) => {
-          const rotation = croptool.getData().rotate
-
-          // When the image is rotated onto it's side, the flip behavior has to change since it uses the source
-          // image (non-rotated) to base the transformation off of. So, if the image is rotated on it's side, flip vertically.
-          rotation === 0 || rotation === 180 || rotation === -180
-            ? flipH()
-            : flipV()
-
-          syncRenditions()
-          repaintHandler()
-        },
-      },
-      tooltips.imageEditor.flipH,
-    )
-
-    const flipVerticalButton = create(
-      'button',
-      {
-        class: 'ImageEditor-flip-v',
-        'aria-label': tooltips.imageEditor.flipV,
-        title: tooltips.imageEditor.flipV,
-        type: 'button',
-        onclick: (event) => {
-          const rotation = croptool.getData().rotate
-
-          // When the image is rotated onto it's side, the flip behavior has to change since it uses the source
-          // image (non-rotated) to base the transformation off of. So, if the image is rotated on it's side, flip horizontally.
-          rotation === 0 || rotation === 180 || rotation === -180
-            ? flipV()
-            : flipH()
-
-          syncRenditions()
-          repaintHandler()
-        },
-      },
-      tooltips.imageEditor.flipV,
-    )
-
-    const resetButton = create(
-      'button',
-      {
-        class: 'ImageEditor-resetButton',
-        'aria-label': tooltips.reset,
-        type: 'button',
-        onclick: (event) => {
-          event.preventDefault()
-          event.stopPropagation()
-          this.applyAllEdits(defaults)
-          updateAllInputs(defaults)
-          this.resetAllRenditionPreviews()
-          repaintHandler()
-        },
-        onkeydown: (event) => {
-          if (event.key === 'Tab' && !event.shiftKey) {
-            event.preventDefault()
-            this._element.querySelector('.TabBar-item.is-selected').focus()
-          }
-        },
-      },
-      tooltips.reset,
-    )
-
-    const actionBar = find(this.getElement(), '.ActionBar')
-    actionBar.appendChild(resetButton)
-
-    const flipH = () => {
-      const isFlippedH = getFlipHInputValue()
-      const isFlippedV = getFlipVInputValue()
-      croptool.scale(isFlippedH ? 1 : -1, isFlippedV ? -1 : 1)
-      this.moveFocusCoords()
-      setFlipHInputValue()
-    }
-
-    const flipV = () => {
-      const isFlippedV = getFlipVInputValue()
-      const isFlippedH = getFlipHInputValue()
-      croptool.scale(isFlippedH ? -1 : 1, isFlippedV ? 1 : -1)
-      this.moveFocusCoords()
-      setFlipVInputValue()
-    }
-
-    const getFlipHInputValue = () => {
-      const name = 'flipH'
-      const input = this.getElement().querySelector(
-        `.ImageEditor-edit input[name$='.${name}']`,
-      )
-
-      return input ? input.checked : false
-    }
-
-    const setFlipHInputValue = () => {
-      const name = 'flipH'
-      const input = this.getElement().querySelector(
-        `.ImageEditor-edit input[name$='.${name}']`,
-      )
-      if (input) {
-        input.checked = !input.checked
-        input.dispatchEvent(new Event('change', { bubbles: true }))
-      }
-    }
-
-    const getFlipVInputValue = () => {
-      const name = 'flipV'
-      const input = this.getElement().querySelector(
-        `.ImageEditor-edit input[name$='.${name}']`,
-      )
-
-      return input ? input.checked : false
-    }
-
-    const setFlipVInputValue = () => {
-      const name = 'flipV'
-      const input = this.getElement().querySelector(
-        `.ImageEditor-edit input[name$='.${name}']`,
-      )
-      if (input) {
-        input.checked = !input.checked
-        input.dispatchEvent(new Event('change', { bubbles: true }))
-      }
-    }
-
-    const setRotationInputValue = (val) => {
-      const name = 'rotate'
-      const input = this.getElement().querySelector(
-        `.ImageEditor-edit input[name$='.${name}']`,
-      )
-
-      let adjustedVal = val
-
-      // convert values to stay within backend range of -90 -> 180
-      if (val === -180) {
-        adjustedVal = 180
-      } else if (val === -270) {
-        adjustedVal = 90
-      } else if (val === 270) {
-        adjustedVal = -90
-      }
-
-      if (input) {
-        input.value = adjustedVal
-        input.dispatchEvent(new Event('change', { bubbles: true }))
-      }
-    }
-
-    const brightnessUI = create(
-      'div',
-      {
-        class: 'CIG-row',
-      },
-      create(
-        'label',
-        { class: 'CIG-label' },
-        tooltips.imageEditor.brightness,
-        brightnessInput,
-      ),
-    )
-
-    const contrastUI = create(
-      'div',
-      {
-        class: 'CIG-row',
-      },
-      create(
-        'label',
-        { class: 'CIG-label' },
-        tooltips.imageEditor.contrast,
-        contrastInput,
-      ),
-    )
-
-    const filtersUI = create(
-      'div',
-      {
-        class: 'CIG-row',
-        role: 'radiogroup',
-      },
-      create('div', { class: 'CIG-label' }, 'Filter'),
-      create(
-        'div',
-        {
-          class: 'CIG-small',
-          role: 'radio',
-          tabIndex: 0,
-        },
-        create('label', noFilterToggle, tooltips.imageEditor.filters),
-      ),
-      create(
-        'div',
-        {
-          class: 'CIG-small',
-          role: 'radio',
-          tabIndex: 0,
-        },
-        create('label', sepiaToggle, tooltips.imageEditor.sepia),
-      ),
-      create(
-        'div',
-        {
-          class: 'CIG-small',
-          role: 'radio',
-          tabIndex: 0,
-        },
-        create('label', invertToggle, tooltips.imageEditor.invert),
-      ),
-      create(
-        'div',
-        {
-          class: 'CIG-small',
-          role: 'radio',
-          tabIndex: 0,
-        },
-        create('label', grayscaleToggle, tooltips.imageEditor.grayscale),
-      ),
-    )
-
-    const rotationUI = create(
-      'div',
-      {
-        class: 'CIG-row',
-      },
-      create(
-        'label',
-        { class: 'CIG-label' },
-        tooltips.imageEditor.rotate + '/' + tooltips.imageEditor.flip,
-      ),
-      create('div', { class: 'CIG-small' }, [
-        rotateLeftButton,
-        rotateRightButton,
-        flipHorizontalButton,
-        flipVerticalButton,
-      ]),
-    )
-
-    adjustments.append(rotationUI, brightnessUI, contrastUI, filtersUI)
-
-    ui.appendChild(tools)
-    ui.appendChild(adjustments)
-
-    const initialEditValues = this.getEditValues()
-    this.applyAllEdits(initialEditValues)
-  }
-
-  filterRenditionPreviews() {
-    const index = this._cropSelect.selectedIndex
-    const selectedCrop = this._cropSelect.options[index]
-    this.hideCropUI()
-    this._renditions.forEach((rendition) => {
-      if (rendition.current) {
-        this.toggleRendition(rendition)
-      }
-      const renditionElm = this.getRenditionElFromRendition(rendition)
-      renditionElm.classList.toggle(
-        'is-visible',
-        selectedCrop.value === ''
-          ? true
-          : rendition.cropRatio === selectedCrop.value,
-      )
-    })
-  }
-
-  moveFocusCoords() {
-    if (!this._focusUI) {
-      return
-    }
-    const coords = this._focusUI.getFocusCoordinatesRelative()
-    if (coords) {
-      this._focusUI.moveTo(coords)
-    }
-  }
-
-  showPreview() {
-    const index = this._cropSelect.selectedIndex
-    const selectedCrop = this._cropSelect.options[index]
-    const group = selectedCrop.value
-    const focusData = this._focusUI.getFocusCoordinatesRelative(group)
-
-    const { width, height } = this.getPreviewContainer().getBoundingClientRect()
-    const inputAspectRatio = Math.floor((width / height) * 100) / 100
-    let outputWidth, outputHeight
-    let left = 0
-    let right = 0
-    let top = 0
-    let bottom = 0
-
-    if (group !== '' && focusData) {
-      const aspectRatio = selectedCrop.getAttribute('data-preview-ratio')
-      if (inputAspectRatio > aspectRatio) {
-        outputWidth = height * aspectRatio
-        left = width * focusData.x - outputWidth / 2
-        if (left <= 0) {
-          left = 0
-        }
-        right = width - outputWidth - left
-        if (right <= 0) {
-          right = 0
-          left = width - outputWidth
-        }
-      } else if (inputAspectRatio < aspectRatio) {
-        outputHeight = width / aspectRatio
-        top = height * focusData.y - outputHeight / 2
-        if (top <= 0) {
-          top = 0
-        }
-        bottom = height - outputHeight - top
-        if (bottom <= 0) {
-          bottom = 0
-          top = height - outputHeight
-        }
-      }
-    }
-    this.imageMask.style.borderLeftWidth = `${left}px`
-    this.imageMask.style.borderRightWidth = `${right}px`
-    this.imageMask.style.borderTopWidth = `${top}px`
-    this.imageMask.style.borderBottomWidth = `${bottom}px`
-  }
-
-  getClickCoordsLocal(element, clickEvent) {
-    const { width, height, top, left } = element.getBoundingClientRect()
-    const offset = {
-      top: top + document.body.scrollTop,
-      left: left + document.body.scrollLeft,
-    }
-    let x = Math.ceil(clickEvent.pageX - offset.left) || 1
-    let y = Math.ceil(clickEvent.pageY - offset.top) || 1
-
-    // bound values
-    if (x <= 0) {
-      x = 1
-    }
-    if (y <= 0) {
-      y = 1
-    }
-
-    return {
-      x,
-      y,
-      xPercent: x / width,
-      yPercent: y / height,
-      width,
-      height,
-    }
-  }
-
-  getCropTool() {
-    return this._croptool
-  }
-
-  getElement() {
-    return this._element
-  }
-
-  getForm() {
-    return this._form
-  }
-
-  getImplicitFocus() {
-    return this._implicitFocus
-  }
-
-  getPreviewCanvas() {
-    return this.getPreviewContainer().querySelector('canvas')
-  }
-
-  getPreviewContainer() {
-    return this.getElement().parentNode.querySelector('.ImageEditor-preview')
-  }
-
-  getRenditions() {
-    const sizeInfos = {}
-    const INPUT_NAMES = [
-      'x',
-      'y',
-      'width',
-      'height',
-      'texts',
-      'textSizes',
-      'textXs',
-      'textYs',
-      'textWidths',
-    ]
-
-    const imageSizes = this.getElement().querySelector(
-      '.imageEditor-sizes table',
-    )
-
-    if (imageSizes) {
-      imageSizes.querySelectorAll('th').forEach((heading) => {
-        const row = heading.closest('tr')
-        const group = row.getAttribute('data-size-group')
-        const name = row.getAttribute('data-size-name')
-        const displayName = row.getAttribute('data-display-name')
-        const description = row.getAttribute('data-description')
-        const width = parseFloat(row.getAttribute('data-size-width'))
-        const height = parseFloat(row.getAttribute('data-size-height'))
-        let independent = row.getAttribute('data-size-independent') === 'true'
-        let aspectRatio = width / height
-
-        // If the width or height is zero, then this is a special case
-        // and there is no fixed aspect ratio.
-        // Instead the other dimension specifies the size, and the
-        // width or height should be adjusted automatically.
-        if (width === 0 || height === 0) {
-          aspectRatio = 0
-          independent = true
-        }
-
-        // Create pointers to each of the hidden inputs that this size uses.
-        const inputs = {}
-        INPUT_NAMES.forEach((name) => {
-          inputs[name] = row.querySelector(`input[name$='.${name}']`)
-        })
-
-        const focusCrop = this.getFocusCoords()
-
-        // Save the size information so we can use it later
-        sizeInfos[name] = {
-          group,
-          name,
-          description,
-          displayName,
-          inputs,
-          independent,
-          width,
-          height,
-          aspectRatio,
-          focusCrop,
-        }
-      })
-    }
-
-    return sizeInfos
-  }
-
-  flattenAndSortRenditions(renditions) {
-    const renditionsMap = new Map()
-
-    const createRenditionEntry = (rendition) => {
-      return {
-        name: rendition.name,
-        cropRatio: rendition.group,
-        sizeInfos: { [rendition.name]: { ...renditions[rendition.name] } },
-      }
-    }
-
-    const sort = (map) => {
-      return new Map(
-        Array.from(map).sort((a, b) => {
-          return a[0] - b[0]
-        }),
-      )
-    }
-
-    for (const key in renditions) {
-      const rendition = renditions[key]
-      renditionsMap.set(rendition.name, createRenditionEntry(rendition))
-    }
-
-    return sort(renditionsMap)
-  }
-
-  hideCropUI() {
-    this._croptool.clear()
-    // this._croptool.disable()
-  }
-
-  showCropUI() {
-    this._croptool.enable()
-    const currRendition = this.getCurrentRendition()
-    if (currRendition) {
-      currRendition.current = false
-      this.setCurrentRendition(currRendition)
-    }
-  }
-
-  hideEditUI() {
-    this.getElement()
-      .querySelector('.ImageEditor-editableArea')
-      .classList.add('is-hidden')
-  }
-
-  showEditUI() {
-    this.getElement()
-      .querySelector('.ImageEditor-editableArea')
-      .classList.remove('is-hidden')
-  }
-
-  hideHotspotUI() {
-    this.getElement()
-      .querySelector('.ImageEditor-hotspot-container')
-      .classList.add('is-hidden')
-  }
-
-  showHotspotUI() {
-    this.getElement()
-      .querySelector('.ImageEditor-hotspot-container')
-      .classList.remove('is-hidden')
-    this._hotspotUI.reflow()
-  }
-
-  renderPreview() {
-    this.getPreviewContainer().classList.add('is-hidden')
-    const lastCropData = this._croptool.getCropBoxData()
-    this._croptool.clear()
-    const uncroppedCanvas = this._croptool.getCroppedCanvas()
-    this._croptool.setCropBoxData(lastCropData)
-    const existingPreview = this.getPreviewCanvas()
-    existingPreview
-      ? this.getPreviewContainer().replaceChild(
-          uncroppedCanvas,
-          existingPreview,
-        )
-      : this.getPreviewContainer().appendChild(uncroppedCanvas)
-  }
-
-  renderRenditionPreviews(renditions) {
-    const renditionList = create('ol', {
-      class: 'ImageEditor-sizeSelectors',
-    })
-
-    const createLabel = (rendition) => {
-      return (rendition.sizeInfos[rendition.name].displayName ??= '')
-    }
-
-    const createDescription = (rendition) => {
-      const elements = new Map()
-      for (const key in rendition.sizeInfos) {
-        const size = rendition.sizeInfos[key]
-        let description = size.description
-        if (description) {
-          elements.set(description, create('span', description))
-        }
-      }
-      return [...elements.values()]
-    }
-
-    const createRenditionPreview = (rendition) => {
-      const croptool = this.getCropTool()
-
-      const preview = create('div', {
-        class: 'imageEditor-sizePreview',
-      })
-
-      this.positionCrop(rendition)
-
-      const canvas = croptool.getCroppedCanvas()
-      preview.appendChild(canvas)
-      return preview
-    }
-
-    renditions.forEach((val, key) => {
-      const cropGroupElement = create('li', {
-        class: `imageEditor-sizeButton ${
-          val.current ? 'imageEditor-sizeSelected' : ''
-        }`,
-        onclick: (event) => {
-          event.preventDefault()
-          event.stopPropagation()
-          this.setCurrentRendition(val)
-        },
-      })
-
-      cropGroupElement.setAttribute('data-group-name', val.sizeInfos[key].group)
-      cropGroupElement.setAttribute('data-size-name', key)
-
-      if (val.sizeInfos[key] && val.sizeInfos[key].independent) {
-        cropGroupElement.setAttribute('data-independent', 'true')
-      }
-
-      const sizeLabel = create(
-        'div',
-        { className: 'imageEditor-sizeLabel' },
-        createLabel(val),
-      )
-
-      const groupLabel = create('div', {
-        className: 'ImageEditor-sizeContainer',
-      })
-
-      groupLabel.append(sizeLabel)
-
-      const groupDescription = create('div', {
-        className: 'ImageEditor-sizeDescription',
-      })
-
-      groupDescription.append(...createDescription(val))
-
-      const inheritLabel = this.getElement().getAttribute('data-inherit')
-      const overrideLabel = this.getElement().getAttribute('data-override')
-
-      if (val.cropRatio && val.cropRatio !== 'independent') {
-        groupDescription.append(
-          create(
-            'span',
-            { className: 'is-inherit' },
-            inheritLabel + ' ' + val.cropRatio,
-          ),
-        )
-        groupDescription.append(
-          create(
-            'span',
-            { className: 'is-override' },
-            overrideLabel + ' ' + val.cropRatio,
-          ),
-        )
-      }
-
-      const resetButton = create(
-        'a',
-        {
-          class: 'ImageEditor-renditionResetButton',
-          onclick: (event) => {
-            event.preventDefault()
-            event.stopPropagation()
-            if (!val.current) {
-              this.setCurrentRendition(val)
-            }
-            this.resetCropInputValues(this.getCurrentRendition())
-            this.resetRendition(this.getCurrentRendition())
-          },
-        },
-        'Reset',
-      )
-
-      cropGroupElement.append(
-        groupLabel,
-        groupDescription,
-        createRenditionPreview(val),
-      )
-      groupLabel.append(resetButton)
-      renditionList.appendChild(cropGroupElement)
-    })
-
-    const imageSizes = this.getElement().querySelector('.ImageEditor-sizes')
-    if (imageSizes) {
-      imageSizes.appendChild(renditionList)
-    }
-  }
-
-  renderTabs() {
-    const target = this.getElement().querySelector('.imageEditor-aside')
-    const previewImage = this.getPreviewContainer().querySelector('img')
-
-    const editTab = create('div', {
-      class: 'ImageEditor-editGroup',
-      dataset: { tab: 'Edit' },
-    })
-    if (this.getElement().getAttribute('editor') === 'true') {
-      target.appendChild(editTab)
-    }
-
-    const sizesTab = this.getElement().querySelector('.imageEditor-sizes')
-    if (sizesTab) {
-      sizesTab.dataset.tab = 'Sizes'
-      target.appendChild(sizesTab)
-    }
-
-    if (this.getElement().getAttribute('editor') === 'true') {
-      this._editUI = this.createEditUI(
-        target,
-        editTab,
-        this._croptool,
-        this._focusUI,
-        () => {
-          this.updateAllRenditionPreviews()
-        },
-        () => {
-          this.repaint(document.body.offsetHeight)
-        },
-      )
-    } else {
-      this.applyAllEdits(this.getEditValues())
-    }
-
-    const hotspottingEnabled = !!this.getForm().querySelector(
-      '.inputContainer[data-name$=".hotspots"]',
-    )
-    let hotspotTab
-
-    if (hotspottingEnabled) {
-      hotspotTab = create('div', {
-        class: 'ImageEditor-hotspots',
-        dataset: { tab: 'Hotspots' },
-      })
-      target.appendChild(hotspotTab)
-    }
-
-    this._hotspotUI = hotspottingEnabled
-      ? this.createHotspotUI(
-          hotspotTab,
-          previewImage.getAttribute('data-width'),
-          previewImage.getAttribute('data-height'),
-          () => {},
-        )
-      : null
-
-    const mutations = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        if (mutation.attributeName === 'class') {
-          const element = mutation.target
-          const tab = element.dataset.tab
-          if (element.classList.contains('TC-unselected')) {
-            // the previous tab
-            if (tab === 'Sizes') {
-              this.hideCropUI()
-            } else if (tab === 'Edit') {
-              this.hideEditUI()
-            } else if (tab === 'Hotspots') {
-              this.hideHotspotUI()
-            }
-          } else {
-            if (tab === 'Sizes') {
-              this.showCropUI()
-            } else if (tab === 'Edit') {
-              this.showEditUI()
-            } else if (tab === 'Hotspots') {
-              this.showHotspotUI()
-            }
-          }
-        }
-      }
-    })
-
-    mutations.observe(editTab, {
-      attributes: true,
-    })
-    if (sizesTab) {
-      mutations.observe(sizesTab, {
-        attributes: true,
-      })
-    }
-    if (hotspotTab) {
-      mutations.observe(hotspotTab, {
-        attributes: true,
-      })
-    }
-
-    new TabContainer(target) // eslint-disable-line no-new
-  }
-
-  updateRenditionPreview(rendition, canvas) {
-    const renditionEl = this.getRenditionElFromRendition(rendition)
-    const oldPreview = renditionEl.querySelector(
-      '.imageEditor-sizePreview canvas',
-    )
-    const parent = renditionEl.querySelector('.imageEditor-sizePreview')
-    parent.replaceChild(canvas, oldPreview)
-  }
-
-  // @focusPointData should be decimal values for {x, y}
-  updateAllRenditionPreviews() {
-    this._renditions.forEach((rendition) => {
-      this.positionCrop(rendition)
-      const canvas = this._croptool.getCroppedCanvas()
-      this._croptool.clear()
-      this.updateRenditionPreview(rendition, canvas)
-    })
-  }
-
-  // Converts pixel values to percentages before updating the input fields.
-  setCropInputValues(rendition, data = null) {
-    const canvasData = this._croptool.getCanvasData()
-    let cropData = data || this._croptool.getCropBoxData()
-    let { left, top, width, height } = cropData
-
-    left = left !== 0 ? (left - canvasData.left) / canvasData.width : 0
-    top = top !== 0 ? (top - canvasData.top) / canvasData.height : 0
-    width = width / canvasData.width
-    height = height / canvasData.height
-
-    cropData = { x: left, y: top, width, height }
-
-    for (const key in rendition.sizeInfos) {
-      for (const prop in cropData) {
-        const input = rendition.sizeInfos[key].inputs[prop]
-        input.value = cropData[prop]
-        input.removeAttribute('disabled')
-      }
-    }
-  }
-
-  getCropInputValues(rendition) {
-    const props = ['x', 'y', 'width', 'height']
-    let data = {}
-
-    for (const key in rendition.sizeInfos) {
-      props.forEach((prop) => {
-        Object.assign(data, {
-          [prop]: rendition.sizeInfos[key].inputs[prop].value,
-        })
-      })
-    }
-    return data
-  }
-
-  resetCropInputValues(rendition) {
-    this.setCropInputValues(rendition, {
-      left: 0.0,
-      top: 0.0,
-      width: 0.0,
-      height: 0.0,
-    })
-  }
-
-  resetRendition(rendition) {
-    delete rendition.modifiedCropData
-    const renditionEl = this.getRenditionElFromRendition(rendition)
-    renditionEl.classList.remove('ImageEditor-sizeModified')
-    this.hideRenditionResetButton(rendition)
-    this.applyRenditionCrop(rendition)
-  }
-
-  resetAllRenditionPreviews() {
-    if (this.getCurrentRendition()) {
-      this.unsetCurrentRendition(this.getCurrentRendition())
-    }
-
-    this._renditions.forEach((rendition) => {
-      this.resetCropInputValues(rendition)
-      delete rendition.modifiedCropData
-      const renditionEl = this.getRenditionElFromRendition(rendition)
-      renditionEl.classList.remove('ImageEditor-sizeModified')
-    })
-  }
-
-  showRenditionResetButton(rendition) {
-    this.getRenditionElFromRendition(rendition)
-      ?.querySelector(':scope .ImageEditor-renditionResetButton')
-      ?.classList.add('is-visible')
-  }
-
-  hideRenditionResetButton(rendition) {
-    this.getRenditionElFromRendition(rendition)
-      ?.querySelector(':scope .ImageEditor-renditionResetButton')
-      ?.classList.remove('is-visible')
-  }
-
-  getRenditionElFromRendition(rendition) {
-    const name = rendition.name
-    return this.getElement().querySelector(
-      `.imageEditor-sizeButton[data-size-name='${name}']`,
-    )
-  }
-
-  getIsCropCentered() {
-    return (
-      this.getElement()
-        .querySelector('.imageEditor-sizes table')
-        .getAttribute('data-crop-center') === 'true'
-    )
-  }
-
-  getCurrentRendition() {
-    let current = null
-    this._renditions.forEach((rendition) => {
-      if (rendition.current) {
-        current = rendition
-      }
-    })
-    return current
-  }
-
-  toggleRendition(rendition) {
-    this.unsetCurrentRendition(rendition)
-    this._focusUI && this._focusUI.enable()
-
-    this.positionCrop(rendition)
-
-    const canvas = this._croptool.getCroppedCanvas()
-    this._croptool.clear()
-    this.updateRenditionPreview(rendition, canvas)
-  }
-
-  unsetCurrentRendition(rendition) {
-    const renditionEl = this.getRenditionElFromRendition(rendition)
-    renditionEl.classList.remove('imageEditor-sizeSelected')
-    rendition.current = false
-  }
-
-  setCurrentRendition(rendition) {
-    // is this rendition already the current?
-    if (rendition.current) {
-      this.toggleRendition(rendition)
-      return
-    }
-
-    // deselect current
-    this._renditions.forEach((rendition) => {
-      if (rendition.current) {
-        this.unsetCurrentRendition(rendition)
-        this.toggleRendition(rendition)
-      }
-    })
-
-    rendition.current = true
-    this.applyRenditionCrop(rendition)
-  }
-
-  applyRenditionCrop(rendition) {
-    const renditionEl = this.getRenditionElFromRendition(rendition)
-
-    if (renditionEl) {
-      renditionEl.classList.add('imageEditor-sizeSelected')
-
-      this.positionCrop(rendition)
-    }
-  }
-
-  positionCrop(rendition) {
-    let ratio
-    let focusPointData
-    let cropData = this.getCropInputValues(rendition)
-    const imageData = this._croptool.getCanvasData()
-
-    if (this._focusUI) {
-      focusPointData = this._focusUI.getFocusCoordinatesRelative(
-        rendition.cropRatio,
-      )
-    }
-
-    for (const key in rendition.sizeInfos) {
-      ratio = rendition.sizeInfos[key].aspectRatio
-    }
-
-    this._croptool.crop()
-    this._croptool.setAspectRatio(ratio)
-
-    // Crop is positioned in upper-left by default.
-    if (!this.getIsCropCentered()) {
-      this.getCropTool().setCropBoxData({
-        left: 0,
-        top: 0,
-      })
-    }
-
-    // Was the crop box adjusted by the User?
-    if (parseFloat(cropData.width) && parseFloat(cropData.height)) {
-      // display as a modified crop w/ reset functionality.
-      const renditionEl = this.getRenditionElFromRendition(rendition)
-      if (renditionEl) {
-        this.showRenditionResetButton(rendition)
-      }
-
-      const left = imageData.width * cropData.x + imageData.left
-      const top = imageData.height * cropData.y + imageData.top
-      const width = imageData.width * cropData.width
-      const height = imageData.height * cropData.height
-      this._croptool.setCropBoxData({
-        left,
-        top,
-        width,
-        height,
-      })
-    } else {
-      // if a focus point has been set, we need to adjust the crop accordingly
-      if (focusPointData) {
-        const canvasData = this._croptool.getCanvasData()
-        const cropboxData = this._croptool.getCropBoxData()
-        const cropboxDataRelativeToFocus = {
-          left:
-            canvasData.width * focusPointData.x -
-            cropboxData.width / 2 +
-            canvasData.left,
-          top:
-            canvasData.height * focusPointData.y -
-            cropboxData.height / 2 +
-            canvasData.top,
-          width: cropboxData.width,
-          height: cropboxData.height,
-        }
-
-        this._croptool.setCropBoxData(cropboxDataRelativeToFocus)
-
-        for (const key in rendition.sizeInfos) {
-          rendition.sizeInfos[key].focusCrop = cropboxDataRelativeToFocus
-        }
-      }
-    }
-  }
-}
-
-onFind('.imageEditor', (target) => {
-  new ImageEditor(target)
-})
-
-// Keeps focus within image editor when tabbing
-onFind('.ImageEditor .TabBar-item', (tab) => {
-  tab.addEventListener('keydown', (event) => {
-    if (event.key === 'Tab' && event.shiftKey) {
-      event.preventDefault()
-      tab
-        .closest('.ImageEditor')
-        ?.querySelector('.ImageEditor-resetButton')
-        ?.focus()
-    }
-  })
-})