Merge pull request #7 from sitegeist/fix/forceCropNoLocked

FIX - Force crop no locked

Author: mficzel

Neos.Ui/asset-with-metadata-editor/src/index.tsx

@@ -29,16 +29,15 @@ export function registerAssetWithMetadataEditor(globalRegistry: IGlobalRegistry)
         component: (props: any) => {
             const { value, ...rest } = props
 
-            return <Editor {...rest} value={(!value || Object.keys(value).length === 0) ? undefined : value} />
+            return <Editor {...rest} value={!value || Object.keys(value).length === 0 ? undefined : value} />
         },
     })
 
     editorsRegistry.set('Sitegeist.Kaleidoscope.ValueObjects/Inspector/Editors/AssetWithMetadataCollectionEditor', {
         component: (props: any) => {
             const { value, ...rest } = props
-            console.log('CollectionEditor Props', props)
 
-            return <CollectionEditor {...props} />
+            return <CollectionEditor {...rest} value={!value || !Array.isArray(value) ? [] : value} />
         },
     })
 

Neos.Ui/asset-with-metadata-editor/src/types.ts

@@ -43,12 +43,13 @@ export type EditorOptions = {
     }
     crop?: {
         aspectRatio: {
-            options?: any
+            options?: Record<string, { width?: number; height?: number; label: string }>
             forceCrop?: boolean
             locked?: {
                 width?: number
                 height?: number
             }
+            defaultOption?: string
         }
     }
 }

Neos.Ui/asset-with-metadata-editor/src/utils/getForceCrop.tsx

@@ -1,10 +1,29 @@
 import { EditorOptions, ImageMetadata } from '../types'
 import { getCropAdjustments } from './getCropAdjustments'
 
+const getForcedAspectRatio = (cropOptions: EditorOptions['crop']) => {
+    if (cropOptions?.aspectRatio.locked?.width && cropOptions?.aspectRatio.locked?.height) {
+        return (cropOptions?.aspectRatio.locked?.width ?? 0) / (cropOptions?.aspectRatio.locked?.height ?? 0)
+    }
+
+    if (cropOptions?.aspectRatio.defaultOption && cropOptions?.aspectRatio.options) {
+        const defaultOption = cropOptions?.aspectRatio.options[cropOptions?.aspectRatio.defaultOption]
+        return (defaultOption.width ?? 0) / (defaultOption.height ?? 0)
+    }
+
+    if (cropOptions?.aspectRatio.options) {
+        const keys = Object.keys(cropOptions?.aspectRatio.options)
+        const firstOption = cropOptions?.aspectRatio.options[keys[0]]
+        return (firstOption.width ?? 0) / (firstOption.height ?? 0)
+    }
+
+    return 0
+}
+
 export const getForceCrop = (imageMetadata: ImageMetadata, cropOptions: EditorOptions['crop']) => {
-    const forcedAspectRatio =
-        (cropOptions?.aspectRatio.locked?.width ?? 0) / (cropOptions?.aspectRatio.locked?.height ?? 0)
+    const forcedAspectRatio = getForcedAspectRatio(cropOptions)
 
+    console.log('forcedAspectRatio', forcedAspectRatio)
     const imageAspectRatio = imageMetadata.originalDimensions.width / imageMetadata.originalDimensions.height
 
     if (imageAspectRatio === forcedAspectRatio) return