allaw-ui 5.2.5 → 5.2.6

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

@@ -268,6 +268,7 @@ var FileUploader = function (_a) {
             console.log("  - imageUrl:", imageUrl);
             console.log("  - cropMetadata:", cropMetadata);
             console.log("  - outputWidth:", outputWidth, "outputHeight:", outputHeight);
+            console.log("  - cropArea dimensions:", cropMetadata.cropWidth || "default", "x", cropMetadata.cropHeight || "default");
             return [2 /*return*/, new Promise(function (resolve, reject) {
                     var img = new window.Image();
                     img.crossOrigin = "anonymous";
@@ -284,18 +285,32 @@ var FileUploader = function (_a) {
                                 reject(new Error("Impossible de créer le contexte canvas"));
                                 return;
                             }
-                            // Dimensions de la zone de crop dans le modal (selon le CSS)
-                            // Ces dimensions correspondent exactement à celles utilisées dans ImageCropperModal.module.css
-                            var cropAreaWidth = 280; // Dimensions réelles du cadre de crop pour square/circle
-                            var cropAreaHeight = 280;
-                            if (cropMetadata.shape === "banner") {
-                                cropAreaWidth = 360;
-                                cropAreaHeight = 120;
+                            // Dimensions de la zone de crop dans le modal
+                            // Utiliser les dimensions réelles si disponibles dans les métadonnées,
+                            // sinon utiliser les valeurs par défaut du CSS
+                            var cropAreaWidth = cropMetadata.cropWidth || 280; // Dimensions réelles du cadre de crop
+                            var cropAreaHeight = cropMetadata.cropHeight || 280;
+                            // Si les dimensions ne sont pas dans les métadonnées, utiliser les valeurs par défaut selon la shape
+                            if (!cropMetadata.cropWidth || !cropMetadata.cropHeight) {
+                                if (cropMetadata.shape === "banner") {
+                                    cropAreaWidth = 360;
+                                    cropAreaHeight = 120;
+                                }
+                                else {
+                                    cropAreaWidth = 280;
+                                    cropAreaHeight = 280;
+                                }
                             }
-                            // Le zoom dans cropMetadata est le zoom total (baseZoom * zoom relatif)
-                            // baseZoom est calculé dans le modal comme Math.max(cropWidth / imgWidth, cropHeight / imgHeight)
+                            // Le zoom dans cropMetadata est le zoom total (baseZoom * zoom relatif * marge)
+                            // baseZoom est calculé dans le modal comme Math.max(cropWidth / imgWidth, cropHeight / imgHeight) * 1.01
                             // puis multiplié par le zoom relatif (1-3) pour obtenir le zoom total
                             var totalZoom = cropMetadata.zoom;
+                            // S'assurer que le zoom est valide (éviter division par zéro ou valeurs négatives)
+                            if (totalZoom <= 0 || !isFinite(totalZoom)) {
+                                console.error("❌ [FileUploader] Zoom invalide:", totalZoom);
+                                reject(new Error("Zoom invalide"));
+                                return;
+                            }
                             // Dans le modal, la transform CSS est appliquée sur le container de l'image :
                             // transform: translate(offsetX, offsetY) scale(totalZoom)
                             // transform-origin: center
@@ -323,16 +338,23 @@ var FileUploader = function (_a) {
                             // Dimensions de la zone de crop dans l'image originale
                             var cropWidthInOriginal = cropAreaWidth / totalZoom;
                             var cropHeightInOriginal = cropAreaHeight / totalZoom;
+                            // S'assurer que les dimensions calculées sont valides (éviter les valeurs négatives ou nulles)
+                            if (cropWidthInOriginal <= 0 || cropHeightInOriginal <= 0) {
+                                console.error("❌ [FileUploader] Dimensions de crop invalides:", cropWidthInOriginal, cropHeightInOriginal);
+                                reject(new Error("Dimensions de crop invalides: ".concat(cropWidthInOriginal, "x").concat(cropHeightInOriginal)));
+                                return;
+                            }
                             // 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);
+                            // Utiliser Math.floor pour éviter les problèmes de précision avec les pixels
+                            var clampedSourceX = Math.max(0, Math.min(Math.floor(sourceX), img.width - 1));
+                            var clampedSourceY = Math.max(0, Math.min(Math.floor(sourceY), img.height - 1));
+                            var clampedSourceWidth = Math.max(1, Math.min(Math.ceil(sourceWidth), img.width - clampedSourceX));
+                            var clampedSourceHeight = Math.max(1, Math.min(Math.ceil(sourceHeight), img.height - clampedSourceY));
                             // Dessiner l'image croppée sur le canvas
                             ctx.drawImage(img, clampedSourceX, clampedSourceY, clampedSourceWidth, clampedSourceHeight, 0, 0, outputWidth, outputHeight);
                             // Si c'est un cercle, appliquer un masque

package/dist/components/molecules/fileUploader/ImageCropperModal.d.ts

@@ -4,6 +4,8 @@ export interface CropMetadata {
     offsetX: number;
     offsetY: number;
     shape: "circle" | "square" | "banner";
+    cropWidth?: number;
+    cropHeight?: number;
 }
 interface ImageCropperModalProps {
     file: File;

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

@@ -29,7 +29,10 @@ var ImageCropperModal = function (_a) {
         // Calcul du zoom pour que l'image couvre complètement le cadre
         // On utilise max pour assurer que l'image couvre tout le cadre, sans espace vide
         var fitZoom = Math.max(cropWidth / imgWidth, cropHeight / imgHeight);
-        return fitZoom;
+        // Ajouter une marge minimale (1%) pour éviter les problèmes de précision
+        // quand le zoom est exactement à 1, garantissant toujours un peu d'espace pour ajuster
+        var MIN_ZOOM_MARGIN = 1.01;
+        return fitZoom * MIN_ZOOM_MARGIN;
     };
     // Calcule les limites de déplacement pour éviter les zones vides
     var calculateBoundaries = function () {
@@ -200,12 +203,19 @@ var ImageCropperModal = function (_a) {
                 React.createElement("div", { className: styles.action_buttons },
                     React.createElement("button", { className: styles.cancel_button, onClick: onCancel }, "Annuler"),
                     React.createElement("button", { className: styles.confirm_button, onClick: function () {
-                            // Retourner les métadonnées de cadrage avec le zoom total
+                            var _a;
+                            // Récupérer les dimensions réelles du cadre de crop
+                            var cropRect = (_a = cropAreaRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+                            var cropWidth = (cropRect === null || cropRect === void 0 ? void 0 : cropRect.width) || 280;
+                            var cropHeight = (cropRect === null || cropRect === void 0 ? void 0 : cropRect.height) || 280;
+                            // Retourner les métadonnées de cadrage avec le zoom total et les dimensions réelles
                             onConfirm({
                                 zoom: baseZoom * zoom,
                                 offsetX: position.x,
                                 offsetY: position.y,
                                 shape: shape,
+                                cropWidth: cropWidth,
+                                cropHeight: cropHeight,
                             });
                         } }, "Valider"))))));
 };

package/package.json

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