Image gallery sorting drag and drop

assets/js/src/core/components/drag-and-drop/context-provider.tsx

@@ -12,7 +12,7 @@
 */
 
 import React, { type MutableRefObject, createContext, useRef, type ReactNode, useMemo } from 'react'
-import { DndContext, DragOverlay, MouseSensor, TouchSensor, useSensor, useSensors, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core'
+import { closestCorners, DndContext, DragOverlay, MouseSensor, TouchSensor, useSensor, useSensors, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core'
 import { type Callback, CallbackRegistry, type ICallbackRegistry } from './callback-registry'
 import { DragOverlay as StyledDragOverlay } from './drag-overlay'
 import { boundingRectIntersection } from './collision-detection/boundingRectIntersection'
@@ -22,6 +22,7 @@ export interface DragAndDropInfo {
   icon: string
   title: string
   data: any
+  sortable?: any
 }
 
 const defaultInfo: DragAndDropInfo = { type: 'unknown', data: null, title: '', icon: 'widget-default' }
@@ -43,9 +44,11 @@ export const DragAndDropInfoContext = createContext<IDragAndDropInfoContext>({
 export const DragAndDropContextProvider = ({ children }: { children: ReactNode }): React.JSX.Element => {
   const [info, setInfo] = React.useState<DragAndDropInfo>(defaultInfo)
   const callbackRegistry = useRef<ICallbackRegistry>(new CallbackRegistry())
+  const isSortableInfo = Object.keys(info).includes('sortable')
+  const collisionDetection = isSortableInfo ? closestCorners : boundingRectIntersection
 
-  const mouseSensor = useSensor(MouseSensor, { activationConstraint: { distance: 10 } })
-  const touchSensor = useSensor(TouchSensor, { activationConstraint: { distance: 10 } })
+  const mouseSensor = useSensor(MouseSensor, { activationConstraint: { distance: 5 } })
+  const touchSensor = useSensor(TouchSensor, { activationConstraint: { distance: 5 } })
 
   const sensors = useSensors(mouseSensor, touchSensor)
 
@@ -84,22 +87,25 @@ export const DragAndDropContextProvider = ({ children }: { children: ReactNode }
   return useMemo(() => (
     <DndContext
       autoScroll={ false }
-      collisionDetection={ boundingRectIntersection }
+      collisionDetection={ collisionDetection }
       onDragCancel={ onDragCancel }
       onDragEnd={ onDragEnd }
       onDragStart={ onDragStart }
       sensors={ sensors }
     >
+      { info.sortable === undefined && (
       <DragOverlay
         className='dnd-overlay'
+        dropAnimation={ null }
         style={ { width: 'max-content' } }
       >
         <StyledDragOverlay info={ info } />
       </DragOverlay>
+      )}
 
       <DragAndDropInfoContext.Provider value={ { type: info.type, data: info.data, icon: info.icon, title: info.title, setInfo: setContext, removeInfo: removeContext, getInfo: getContext, callbackRegistry } }>
         {children}
       </DragAndDropInfoContext.Provider>
     </DndContext>
-  ), [info, children])
+  ), [info, children, collisionDetection])
 }

assets/js/src/core/components/drag-and-drop/draggable.tsx

@@ -48,7 +48,7 @@ function Draggable (props: DraggableProps): React.JSX.Element {
         { ...Child.props }
       />
     </div>
-  ), [])
+  ), [props.children])
 }
 
 const DraggableMemo = React.memo(Draggable)

assets/js/src/core/components/drag-and-drop/droppable.tsx

@@ -13,7 +13,7 @@
 
 import React, { Children, type ReactNode, isValidElement, useContext, useEffect, useState } from 'react'
 import { type DragAndDropInfo, DragAndDropInfoContext } from './context-provider'
-import { useDroppable } from '@dnd-kit/core'
+import { type UniqueIdentifier, useDroppable } from '@dnd-kit/core'
 import { useStyle } from './droppable.styles'
 import { DroppableContextProvider } from './droppable-context-provider'
 import { uuid } from '@Pimcore/utils/uuid'
@@ -33,6 +33,7 @@ export interface DroppableProps {
   isValidContext: boolean | ((info: DragAndDropInfo) => boolean)
   isValidData?: ((info: DragAndDropInfo) => boolean)
   onDrop: (info: DragAndDropInfo) => void
+  onSort?: (info: DragAndDropInfo, dragId: UniqueIdentifier, dropId: UniqueIdentifier) => void
 }
 
 export const Droppable = (props: DroppableProps): React.JSX.Element => {
@@ -63,7 +64,15 @@ export const Droppable = (props: DroppableProps): React.JSX.Element => {
       setIsValidContext(props.isValidContext as boolean)
     }
 
-    context.callbackRegistry!.current.register(id, () => {
+    context.callbackRegistry!.current.register(id, (event) => {
+      if (isValidContext && isValidData && context.getInfo().sortable !== undefined) {
+        if (event.over === null) {
+          return
+        }
+
+        props.onSort?.(context.getInfo(), event.active.id, event.over.id)
+        return
+      }
       if (!isValidData || !isValidContext || !isOver) return
 
       props.onDrop(context.getInfo())
@@ -82,6 +91,10 @@ export const Droppable = (props: DroppableProps): React.JSX.Element => {
 
   const Component = Child.type
 
+  if (context.getInfo().sortable !== undefined) {
+    return Child
+  }
+
   return (
     <div className={ cn(props.className, styles[props.variant ?? 'default'], props.shape !== 'angular' ? styles.round : undefined) }>
       <DroppableContextProvider value={ { isDragActive: isValidContext, isOver: isOver && isValidContext, isValid: isValidData && isValidContext } }>

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

@@ -17,8 +17,9 @@ import { ImagePreview } from '@Pimcore/components/image-preview/image-preview'
 import { Icon } from '@Pimcore/components/icon/icon'
 import { useTranslation } from 'react-i18next'
 import { useAssetHelper } from '@Pimcore/modules/asset/hooks/use-asset-helper'
-import type { DragAndDropInfo } from '@Pimcore/components/drag-and-drop/context-provider'
+import { type DragAndDropInfo } from '@Pimcore/components/drag-and-drop/context-provider'
 import type { ImageGalleryValueItem } from '../../image-gallery'
+import type { UniqueIdentifier } from '@dnd-kit/core'
 
 interface ImageGalleryImagePreviewProps {
   item: ImageGalleryValueItem
@@ -33,13 +34,33 @@ export const ImageGalleryImagePreview = ({ item, index, value, setValue }: Image
 
   return (
     <Droppable
-      isValidContext={ (info: DragAndDropInfo) => true }
-      isValidData={ (info: DragAndDropInfo) => info.type === 'asset' && info.data.type === 'image' }
+      isValidContext={ (info: DragAndDropInfo) => {
+        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 newValue = [...value]
         newValue[index] = { image: { type: 'asset', id: info.data.id as number } }
         setValue(newValue)
       } }
+      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
@@ -80,6 +101,7 @@ export const ImageGalleryImagePreview = ({ item, index, value, setValue }: Image
           }
         ] }
         height={ 100 }
+        style={ { backgroundColor: '#fff' } }
         width={ 200 }
       />
     </Droppable>

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

@@ -11,6 +11,8 @@
 *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
 */
 
+import { CSS } from '@dnd-kit/utilities'
+import { useSortable } from '@dnd-kit/sortable'
 import React from 'react'
 import {
   ImageGalleryImageTarget
@@ -32,22 +34,45 @@ export interface ImageGallerySortableItemProps {
 }
 
 export const ImageGallerySortableItem = ({ id, index, item, value, setValue }: ImageGallerySortableItemProps): React.JSX.Element => {
-  if (item.image !== null) {
-    return (
-      <ImageGalleryImagePreview
-        index={ index }
-        item={ item }
-        setValue={ setValue }
-        value={ value }
-      />
-    )
+  const sortable = useSortable({
+    id,
+    transition: {
+      duration: 300,
+      easing: 'linear'
+    }
+  })
+  const { attributes, listeners, setNodeRef, transform, transition, active } = sortable
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
   }
 
   return (
-    <ImageGalleryImageTarget
-      index={ index }
-      setValue={ setValue }
-      value={ value }
-    />
+    <div
+      ref={ setNodeRef }
+      { ...attributes }
+      { ...listeners }
+      key={ index }
+      style={ active?.data.current?.sortable !== undefined ? style : undefined }
+    >
+      { item.image !== null
+        ? (
+          <ImageGalleryImagePreview
+            index={ index }
+            item={ item }
+            setValue={ setValue }
+            value={ value }
+          />
+          )
+        : (
+          <ImageGalleryImageTarget
+            index={ index }
+            setValue={ setValue }
+            value={ value }
+          />
+          )
+        }
+    </div>
   )
 }

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

@@ -27,6 +27,11 @@ import { useTranslation } from 'react-i18next'
 import {
   ImageGallerySortableItem
 } from '@Pimcore/modules/element/dynamic-types/defintinitions/objects/data-related/components/image-gallery/components/sortable-item/sortable-item'
+import {
+  rectSortingStrategy,
+  SortableContext
+} from '@dnd-kit/sortable'
+import { uuid } from '@Pimcore/utils/uuid'
 
 export interface ImageGalleryProps {
   value?: ImageGalleryValue | null
@@ -69,16 +74,21 @@ export const ImageGallery = (props: ImageGalleryProps): React.JSX.Element => {
         gap="small"
         wrap
       >
-        { value.map((item, index) => (
-          <ImageGallerySortableItem
-            id={ String(index) }
-            index={ index }
-            item={ item }
-            key={ index }
-            setValue={ setValue }
-            value={ value }
-          />
-        )) }
+        <SortableContext
+          items={ value.map((item, index) => ({ id: String(index) })) }
+          strategy={ rectSortingStrategy }
+        >
+          { value.map((item, index) => (
+            <ImageGallerySortableItem
+              id={ String(index) }
+              index={ index }
+              item={ item }
+              key={ uuid() }
+              setValue={ setValue }
+              value={ value }
+            />
+          )) }
+        </SortableContext>
         <ImageGalleryImageTarget
           index={ value.length }
           setValue={ setValue }