From a60ac3a10b9997f7b04de998406987c543c93cb5 Mon Sep 17 00:00:00 2001
From: markus-moser <markus.moser@pimcore.com>
Date: Fri, 17 Jan 2025 12:10:42 +0100
Subject: [PATCH 1/2] Add image crop to gallery

---
 .../hotspot-image/hotspot-image.tsx           |  22 +-
 .../components/hotspot-image/utils/drag.ts    |   1 +
 .../image-preview/image-preview.tsx           | 278 ++++++++++--------
 .../sortable-item/sortable-item.tsx           |  11 -
 .../image-gallery/image-gallery.tsx           |   4 +
 .../helpers/hotspot-image/crop-modal.tsx      | 124 ++++++++
 .../hotspot-image/hotspot-markers-modal.tsx   |   1 +
 .../helpers/hotspot-image/types/crop-types.ts |   7 +
 .../hotspot-image/types/hotspot-types.ts      |   6 +-
 .../hotspot-image/utils/crop-converter.ts     |  55 ++++
 translations/studio.en.yaml                   |   2 +
 11 files changed, 366 insertions(+), 145 deletions(-)
 create mode 100644 assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/crop-modal.tsx
 create mode 100644 assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/crop-types.ts
 create mode 100644 assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/utils/crop-converter.ts

diff --git a/assets/js/src/core/components/hotspot-image/hotspot-image.tsx b/assets/js/src/core/components/hotspot-image/hotspot-image.tsx
index 3fbeb6125..cdcabb91c 100644
--- a/assets/js/src/core/components/hotspot-image/hotspot-image.tsx
+++ b/assets/js/src/core/components/hotspot-image/hotspot-image.tsx
@@ -71,13 +71,14 @@ interface IHotspotImage {
   src: string
   styleOptions?: IStyleOptions
   data?: IHotspot[]
-  onRemove: (id: number) => void
+  onRemove?: (id: number) => void
   onEdit?: (id: number) => void
   onClone?: (id: number) => void
-  onUpdate: (item: IHotspot) => void
+  onUpdate?: (item: IHotspot) => void
+  disableContextMenu?: boolean
 }
 
-export const HotspotImage = ({ src, data, styleOptions = defaultStyleOptions, onRemove, onEdit, onClone, onUpdate }: IHotspotImage): JSX.Element => {
+export const HotspotImage = ({ src, data, styleOptions = defaultStyleOptions, onRemove, onEdit, onClone, onUpdate, disableContextMenu }: IHotspotImage): JSX.Element => {
   const { styles } = useStyle()
   const [imageLoaded, setImageLoaded] = useState<boolean>(false)
   const imageRef = useRef<HTMLImageElement | null>(null)
@@ -129,6 +130,11 @@ export const HotspotImage = ({ src, data, styleOptions = defaultStyleOptions, on
     evt.stopPropagation()
   }
 
+  const toNumber = (value: any): number => {
+    const number = Number(value)
+    return isNaN(number) ? 0 : number
+  }
+
   const handleMouseMove = (evt: MouseEvent): void => {
     if (selectedId === null || containerRef.current === null) return
     const containerBounds = containerRef.current.getBoundingClientRect()
@@ -137,9 +143,9 @@ export const HotspotImage = ({ src, data, styleOptions = defaultStyleOptions, on
     const dy = evt.clientY - resizeStart.y
 
     if (dragging) {
-      setItems(dragItem(evt, dragStart, containerBounds, items, hotspotIndex, Number(styleOptions[items[hotspotIndex].type].marginLeft), Number(styleOptions[items[hotspotIndex].type].marginTop)))
+      setItems(dragItem(evt, dragStart, containerBounds, items, hotspotIndex, toNumber(styleOptions[items[hotspotIndex].type].marginLeft), toNumber(styleOptions[items[hotspotIndex].type].marginTop)))
     } else if (resizeDirection !== null) {
-      setItems(resizeItem(evt, resizeStart, resizeDirection, containerBounds, items, hotspotIndex, Number(styleOptions[items[hotspotIndex].type].minSize), dx, dy))
+      setItems(resizeItem(evt, resizeStart, resizeDirection, containerBounds, items, hotspotIndex, toNumber(styleOptions[items[hotspotIndex].type].minSize), dx, dy))
     }
   }
 
@@ -149,7 +155,7 @@ export const HotspotImage = ({ src, data, styleOptions = defaultStyleOptions, on
 
     const updatedItem = items.find(h => h.id === selectedId)
     if (updatedItem !== undefined) {
-      onUpdate(updatedItem)
+      onUpdate?.(updatedItem)
     }
   }
 
@@ -192,7 +198,7 @@ export const HotspotImage = ({ src, data, styleOptions = defaultStyleOptions, on
                 <Tooltip title={ t('remove') }>
                   <IconButton
                     icon={ { value: 'trash' } }
-                    onClick={ () => { onRemove(hotspot.id) } }
+                    onClick={ () => { onRemove?.(hotspot.id) } }
                     type={ 'link' }
                   />
                 </Tooltip>
@@ -215,7 +221,7 @@ export const HotspotImage = ({ src, data, styleOptions = defaultStyleOptions, on
             onOpenChange={ (open) => { setPopoverOpen(open) } }
             open={ popoverOpen && selectedId === hotspot.id }
             overlayClassName={ [styles.Popover].join(' ') }
-            trigger={ ['contextMenu'] }
+            trigger={ disableContextMenu === true ? [] : ['contextMenu'] }
           >
             <button
               className={ `hotspot-image__item ${hotspot.type === 'marker' ? 'hotspot-image__item--marker' : ''}` }
diff --git a/assets/js/src/core/components/hotspot-image/utils/drag.ts b/assets/js/src/core/components/hotspot-image/utils/drag.ts
index 24363da3a..08ab3403e 100644
--- a/assets/js/src/core/components/hotspot-image/utils/drag.ts
+++ b/assets/js/src/core/components/hotspot-image/utils/drag.ts
@@ -28,6 +28,7 @@ export const dragItem = (
   marginLeft: number,
   marginTop: number
 ): IHotspot[] => {
+  console.log('margins', marginLeft, marginTop)
   const hotspot = convertHotspotToPixel(hotspots[hotspotIndex], containerBounds)
   const newX = Math.min(containerBounds.width - hotspot.width, Math.max(0, evt.clientX - containerBounds.left - dragStart.x)) - marginLeft
   const newY = Math.min(containerBounds.height - hotspot.height, Math.max(0, evt.clientY - containerBounds.top - dragStart.y)) - marginTop
diff --git a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image-gallery/components/image-preview/image-preview.tsx b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image-gallery/components/image-preview/image-preview.tsx
index 232ae70cc..50903f225 100644
--- a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image-gallery/components/image-preview/image-preview.tsx
+++ b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image-gallery/components/image-preview/image-preview.tsx
@@ -24,9 +24,6 @@ import {
   fromIHotspots,
   toIHotspots
 } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/utils/hotspot-converter'
-import {
-  type Hotspot, type Marker
-} from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/hotspot-types'
 import { type IHotspot } from '@Pimcore/components/hotspot-image/hotspot-image'
 import {
   type HotspotMarkersModalContainerRef
@@ -37,6 +34,12 @@ import {
 } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/components/image/image'
 import _ from 'lodash'
 import { useFormModal } from '@Pimcore/components/modal/form-modal/hooks/use-form-modal'
+import {
+  CropModal
+} from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/crop-modal'
+import {
+  type CropSettings
+} from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/crop-types'
 
 interface ImageGalleryImagePreviewProps {
   item: ImageGalleryValueItem
@@ -44,14 +47,14 @@ interface ImageGalleryImagePreviewProps {
   value: ImageGalleryValueItem[]
   setValue: React.Dispatch<React.SetStateAction<ImageGalleryValueItem[]>>
   disabled?: boolean
-  onHotspotsChange?: (hotspots: Hotspot[], marker: Marker[]) => void
   hotspotMarkersModalContainer: React.RefObject<HotspotMarkersModalContainerRef>
 }
 
-export const ImageGalleryImagePreview = ({ item, index, value, setValue, disabled, onHotspotsChange, hotspotMarkersModalContainer }: ImageGalleryImagePreviewProps): React.JSX.Element => {
+export const ImageGalleryImagePreview = ({ item, index, value, setValue, disabled, hotspotMarkersModalContainer }: ImageGalleryImagePreviewProps): React.JSX.Element => {
   const { t } = useTranslation()
   const { openAsset } = useAssetHelper()
   const [markerModalOpen, setMarkerModalOpen] = useState(false)
+  const [cropModalOpen, setCropModalOpen] = useState(false)
   const messageApi = useMessage()
   const { confirm } = useFormModal()
 
@@ -61,9 +64,10 @@ export const ImageGalleryImagePreview = ({ item, index, value, setValue, disable
     setMarkerModalOpen(false)
   }
 
-  const onModalHotspotsChange = (iHotspots: IHotspot[]): void => {
+  const onHotspotsChange = (iHotspots: IHotspot[]): void => {
     const { hotspots, marker } = fromIHotspots(iHotspots)
-    onHotspotsChange?.(hotspots, marker)
+    const newValue = value.map((v, i) => i === index ? { ...v, hotspots, marker } : v)
+    setValue(newValue)
   }
 
   if (hotspotMarkersModalContainer.current !== null) {
@@ -72,13 +76,22 @@ export const ImageGalleryImagePreview = ({ item, index, value, setValue, disable
       imageId: item.image!.id,
       open: markerModalOpen,
       onClose: hideMarkerModal,
-      onChange: onModalHotspotsChange
+      onChange: onHotspotsChange
     }
     hotspotMarkersModalContainer.current?.setModal(index, hotspotMarkersModalProps)
   }
 
+  const onCropChange = (crop: CropSettings | null): void => {
+    const newValue = value.map((v, i) => i === index ? { ...v, crop } : v)
+    setValue(newValue)
+  }
+
+  const hideCropModal = (): void => {
+    setCropModalOpen(false)
+  }
+
   const clearValueData = async (): Promise<void> => {
-    setValue(value.map((v, i) => i === index ? { ...v, hotspots: [], marker: [] } : v))
+    setValue(value.map((v, i) => i === index ? { ...v, hotspots: [], marker: [], crop: null } : v))
     await messageApi.success(t('hotspots.data-cleared'))
   }
 
@@ -87,7 +100,7 @@ export const ImageGalleryImagePreview = ({ item, index, value, setValue, disable
   }
 
   const hasValueData = (index: number): boolean => {
-    return hasHotspotData(index)
+    return hasHotspotData(index) || !_.isEmpty(value[index].crop)
   }
 
   const setImage = (index: number, image: ImageValue, replaceValueData: boolean): void => {
@@ -103,120 +116,139 @@ export const ImageGalleryImagePreview = ({ item, index, value, setValue, disable
   }
 
   return (
-    <Droppable
-      isValidContext={ (info: DragAndDropInfo) => {
-        if (disabled === true) {
-          return false
-        }
-        if (info.sortable! !== undefined) {
-          return true
-        }
-        return info.type === 'asset' || info.type === 'document' || info.type === 'data-object' || info.type === 'unknown'
-      } }
-      isValidData={ (info: DragAndDropInfo) => {
-        if (info.sortable! !== undefined || info.type === 'unknown') {
-          return true
-        }
-        return ((info.type === 'asset' && info.data.type === 'image')) || info.type === 'unknown'
-      } }
-      onDrop={ (info: DragAndDropInfo) => {
-        const newImage: ImageValue = { type: 'asset', id: info.data.id as number }
-        if (hasValueData(index)) {
-          confirm({
-            title: t('hotspots.clear-data'),
-            content: t('hotspots.clear-data.dnd-message'),
-            okText: t('yes'),
-            cancelText: t('no'),
-            onOk: () => {
-              setImage(index, newImage, true)
+    <>
+      <Droppable
+        isValidContext={ (info: DragAndDropInfo) => {
+          if (disabled === true) {
+            return false
+          }
+          if (info.sortable! !== undefined) {
+            return true
+          }
+          return info.type === 'asset' || info.type === 'document' || info.type === 'data-object' || info.type === 'unknown'
+        } }
+        isValidData={ (info: DragAndDropInfo) => {
+          if (info.sortable! !== undefined || info.type === 'unknown') {
+            return true
+          }
+          return ((info.type === 'asset' && info.data.type === 'image')) || info.type === 'unknown'
+        } }
+        onDrop={ (info: DragAndDropInfo) => {
+          const newImage: ImageValue = { type: 'asset', id: info.data.id as number }
+          if (hasValueData(index)) {
+            confirm({
+              title: t('hotspots.clear-data'),
+              content: t('hotspots.clear-data.dnd-message'),
+              okText: t('yes'),
+              cancelText: t('no'),
+              onOk: () => {
+                setImage(index, newImage, true)
+              },
+              onCancel: () => {
+                setImage(index, newImage, false)
+              }
+            })
+          } else {
+            setImage(index, newImage, true)
+          }
+        } }
+        onSort={ (info: DragAndDropInfo, dragId: UniqueIdentifier, dropId: UniqueIdentifier) => {
+          const newValue = [...value]
+          const dragValue = value[Number(dragId)]
+          const dropValue = value[Number(dropId)]
+          if (dragValue !== undefined && dropValue !== undefined) {
+            newValue.splice(Number(dragId), 1)
+            newValue.splice(Number(dropId), 0, dragValue)
+            setValue(newValue)
+          }
+        } }
+        variant="outline"
+      >
+        <ImagePreview
+          assetId={ item.image!.id }
+          bordered
+          dropdownItems={ [
+            {
+              disabled,
+              key: 'add',
+              label: t('add'),
+              icon: <Icon value={ 'new' } />,
+              onClick: () => {
+                const newValue = [...value]
+                newValue.splice(index + 1, 0, { image: null })
+                setValue(newValue)
+              }
             },
-            onCancel: () => {
-              setImage(index, newImage, false)
-            }
-          })
-        } else {
-          setImage(index, newImage, true)
-        }
-      } }
-      onSort={ (info: DragAndDropInfo, dragId: UniqueIdentifier, dropId: UniqueIdentifier) => {
-        const newValue = [...value]
-        const dragValue = value[Number(dragId)]
-        const dropValue = value[Number(dropId)]
-        if (dragValue !== undefined && dropValue !== undefined) {
-          newValue.splice(Number(dragId), 1)
-          newValue.splice(Number(dropId), 0, dragValue)
-          setValue(newValue)
-        }
-      } }
-      variant="outline"
-    >
-      <ImagePreview
-        assetId={ item.image!.id }
-        bordered
-        dropdownItems={ [
-          {
-            disabled,
-            key: 'add',
-            label: t('add'),
-            icon: <Icon value={ 'new' } />,
-            onClick: () => {
-              const newValue = [...value]
-              newValue.splice(index + 1, 0, { image: null })
-              setValue(newValue)
-            }
-          },
-          {
-            disabled,
-            key: 'delete',
-            label: t('delete'),
-            icon: <Icon value={ 'trash' } />,
-            onClick: () => {
-              const newValue = [...value]
-              newValue.splice(index, 1)
-              setValue(newValue)
-            }
-          },
-          {
-            label: t('hotspots.edit'),
-            key: 'hotspots-edit',
-            icon: <Icon value={ 'new-marker' } />,
-            onClick: async () => {
-              setMarkerModalOpen(true)
-            }
-          },
-          {
-            disabled: !hasValueData(index),
-            label: t('hotspots.clear-data'),
-            key: 'hotspots-edit',
-            icon: <Icon value={ 'remove-marker' } />,
-            onClick: clearValueData
-          },
-          {
-            label: t('element.open'),
-            key: 'open',
-            icon: <Icon value={ 'open-folder' } />,
-            onClick: async () => {
-              openAsset({
-                config: {
-                  id: item.image!.id
-                }
-              })
-            }
-          },
-          {
-            label: t('empty'),
-            key: 'open',
-            icon: <Icon value={ 'trash' } />,
-            onClick: async () => {
-              setValue(value.map((v, i) => i === index ? { image: null, hotspots: null, marker: null } : v))
+            {
+              disabled,
+              key: 'delete',
+              label: t('delete'),
+              icon: <Icon value={ 'trash' } />,
+              onClick: () => {
+                const newValue = [...value]
+                newValue.splice(index, 1)
+                setValue(newValue)
+              }
+            },
+            {
+              label: t('crop'),
+              key: 'crop',
+              icon: <Icon value={ 'crop' } />,
+              onClick: async () => {
+                setCropModalOpen(true)
+              }
+            },
+            {
+              label: t('hotspots.edit'),
+              key: 'hotspots-edit',
+              icon: <Icon value={ 'new-marker' } />,
+              onClick: async () => {
+                setMarkerModalOpen(true)
+              }
+            },
+            {
+              disabled: !hasValueData(index),
+              label: t('hotspots.clear-data'),
+              key: 'hotspots-edit',
+              icon: <Icon value={ 'remove-marker' } />,
+              onClick: clearValueData
+            },
+            {
+              label: t('element.open'),
+              key: 'open',
+              icon: <Icon value={ 'open-folder' } />,
+              onClick: async () => {
+                openAsset({
+                  config: {
+                    id: item.image!.id
+                  }
+                })
+              }
+            },
+            {
+              label: t('empty'),
+              key: 'open',
+              icon: <Icon value={ 'trash' } />,
+              onClick: async () => {
+                setValue(value.map((v, i) => i === index ? { image: null, hotspots: null, marker: null, crop: null } : v))
+              }
             }
-          }
-        ] }
-        height={ 100 }
-        onHotspotsDataButtonClick={ hasHotspotData(index) ? () => { setMarkerModalOpen(true) } : undefined }
-        style={ { backgroundColor: '#fff' } }
-        width={ 200 }
-      />
-    </Droppable>
+          ] }
+          height={ 100 }
+          onHotspotsDataButtonClick={ hasHotspotData(index) ? () => { setMarkerModalOpen(true) } : undefined }
+          style={ { backgroundColor: '#fff' } }
+          width={ 200 }
+        />
+      </Droppable>
+      { cropModalOpen && (
+        <CropModal
+          crop={ item.crop }
+          imageId={ item.image!.id }
+          onChange={ onCropChange }
+          onClose={ hideCropModal }
+          open={ cropModalOpen }
+        />
+      ) }
+    </>
   )
 }
diff --git a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image-gallery/components/sortable-item/sortable-item.tsx b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image-gallery/components/sortable-item/sortable-item.tsx
index 3a223fa45..1b0ead9ca 100644
--- a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image-gallery/components/sortable-item/sortable-item.tsx
+++ b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image-gallery/components/sortable-item/sortable-item.tsx
@@ -24,10 +24,6 @@ import {
   type ImageGalleryValue,
   type ImageGalleryValueItem
 } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/components/image-gallery/image-gallery'
-import type {
-  Hotspot,
-  Marker
-} from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/hotspot-types'
 import {
   type HotspotMarkersModalContainerRef
 } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/hotspot-markers-modal-container'
@@ -57,12 +53,6 @@ export const ImageGallerySortableItem = ({ id, index, item, value, setValue, dis
     transition
   }
 
-  const onHotspotsChange = (hotspots: Hotspot[], marker: Marker[]): void => {
-    const newValue = value.map((v, i) => i === index ? { ...v, hotspots, marker } : v)
-
-    setValue(newValue)
-  }
-
   return (
     <div
       ref={ setNodeRef }
@@ -78,7 +68,6 @@ export const ImageGallerySortableItem = ({ id, index, item, value, setValue, dis
             hotspotMarkersModalContainer={ hotspotMarkersModalContainer }
             index={ index }
             item={ item }
-            onHotspotsChange={ onHotspotsChange }
             setValue={ setValue }
             value={ value }
           />
diff --git a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image-gallery/image-gallery.tsx b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image-gallery/image-gallery.tsx
index 87420d2d1..27acbfb9a 100644
--- a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image-gallery/image-gallery.tsx
+++ b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/components/image-gallery/image-gallery.tsx
@@ -39,6 +39,9 @@ import {
   HotspotMarkersModalContainer,
   type HotspotMarkersModalContainerRef
 } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/hotspot-markers-modal-container'
+import {
+  type CropSettings
+} from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/crop-types'
 
 export interface ImageGalleryProps {
   value?: ImageGalleryValue | null
@@ -52,6 +55,7 @@ export interface ImageGalleryValueItem {
   image: ImageValue | null
   hotspots?: Hotspot[] | null
   marker?: Marker[] | null
+  crop?: CropSettings | null
 }
 
 export const ImageGallery = (props: ImageGalleryProps): React.JSX.Element => {
diff --git a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/crop-modal.tsx b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/crop-modal.tsx
new file mode 100644
index 000000000..0935a88c7
--- /dev/null
+++ b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/crop-modal.tsx
@@ -0,0 +1,124 @@
+/**
+* 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 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'
+import { Modal } from '@Pimcore/components/modal/modal'
+import {
+  type CropSettings
+} from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/crop-types'
+import {
+  cropToHotspot, hotspotToCrop
+} from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/utils/crop-converter'
+
+export interface CropModalProps {
+  crop?: CropSettings | null
+  imageId: number
+  open: boolean
+  disabled?: boolean
+  onClose?: () => void
+  onChange?: (crop: CropSettings | null) => void
+}
+
+export const CropModal = (props: CropModalProps): React.JSX.Element => {
+  const { t } = useTranslation()
+  const [crop, setCrop] = useState<CropSettings | null>(props.crop ?? null)
+  const [modalOpened, setModalOpened] = useState(false)
+
+  const width = 652
+  const height = 500
+
+  useEffect(() => {
+    setCrop(props.crop ?? null)
+  }, [props.crop])
+
+  const handleOk = (): void => {
+    props.onChange?.(crop)
+    props.onClose?.()
+  }
+
+  const handleCancel = (): void => {
+    setCrop(props.crop ?? null)
+    props.onClose?.()
+  }
+
+  const afterOpenChange = (open: boolean): void => {
+    setModalOpened(open)
+  }
+
+  const onUpdate = (item: IHotspot): void => {
+    console.log('onupdate', item, hotspotToCrop(item))
+    setCrop(hotspotToCrop(item))
+  }
+
+  const removeCrop = (): void => {
+    setCrop(null)
+    props.onChange?.(null)
+    props.onClose?.()
+  }
+
+  const thumbnailSrc = `${getPrefix()}/assets/${props.imageId}/image/stream/custom?width=${width}&height=${height}&mimeType=JPEG&resizeMode=none&contain=true`
+  console.log('currentcrop', cropToHotspot(crop))
+  return (
+    <Modal
+      afterOpenChange={ afterOpenChange }
+      footer={ props.disabled === true
+        ? <span></span>
+        : (_, { OkBtn, CancelBtn }) => (
+          <Flex
+            className="w-100"
+            justify="flex-end"
+            style={ {
+              justifyContent: 'space-between'
+            } }
+          >
+            <ButtonGroup items={ [
+              <IconTextButton
+                disabled={ crop === null }
+                icon={ { value: 'trash' } }
+                key="remove"
+                onClick={ removeCrop }
+              >
+                {t('crop.remove')}
+              </IconTextButton>
+            ] }
+            />
+            <ButtonGroup items={ [
+              <CancelBtn key="cancel" />,
+              <OkBtn key="ok" />
+            ] }
+            />
+          </Flex>
+          ) }
+      maskClosable={ false }
+      okText={ t('save') }
+      onCancel={ handleCancel }
+      onOk={ handleOk }
+      open={ props.open }
+      size="L"
+      title={ t('crop') }
+    >
+      <HotspotImage
+        data={ modalOpened ? [cropToHotspot(crop)] : [] }
+        disableContextMenu
+        onUpdate={ onUpdate }
+        src={ thumbnailSrc }
+      />
+    </Modal>
+  )
+}
diff --git a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/hotspot-markers-modal.tsx b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/hotspot-markers-modal.tsx
index 8e15aae4c..a70ef69d5 100644
--- a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/hotspot-markers-modal.tsx
+++ b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/hotspot-markers-modal.tsx
@@ -126,6 +126,7 @@ export const HotspotMarkersModal = (props: HotspotMarkersModalProps): React.JSX.
             />
           </Flex>
           ) }
+      okText={ t('save') }
       onCancel={ handleCancel }
       onOk={ handleOk }
       open={ props.open }
diff --git a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/crop-types.ts b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/crop-types.ts
new file mode 100644
index 000000000..0149c1ef0
--- /dev/null
+++ b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/crop-types.ts
@@ -0,0 +1,7 @@
+export interface CropSettings {
+    cropWidth: number
+    cropHeight: number
+    cropTop: number
+    cropLeft: number
+    cropPercent: boolean
+}
\ No newline at end of file
diff --git a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/hotspot-types.ts b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/hotspot-types.ts
index e41c61e06..7272c57cc 100644
--- a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/hotspot-types.ts
+++ b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/hotspot-types.ts
@@ -16,13 +16,13 @@ export interface Hotspot {
   left: number
   width: number
   height: number
-  data: any
-  name: string | null
+  data?: any
+  name?: string | null
 }
 
 export interface Marker {
   top: number
   left: number
   data: any
-  name: string | null
+  name?: string | null
 }
diff --git a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/utils/crop-converter.ts b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/utils/crop-converter.ts
new file mode 100644
index 000000000..07d820284
--- /dev/null
+++ b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/utils/crop-converter.ts
@@ -0,0 +1,55 @@
+/**
+* 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 {
+  type CropSettings
+} from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/crop-types'
+import { type IHotspot } from '@Pimcore/components/hotspot-image/hotspot-image'
+
+export const cropToHotspot = (crop?: CropSettings | null): IHotspot => {
+  if (crop !== null && crop !== undefined) {
+    if (!crop.cropPercent) {
+      console.error('Crop is only supported with cropPercent')
+      return defaultHotspot
+    }
+
+    return {
+      id: 1,
+      x: crop.cropLeft,
+      y: crop.cropTop,
+      width: crop.cropWidth,
+      height: crop.cropHeight,
+      type: 'hotspot'
+    }
+  }
+  return defaultHotspot
+}
+
+export const hotspotToCrop = (hotspot: IHotspot): CropSettings => {
+  return {
+    cropWidth: hotspot.width,
+    cropHeight: hotspot.height,
+    cropLeft: hotspot.x,
+    cropTop: hotspot.y,
+    cropPercent: true
+  }
+}
+
+const defaultHotspot: IHotspot = {
+  id: 1,
+  x: 10,
+  y: 10,
+  width: 80,
+  height: 80,
+  type: 'hotspot'
+}
diff --git a/translations/studio.en.yaml b/translations/studio.en.yaml
index 64a2478cc..ad23c3c48 100644
--- a/translations/studio.en.yaml
+++ b/translations/studio.en.yaml
@@ -529,6 +529,8 @@ link.accesskey: Accesskey
 link.rel: Relation
 link.tabindex: Tabindex
 link.class: Class
+crop: Crop
+crop.remove: Remove Crop
 hotspots.edit: Edit marker and hotspots
 hotspots.new-marker: New Marker
 hotspots.new-hotspot: New Hotspot

From 8a9daf6be8e93e72e96eed289d9b8786673f9f62 Mon Sep 17 00:00:00 2001
From: markus-moser <4639428+markus-moser@users.noreply.github.com>
Date: Fri, 17 Jan 2025 11:15:00 +0000
Subject: [PATCH 2/2] Apply eslint-fixer changes

---
 .../helpers/hotspot-image/types/crop-types.ts | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/crop-types.ts b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/crop-types.ts
index 0149c1ef0..2215c339a 100644
--- a/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/crop-types.ts
+++ b/assets/js/src/core/modules/element/dynamic-types/defintinitions/objects/data-related/helpers/hotspot-image/types/crop-types.ts
@@ -1,7 +1,20 @@
+/**
+* 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
+*/
+
 export interface CropSettings {
-    cropWidth: number
-    cropHeight: number
-    cropTop: number
-    cropLeft: number
-    cropPercent: boolean
-}
\ No newline at end of file
+  cropWidth: number
+  cropHeight: number
+  cropTop: number
+  cropLeft: number
+  cropPercent: boolean
+}