props.onFocus?.({
+ rowIndex: row.index,
+ columnIndex: column.getIndex(),
+ columnId: column.id
+ }) }
onKeyDown={ onKeyDown }
// @todo move to new dynamic type system
// onPaste={ onPaste }
ref={ element }
role='button'
+ style={ { width: isInAutoWidthColumnEditMode ? columnWrapperWidth : undefined } }
tabIndex={ 0 }
>
- {ComponentRenderer !== null ? ComponentRenderer(props) : <>Cell type not supported}
+ { ComponentRenderer !== null ? ComponentRenderer(props) : <>Cell type not supported }
)
- }, [isInEditMode, props.getValue(), row, row.getIsSelected(), isEditable])
+ }, [isInEditMode, props.getValue(), row, row.getIsSelected(), isEditable, props.active])
function getCssClasses (): string[] {
const classes: string[] = []
+ if (props.active === true) {
+ classes.push('default-cell--active')
+ }
+
if (props.modified === true) {
classes.push('default-cell--modified')
}
@@ -102,6 +115,12 @@ export const DefaultCell = ({ ...props }: DefaultCellProps): React.JSX.Element =
return
}
+ if (!isInEditMode) {
+ if (element.current !== null) {
+ setColumnWrapperWidth(element.current.offsetWidth)
+ }
+ }
+
if (isEditable && table.options.meta?.onUpdateCellData === undefined) {
trackError(new GeneralError('onUpdateCellData is required when using editable cells'))
}
diff --git a/assets/js/src/core/components/grid/grid-cell/grid-cell.tsx b/assets/js/src/core/components/grid/grid-cell/grid-cell.tsx
index d85dc631f..c8ebc73f8 100644
--- a/assets/js/src/core/components/grid/grid-cell/grid-cell.tsx
+++ b/assets/js/src/core/components/grid/grid-cell/grid-cell.tsx
@@ -13,28 +13,37 @@
import { type Cell, type CellContext, flexRender } from '@tanstack/react-table'
import React from 'react'
-import { type ExtendedCellContext } from '../grid'
+import { type GridCellReference, type ExtendedCellContext } from '../grid'
import { type GridContextProviderProps, GridContextProvider } from '../grid-context'
+import {
+ DynamicTypeRegistryProvider
+} from '@Pimcore/modules/element/dynamic-types/registry/provider/dynamic-type-registry-provider'
export interface GridCellProps {
cell: Cell
- {flexRender(cell.column.columnDef.cell, getExtendedCellContext(cell.getContext()))}
-
-
+ {flexRender(cell.column.columnDef.cell, getExtendedCellContext(cell.getContext()))}
+
+
-
+ ), [table, modifiedCells, data, columns, rowSelection, internalSorting, highlightActiveCell ? activeCell : undefined])
function getModifiedRow (rowIndex: string): GridProps['modifiedCells'] {
return memoModifiedCells.filter(({ rowIndex: rIndex }) => String(rIndex) === String(rowIndex)) ?? []
diff --git a/assets/js/src/core/components/hotspot-image/hotspot-image-container.tsx b/assets/js/src/core/components/hotspot-image/hotspot-image-container.tsx
new file mode 100644
index 000000000..bab82d77c
--- /dev/null
+++ b/assets/js/src/core/components/hotspot-image/hotspot-image-container.tsx
@@ -0,0 +1,71 @@
+/**
+* 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, { useState } from 'react'
+import { HotspotImage, type IHotspot, type IStyleOptions, defaultStyleOptions } from '@Pimcore/components/hotspot-image/hotspot-image'
+
+interface IHotspotImageContainer {
+ src: string
+ styleOptions?: IStyleOptions
+ items?: IHotspot[]
+}
+
+export const HotspotImageContainer = ({ src, items, styleOptions = defaultStyleOptions }: IHotspotImageContainer): JSX.Element => {
+ const [hotspots, setHotspots] = useState
-
-
- ), [table, modifiedCells, data, columns, rowSelection, internalSorting])
+
-
-
+
+ {JSON.stringify(hotspots, null, 2)}
+
+
+
+
+
+ )
+}
diff --git a/assets/js/src/core/components/hotspot-image/hotspot-image.stories.tsx b/assets/js/src/core/components/hotspot-image/hotspot-image.stories.tsx
new file mode 100644
index 000000000..6231aad0b
--- /dev/null
+++ b/assets/js/src/core/components/hotspot-image/hotspot-image.stories.tsx
@@ -0,0 +1,47 @@
+/**
+* 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 Meta } from '@storybook/react'
+import { HotspotImageContainer } from './hotspot-image-container'
+
+const config: Meta = {
+ title: 'Components/Data Display/Hotspot Image',
+ component: HotspotImageContainer,
+ tags: ['autodocs']
+}
+
+export default config
+
+export const _default = {
+ args: {
+ src: 'https://144170849.fs1.hubspotusercontent-eu1.net/hub/144170849/hubfs/01-English/01-Website/06-Resources/01-Blog/2024/24-10-Platform-Version-Release-24-3/24-10-Platform-Version-Release-2403-Blog-Header-1.png?width=1440&height=810&name=24-10-Platform-Version-Release-2403-Blog-Header-1.png',
+ items: [
+ {
+ id: 1,
+ x: 190,
+ y: 350,
+ width: 24,
+ height: 24,
+ type: 'marker'
+ },
+ {
+ id: 2,
+ x: 647,
+ y: 106,
+ width: 150,
+ height: 150,
+ type: 'hotspot'
+ }
+ ]
+ }
+}
diff --git a/assets/js/src/core/components/hotspot-image/hotspot-image.styles.tsx b/assets/js/src/core/components/hotspot-image/hotspot-image.styles.tsx
new file mode 100644
index 000000000..4e3cbad12
--- /dev/null
+++ b/assets/js/src/core/components/hotspot-image/hotspot-image.styles.tsx
@@ -0,0 +1,69 @@
+/**
+* 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 { createStyles } from 'antd-style'
+
+export const useStyle = createStyles(({ token, css }) => {
+ return {
+ hotspotImage: css`
+ position: relative;
+ width: fit-content;
+ height: auto;
+ margin: 0 auto;
+
+ .hotspot-image__image {
+ width: auto;
+ max-width: 100%;
+ height: auto;
+ display: block;
+ }
+
+ .hotspot-image__item {
+ border-radius: ${token.borderRadius}px;
+ color: ${token.colorPrimary};
+ background: rgba(215, 199, 236, 0.40);
+ border: 3px dashed ${token.colorPrimary};
+ border-radius: ${token.borderRadius}px;
+ user-select: none;
+ cursor: nwse-resize;
+
+ &:before {
+ content: '';
+ position: absolute;
+ right: 6px;
+ bottom: 6px;
+ left: 6px;
+ top: 6px;
+ cursor: move;
+ }
+ }
+
+ .hotspot-image__item--marker {
+ cursor: move;
+ border-width: 1px;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .hotspot-image__popover {
+ }
+ `,
+ Popover: css`
+ .ant-popover-inner {
+ padding: ${token.paddingXS}px;
+ }
+ `
+ }
+})
diff --git a/assets/js/src/core/components/hotspot-image/hotspot-image.tsx b/assets/js/src/core/components/hotspot-image/hotspot-image.tsx
new file mode 100644
index 000000000..3fbeb6125
--- /dev/null
+++ b/assets/js/src/core/components/hotspot-image/hotspot-image.tsx
@@ -0,0 +1,246 @@
+/**
+* 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, { useState, useRef, useEffect, type MouseEvent } from 'react'
+import { useStyle } from './hotspot-image.styles'
+import { Icon } from '@Pimcore/components/icon/icon'
+import { Popover } from 'antd'
+import { IconTextButton } from '@Pimcore/components/icon-text-button/icon-text-button'
+import { IconButton } from '@Pimcore/components/icon-button/icon-button'
+import {
+ convertHotspotsToPixel
+} from '@Pimcore/components/hotspot-image/utils/calculate-dimensions'
+import { dragItem } from '@Pimcore/components/hotspot-image/utils/drag'
+import { type Coordinates, type Rectangle } from '@Pimcore/components/hotspot-image/types/types'
+import { resizeItem } from '@Pimcore/components/hotspot-image/utils/resize'
+import { Tooltip } from '@Pimcore/components/tooltip/tooltip'
+import { useTranslation } from 'react-i18next'
+
+export interface IStyleOptions {
+ hotspot: {
+ width: number
+ height: number
+ resizeBorderSize: number
+ minSize: number
+ icon: any
+ }
+ marker: {
+ width: number
+ height: number
+ icon: any
+ }
+}
+
+export const defaultStyleOptions = {
+ hotspot: {
+ width: 10,
+ height: 10,
+ resizeBorderSize: 10,
+ minSize: 24,
+ icon: null
+ },
+ marker: {
+ width: 24,
+ height: 24,
+ marginLeft: -12,
+ marginTop: -19,
+ icon: 'location-marker'
+ }
+}
+
+export interface IHotspot {
+ id: number
+ x: number
+ y: number
+ width: number
+ height: number
+ type: string
+}
+
+interface IHotspotImage {
+ src: string
+ styleOptions?: IStyleOptions
+ data?: IHotspot[]
+ onRemove: (id: number) => void
+ onEdit?: (id: number) => void
+ onClone?: (id: number) => void
+ onUpdate: (item: IHotspot) => void
+}
+
+export const HotspotImage = ({ src, data, styleOptions = defaultStyleOptions, onRemove, onEdit, onClone, onUpdate }: IHotspotImage): JSX.Element => {
+ const { styles } = useStyle()
+ const [imageLoaded, setImageLoaded] = useState
+ ![]()
{
+ if (imageRef.current !== null) {
+ setImageLoaded(true)
+ }
+ } }
+ ref={ imageRef }
+ src={ src }
+ />
+ { imageLoaded && containerRef.current !== null && (
+ convertHotspotsToPixel(items, containerRef.current.getBoundingClientRect()).map(hotspot => (
+
+ {onEdit !== undefined
+ ? (
+ { onEdit(hotspot.id) } }
+ type="default"
+ >Todo edit
+ )
+ : null}
+
+
+ { onRemove(hotspot.id) } }
+ type={ 'link' }
+ />
+
+
+ {onClone !== undefined
+ ? (
+
+ { onClone(hotspot.id) } }
+ type={ 'link' }
+ />
+
+ )
+ : null}
+
+
+ }
+ key={ hotspot.id }
+ onOpenChange={ (open) => { setPopoverOpen(open) } }
+ open={ popoverOpen && selectedId === hotspot.id }
+ overlayClassName={ [styles.Popover].join(' ') }
+ trigger={ ['contextMenu'] }
+ >
+
+
+ ))
+ )}
+
+ )
+}
diff --git a/assets/js/src/core/components/hotspot-image/types/types.ts b/assets/js/src/core/components/hotspot-image/types/types.ts
new file mode 100644
index 000000000..381a46bf9
--- /dev/null
+++ b/assets/js/src/core/components/hotspot-image/types/types.ts
@@ -0,0 +1,24 @@
+/**
+* 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 Coordinates {
+ x: number
+ y: number
+}
+
+interface Dimensions {
+ width: number
+ height: number
+}
+
+export type Rectangle = Coordinates & Dimensions
diff --git a/assets/js/src/core/components/hotspot-image/utils/calculate-dimensions.ts b/assets/js/src/core/components/hotspot-image/utils/calculate-dimensions.ts
new file mode 100644
index 000000000..f10646479
--- /dev/null
+++ b/assets/js/src/core/components/hotspot-image/utils/calculate-dimensions.ts
@@ -0,0 +1,46 @@
+/**
+* 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 IHotspot } from '@Pimcore/components/hotspot-image/hotspot-image'
+
+export const convertHotspotToPixel = (hotspot: IHotspot, containerBounds: DOMRect): IHotspot => {
+ return {
+ ...hotspot,
+ x: percentToPixel(hotspot.x, containerBounds.width),
+ y: percentToPixel(hotspot.y, containerBounds.height),
+ width: hotspot.type === 'marker' ? hotspot.width : percentToPixel(hotspot.width, containerBounds.width),
+ height: hotspot.type === 'marker' ? hotspot.height : percentToPixel(hotspot.height, containerBounds.height)
+ }
+}
+
+export const convertHotspotsToPixel = (hotspots: IHotspot[], containerBounds: DOMRect): IHotspot[] => {
+ return hotspots.map(hotspot => convertHotspotToPixel(hotspot, containerBounds))
+}
+
+export const convertHotspotToPercent = (hotspot: IHotspot, containerBounds: DOMRect): IHotspot => {
+ return {
+ ...hotspot,
+ x: pixelToPercent(hotspot.x, containerBounds.width),
+ y: pixelToPercent(hotspot.y, containerBounds.height),
+ width: hotspot.type === 'marker' ? hotspot.width : pixelToPercent(hotspot.width, containerBounds.width),
+ height: hotspot.type === 'marker' ? hotspot.height : pixelToPercent(hotspot.height, containerBounds.height)
+ }
+}
+
+const percentToPixel = (percent: number, dimension: number): number => {
+ return (dimension * percent) / 100
+}
+
+const pixelToPercent = (pixel: number, dimension: number): number => {
+ return (pixel * 100) / dimension
+}
diff --git a/assets/js/src/core/components/hotspot-image/utils/drag.ts b/assets/js/src/core/components/hotspot-image/utils/drag.ts
new file mode 100644
index 000000000..24363da3a
--- /dev/null
+++ b/assets/js/src/core/components/hotspot-image/utils/drag.ts
@@ -0,0 +1,36 @@
+/**
+* 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 IHotspot } from '@Pimcore/components/hotspot-image/hotspot-image'
+import {
+ convertHotspotToPercent,
+ convertHotspotToPixel
+} from '@Pimcore/components/hotspot-image/utils/calculate-dimensions'
+import type { MouseEvent } from 'react'
+import { type Coordinates } from '@Pimcore/components/hotspot-image/types/types'
+
+export const dragItem = (
+ evt: MouseEvent,
+ dragStart: Coordinates,
+ containerBounds: DOMRect,
+ hotspots: IHotspot[],
+ hotspotIndex: number,
+ marginLeft: number,
+ marginTop: number
+): IHotspot[] => {
+ 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
+
+ return hotspots.map((h, i) => i === hotspotIndex ? convertHotspotToPercent({ ...h, x: newX, y: newY, width: hotspot.width, height: hotspot.height }, containerBounds) : h)
+}
diff --git a/assets/js/src/core/components/hotspot-image/utils/resize.ts b/assets/js/src/core/components/hotspot-image/utils/resize.ts
new file mode 100644
index 000000000..905c101f0
--- /dev/null
+++ b/assets/js/src/core/components/hotspot-image/utils/resize.ts
@@ -0,0 +1,83 @@
+/**
+* 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 { MouseEvent } from 'react'
+import {
+ convertHotspotToPercent,
+ convertHotspotToPixel
+} from '@Pimcore/components/hotspot-image/utils/calculate-dimensions'
+import { type IHotspot } from '@Pimcore/components/hotspot-image/hotspot-image'
+import { type Rectangle } from '@Pimcore/components/hotspot-image/types/types'
+
+export const resizeItem = (
+ evt: MouseEvent,
+ resizeStart: Rectangle,
+ resizeDirection: string | null,
+ containerBounds: DOMRect,
+ hotspots: IHotspot[],
+ hotspotIndex: number,
+ minSize: number,
+ dx: number,
+ dy: number
+): IHotspot[] => {
+ const hotspot = convertHotspotToPixel(hotspots[hotspotIndex], containerBounds)
+ let newWidth = resizeStart.width
+ let newHeight = resizeStart.height
+ let newX = hotspot.x
+ let newY = hotspot.y
+
+ if (resizeDirection?.includes('w') === true) {
+ ({ newWidth, newX } = handleWestResize(resizeStart, hotspot, dx, evt, containerBounds, minSize))
+ }
+ if (resizeDirection?.includes('e') === true) {
+ newWidth = Math.min(containerBounds.width - hotspot.x, Math.max(minSize, resizeStart.width + dx))
+ }
+ if (resizeDirection?.includes('n') === true) {
+ ({ newHeight, newY } = handleNorthResize(resizeStart, hotspot, dy, evt, containerBounds, minSize))
+ }
+ if (resizeDirection?.includes('s') === true) {
+ newHeight = Math.max(minSize, resizeStart.height + dy)
+ }
+
+ return hotspots.map((h, i) => i === hotspotIndex
+ ? convertHotspotToPercent({
+ ...h,
+ x: newX,
+ y: newY,
+ width: newWidth,
+ height: newHeight
+ }, containerBounds)
+ : h)
+}
+
+const handleWestResize = (resizeStart: Rectangle, hotspot: IHotspot, dx: number, evt: MouseEvent, containerBounds: DOMRect, minSize: number): { newWidth: number, newX: number } => {
+ const newWidth = Math.max(minSize, resizeStart.width - dx)
+ let newX = Math.min(hotspot.x + resizeStart.width - minSize, evt.clientX - containerBounds.left)
+
+ if (newWidth === minSize) {
+ newX = hotspot.x + hotspot.width - minSize
+ }
+
+ return { newWidth, newX }
+}
+
+const handleNorthResize = (resizeStart: Rectangle, hotspot: IHotspot, dy: number, evt: MouseEvent, containerBounds: DOMRect, minSize: number): { newHeight: number, newY: number } => {
+ const newHeight = Math.max(minSize, resizeStart.height - dy)
+ let newY = Math.min(hotspot.y + resizeStart.height - minSize, evt.clientY - containerBounds.top)
+
+ if (newHeight === minSize) {
+ newY = hotspot.y + hotspot.height - minSize
+ }
+
+ return { newHeight, newY }
+}
diff --git a/assets/js/src/core/components/image-preview/image-preview.styles.tsx b/assets/js/src/core/components/image-preview/image-preview.styles.tsx
index b4af6a3f8..79430b425 100644
--- a/assets/js/src/core/components/image-preview/image-preview.styles.tsx
+++ b/assets/js/src/core/components/image-preview/image-preview.styles.tsx
@@ -41,6 +41,15 @@ export const useStyle = createStyles(({ token, css }) => {
}
}
+ `,
+ hotspotButton: css`
+ position: absolute;
+ top: ${token.paddingXXS}px;
+ left: ${token.paddingXXS}px;
+ // todo: remove this when loading animation in button is fixed
+ & > div {
+ display:none;
+ }
`
}
})
diff --git a/assets/js/src/core/components/image-preview/image-preview.tsx b/assets/js/src/core/components/image-preview/image-preview.tsx
index 7ed785226..0d8ae5038 100644
--- a/assets/js/src/core/components/image-preview/image-preview.tsx
+++ b/assets/js/src/core/components/image-preview/image-preview.tsx
@@ -22,6 +22,10 @@ import { Spin } from '@Pimcore/components/spin/spin'
import { Flex } from '@Pimcore/components/flex/flex'
import { type DropdownProps } from '@Pimcore/components/dropdown/dropdown'
import { ImagePreviewDropdown } from '@Pimcore/components/image-preview/components/dropdown/dropdown'
+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'
interface ImagePreviewProps {
src?: string
@@ -33,14 +37,16 @@ interface ImagePreviewProps {
style?: CSSProperties
bordered?: boolean
dropdownItems?: DropdownProps['menu']['items']
+ onHotspotsDataButtonClick?: () => void
}
-export const ImagePreview = forwardRef(function ImagePreview ({ src, assetId, assetType, width, height, className, style, dropdownItems, bordered = false }: ImagePreviewProps, ref: MutableRefObject
+
+