fix(nc-gui): fill image cropper by default

packages/nc-gui/components/general/ImageCropper.vue

@@ -3,7 +3,7 @@ import { Cropper } from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'
 import 'vue-advanced-cropper/dist/theme.classic.css'
 import type { AttachmentReqType } from 'nocodb-sdk'
-import type { ImageCropperConfig } from '~/lib/types'
+import type { ImageCropperConfig } from '#imports'
 
 interface Props {
   imageConfig: {
@@ -17,11 +17,13 @@ interface Props {
   }
   showCropper: boolean
 }
-const { imageConfig, cropperConfig, uploadConfig, ...props } = defineProps<Props>()
+const { imageConfig, uploadConfig, ...props } = defineProps<Props>()
 const emit = defineEmits(['update:showCropper', 'submit'])
 
 const showCropper = useVModel(props, 'showCropper', emit)
 
+const { cropperConfig } = toRefs(props)
+
 const { api, isLoading } = useApi()
 
 const cropperRef = ref()
@@ -84,6 +86,13 @@ const handleSaveImage = async () => {
   }
 }
 
+const defaultSize = ({ imageSize, visibleArea }: { imageSize: Record<string, any>; visibleArea: Record<string, any> }) => {
+  return {
+    width: (visibleArea || imageSize).width,
+    height: (visibleArea || imageSize).height,
+  }
+}
+
 watch(showCropper, () => {
   if (!showCropper.value) {
     previewImage.value = {
@@ -106,6 +115,9 @@ watch(showCropper, () => {
         :min-height="cropperConfig?.minHeight"
         :min-width="cropperConfig?.minWidth"
         :image-restriction="cropperConfig?.imageRestriction"
+        v-bind="
+          cropperConfig.stencilProps?.fillDefault || cropperConfig.stencilProps?.fillDefault === undefined ? { defaultSize } : {}
+        "
       />
       <div v-if="previewImage.src" class="result_preview">
         <img :src="previewImage.src" alt="Preview Image" />

packages/nc-gui/components/general/WorkspaceIconSelector.vue

@@ -92,6 +92,7 @@ const imageCropperData = ref({
   cropperConfig: {
     stencilProps: {
       aspectRatio: 1,
+      fillDefault: true,
     },
     minHeight: 150,
     minWidth: 150,

packages/nc-gui/components/smartsheet/Form.vue

@@ -17,7 +17,7 @@ import {
   isVirtualCol,
 } from 'nocodb-sdk'
 import type { ValidateInfo } from 'ant-design-vue/es/form/useForm'
-import type { ImageCropperConfig } from '~/lib/types'
+import type { ImageCropperConfig } from '#imports'
 
 provide(IsFormInj, ref(true))
 provide(IsGalleryInj, ref(false))

packages/nc-gui/lib/types.ts

@@ -245,6 +245,11 @@ interface FormFieldsLimitOptionsType {
 interface ImageCropperConfig {
   stencilProps?: {
     aspectRatio?: number
+    /**
+     * It can be used to force the cropper fills all visible area by default:
+     * @default true
+     */
+    fillDefault?: boolean
   }
   minHeight?: number
   minWidth?: number