allaw-ui 5.1.3 → 5.1.5

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
@@ -239,35 +286,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
@@ -315,7 +372,7 @@ 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;
+        var dimensions, imageToCrop, croppedBlob, croppedFile, croppedContent, croppedUrl, error_2;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -330,9 +387,9 @@ var FileUploader = function (_a) {
                 case 1:
                     _a.trys.push([1, 4, , 5]);
                     dimensions = cropOutputDimensions[cropMetadata.shape] ||
-                        cropOutputDimensions.square ||
-                        { width: 200, height: 200 };
-                    return [4 /*yield*/, cropImageToBlob(previewUrl, cropMetadata, dimensions.width, dimensions.height)];
+                        cropOutputDimensions.square || { width: 200, height: 200 };
+                    imageToCrop = originalImageUrlRef.current || previewUrl;
+                    return [4 /*yield*/, cropImageToBlob(imageToCrop, cropMetadata, dimensions.width, dimensions.height)];
                 case 2:
                     croppedBlob = _a.sent();
                     croppedFile = new File([croppedBlob], selectedFile.name.replace(/\.[^/.]+$/, ".png"), // Remplacer l'extension par .png
@@ -348,6 +405,9 @@ var FileUploader = function (_a) {
                     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é)
                     onFileRead === null || onFileRead === void 0 ? void 0 : onFileRead(croppedFile, croppedContent);
                     return [3 /*break*/, 5];
@@ -370,6 +430,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.3",
+  "version": "5.1.5",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",