Extract custom image thumbnail URL generation into util and respect crop

assets/js/src/core/components/image-preview/image-preview.tsx

@@ -26,6 +26,7 @@ import { Icon } from '@Pimcore/components/icon/icon'
 import { Button } from '@Pimcore/components/button/button'
 import { Tooltip } from '@Pimcore/components/tooltip/tooltip'
 import { useTranslation } from 'react-i18next'
+import { createImageThumbnailUrl, type ImageThumbnailSettings } from './utils/custom-image-thumbnail'
 
 interface ImagePreviewProps {
   src?: string
@@ -38,9 +39,10 @@ interface ImagePreviewProps {
   bordered?: boolean
   dropdownItems?: DropdownProps['menu']['items']
   onHotspotsDataButtonClick?: () => void
+  thumbnailSettings?: ImageThumbnailSettings
 }
 
-export const ImagePreview = forwardRef(function ImagePreview ({ src, assetId, assetType, width, height, className, style, dropdownItems, bordered = false, onHotspotsDataButtonClick }: ImagePreviewProps, ref: MutableRefObject<HTMLDivElement>): React.JSX.Element {
+export const ImagePreview = forwardRef(function ImagePreview ({ src, assetId, assetType, width, height, className, style, dropdownItems, bordered = false, onHotspotsDataButtonClick, thumbnailSettings }: ImagePreviewProps, ref: MutableRefObject<HTMLDivElement>): React.JSX.Element {
   const [key, setKey] = React.useState(0)
   const [thumbnailDimensions, setThumbnailDimensions] = React.useState({ width: 0, height: 0 })
   const { getStateClasses } = useDroppable()
@@ -59,7 +61,17 @@ export const ImagePreview = forwardRef(function ImagePreview ({ src, assetId, as
       return `${getPrefix()}/assets/${assetId}/video/stream/image-thumbnail?width=${width}&height=${height}&frame=true&aspectRatio=true`
     }
 
-    return `${getPrefix()}/assets/${assetId}/image/stream/custom?width=${width}&height=${height}&mimeType=JPEG&resizeMode=none&frame=true`
+    const defaultSettings: ImageThumbnailSettings = {
+      width,
+      height,
+      mimeType: 'JPEG',
+      frame: true
+    }
+
+    return createImageThumbnailUrl(assetId!, {
+      ...defaultSettings,
+      ...thumbnailSettings
+    })
   }
 
   const imageSrc = assetId !== undefined ? getAssetPreviewUrl() : src

assets/js/src/core/components/image-preview/utils/custom-image-thumbnail.ts

@@ -0,0 +1,100 @@
+/**
+* Pimcore
+*
+* This source file is available under two different licenses:
+* - Pimcore Open Core License (POCL)
+* - Pimcore Commercial License (PCL)
+* Full copyright and license information is available in
+* LICENSE.md which is distributed with this source code.
+*
+*  @copyright  Copyright (c) Pimcore GmbH (http://www.pimcore.org)
+*  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
+*/
+
+import { getPrefix } from '@Pimcore/app/api/pimcore/route'
+
+export interface ImageThumbnailSettings {
+  mimeType?: 'JPEG' | 'PNG'
+  resizeMode?: 'scaleByHeight' | 'scaleByWidth' | 'resize' | 'none'
+  width?: number
+  height?: number
+  quality?: number
+  dpi?: number
+  contain?: boolean
+  frame?: boolean
+  cover?: boolean
+  forceResize?: boolean
+  cropWidth?: number
+  cropHeight?: number
+  cropTop?: number
+  cropLeft?: number
+  cropPercent?: boolean
+}
+
+export const createImageThumbnailUrl = (assetId: number, settings: ImageThumbnailSettings): string => {
+  const {
+    mimeType,
+    resizeMode = 'none',
+    width,
+    height,
+    quality,
+    dpi,
+    contain = false,
+    frame = false,
+    cover = false,
+    forceResize = false,
+    cropWidth,
+    cropHeight,
+    cropTop,
+    cropLeft,
+    cropPercent = false
+  } = settings
+
+  const params = new URLSearchParams()
+
+  if (mimeType !== undefined) {
+    params.append('mimeType', mimeType)
+  }
+  params.append('resizeMode', resizeMode)
+  if (width !== undefined) {
+    params.append('width', width.toString())
+  }
+  if (height !== undefined) {
+    params.append('height', height.toString())
+  }
+  if (quality !== undefined) {
+    params.append('quality', quality.toString())
+  }
+  if (dpi !== undefined) {
+    params.append('dpi', dpi.toString())
+  }
+  if (contain) {
+    params.append('contain', contain.toString())
+  }
+  if (frame) {
+    params.append('frame', frame.toString())
+  }
+  if (cover) {
+    params.append('cover', cover.toString())
+  }
+  if (forceResize) {
+    params.append('forceResize', forceResize.toString())
+  }
+  if (cropPercent) {
+    params.append('cropPercent', cropPercent.toString())
+  }
+  if (cropWidth !== undefined) {
+    params.append('cropWidth', Math.round(cropWidth).toString())
+  }
+  if (cropHeight !== undefined) {
+    params.append('cropHeight', Math.round(cropHeight).toString())
+  }
+  if (cropTop !== undefined) {
+    params.append('cropTop', Math.round(cropTop).toString())
+  }
+  if (cropLeft !== undefined) {
+    params.append('cropLeft', Math.round(cropLeft).toString())
+  }
+
+  return `${getPrefix()}/assets/${assetId}/image/stream/custom?${params.toString()}`
+}

assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/hotspot-image/image-preview.tsx

@@ -71,6 +71,7 @@ export const HotspotImagePreview = forwardRef(function HotspotImagePreview (
         assetId={ assetId }
         height={ height }
         onHotspotsDataButtonClick={ hasHotspotData() ? () => { setMarkerModalOpen(true) } : undefined }
+        thumbnailSettings={ value.crop ?? undefined }
         width={ width }
       />
 

assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image-gallery/components/image-preview/image-preview.tsx

@@ -239,6 +239,7 @@ export const ImageGalleryImagePreview = ({ item, index, value, setValue, disable
           height={ 100 }
           onHotspotsDataButtonClick={ hasHotspotData(index) ? () => { setMarkerModalOpen(true) } : undefined }
           style={ { backgroundColor: '#fff' } }
+          thumbnailSettings={ item.crop ?? undefined }
           width={ 200 }
         />
       </Droppable>

assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/crop-modal.tsx

@@ -14,7 +14,6 @@
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { HotspotImage, type IHotspot } from '@Pimcore/components/hotspot-image/hotspot-image'
-import { getPrefix } from '@Pimcore/app/api/pimcore/route'
 import { Flex } from '@Pimcore/components/flex/flex'
 import { ButtonGroup } from '@Pimcore/components/button-group/button-group'
 import { IconTextButton } from '@Pimcore/components/icon-text-button/icon-text-button'
@@ -25,6 +24,7 @@ import {
 import {
   cropToHotspot, defaultCrop, hotspotToCrop
 } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/utils/crop-converter'
+import { createImageThumbnailUrl } from '@Pimcore/components/image-preview/utils/custom-image-thumbnail'
 
 export interface CropModalProps {
   crop?: CropSettings | null
@@ -71,7 +71,12 @@ export const CropModal = (props: CropModalProps): React.JSX.Element => {
     props.onClose?.()
   }
 
-  const thumbnailSrc = `${getPrefix()}/assets/${props.imageId}/image/stream/custom?width=${width}&height=${height}&mimeType=PNG&resizeMode=none&contain=true`
+  const thumbnailSrc = createImageThumbnailUrl(props.imageId, {
+    width,
+    height,
+    mimeType: 'PNG',
+    contain: true
+  })
 
   return (
     <Modal

assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/hotspot-markers-modal.tsx

@@ -15,10 +15,10 @@ import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { WindowModal } from '@Pimcore/components/modal/window-modal/window-modal'
 import { defaultStyleOptions, HotspotImage, type IHotspot } from '@Pimcore/components/hotspot-image/hotspot-image'
-import { getPrefix } from '@Pimcore/app/api/pimcore/route'
 import { Flex } from '@Pimcore/components/flex/flex'
 import { ButtonGroup } from '@Pimcore/components/button-group/button-group'
 import { IconTextButton } from '@Pimcore/components/icon-text-button/icon-text-button'
+import { createImageThumbnailUrl } from '@Pimcore/components/image-preview/utils/custom-image-thumbnail'
 
 export interface HotspotMarkersModalProps {
   hotspots?: IHotspot[] | null
@@ -87,7 +87,12 @@ export const HotspotMarkersModal = (props: HotspotMarkersModalProps): React.JSX.
     setHotspots(currentHotspots => [...currentHotspots, newHotspot])
   }
 
-  const thumbnailSrc = `${getPrefix()}/assets/${props.imageId}/image/stream/custom?width=${width}&height=${height}&mimeType=PNG&resizeMode=none&contain=true`
+  const thumbnailSrc = createImageThumbnailUrl(props.imageId, {
+    width,
+    height,
+    mimeType: 'PNG',
+    contain: true
+  })
 
   return (
     <WindowModal

assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/utils/crop-converter.ts

@@ -37,10 +37,10 @@ export const cropToHotspot = (crop?: CropSettings | null): IHotspot => {
 
 export const hotspotToCrop = (hotspot: IHotspot): CropSettings => {
   return {
-    cropWidth: hotspot.width,
-    cropHeight: hotspot.height,
-    cropLeft: hotspot.x,
-    cropTop: hotspot.y,
+    cropWidth: Math.round(hotspot.width),
+    cropHeight: Math.round(hotspot.height),
+    cropLeft: Math.round(hotspot.x),
+    cropTop: Math.round(hotspot.y),
     cropPercent: true
   }
 }

public/build/78bdf03f-b38a-4198-ad73-cc43e7880f20/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "vendor": {
+      "js": [
+        "/bundles/pimcorestudioui/build/78bdf03f-b38a-4198-ad73-cc43e7880f20/vendor.js"
+      ]
+    }
+  }
+}

public/build/78bdf03f-b38a-4198-ad73-cc43e7880f20/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/78bdf03f-b38a-4198-ad73-cc43e7880f20/vendor.js": "/bundles/pimcorestudioui/build/78bdf03f-b38a-4198-ad73-cc43e7880f20/vendor.js"
+}

public/build/99154655-2952-4348-90eb-afdd4f7b2677/entrypoints.json

@@ -0,0 +1,12 @@
+{
+  "entrypoints": {
+    "core-dll": {
+      "css": [
+        "/bundles/pimcorestudioui/build/99154655-2952-4348-90eb-afdd4f7b2677/core-dll.css"
+      ],
+      "js": [
+        "/bundles/pimcorestudioui/build/99154655-2952-4348-90eb-afdd4f7b2677/core-dll.js"
+      ]
+    }
+  }
+}