allaw-ui 5.1.3 → 5.1.4

package/dist/components/molecules/fileUploader/FileUploader.js

@@ -239,35 +239,45 @@ var FileUploader = function (_a) {
                                 cropAreaWidth = 320;
                                 cropAreaHeight = 60;
                             }
-                            // Le zoom dans cropMetadata est déjà le zoom total (baseZoom * zoom relatif)
-                            // Comme calculé dans ImageCropperModal ligne 318: zoom: baseZoom * zoom
+                            // Le zoom dans cropMetadata est le zoom total (baseZoom * zoom relatif)
+                            // baseZoom est calculé dans le modal comme Math.max(cropWidth / imgWidth, cropHeight / imgHeight)
+                            // puis multiplié par le zoom relatif (1-3) pour obtenir le zoom total
                             var totalZoom = cropMetadata.zoom;
-                            // Dimensions de l'image après zoom
-                            var scaledImgWidth = img.width * totalZoom;
-                            var scaledImgHeight = img.height * totalZoom;
-                            // Dans le modal, l'image est centrée dans le container
-                            // Le container a les mêmes dimensions que le viewport du modal
-                            // La cropArea est centrée dans ce container
-                            // Les offsets (offsetX, offsetY) représentent le déplacement de l'image depuis le centre
-                            // Position du centre de l'image zoomée (qui correspond au centre du container)
-                            var imgCenterX = scaledImgWidth / 2;
-                            var imgCenterY = scaledImgHeight / 2;
-                            // Position du centre de la cropArea dans l'image zoomée
-                            // Les offsets sont la position de l'image par rapport au centre du container
-                            // Donc le centre de la cropArea dans l'image zoomée est :
-                            var cropCenterX = imgCenterX - cropMetadata.offsetX;
-                            var cropCenterY = imgCenterY - cropMetadata.offsetY;
-                            // Coordonnées du coin supérieur gauche de la zone à cropper dans l'image zoomée
-                            var cropXInScaledImg = cropCenterX - cropAreaWidth / 2;
-                            var cropYInScaledImg = cropCenterY - cropAreaHeight / 2;
-                            // Convertir ces coordonnées en coordonnées de l'image originale (diviser par le zoom)
-                            var sourceX = cropXInScaledImg / totalZoom;
-                            var sourceY = cropYInScaledImg / totalZoom;
-                            var sourceWidth = cropAreaWidth / totalZoom;
-                            var sourceHeight = cropAreaHeight / totalZoom;
-                            // S'assurer que les coordonnées sont valides
-                            var clampedSourceX = Math.max(0, Math.min(sourceX, img.width - sourceWidth));
-                            var clampedSourceY = Math.max(0, Math.min(sourceY, img.height - sourceHeight));
+                            // Dans le modal, la transform CSS est appliquée sur le container de l'image :
+                            // transform: translate(offsetX, offsetY) scale(totalZoom)
+                            // transform-origin: center
+                            //
+                            // L'ordre d'application est : scale d'abord (depuis le centre), puis translate
+                            // Géométriquement, cela signifie :
+                            // 1. L'image est agrandie avec scale(totalZoom) depuis son centre
+                            // 2. L'image agrandie est déplacée de (offsetX, offsetY)
+                            //
+                            // La cropArea est fixe et centrée dans le container
+                            // Pour trouver quelle partie de l'image originale correspond à la cropArea :
+                            // - Le centre de la cropArea correspond au point (0, 0) dans le système de coordonnées du container
+                            // - Ce point (0, 0) dans l'image transformée correspond à (-offsetX, -offsetY) dans l'image agrandie
+                            // - Ce point dans l'image agrandie correspond à (-offsetX/totalZoom, -offsetY/totalZoom) dans l'image originale
+                            // Centre de l'image originale
+                            var imgCenterX = img.width / 2;
+                            var imgCenterY = img.height / 2;
+                            // Position du centre de la cropArea dans l'image originale
+                            // Si l'image transformée est déplacée de offsetX vers la droite,
+                            // alors le centre de la cropArea (qui reste au centre du container)
+                            // correspond à un point qui est offsetX pixels à gauche du centre de l'image transformée
+                            // Converti en coordonnées de l'image originale :
+                            var cropCenterXInOriginal = imgCenterX - cropMetadata.offsetX / totalZoom;
+                            var cropCenterYInOriginal = imgCenterY - cropMetadata.offsetY / totalZoom;
+                            // Dimensions de la zone de crop dans l'image originale
+                            var cropWidthInOriginal = cropAreaWidth / totalZoom;
+                            var cropHeightInOriginal = cropAreaHeight / totalZoom;
+                            // Coordonnées du coin supérieur gauche de la zone à cropper dans l'image originale
+                            var sourceX = cropCenterXInOriginal - cropWidthInOriginal / 2;
+                            var sourceY = cropCenterYInOriginal - cropHeightInOriginal / 2;
+                            var sourceWidth = cropWidthInOriginal;
+                            var sourceHeight = cropHeightInOriginal;
+                            // S'assurer que les coordonnées sont valides (pas en dehors de l'image)
+                            var clampedSourceX = Math.max(0, Math.min(sourceX, img.width - 1));
+                            var clampedSourceY = Math.max(0, Math.min(sourceY, img.height - 1));
                             var clampedSourceWidth = Math.min(sourceWidth, img.width - clampedSourceX);
                             var clampedSourceHeight = Math.min(sourceHeight, img.height - clampedSourceY);
                             // Dessiner l'image croppée sur le canvas
@@ -330,8 +340,7 @@ var FileUploader = function (_a) {
                 case 1:
                     _a.trys.push([1, 4, , 5]);
                     dimensions = cropOutputDimensions[cropMetadata.shape] ||
-                        cropOutputDimensions.square ||
-                        { width: 200, height: 200 };
+                        cropOutputDimensions.square || { width: 200, height: 200 };
                     return [4 /*yield*/, cropImageToBlob(previewUrl, cropMetadata, dimensions.width, dimensions.height)];
                 case 2:
                     croppedBlob = _a.sent();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "5.1.3",
+  "version": "5.1.4",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",