{"version":3,"file":"ImageViewer.cjs","sources":["../../../src/components/FileViewer/ImageViewer.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, memo, useCallback, useEffect, useRef, useState } from 'react'\n\nimport type { ViewerProps } from './types'\n\nexport const ImageViewer: FC<ViewerProps> = memo(\n  ({ scale, rotation, file, width, onLoad, onLoadError }) => {\n    const imageRef = useRef<HTMLImageElement>(null)\n    const [viewConfig, setViewConfig] = useState({\n      wrapperWidth: 0,\n      wrapperHeight: 0,\n      imgScale: 1,\n    })\n\n    // CSSのみではscale, transformの値を親に適用してスクロールするようにできないため、計算している\n    const updateViewConfig = useCallback(() => {\n      if (!imageRef.current?.complete) {\n        return\n      }\n\n      const img = imageRef.current\n      // 与えられたwidthに対する適切なscaleを算出\n      const viewportScale = (width / img.naturalWidth) * scale\n\n      const rad = ((rotation ?? 0) * Math.PI) / 180\n      const sin = Math.abs(Math.sin(rad))\n      const cos = Math.abs(Math.cos(rad))\n\n      // imgをwidth: 100%で表示したときと同等の値を算出\n      const scaledWidth = img.naturalWidth * viewportScale\n      const scaledHeight = img.naturalHeight * viewportScale\n\n      setViewConfig({\n        wrapperWidth: scaledWidth * cos + scaledHeight * sin,\n        wrapperHeight: scaledWidth * sin + scaledHeight * cos,\n        imgScale: viewportScale,\n      })\n    }, [scale, rotation, width])\n\n    const handleLoad = useCallback(() => {\n      updateViewConfig()\n      onLoad?.()\n    }, [updateViewConfig, onLoad])\n\n    useEffect(() => {\n      updateViewConfig()\n    }, [updateViewConfig])\n\n    return (\n      <div\n        style={{\n          width: viewConfig.wrapperWidth,\n          height: viewConfig.wrapperHeight,\n        }}\n        className=\"shr-relative shr-h-full shr-w-full\"\n      >\n        {/* imgのload完了時にupdateViewConfigを呼び出さないと適切なサイズが取得できないため */}\n        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n        <img\n          className=\"shr-absolute shr-left-[50%] shr-top-[50%] shr-origin-top-left -shr-translate-x-1/2 -shr-translate-y-1/2\"\n          ref={imageRef}\n          src={file.url}\n          alt={file.alt}\n          style={{\n            rotate: `${rotation ?? 0}deg`,\n            scale: `${viewConfig.imgScale}`,\n          }}\n          onLoad={handleLoad}\n          onError={onLoadError}\n        />\n      </div>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;AAQI;AACA;AACE;AACA;AACA;AACD;;AAGD;AACE;;;AAIA;;;AAIA;AACA;AACA;;AAGA;AACA;AAEA;AACE;AACA;AACA;AACD;;AAGH;AACE;;AAEF;;AAGE;AACF;;;;;AAkBQ;AACA;;AAOV;;"}