@strapi/upload 5.49.0 → 5.50.1

package/dist/admin/future/pages/Assets/components/AssetDetails/AssetCropEditor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCropEditor.mjs","sources":["../../../../../../../admin/src/future/pages/Assets/components/AssetDetails/AssetCropEditor.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useNotification } from '@strapi/admin/strapi-admin';\nimport {\n  Box,\n  Button,\n  Field,\n  Flex,\n  FocusTrap,\n  IconButton,\n  NumberInput,\n  Portal,\n  Typography,\n} from '@strapi/design-system';\nimport { ArrowsHorizontal, ArrowsVertical, Crop, Link } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled, useTheme } from 'styled-components';\n\nimport { prefixFileUrlWithBackendUrl } from '../../../../utils/files';\nimport { getTranslationKey } from '../../../../utils/translations';\n\nimport { resolveCornerResize, useCropImg } from './useCropImg';\n\nimport type {\n  AssetWithPopulatedCreatedBy,\n  FocalPoint,\n} from '../../../../../../../shared/contracts/files';\n\nconst FOCAL_DIAMETER_REM = 5.6;\nconst HANDLE_PX = 12;\n\n/* -------------------------------------------------------------------------------------------------\n * Styled\n * -----------------------------------------------------------------------------------------------*/\n\n// Full-viewport takeover with a small inset so the editor reads as a card.\nconst Overlay = styled(Flex)`\n  position: fixed;\n  z-index: 1200;\n  flex-direction: column;\n  top: ${({ theme }) => theme.spaces[1]};\n  left: ${({ theme }) => theme.spaces[1]};\n  right: ${({ theme }) => theme.spaces[1]};\n  bottom: ${({ theme }) => theme.spaces[1]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  border: 1px solid ${({ theme }) => theme.colors.neutral150};\n  background: ${({ theme }) => theme.colors.neutral0};\n`;\n\nconst HeaderBar = styled(Flex)`\n  width: 100%;\n  gap: ${({ theme }) => theme.spaces[2]};\n  padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[5]}`};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};\n  background: ${({ theme }) => theme.colors.neutral0};\n`;\n\n// Fills the remaining space between header/footer; checkerboard pattern.\nconst Body = styled(Box)`\n  width: 100%;\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  background: repeating-conic-gradient(\n      ${({ theme }) => theme.colors.neutral100} 0% 25%,\n      ${({ theme }) => theme.colors.neutral0} 0% 50%\n    )\n    50% / 20px 20px;\n`;\n\n// Wrapper sized to the image's natural aspect ratio so the <img> inside fills\n// it without letterboxing. Percentage-based positioning of the crop overlay\n// then maps directly to natural-px coordinates.\nconst CropArea = styled.div<{ $aspect?: number }>`\n  position: relative;\n  max-width: 100%;\n  max-height: 100%;\n  ${({ $aspect }) => ($aspect ? `aspect-ratio: ${$aspect};` : '')}\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    user-select: none;\n    -webkit-user-drag: none;\n  }\n`;\n\n// Crop selection rectangle, positioned by % of CropArea. Inverts the dim\n// outside via box-shadow so the focused area shows full color.\nconst CropOverlay = styled.div`\n  position: absolute;\n  border: 1px dashed ${({ theme }) => theme.colors.primary600};\n  box-shadow: 0 0 0 9999px rgba(33, 33, 52, 0.5);\n  cursor: move;\n`;\n\nconst ResizeHandle = styled.button<{ $cursor: string }>`\n  position: absolute;\n  width: ${HANDLE_PX}px;\n  height: ${HANDLE_PX}px;\n  margin: -${HANDLE_PX / 2}px;\n  padding: 0;\n  border: 1px solid ${({ theme }) => theme.colors.primary600};\n  border-radius: 2px;\n  background: ${({ theme }) => theme.colors.neutral0};\n  cursor: ${({ $cursor }) => $cursor};\n`;\n\nconst FocalPointHandle = styled.button`\n  position: absolute;\n  width: ${FOCAL_DIAMETER_REM}rem;\n  height: ${FOCAL_DIAMETER_REM}rem;\n  margin: ${-FOCAL_DIAMETER_REM / 2}rem 0 0 ${-FOCAL_DIAMETER_REM / 2}rem;\n  border-radius: 50%;\n  border: 1px solid ${({ theme }) => theme.colors.neutral800};\n  background: transparent;\n  cursor: grab;\n  padding: 0;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background: rgba(0, 0, 0, 0.16);\n    transform: translate(-50%, -50%);\n  }\n  &::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background: ${({ theme }) => theme.colors.neutral800};\n    transform: translate(-50%, -50%);\n  }\n\n  &:active {\n    cursor: grabbing;\n  }\n`;\n\nconst InfoBox = styled(Box)`\n  position: absolute;\n  right: ${({ theme }) => theme.spaces[1]};\n  bottom: ${({ theme }) => theme.spaces[1]};\n  width: 100%;\n  max-width: 32rem;\n  padding: ${({ theme }) => theme.spaces[3]};\n  border-radius: ${({ theme }) => theme.borderRadius};\n  background: ${({ theme }) =>\n    theme.colorScheme === 'dark' ? theme.colors.neutral150 : theme.colors.neutral900};\n  z-index: 20;\n`;\n\nconst FooterBar = styled(Flex)`\n  width: 100%;\n  justify-content: space-between;\n  padding: ${({ theme }) => `${theme.spaces[3]} ${theme.spaces[5]}`};\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};\n  background: ${({ theme }) => theme.colors.neutral0};\n`;\n\nconst FieldRow = styled(Field.Root)`\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst FieldNumberInput = styled(NumberInput)`\n  width: 8.4rem;\n`;\n\nconst LabelIcon = styled(Field.Label)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.6rem;\n  height: 1.6rem;\n`;\n\nconst BackgroundPreserveRatioContainer = styled(Box)`\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n\n  svg {\n    display: block;\n  }\n`;\n\nconst BackgroundPreserveRatio = () => (\n  <BackgroundPreserveRatioContainer>\n    <svg width=\"17\" height=\"49\" viewBox=\"0 0 17 49\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M0.5 0.5H8.5C12.9183 0.5 16.5 4.08172 16.5 8.5M0.5 48.5H8.5C12.9183 48.5 16.5 44.9183 16.5 40.5\"\n        stroke=\"#666687\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  </BackgroundPreserveRatioContainer>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * AssetCropEditor\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetCropEditorProps {\n  asset: AssetWithPopulatedCreatedBy;\n  isBusy?: boolean;\n  onClose: () => void;\n  onApply: (file: globalThis.File, focalPoint: FocalPoint) => void;\n  onSaveAsCopy: (file: globalThis.File, focalPoint: FocalPoint) => void;\n}\n\ntype Corner = 'tl' | 'tr' | 'bl' | 'br';\n\nexport const AssetCropEditor = ({\n  asset,\n  isBusy = false,\n  onClose,\n  onApply,\n  onSaveAsCopy,\n}: AssetCropEditorProps) => {\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  // The InfoBox is a fixed dark surface in both themes, so its text can't use a\n  // single neutral token (those invert with the scheme). Pick the scheme's white\n  // and a muted grey explicitly.\n  const theme = useTheme();\n  const isDark = theme.colorScheme === 'dark';\n  const infoTextColor = isDark ? 'neutral1000' : 'neutral0';\n  const infoMutedColor = isDark ? 'neutral600' : 'neutral200';\n  const imgRef = React.useRef<HTMLImageElement>(null);\n  const cropAreaRef = React.useRef<HTMLDivElement>(null);\n\n  const {\n    init,\n    crop,\n    naturalSize,\n    aspectRatio,\n    setCropSize,\n    setCropPosition,\n    setAspectRatio,\n    produceFile,\n    width,\n    height,\n  } = useCropImg();\n\n  const [aspectLocked, setAspectLocked] = React.useState(false);\n  // Focal point as a percentage of the crop area (matches the {x,y} contract).\n  const [focal, setFocal] = React.useState<FocalPoint>(asset.focalPoint ?? { x: 50, y: 50 });\n\n  // Append `updatedAt` as a cache-buster: a replaced asset is served at the same\n  // URL, so without this, reopening the editor shows the browser-cached old image\n  // (mirrors AssetPreview).\n  const rawImageUrl = prefixFileUrlWithBackendUrl(asset.url) as string;\n  const cacheKey = asset.updatedAt ? new Date(asset.updatedAt).getTime() : undefined;\n  const imageUrl =\n    cacheKey !== undefined\n      ? `${rawImageUrl}${rawImageUrl.includes('?') ? '&' : '?'}v=${cacheKey}`\n      : rawImageUrl;\n\n  const handleImageLoad = () => {\n    if (imgRef.current) {\n      init(imgRef.current);\n    }\n  };\n\n  // Map a pointer event to natural-px coordinates inside the image.\n  const pointerToNatural = (event: PointerEvent | React.PointerEvent) => {\n    const rect = cropAreaRef.current?.getBoundingClientRect();\n    if (!rect || !naturalSize.width || !naturalSize.height) return null;\n    const ratioX = naturalSize.width / rect.width;\n    const ratioY = naturalSize.height / rect.height;\n    return {\n      x: (event.clientX - rect.left) * ratioX,\n      y: (event.clientY - rect.top) * ratioY,\n    };\n  };\n\n  // Drag the entire crop rectangle.\n  const handleMovePointerDown = (event: React.PointerEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const start = pointerToNatural(event);\n    if (!start) return;\n    const startCrop = { ...crop };\n    const move = (e: PointerEvent) => {\n      const next = pointerToNatural(e);\n      if (!next) return;\n      setCropPosition({\n        x: startCrop.x + (next.x - start.x),\n        y: startCrop.y + (next.y - start.y),\n      });\n    };\n    const up = () => {\n      window.removeEventListener('pointermove', move);\n      window.removeEventListener('pointerup', up);\n    };\n    window.addEventListener('pointermove', move);\n    window.addEventListener('pointerup', up);\n  };\n\n  // Resize from a corner; the opposite corner stays anchored.\n  const handleResizePointerDown = (corner: Corner) => (event: React.PointerEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const startCrop = { ...crop };\n    const anchorX =\n      corner === 'tl' || corner === 'bl' ? startCrop.x + startCrop.width : startCrop.x;\n    const anchorY =\n      corner === 'tl' || corner === 'tr' ? startCrop.y + startCrop.height : startCrop.y;\n    const move = (e: PointerEvent) => {\n      const point = pointerToNatural(e);\n      if (!point) return;\n      const {\n        x,\n        y,\n        width: w,\n        height: h,\n      } = resolveCornerResize({\n        anchorX,\n        anchorY,\n        point,\n        aspectRatio: aspectLocked ? aspectRatio : null,\n      });\n      setCropPosition({ x, y });\n      setCropSize({ width: w, height: h });\n    };\n    const up = () => {\n      window.removeEventListener('pointermove', move);\n      window.removeEventListener('pointerup', up);\n    };\n    window.addEventListener('pointermove', move);\n    window.addEventListener('pointerup', up);\n  };\n\n  const toggleAspectLock = () => {\n    setAspectLocked((locked) => {\n      const next = !locked;\n      setAspectRatio(next && height ? width / height : null);\n      return next;\n    });\n  };\n\n  // Drag the focal handle within the crop rectangle, clamped 0–100.\n  const handleFocalPointerDown = (event: React.PointerEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    const move = (e: PointerEvent) => {\n      const point = pointerToNatural(e);\n      if (!point) return;\n      // Convert pointer to a percentage of the current crop area.\n      const px = ((point.x - crop.x) / crop.width) * 100;\n      const py = ((point.y - crop.y) / crop.height) * 100;\n      setFocal({\n        x: Math.round(Math.min(100, Math.max(0, px))),\n        y: Math.round(Math.min(100, Math.max(0, py))),\n      });\n    };\n    const up = () => {\n      window.removeEventListener('pointermove', move);\n      window.removeEventListener('pointerup', up);\n    };\n    window.addEventListener('pointermove', move);\n    window.addEventListener('pointerup', up);\n  };\n\n  const focalPxX = Math.round((focal.x / 100) * width);\n  const focalPxY = Math.round((focal.y / 100) * height);\n\n  const setFocalPx = (axis: 'x' | 'y', value: number) => {\n    const dim = axis === 'x' ? width : height;\n    if (!dim) return;\n    const pct = Math.min(100, Math.max(0, (value / dim) * 100));\n    setFocal((prev) => ({ ...prev, [axis]: Math.round(pct) }));\n  };\n\n  const cropPercents =\n    naturalSize.width && naturalSize.height\n      ? {\n          left: (crop.x / naturalSize.width) * 100,\n          top: (crop.y / naturalSize.height) * 100,\n          width: (crop.width / naturalSize.width) * 100,\n          height: (crop.height / naturalSize.height) * 100,\n        }\n      : null;\n\n  // The crop is only usable once the image has loaded and `init()` has seeded\n  // the natural size. Until then the produce/export path would reject.\n  const isReady = cropPercents !== null;\n\n  const handleAction = async (action: 'apply' | 'copy') => {\n    if (!isReady) return;\n\n    let file: globalThis.File;\n    try {\n      file = await produceFile(asset.name, asset.mime ?? 'image/png', asset.updatedAt);\n    } catch {\n      toggleNotification({\n        type: 'danger',\n        message: formatMessage({\n          id: getTranslationKey('asset-details.crop.export-error'),\n          defaultMessage: 'Could not process the cropped image.',\n        }),\n      });\n      return;\n    }\n\n    const roundedFocal = { x: Math.round(focal.x), y: Math.round(focal.y) };\n    if (action === 'apply') {\n      onApply(file, roundedFocal);\n    } else {\n      onSaveAsCopy(file, roundedFocal);\n    }\n  };\n\n  return (\n    <Portal>\n      <FocusTrap onEscape={onClose}>\n        <Overlay>\n          <HeaderBar alignItems=\"center\">\n            <Crop aria-hidden />\n            <Typography variant=\"omega\" fontWeight=\"bold\">\n              {formatMessage({\n                id: getTranslationKey('asset-details.crop.title'),\n                defaultMessage: 'Crop & Focus area',\n              })}\n            </Typography>\n          </HeaderBar>\n\n          <Body>\n            <CropArea\n              ref={cropAreaRef}\n              $aspect={\n                naturalSize.width && naturalSize.height\n                  ? naturalSize.width / naturalSize.height\n                  : undefined\n              }\n            >\n              <img\n                ref={imgRef}\n                src={imageUrl}\n                alt={asset.name}\n                crossOrigin=\"anonymous\"\n                onLoad={handleImageLoad}\n                draggable={false}\n              />\n\n              {cropPercents ? (\n                <CropOverlay\n                  style={{\n                    left: `${cropPercents.left}%`,\n                    top: `${cropPercents.top}%`,\n                    width: `${cropPercents.width}%`,\n                    height: `${cropPercents.height}%`,\n                  }}\n                  onPointerDown={handleMovePointerDown}\n                >\n                  <ResizeHandle\n                    type=\"button\"\n                    aria-label={formatMessage({\n                      id: getTranslationKey('asset-details.crop.resize.top-left'),\n                      defaultMessage: 'Resize top-left',\n                    })}\n                    $cursor=\"nwse-resize\"\n                    style={{ left: 0, top: 0 }}\n                    onPointerDown={handleResizePointerDown('tl')}\n                  />\n                  <ResizeHandle\n                    type=\"button\"\n                    aria-label={formatMessage({\n                      id: getTranslationKey('asset-details.crop.resize.top-right'),\n                      defaultMessage: 'Resize top-right',\n                    })}\n                    $cursor=\"nesw-resize\"\n                    style={{ right: 0, top: 0 }}\n                    onPointerDown={handleResizePointerDown('tr')}\n                  />\n                  <ResizeHandle\n                    type=\"button\"\n                    aria-label={formatMessage({\n                      id: getTranslationKey('asset-details.crop.resize.bottom-left'),\n                      defaultMessage: 'Resize bottom-left',\n                    })}\n                    $cursor=\"nesw-resize\"\n                    style={{ left: 0, bottom: 0 }}\n                    onPointerDown={handleResizePointerDown('bl')}\n                  />\n                  <ResizeHandle\n                    type=\"button\"\n                    aria-label={formatMessage({\n                      id: getTranslationKey('asset-details.crop.resize.bottom-right'),\n                      defaultMessage: 'Resize bottom-right',\n                    })}\n                    $cursor=\"nwse-resize\"\n                    style={{ right: 0, bottom: 0 }}\n                    onPointerDown={handleResizePointerDown('br')}\n                  />\n\n                  <FocalPointHandle\n                    type=\"button\"\n                    aria-label={formatMessage({\n                      id: getTranslationKey('asset-details.crop.focal-point'),\n                      defaultMessage: 'Focal point',\n                    })}\n                    style={{ left: `${focal.x}%`, top: `${focal.y}%` }}\n                    onPointerDown={handleFocalPointerDown}\n                  />\n                </CropOverlay>\n              ) : null}\n            </CropArea>\n\n            <InfoBox>\n              <Flex direction=\"column\" alignItems=\"stretch\" gap={1} paddingBottom={3}>\n                <Typography variant=\"omega\" fontWeight=\"bold\" textColor={infoTextColor}>\n                  {formatMessage({\n                    id: getTranslationKey('asset-details.crop.title'),\n                    defaultMessage: 'Crop & Focus area',\n                  })}\n                </Typography>\n                <Typography variant=\"pi\" textColor={infoMutedColor}>\n                  {formatMessage({\n                    id: getTranslationKey('asset-details.crop.hint'),\n                    defaultMessage:\n                      'Set the crop area with the rectangle. Pin the always-visible area with the circle.',\n                  })}\n                </Typography>\n              </Flex>\n\n              <Flex gap={6} alignItems=\"center\">\n                <Flex alignItems=\"center\" gap={2}>\n                  <Flex direction=\"column\" gap={2}>\n                    <FieldRow name=\"crop-width\" gap={2}>\n                      <LabelIcon textColor={infoTextColor}>\n                        <ArrowsHorizontal />\n                      </LabelIcon>\n                      <FieldNumberInput\n                        aria-label={formatMessage({\n                          id: getTranslationKey('asset-details.crop.width'),\n                          defaultMessage: 'Width (px)',\n                        })}\n                        value={width}\n                        min={1}\n                        max={naturalSize.width || undefined}\n                        onValueChange={(next) => {\n                          if (next !== undefined) setCropSize({ width: next });\n                        }}\n                      />\n                    </FieldRow>\n                    <FieldRow name=\"crop-height\" gap={2}>\n                      <LabelIcon textColor={infoTextColor}>\n                        <ArrowsVertical />\n                      </LabelIcon>\n                      <FieldNumberInput\n                        aria-label={formatMessage({\n                          id: getTranslationKey('asset-details.crop.height'),\n                          defaultMessage: 'Height (px)',\n                        })}\n                        value={height}\n                        min={1}\n                        max={naturalSize.height || undefined}\n                        onValueChange={(next) => {\n                          if (next !== undefined) setCropSize({ height: next });\n                        }}\n                      />\n                    </FieldRow>\n                  </Flex>\n\n                  <Flex position=\"relative\">\n                    <IconButton\n                      label={formatMessage({\n                        id: getTranslationKey('asset-details.crop.aspect-lock'),\n                        defaultMessage: 'Lock aspect ratio',\n                      })}\n                      variant={aspectLocked ? 'secondary' : 'ghost'}\n                      onClick={toggleAspectLock}\n                    >\n                      <Link />\n                    </IconButton>\n                    <BackgroundPreserveRatio />\n                  </Flex>\n                </Flex>\n\n                <Flex direction=\"column\" gap={2} marginLeft={'auto'}>\n                  <FieldRow name=\"focal-x\" gap={2}>\n                    <Field.Label textColor={infoTextColor}>\n                      {formatMessage({\n                        id: getTranslationKey('asset-details.crop.focal-x-axis'),\n                        defaultMessage: 'X',\n                      })}\n                    </Field.Label>\n                    <FieldNumberInput\n                      aria-label={formatMessage({\n                        id: getTranslationKey('asset-details.crop.focal-x'),\n                        defaultMessage: 'Focal point X (px)',\n                      })}\n                      value={focalPxX}\n                      onValueChange={(next) => {\n                        if (next !== undefined) setFocalPx('x', next);\n                      }}\n                    />\n                  </FieldRow>\n                  <FieldRow name=\"focal-y\" gap={2}>\n                    <Field.Label textColor={infoTextColor}>\n                      {formatMessage({\n                        id: getTranslationKey('asset-details.crop.focal-y-axis'),\n                        defaultMessage: 'Y',\n                      })}\n                    </Field.Label>\n                    <FieldNumberInput\n                      aria-label={formatMessage({\n                        id: getTranslationKey('asset-details.crop.focal-y'),\n                        defaultMessage: 'Focal point Y (px)',\n                      })}\n                      value={focalPxY}\n                      onValueChange={(next) => {\n                        if (next !== undefined) setFocalPx('y', next);\n                      }}\n                    />\n                  </FieldRow>\n                </Flex>\n              </Flex>\n            </InfoBox>\n          </Body>\n\n          <FooterBar alignItems=\"center\">\n            <Button variant=\"tertiary\" onClick={onClose} disabled={isBusy}>\n              {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}\n            </Button>\n            <Flex gap={2}>\n              <Button\n                variant=\"secondary\"\n                onClick={() => handleAction('copy')}\n                loading={isBusy}\n                disabled={!isReady}\n              >\n                {formatMessage({\n                  id: getTranslationKey('asset-details.crop.save-as-copy'),\n                  defaultMessage: 'Save as copy',\n                })}\n              </Button>\n              <Button\n                variant=\"default\"\n                onClick={() => handleAction('apply')}\n                loading={isBusy}\n                disabled={!isReady}\n              >\n                {formatMessage({\n                  id: getTranslationKey('asset-details.crop.apply'),\n                  defaultMessage: 'Apply',\n                })}\n              </Button>\n            </Flex>\n          </FooterBar>\n        </Overlay>\n      </FocusTrap>\n    </Portal>\n  );\n};\n"],"names":["FOCAL_DIAMETER_REM","HANDLE_PX","Overlay","styled","Flex","theme","spaces","borderRadius","colors","neutral150","neutral0","HeaderBar","Body","Box","neutral100","CropArea","div","$aspect","CropOverlay","primary600","ResizeHandle","button","$cursor","FocalPointHandle","neutral800","InfoBox","colorScheme","neutral900","FooterBar","FieldRow","Field","Root","FieldNumberInput","NumberInput","LabelIcon","Label","BackgroundPreserveRatioContainer","BackgroundPreserveRatio","_jsx","svg","width","height","viewBox","fill","xmlns","path","d","stroke","strokeLinecap","AssetCropEditor","asset","isBusy","onClose","onApply","onSaveAsCopy","formatMessage","useIntl","toggleNotification","useNotification","useTheme","isDark","infoTextColor","infoMutedColor","imgRef","React","useRef","cropAreaRef","init","crop","naturalSize","aspectRatio","setCropSize","setCropPosition","setAspectRatio","produceFile","useCropImg","aspectLocked","setAspectLocked","useState","focal","setFocal","focalPoint","x","y","rawImageUrl","prefixFileUrlWithBackendUrl","url","cacheKey","updatedAt","Date","getTime","undefined","imageUrl","includes","handleImageLoad","current","pointerToNatural","event","rect","getBoundingClientRect","ratioX","ratioY","clientX","left","clientY","top","handleMovePointerDown","preventDefault","stopPropagation","start","startCrop","move","e","next","up","window","removeEventListener","addEventListener","handleResizePointerDown","corner","anchorX","anchorY","point","w","h","resolveCornerResize","toggleAspectLock","locked","handleFocalPointerDown","px","py","Math","round","min","max","focalPxX","focalPxY","setFocalPx","axis","value","dim","pct","prev","cropPercents","isReady","handleAction","action","file","name","mime","type","message","id","getTranslationKey","defaultMessage","roundedFocal","Portal","FocusTrap","onEscape","_jsxs","alignItems","Crop","aria-hidden","Typography","variant","fontWeight","ref","img","src","alt","crossOrigin","onLoad","draggable","style","onPointerDown","aria-label","right","bottom","direction","gap","paddingBottom","textColor","ArrowsHorizontal","onValueChange","ArrowsVertical","position","IconButton","label","onClick","Link","marginLeft","Button","disabled","loading"],"mappings":"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"}

package/dist/admin/future/pages/Assets/components/AssetDetails/AssetDetailsDrawer.js

@@ -7,8 +7,9 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
+var enums = require('../../../../../enums.js');
 var Drawer = require('../../../../components/Drawer.js');
-var enums = require('../../../../enums.js');
+var api = require('../../../../services/api.js');
 var assets = require('../../../../services/assets.js');
 var folders = require('../../../../services/folders.js');
 var settings = require('../../../../services/settings.js');
@@ -17,6 +18,7 @@ var files = require('../../../../utils/files.js');
 var getAssetIcon = require('../../../../utils/getAssetIcon.js');
 var translations = require('../../../../utils/translations.js');
 var useFolderInfo = require('../../hooks/useFolderInfo.js');
+var AssetCropEditor = require('./AssetCropEditor.js');
 var AssetPreview = require('./AssetPreview.js');
 
 function _interopNamespace(e) {
@@ -179,6 +181,30 @@ const DetailItem = ({ label, value })=>/*#__PURE__*/ jsxRuntime.jsxs(DetailItemC
   background: ${({ theme })=>theme.colors.neutral0};
   opacity: 0.7;
 `;
+/**
+ * Map the drawer-scoped mutation flags to a single i18n message for the busy
+ * overlay loader. Returns `null` when nothing is in flight.
+ */ const getBusyMessage = (state)=>{
+    if (state.isDeleting) {
+        return {
+            id: translations.getTranslationKey('asset-details.delete.loading'),
+            defaultMessage: 'Deleting the file…'
+        };
+    }
+    if (state.isCropCopying) {
+        return {
+            id: translations.getTranslationKey('asset-details.crop.loading'),
+            defaultMessage: 'Saving the cropped copy…'
+        };
+    }
+    if (state.isReplacing) {
+        return {
+            id: translations.getTranslationKey('asset-details.replace.loading'),
+            defaultMessage: 'Replacing the file…'
+        };
+    }
+    return null;
+};
 const StyledWarning = styledComponents.styled(icons.WarningCircle)`
   width: 1.6rem;
   height: 1.6rem;
@@ -510,6 +536,28 @@ const DownloadAssetButton = ({ asset })=>{
         ]
     });
 };
+const AssetImageActions = ({ onCrop })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const isSubmitting = strapiAdmin.useForm('AssetImageActions', (state)=>state.isSubmitting);
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        direction: "column",
+        gap: 2,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                withTooltip: false,
+                label: formatMessage({
+                    id: translations.getTranslationKey('asset-details.crop.trigger'),
+                    defaultMessage: 'Crop'
+                }),
+                variant: "tertiary",
+                onClick: onCrop,
+                disabled: isSubmitting || !onCrop,
+                children: /*#__PURE__*/ jsxRuntime.jsx(icons.Crop, {})
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(ReplaceAssetButton, {})
+        ]
+    });
+};
 const AssetDetails = ({ asset, closeDetails })=>{
     const { formatMessage, formatDate } = reactIntl.useIntl();
     const { data: folders$1 = [] } = folders.useGetAllFoldersQuery();
@@ -517,6 +565,8 @@ const AssetDetails = ({ asset, closeDetails })=>{
     const [updateAsset] = assets.useUpdateAssetMutation();
     const [replaceMutation, { isLoading: isReplacing }] = assets.useReplaceAssetMutation();
     const [deleteMutation, { isLoading: isDeleting }] = assets.useDeleteAssetMutation();
+    const [uploadCroppedCopy, { isLoading: isCropCopying }] = api.useUploadFileSilentlyMutation();
+    const [isCropOpen, setIsCropOpen] = React__namespace.useState(false);
     // In-drawer toast slot
     const [drawerToast, setDrawerToast] = React__namespace.useState(null);
     React__namespace.useEffect(()=>{
@@ -529,7 +579,7 @@ const AssetDetails = ({ asset, closeDetails })=>{
     // Local alias matching the DrawerNotifyContext signature, so the drawer's
     // own handlers (replace, update) read like the consumers do.
     const notify = React__namespace.useCallback((toast)=>setDrawerToast(toast), []);
-    const isImage = asset.mime?.includes(enums.AssetType.Image);
+    const isImage = asset.mime?.includes(enums.ASSET_TYPES.Image);
     const initialValues = {
         name: asset.name ?? '',
         caption: asset.caption ?? '',
@@ -537,14 +587,15 @@ const AssetDetails = ({ asset, closeDetails })=>{
         folder: typeof asset.folder === 'object' && asset.folder !== null ? asset.folder.id ?? null : asset.folder ?? null
     };
     const handleSubmit = async (values)=>{
+        const fileInfo = {
+            name: values.name,
+            caption: values.caption,
+            alternativeText: values.alternativeText,
+            folder: values.folder
+        };
         const res = await updateAsset({
             id: asset.id,
-            fileInfo: {
-                name: values.name,
-                caption: values.caption,
-                alternativeText: values.alternativeText,
-                folder: values.folder
-            }
+            fileInfo
         });
         if ('error' in res) {
             notify({
@@ -618,6 +669,66 @@ const AssetDetails = ({ asset, closeDetails })=>{
         });
         closeDetails();
     };
+    const notifyCropError = ()=>{
+        notify({
+            type: 'danger',
+            message: formatMessage({
+                id: translations.getTranslationKey('asset-details.crop.error'),
+                defaultMessage: 'Failed to crop the file.'
+            })
+        });
+    };
+    // Apply: replace the original binary with the cropped file + focal point.
+    // Close the editor first so the drawer's busy overlay is visible while the
+    // mutation runs (the editor renders in a Portal above the drawer).
+    const handleCropApply = async (file, focalPoint)=>{
+        setIsCropOpen(false);
+        const res = await replaceMutation({
+            id: asset.id,
+            file,
+            fileInfo: {
+                focalPoint
+            }
+        });
+        if ('error' in res) {
+            notifyCropError();
+            return;
+        }
+        notify({
+            type: 'success',
+            message: formatMessage({
+                id: translations.getTranslationKey('asset-details.crop.success'),
+                defaultMessage: 'File cropped.'
+            })
+        });
+    };
+    // Save as copy: upload the cropped file as a new asset in the same folder.
+    const handleCropSaveAsCopy = async (file, focalPoint)=>{
+        setIsCropOpen(false);
+        // Silent single-file upload (no global progress dialog). Carry over the
+        // source asset's caption/alt so the copy keeps its metadata.
+        const res = await uploadCroppedCopy({
+            file,
+            fileInfo: {
+                name: asset.name,
+                caption: asset.caption ?? '',
+                alternativeText: asset.alternativeText ?? '',
+                folder: initialValues.folder,
+                focalPoint
+            }
+        });
+        if ('error' in res) {
+            notifyCropError();
+            return;
+        }
+        notify({
+            type: 'success',
+            message: formatMessage({
+                id: translations.getTranslationKey('asset-details.crop.copy-success'),
+                defaultMessage: 'Copy created.'
+            })
+        });
+    };
     const operations = React__namespace.useMemo(()=>({
             replaceAsset: handleReplace,
             deleteAsset: handleDelete,
@@ -643,17 +754,25 @@ const AssetDetails = ({ asset, closeDetails })=>{
                     onSubmit: handleSubmit,
                     children: ({ modified, isSubmitting, values, resetForm })=>{
                         const nameIsEmpty = (values.name ?? '').trim() === '';
+                        const busyMessage = getBusyMessage({
+                            isDeleting,
+                            isReplacing,
+                            isCropCopying
+                        });
                         return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                             children: [
                                 /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Blocker, {
                                     onProceed: resetForm
                                 }),
-                                isReplacing || isDeleting ? /*#__PURE__*/ jsxRuntime.jsx(DrawerBusyOverlay, {
+                                isCropOpen && isImage ? /*#__PURE__*/ jsxRuntime.jsx(AssetCropEditor.AssetCropEditor, {
+                                    asset: asset,
+                                    onClose: ()=>setIsCropOpen(false),
+                                    onApply: handleCropApply,
+                                    onSaveAsCopy: handleCropSaveAsCopy
+                                }) : null,
+                                busyMessage ? /*#__PURE__*/ jsxRuntime.jsx(DrawerBusyOverlay, {
                                     children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
-                                        children: formatMessage({
-                                            id: translations.getTranslationKey(isDeleting ? 'asset-details.delete.loading' : 'asset-details.replace.loading'),
-                                            defaultMessage: isDeleting ? 'Deleting the file…' : 'Replacing the file…'
-                                        })
+                                        children: formatMessage(busyMessage)
                                     })
                                 }) : null,
                                 drawerToast ? /*#__PURE__*/ jsxRuntime.jsx(DrawerToastSlot, {
@@ -671,10 +790,8 @@ const AssetDetails = ({ asset, closeDetails })=>{
                                     children: [
                                         /*#__PURE__*/ jsxRuntime.jsx(AssetPreview.AssetPreview, {
                                             asset: asset,
-                                            actions: isImage ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                                                direction: "column",
-                                                gap: 2,
-                                                children: /*#__PURE__*/ jsxRuntime.jsx(ReplaceAssetButton, {})
+                                            actions: isImage ? /*#__PURE__*/ jsxRuntime.jsx(AssetImageActions, {
+                                                onCrop: ()=>setIsCropOpen(true)
                                             }) : null
                                         }),
                                         /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {