Function createFrame

packages/frames/src/createFrame/createFrame.ts:8–129

(
  svg: SVGSVGElement,
  settings: FrameSettings<Contexts>
)

import { transitionFrameElements } from '../internal/transitionFrameElements.js'

const createFrame = <Contexts extends Record<string, string> = Record<string, string>>(
  svg: SVGSVGElement,
  settings: FrameSettings<Contexts>
): Frame<Contexts> => {
  if (!(svg instanceof SVGSVGElement)) {
    throw new Error('ARWES createFrame requires a <svg> element.')
  }

  const { animator } = settings

  let width = 0
  let height = 0
  // eslint-disable-next-line prefer-const
  let observer: ResizeObserver

  const container =
    settings.container ?? document.createElementNS('http://www.w3.org/2000/svg', 'g')
  const contexts = { ...settings.contexts }
  const animations = new Map<SVGElement, Map<keyof Contexts, AnimatedXAnimationFunctionReturn>>()

  const resize = (): void => {
    // In certain browsers, when the SVG viewBox has values with decimals above the 0.5,
    // the browser clips the values to the edge. Round down the dimensions so it doesn't happen.
    width = Math.floor(svg.clientWidth)
    height = Math.floor(svg.clientHeight)

    if (svg.getAttribute('viewBox') !== `0 0 ${width} ${height}`) {
      svg.setAttribute('viewBox', `0 0 ${width} ${height}`)
    }
  }

  const render = (): void => {
    renderFrameElements(
      container,
      settings.elements,
      animator,
      animations as Map<SVGElement, Map<string, AnimatedXAnimationFunctionReturn>>
    )
  }

  const draw = (): void => {
    if (width <= 0 || height <= 0) {
      return
    }

    drawFrameElements(container, width, height, settings.elements, contexts)
  }

  const transition = (context: string, state: string): void => {
    contexts[context] = state

    draw()

    transitionFrameElements(
      container,
      contexts,
      animations as Map<SVGElement, Map<string, AnimatedXAnimationFunctionReturn>>,
      settings.elements