fixes widgetOptions not being used when passed from props (widget con… (#5046)

* fixes widgetOptions not being used when passed from props (widget controls adjust image)

* removed useless method

* adds changelog

---------

Co-authored-by: Tom Boutell <tom@apostrophecms.com>

Author: ValJed

CHANGELOG.md

@@ -17,6 +17,7 @@
 * Make conditional fields work in Image Editor.
 * Importing a custom icon from an npm module using a `~` path per the admin UI now works per the documentation, as long as the Vue component used for the icon is structured like those found in `@apostrophecms/vue-material-design-icons`.
 * The `button: true` flag works again for piece module utility operations. Previously the button appeared but did not trigger the desired operation.
+* Fix the fact that area options `minSize` and `aspectRatio` weren't passed to the image cropper when coming directly from the area and the widget controls (without passing through the widget editor).
 * Fixes the widget data being cloned to be saved before the `postprocess` method being called, which leads to a loss of data in `AposWidgetEditor` (like the autocrop data).
 * In editors like `AposWidgetEditor` relationships are now post processed after they are updated in `AposInputRelationship` only for the relationship that has been updated. 
 It allows live preview to work well with it, it also avoids complexity and fixes updated data not being properly synced between the editor and the `AposSchema`.

modules/@apostrophecms/image/ui/apos/components/AposImageRelationshipEditor.vue

@@ -42,7 +42,7 @@
             </label>
             <AposSelect
               :selected="aspectRatio"
-              :choices="aspectRatios"
+              :choices="aspectRatioChoices"
               :disabled="disableAspectRatio"
               @change="updateAspectRatio"
             />
@@ -140,7 +140,11 @@ export default {
     },
     widgetSchema: {
       type: Array,
-      default: () => ([])
+      default: () => []
+    },
+    widgetOptions: {
+      type: Object,
+      default: null
     },
     item: {
       type: Object,
@@ -149,8 +153,13 @@ export default {
   },
   emits: [ 'modal-result' ],
   data() {
-    const { aspectRatio, disableAspectRatio } = this.getAspectRatioFromConfig();
-    const minSize = this.getMinSize();
+    const widgetOptions = this.getWidgetOptions();
+    const {
+      aspectRatio,
+      aspectRatioChoices,
+      disableAspectRatio
+    } = this.getAspectRatioData(widgetOptions);
+    const minSize = this.widgetOptions.minSize || [];
     const image = this.getImage();
     const data = this.setDataValues(image);
 
@@ -173,7 +182,7 @@ export default {
       },
       currentTab: null,
       aspectRatio,
-      aspectRatios: getAspectRatios(this.$t('apostrophe:aspectRatioFree')),
+      aspectRatioChoices,
       disableAspectRatio,
       minSize,
       correctingSizes: false,
@@ -201,6 +210,14 @@ export default {
     this.computeMinSizes();
   },
   methods: {
+    getWidgetOptions() {
+      if (this.widgetOptions) {
+        return this.widgetOptions;
+      }
+
+      const [ widgetOptions = {} ] = apos.area.widgetOptions || [];
+      return widgetOptions;
+    },
     getImage() {
       return this.item || this.widget?._image?.[0];
     },
@@ -254,8 +271,8 @@ export default {
         return;
       }
 
-      // If ratio wants a square, we simply take the higher min size of the
-      // image
+      // If ratio wants a square,
+      // we simply take the higher min size of the image
       if (this.aspectRatio === 1) {
         const higherValue = minWidth > minHeight ? minWidth : minHeight;
         this.minWidth = higherValue;
@@ -425,29 +442,34 @@ export default {
     switchPane(name) {
       this.currentTab = name;
     },
-    getAspectRatioFromConfig() {
-      const [ widgetOptions = {} ] = apos.area.widgetOptions || [];
-
-      return widgetOptions.aspectRatio && widgetOptions.aspectRatio.length === 2
-        ? {
-          aspectRatio: widgetOptions.aspectRatio[0] / widgetOptions.aspectRatio[1],
-          disableAspectRatio: true
-        }
-        : {
+    getAspectRatioData(widgetOptions = {}) {
+      if (
+        !Array.isArray(widgetOptions.aspectRatio) ||
+        widgetOptions.aspectRatio.length !== 2
+      ) {
+        return {
           aspectRatio: null,
-          disableAspectRatio: false
+          disableAspectRatio: false,
+          aspectRatioChoices: getAspectRatios(this.$t('apostrophe:aspectRatioFree'))
         };
+      }
+
+      const [ x, y ] = widgetOptions.aspectRatio;
+      const aspectRatio = x / y;
+      return {
+        aspectRatio,
+        disableAspectRatio: true,
+        aspectRatioChoices: [ {
+          label: `${x}:${y}`,
+          value: aspectRatio
+        } ]
+      };
     },
     updateAspectRatio(value) {
       this.aspectRatio = value;
       this.computeMaxSizes();
       this.computeMinSizes();
     },
-    getMinSize() {
-      const [ widgetOptions = {} ] = apos.area.widgetOptions;
-
-      return widgetOptions.minSize || [];
-    },
     computeAspectRatio(value, name) {
       if (!this.aspectRatio) {
         return;