[BUGFIX] Fix image manipulation GUI only operating on 1st crop variant

When multiple crop variants are defined (for example in EXT:styleguide
"Form engine elements - imageManipulation" for "crop_5" with
"mobile" and "desktop), the currently selected aspect ratio
and the size of the cropping box was only computed based on the
first crop variant.

This patch uses a wrapping container for each variant and adjusts
the JavaScript to operate on that context.

The information for the current cropping box size is now also
based on this context.

Resolves: #103879
Releases: main, 12.4
Change-Id: I38e235ddb5ed5f7463a5f0931608944326097f9f
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/84781


Tested-by: Benni Mack <benni@typo3.org>
Tested-by: Jasmina Ließmann <minapokhalo+typo3@gmail.com>
Reviewed-by: Benni Mack <benni@typo3.org>
Reviewed-by: Jasmina Ließmann <minapokhalo+typo3@gmail.com>
Tested-by: core-ci <typo3@b13.com>

Build/Sources/TypeScript/backend/image-manipulation.ts

@@ -408,6 +408,7 @@ class ImageManipulation {
       );
       const variant: CropVariant = Object.assign({}, this.data[cropVariantId], { cropArea });
       this.updatePreviewThumbnail(variant, elem);
+      this.currentModal.querySelector(`[data-crop-variant-container="${variant.id}"]`)?.querySelector(`[data-bs-option="${variant.selectedRatio}"]`)?.classList.add('active');
     });
 
     this.currentCropVariant.cropArea = this.convertRelativeToAbsoluteCropArea(
@@ -501,8 +502,13 @@ class ImageManipulation {
   private update(cropVariant: CropVariant): void {
     const temp: CropVariant = Object.assign({}, cropVariant);
     const selectedRatio: Ratio = cropVariant.allowedAspectRatios[cropVariant.selectedRatio];
-    this.currentModal.querySelector('[data-bs-option].active')?.classList.remove('active');
-    this.currentModal.querySelector(`[data-bs-option="${cropVariant.selectedRatio}"]`)?.classList.add('active');
+
+    // Set cropInfo to current container context
+    this.cropInfo = this.currentModal.querySelector(`[data-crop-variant-container="${cropVariant.id}"]`)?.querySelector(this.cropInfoSelector);
+    // highlight the currently selected ratio of the active cropping variant
+    this.currentModal.querySelector(`[data-crop-variant-container="${cropVariant.id}"]`)?.querySelector('[data-bs-option].active')?.classList.remove('active');
+    this.currentModal.querySelector(`[data-crop-variant-container="${cropVariant.id}"]`)?.querySelector(`[data-bs-option="${cropVariant.selectedRatio}"]`)?.classList.add('active');
+
     /**
      * Setting the aspect ratio cause a redraw of the crop area so we need to manually reset it to last data
      */

typo3/sysext/backend/Resources/Private/Templates/Form/ImageManipulationWizard.html

@@ -10,7 +10,7 @@
 <div class="modal-panel-sidebar">
     <div class="panel-group" id="accordion-cropper-variants" role="tablist" aria-multiselectable="false">
         <f:for each="{cropVariants}" as="cropVariant" iteration="cropVariantIterator">
-            <div class="panel panel-default">
+            <div class="panel panel-default" data-crop-variant-container="{cropVariant.id}">
                 <div class="panel-heading" role="tab" id="cropper-accordion-heading-{cropVariantIterator.cycle}">
                     <h4 class="panel-title">
                         <a