{"version":3,"file":"ImageCrop-BBTc6ELH.js","sources":["../../src/components/MediaWrappers/ImageCrop.tsx"],"sourcesContent":["import { Stack } from '@mantine/core'\nimport { useEffect, useMemo, useState } from 'react'\n\nimport Loading from '../Loading'\nimport ImageWrapper from './ImageWrapper'\n\nexport interface CropInfo {\n  x: number\n  y: number\n  width: number\n  height: number\n  rotate: number\n  scaleX: number\n  scaleY: number\n}\n\ninterface ImageCropProps {\n  imageUrl: string\n  data?: CropInfo\n  parentRef?: React.RefObject<HTMLDivElement>\n  width?: number\n  height?: number\n  onClick?: () => void\n}\n\nexport const ImageCrop: React.FC<ImageCropProps> = ({\n  imageUrl,\n  parentRef,\n  data,\n  width = 290,\n  height = 290,\n  onClick = () => {},\n}) => {\n  const [parentWidth, setParentWidth] = useState(width)\n  const [parentHeight, setParentHeight] = useState(height)\n\n  useEffect(() => {\n    const handleWindowResize = () => {\n      setParentWidth(parentRef?.current?.clientWidth || width)\n      setParentHeight(parentRef?.current?.clientWidth || height)\n    }\n    handleWindowResize()\n\n    window.addEventListener('resize', handleWindowResize)\n\n    return () => {\n      window.removeEventListener('resize', handleWindowResize)\n    }\n  }, [])\n\n  const containerStyle = {\n    width: `${parentWidth}px`,\n    height: `${parentHeight}px`,\n    overflow: 'hidden',\n    position: 'relative' as 'relative',\n    borderRadius: '6px',\n  }\n  const imageStyle = useMemo(() => {\n    if (!data) {\n      return {\n        width: `${parentWidth}px`,\n        height: `${parentHeight}px`,\n      }\n    }\n    const scaleFactor =\n      data.width && data.height ? Math.min(parentWidth / data.width, parentHeight / data.height) : 1\n    const scaledWidth = data.width * scaleFactor\n    const scaledHeight = data.height * scaleFactor\n\n    return {\n      position: 'absolute' as 'absolute',\n      left: `-${(scaledWidth - parentWidth) / 2 + data.x * scaleFactor}px`,\n      top: `-${(scaledHeight - parentHeight) / 2 + data.y * scaleFactor}px`,\n      transform: `rotate(${data.rotate}deg) scaleX(${data.scaleX}) scaleY(${data.scaleY}) scale(${scaleFactor})`,\n      transformOrigin: 'top left',\n    }\n  }, [data, parentWidth, parentHeight])\n\n  return (\n    <Stack style={containerStyle} onClick={onClick}>\n      {/* TODO: looks like imageUrl cannot be undefined or can it (param)? */}\n      {!imageUrl ? (\n        <Loading style={imageStyle} />\n      ) : (\n        <ImageWrapper\n          src={imageUrl}\n          alt=\"Cropped\"\n          style={imageStyle}\n          width={parentWidth}\n          height={parentHeight}\n        />\n      )}\n    </Stack>\n  )\n}\n"],"names":["ImageCrop","imageUrl","parentRef","data","width","height","onClick","parentWidth","setParentWidth","useState","parentHeight","setParentHeight","useEffect","handleWindowResize","_a","_b","containerStyle","imageStyle","useMemo","scaleFactor","scaledWidth","scaledHeight","jsx","Stack","ImageWrapper","Loading"],"mappings":"qaAyBO,MAAMA,EAAsC,CAAC,CAClD,SAAAC,EACA,UAAAC,EACA,KAAAC,EACA,MAAAC,EAAQ,IACR,OAAAC,EAAS,IACT,QAAAC,EAAU,IAAM,CAAC,CACnB,IAAM,CACJ,KAAM,CAACC,EAAaC,CAAc,EAAIC,WAASL,CAAK,EAC9C,CAACM,EAAcC,CAAe,EAAIF,WAASJ,CAAM,EAEvDO,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAqB,IAAM,SAChBL,IAAAM,EAAAZ,GAAA,YAAAA,EAAW,UAAX,YAAAY,EAAoB,cAAeV,CAAK,EACvCO,IAAAI,EAAAb,GAAA,YAAAA,EAAW,UAAX,YAAAa,EAAoB,cAAeV,CAAM,CAAA,EAExC,OAAAQ,IAEZ,OAAA,iBAAiB,SAAUA,CAAkB,EAE7C,IAAM,CACJ,OAAA,oBAAoB,SAAUA,CAAkB,CAAA,CAE3D,EAAG,CAAE,CAAA,EAEL,MAAMG,EAAiB,CACrB,MAAO,GAAGT,CAAW,KACrB,OAAQ,GAAGG,CAAY,KACvB,SAAU,SACV,SAAU,WACV,aAAc,KAAA,EAEVO,EAAaC,EAAAA,QAAQ,IAAM,CAC/B,GAAI,CAACf,EACI,MAAA,CACL,MAAO,GAAGI,CAAW,KACrB,OAAQ,GAAGG,CAAY,IAAA,EAG3B,MAAMS,EACJhB,EAAK,OAASA,EAAK,OAAS,KAAK,IAAII,EAAcJ,EAAK,MAAOO,EAAeP,EAAK,MAAM,EAAI,EACzFiB,EAAcjB,EAAK,MAAQgB,EAC3BE,EAAelB,EAAK,OAASgB,EAE5B,MAAA,CACL,SAAU,WACV,KAAM,KAAKC,EAAcb,GAAe,EAAIJ,EAAK,EAAIgB,CAAW,KAChE,IAAK,KAAKE,EAAeX,GAAgB,EAAIP,EAAK,EAAIgB,CAAW,KACjE,UAAW,UAAUhB,EAAK,MAAM,eAAeA,EAAK,MAAM,YAAYA,EAAK,MAAM,WAAWgB,CAAW,IACvG,gBAAiB,UAAA,CAElB,EAAA,CAAChB,EAAMI,EAAaG,CAAY,CAAC,EAGlC,OAAAY,EAAAA,IAACC,EAAM,CAAA,MAAOP,EAAgB,QAAAV,EAE3B,SAACL,EAGAqB,EAAA,IAACE,EAAA,CACC,IAAKvB,EACL,IAAI,UACJ,MAAOgB,EACP,MAAOV,EACP,OAAQG,CAAA,CAGd,EAVKY,EAAAA,IAAAG,EAAA,CAAQ,MAAOR,CAAA,CAAY,CAUhC,CAAA,CAEJ"}