allaw-ui 5.1.4 → 5.1.6

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

@@ -56,15 +56,29 @@ var FileUploader = function (_a) {
     var progressIntervalRef = useRef(null);
     var fileInputRef = useRef(null);
     var _z = useState(originalFileName), currentFileName = _z[0], setCurrentFileName = _z[1];
+    // Garder une référence à l'image originale pour permettre les recrops
+    var originalImageUrlRef = useRef(null);
+    var originalFileRef = useRef(null);
     useEffect(function () {
         if (initialFile) {
             setSelectedFile(initialFile);
+            originalFileRef.current = initialFile;
             initialFile.arrayBuffer().then(function (content) {
                 setFileContent(content);
             });
+            // Créer une URL pour l'image originale si c'est une image
+            if (isImageFile(initialFile) && !originalImageUrlRef.current) {
+                var url = URL.createObjectURL(initialFile);
+                originalImageUrlRef.current = url;
+            }
         }
         if (initialPreviewUrl) {
             setPreviewUrl(initialPreviewUrl);
+            // Pour initialPreviewUrl, on ne peut pas créer de File depuis l'URL
+            // originalFileRef restera null, mais on peut utiliser l'URL pour le crop
+            if (!originalImageUrlRef.current) {
+                originalImageUrlRef.current = initialPreviewUrl;
+            }
         }
         if (initialCropMetadata) {
             setCropMetadata(initialCropMetadata);
@@ -78,6 +92,10 @@ var FileUploader = function (_a) {
             if (previewUrl && !initialPreviewUrl) {
                 URL.revokeObjectURL(previewUrl);
             }
+            // Nettoyer aussi la référence à l'image originale
+            if (originalImageUrlRef.current && !initialPreviewUrl) {
+                URL.revokeObjectURL(originalImageUrlRef.current);
+            }
         };
     }, [previewUrl, initialPreviewUrl]);
     var startProgressSimulation = function () {
@@ -169,6 +187,12 @@ var FileUploader = function (_a) {
                     if (isImageFile(file)) {
                         url = URL.createObjectURL(file);
                         setPreviewUrl(url);
+                        // Conserver la référence à l'image originale pour les recrops
+                        if (originalImageUrlRef.current && !initialPreviewUrl) {
+                            URL.revokeObjectURL(originalImageUrlRef.current);
+                        }
+                        originalImageUrlRef.current = url;
+                        originalFileRef.current = file;
                         if (!enableCropping) {
                             setCropMetadata({
                                 zoom: 1,
@@ -181,6 +205,10 @@ var FileUploader = function (_a) {
                     else {
                         setPreviewUrl(null);
                         setCropMetadata(null);
+                        if (originalImageUrlRef.current && !initialPreviewUrl) {
+                            URL.revokeObjectURL(originalImageUrlRef.current);
+                        }
+                        originalImageUrlRef.current = null;
                     }
                     if (autoManageProgress && !(enableCropping && isImageFile(file))) {
                         startProgressSimulation();
@@ -207,9 +235,28 @@ var FileUploader = function (_a) {
         });
     }); };
     var openCropModal = function () {
-        if (selectedFile && isImageFile(selectedFile)) {
+        var _a, _b;
+        // Si on a un fichier original, ouvrir le modal de crop pour recropper
+        // Sinon, si on n'a pas de fichier original (image déjà croppée), ouvrir le sélecteur de fichier
+        if (originalFileRef.current && isImageFile(originalFileRef.current)) {
+            // S'assurer qu'on a une URL pour l'image originale
+            if (!originalImageUrlRef.current) {
+                var url = URL.createObjectURL(originalFileRef.current);
+                originalImageUrlRef.current = url;
+            }
+            // Utiliser le fichier original pour le modal de crop
+            setSelectedFile(originalFileRef.current);
             setShowCropper(true);
         }
+        else if (selectedFile && isImageFile(selectedFile)) {
+            // Si on a un selectedFile mais pas d'original, c'est probablement une image déjà croppée
+            // Ouvrir le sélecteur de fichier pour charger une nouvelle image
+            (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+        else {
+            // Pas de fichier, ouvrir le sélecteur
+            (_b = fileInputRef.current) === null || _b === void 0 ? void 0 : _b.click();
+        }
     };
     /**
      * Crop l'image côté client et retourne un Blob
@@ -217,10 +264,16 @@ var FileUploader = function (_a) {
      */
     var cropImageToBlob = function (imageUrl, cropMetadata, outputWidth, outputHeight) { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
+            console.log("🔪 [FileUploader] cropImageToBlob appelé");
+            console.log("  - imageUrl:", imageUrl);
+            console.log("  - cropMetadata:", cropMetadata);
+            console.log("  - outputWidth:", outputWidth, "outputHeight:", outputHeight);
             return [2 /*return*/, new Promise(function (resolve, reject) {
                     var img = new window.Image();
                     img.crossOrigin = "anonymous";
                     img.onload = function () {
+                        console.log("✅ [FileUploader] Image chargée dans cropImageToBlob");
+                        console.log("  - img.width:", img.width, "img.height:", img.height);
                         try {
                             // Créer un canvas aux dimensions de sortie
                             var canvas = document.createElement("canvas");
@@ -301,22 +354,30 @@ var FileUploader = function (_a) {
                                 ctx.putImageData(imageData, 0, 0);
                             }
                             // Convertir en Blob PNG
+                            console.log("🖼️ [FileUploader] Conversion canvas vers Blob...");
                             canvas.toBlob(function (blob) {
                                 if (blob) {
+                                    console.log("✅ [FileUploader] Blob créé avec succès, taille:", blob.size);
                                     resolve(blob);
                                 }
                                 else {
+                                    console.error("❌ [FileUploader] Échec de la conversion canvas vers Blob");
                                     reject(new Error("Échec de la conversion canvas vers Blob"));
                                 }
                             }, "image/png", 0.95);
                         }
                         catch (error) {
+                            console.error("❌ [FileUploader] Erreur dans img.onload:", error);
                             reject(error);
                         }
                     };
-                    img.onerror = function () {
+                    img.onerror = function (error) {
+                        console.error("❌ [FileUploader] Erreur de chargement de l'image");
+                        console.error("  - imageUrl:", imageUrl);
+                        console.error("  - error:", error);
                         reject(new Error("Échec du chargement de l'image"));
                     };
+                    console.log("📤 [FileUploader] Définition de img.src:", imageUrl);
                     img.src = imageUrl;
                 })];
         });
@@ -325,53 +386,88 @@ var FileUploader = function (_a) {
         setShowCropper(false);
     };
     var handleCropConfirm = function (cropMetadata) { return __awaiter(void 0, void 0, void 0, function () {
-        var dimensions, croppedBlob, croppedFile, croppedContent, croppedUrl, error_2;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var dimensions, fileToUse, imageToCropUrl, croppedBlob, croppedFile, croppedContent, croppedUrl, error_2;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
+                    console.log("✂️ [FileUploader] handleCropConfirm appelé");
+                    console.log("  - cropMetadata:", cropMetadata);
+                    console.log("  - clientSideCrop:", clientSideCrop);
+                    console.log("  - selectedFile:", selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.name, "size:", selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.size);
+                    console.log("  - originalFileRef.current:", (_a = originalFileRef.current) === null || _a === void 0 ? void 0 : _a.name, "size:", (_b = originalFileRef.current) === null || _b === void 0 ? void 0 : _b.size);
+                    console.log("  - originalImageUrlRef.current:", originalImageUrlRef.current);
+                    console.log("  - previewUrl:", previewUrl);
                     setShowCropper(false);
                     setCropMetadata(cropMetadata);
                     if (autoManageProgress) {
                         startProgressSimulation();
                     }
-                    if (!(selectedFile && fileContent && previewUrl)) return [3 /*break*/, 7];
-                    if (!clientSideCrop) return [3 /*break*/, 6];
-                    _a.label = 1;
+                    if (!(selectedFile && fileContent)) return [3 /*break*/, 10];
+                    if (!clientSideCrop) return [3 /*break*/, 9];
+                    _c.label = 1;
                 case 1:
-                    _a.trys.push([1, 4, , 5]);
+                    _c.trys.push([1, 7, , 8]);
                     dimensions = cropOutputDimensions[cropMetadata.shape] ||
                         cropOutputDimensions.square || { width: 200, height: 200 };
-                    return [4 /*yield*/, cropImageToBlob(previewUrl, cropMetadata, dimensions.width, dimensions.height)];
+                    console.log("📐 [FileUploader] Dimensions de sortie:", dimensions);
+                    fileToUse = originalFileRef.current || selectedFile;
+                    console.log("📁 [FileUploader] Fichier à utiliser pour le crop:", fileToUse.name, "size:", fileToUse.size, "type:", fileToUse.type);
+                    imageToCropUrl = URL.createObjectURL(fileToUse);
+                    console.log("🔗 [FileUploader] URL blob créée pour le crop:", imageToCropUrl);
+                    _c.label = 2;
                 case 2:
-                    croppedBlob = _a.sent();
-                    croppedFile = new File([croppedBlob], selectedFile.name.replace(/\.[^/.]+$/, ".png"), // Remplacer l'extension par .png
+                    _c.trys.push([2, , 5, 6]);
+                    // Cropper l'image côté client
+                    console.log("🔄 [FileUploader] Appel de cropImageToBlob...");
+                    return [4 /*yield*/, cropImageToBlob(imageToCropUrl, cropMetadata, dimensions.width, dimensions.height)];
+                case 3:
+                    croppedBlob = _c.sent();
+                    console.log("✅ [FileUploader] cropImageToBlob terminé, blob size:", croppedBlob.size);
+                    croppedFile = new File([croppedBlob], fileToUse.name.replace(/\.[^/.]+$/, ".png"), // Remplacer l'extension par .png
                     { type: "image/png" });
+                    console.log("📄 [FileUploader] File croppé créé:", croppedFile.name, "size:", croppedFile.size);
                     return [4 /*yield*/, croppedFile.arrayBuffer()];
-                case 3:
-                    croppedContent = _a.sent();
+                case 4:
+                    croppedContent = _c.sent();
+                    console.log("📦 [FileUploader] Contenu du fichier croppé lu, size:", croppedContent.byteLength);
                     croppedUrl = URL.createObjectURL(croppedBlob);
+                    console.log("🖼️ [FileUploader] URL blob créée pour la preview:", croppedUrl);
                     if (previewUrl && !initialPreviewUrl) {
+                        console.log("🗑️ [FileUploader] Révoquement de l'ancienne previewUrl:", previewUrl);
                         URL.revokeObjectURL(previewUrl);
                     }
                     setPreviewUrl(croppedUrl);
                     setSelectedFile(croppedFile);
                     setFileContent(croppedContent);
                     setCurrentFileName(croppedFile.name);
+                    // Réinitialiser cropMetadata car l'image est déjà croppée
+                    // Plus besoin d'appliquer les transformations CSS
+                    setCropMetadata(null);
                     // Appeler onFileRead avec le fichier croppé (pas de cropMetadata car déjà croppé)
+                    console.log("📞 [FileUploader] Appel de onFileRead avec le fichier croppé");
                     onFileRead === null || onFileRead === void 0 ? void 0 : onFileRead(croppedFile, croppedContent);
-                    return [3 /*break*/, 5];
-                case 4:
-                    error_2 = _a.sent();
-                    console.error("Erreur lors du crop de l'image:", error_2);
+                    return [3 /*break*/, 6];
+                case 5:
+                    // Toujours nettoyer l'URL blob temporaire créée pour le crop
+                    console.log("🗑️ [FileUploader] Révoquement de l'URL blob temporaire:", imageToCropUrl);
+                    URL.revokeObjectURL(imageToCropUrl);
+                    return [7 /*endfinally*/];
+                case 6: return [3 /*break*/, 8];
+                case 7:
+                    error_2 = _c.sent();
+                    console.error("❌ [FileUploader] Erreur lors du crop de l'image:", error_2);
+                    console.error("  - error details:", error_2);
                     // En cas d'erreur, fallback sur l'image originale avec métadonnées
+                    console.log("🔄 [FileUploader] Fallback sur l'image originale");
                     onFileRead === null || onFileRead === void 0 ? void 0 : onFileRead(selectedFile, fileContent, cropMetadata);
-                    return [3 /*break*/, 5];
-                case 5: return [3 /*break*/, 7];
-                case 6:
+                    return [3 /*break*/, 8];
+                case 8: return [3 /*break*/, 10];
+                case 9:
                     // Passer l'image originale avec les métadonnées au serveur
                     onFileRead === null || onFileRead === void 0 ? void 0 : onFileRead(selectedFile, fileContent, cropMetadata);
-                    _a.label = 7;
-                case 7: return [2 /*return*/];
+                    _c.label = 10;
+                case 10: return [2 /*return*/];
             }
         });
     }); };
@@ -379,6 +475,12 @@ var FileUploader = function (_a) {
         if (previewUrl && !initialPreviewUrl) {
             URL.revokeObjectURL(previewUrl);
         }
+        // Nettoyer la référence à l'image originale
+        if (originalImageUrlRef.current && !initialPreviewUrl) {
+            URL.revokeObjectURL(originalImageUrlRef.current);
+        }
+        originalImageUrlRef.current = null;
+        originalFileRef.current = null;
         if (autoManageProgress) {
             stopProgressSimulation();
             setInternalProgress(0);

package/package.json

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