freesewing/sites/shared/components/workbench/pan-zoom-pattern.mjs

// Dependencies
import { forwardRef, useContext } from 'react'
// Hooks
import { useTranslation } from 'next-i18next'
// Context
import { ModalContext } from 'shared/context/modal-context.mjs'
// Components
import { SizeMe } from 'react-sizeme'
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'
import { Pattern } from 'pkgs/react-components/src/index.mjs'

export const ns = ['workbench']

/* What's with all the wrapping?
 *
 * Glad you asked. The problem lies within the pan & zoom functionality
 * For this to work, we need to reliably determine the container widht
 * However, our SVG is optimized for embedding (no width or height)
 * which means it will simply adapt to the parent container.
 * So now we have a parent container adapting to the content and the
 * content adapting to the parent. This creates a sort of stalemate
 * where the browser will render this as zero width and height.
 *
 * To avoid that, we use the SizeMe which will report the size of the
 * grandparent element, and then we wrap our SVG in a div that we
 * set to this size. This will cause the SVG to fill in that entire
 * space, and the pan and zoom to adapt to this size.
 *
 * Note that this also means that changing the browser window size
 * will cause things to get clipped until the next render.
 *
 * Also still to see how this will work with SSR
 */
export const PanZoomPattern = forwardRef((props, ref) => {
  const { setModal } = useContext(ModalContext)
  const { t } = useTranslation(ns)

  const { renderProps = false, components = {}, update, settings, ui } = props

  if (!renderProps) return null

  const showInfo = (evt, info = null) => {
    evt.stopPropagation()
    setModal(
      <ModalWrapper>
        <div className="max-w-prose">{info}</div>
      </ModalWrapper>
    )
  }

  return (
    <SizeMe refreshRate={64}>
      {({ size }) => (
        <TransformWrapper
          minScale={0.1}
          centerZoomedOut={true}
          wheel={{ activationKeys: ['Control'] }}
        >
          <TransformComponent>
            <div style={{ width: size.width + 'px' }} className="max-h-screen">
              <Pattern {...{ t, components, renderProps }} ref={ref} />
            </div>
          </TransformComponent>
        </TransformWrapper>
      )}
    </SizeMe>
  )
})