@yogiswara/honcho-editor-ui 1.4.7 → 1.4.9

package/dist/hooks/editor/useHonchoEditor.js

@@ -218,6 +218,36 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
     // const handleBulkSharpnessDecrease = createRelativeAdjuster('sharpnessScore', setSharpnessScore, -5);
     // const handleBulkSharpnessIncrease = createRelativeAdjuster('sharpnessScore', setSharpnessScore, 5);
     // const handleBulkSharpnessIncreaseMax = createRelativeAdjuster('sharpnessScore', setSharpnessScore, 20);
+    // // Bulk Editing Handlers
+    // const toggleBulkEditing = () => {
+    //     setIsBulkEditing(prev => {
+    //         const isNowBulk = !prev;
+    //         setSelectedImages(isNowBulk ? 'Selected' : 'Select');
+    //         return isNowBulk;
+    //     });
+    // };
+    // const handleSelectBulkPreset = (event: SelectChangeEvent<string>) => setSelectedBulkPreset(event.target.value as string);
+    // MARK : Image original and canvas
+    // const handleShowOriginal = useCallback(() => {
+    //     if (!editorRef.current || !isImageLoaded) return;
+    //     console.log("Showing original image...");
+    //     // 1. Set the flag to true to pause history recording
+    //     setIsViewingOriginal(true);
+    //     // 2. Apply the initial state to the view
+    //     // applyAdjustmentState(initialAdjustments);
+    // }, [isImageLoaded]);
+    // const handleShowEdited = useCallback(() => {
+    //     if (!editorRef.current || !isImageLoaded) return;
+    //     console.log("Restoring edited image...");
+    //     const latestState = history[historyIndex];
+    //     if (latestState) {
+    //         // 3. Re-apply the latest state from history
+    //         // applyAdjustmentState(latestState);
+    //     }
+    //     // 4. Set the flag back to false AFTER the state has been restored.
+    //     // A small timeout ensures this runs after the re-render.
+    //     setTimeout(() => setIsViewingOriginal(false), 0);
+    // }, [isImageLoaded, history, historyIndex]);
     // Mobile Panel Drag Handlers
     const handleContentHeightChange = useCallback((height) => {
         if (height > 0 && height !== contentHeight)
@@ -281,7 +311,7 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
         const imagePath = data?.raw_edited?.path
             ? data.raw_edited.path
             : data?.download?.path;
-        console.log("[DEBUG] Extracted imagePath to load:", imagePath);
+        console.log("[DEBUG FOR EXTRACT] Extracted imagePath to load:", imagePath);
         return imagePath;
     }, []);
     const loadImageEditorFromUrl = useCallback(async (url) => {
@@ -289,13 +319,13 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
             if (!editorRef.current)
                 return;
             setEditorStatus("Downloading image...");
-            console.log(`[DEBUG] Attempting to fetch image from URL: ${url}`);
             const response = await fetch(url);
             if (!response.ok)
                 throw new Error(`Failed to fetch image from URL: ${url}`);
             const blob = await response.blob();
             const filename = url.substring(url.lastIndexOf('/') + 1) || 'image.jpg';
             const file = new File([blob], filename, { type: blob.type });
+            console.log("[DEBUG FOR LOAD] File to load:", file);
             await editorRef.current.loadImageFromFile(file);
             setIsImageLoaded(true);
         }
@@ -423,36 +453,6 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
         setPresetToRename(null);
         setNewPresetName("");
     };
-    // // Bulk Editing Handlers
-    // const toggleBulkEditing = () => {
-    //     setIsBulkEditing(prev => {
-    //         const isNowBulk = !prev;
-    //         setSelectedImages(isNowBulk ? 'Selected' : 'Select');
-    //         return isNowBulk;
-    //     });
-    // };
-    // const handleSelectBulkPreset = (event: SelectChangeEvent<string>) => setSelectedBulkPreset(event.target.value as string);
-    // MARK : Image original and canvas
-    // const handleShowOriginal = useCallback(() => {
-    //     if (!editorRef.current || !isImageLoaded) return;
-    //     console.log("Showing original image...");
-    //     // 1. Set the flag to true to pause history recording
-    //     setIsViewingOriginal(true);
-    //     // 2. Apply the initial state to the view
-    //     // applyAdjustmentState(initialAdjustments);
-    // }, [isImageLoaded]);
-    // const handleShowEdited = useCallback(() => {
-    //     if (!editorRef.current || !isImageLoaded) return;
-    //     console.log("Restoring edited image...");
-    //     const latestState = history[historyIndex];
-    //     if (latestState) {
-    //         // 3. Re-apply the latest state from history
-    //         // applyAdjustmentState(latestState);
-    //     }
-    //     // 4. Set the flag back to false AFTER the state has been restored.
-    //     // A small timeout ensures this runs after the re-render.
-    //     setTimeout(() => setIsViewingOriginal(false), 0);
-    // }, [isImageLoaded, history, historyIndex]);
     // MARK: DEBUG (NEW LOGIC)
     // MARK: - Zoom Handlers
     const handleZoomAction = useCallback((action) => {
@@ -634,23 +634,32 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
         // will trigger when currentImageId change
         if (!galleryImageData)
             return;
+        console.log("++ USEEFFECT FOR NEXT AND PREV");
         const init = async () => {
+            console.log("1. INIT EDITOR");
             if (editorRef.current?.getInitialized() === false) {
                 await editorRef.current?.initialize();
             }
             const adjustmentData = galleryImageData.editor_config?.color_adjustment;
+            console.log("2. ADJUSTMENTDATA: ", adjustmentData);
             // set event
             setEventId(galleryImageData.event_id);
+            console.log("3. EVENTID: ", eventId);
             // TODO get slideshow image list
             // set to imageList
             const pathGallery = extractPathFromGallery(galleryImageData);
             // load image to editor
+            console.log("4. PATHGALLERY: ", pathGallery);
             await loadImageEditorFromUrl(pathGallery);
-            console.log("Image loaded to editor");
+            console.log("5. LOAD IMAGE TO EDITOR");
+            updateCanvasEditor();
+            console.log("6. UPDATE CANVAS EDITOR");
             // adjustment setup
             if (adjustmentData) {
+                console.log("7. ADJUSTMENTDATA FOUND");
                 const adjustmentState = mapColorAdjustmentToAdjustmentState(adjustmentData);
                 // set adjustment to editor to make adjustmentState change
+                console.log("8. SYNC HISTORY");
                 historyActions.syncHistory([adjustmentState]);
             }
             else {
@@ -658,7 +667,7 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
             }
         };
         init();
-    }, [galleryImageData, editorRef.current]);
+    }, [galleryImageData, editorRef.current, updateCanvasEditor]);
     useEffect(() => {
         // Render photo if adjustmentState change;
         if (!editorRef.current || !isImageLoaded)
@@ -690,14 +699,12 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
     useEffect(() => {
         // Cast navigator to our custom type to access the connection property safely
         const navigatorWithConnection = navigator;
-        if (!navigatorWithConnection.connection) {
+        if (!navigatorWithConnection.connection)
             return;
-        }
         const navigatorConnection = navigatorWithConnection.connection;
         const updateConnectionStatus = () => {
             const slowConnectionTypes = ['slow-2g', '2g', '3g'];
-            const isSlow = navigatorConnection.saveData ||
-                slowConnectionTypes.includes(navigatorConnection.effectiveType);
+            const isSlow = navigatorConnection.saveData || slowConnectionTypes.includes(navigatorConnection.effectiveType);
             setIsConnectionSlow(isSlow);
         };
         // Check status immediately

package/dist/hooks/useGallerySwipe.js

@@ -183,6 +183,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
             }
             // Scenario 1: At the last image of current list
             if (currentIndex === currentImageList.length - 1) {
+                console.log("[SCENARIO 1] if last image: " + currentImageList.length);
                 // Try to load next page for more images
                 const newImages = await loadNextPage();
                 if (newImages.length > 0) {
@@ -206,6 +207,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
             else {
                 // Scenario 2: Navigate to next image in current list
                 const nextImage = currentImageList[currentIndex + 1];
+                console.log("[SCENARIO 2] Navigating to next image:", nextImage);
                 setCurrentImageId(nextImage.id);
                 // Fetch complete data for the next image
                 const nextImageData = await controller.onGetImage(firebaseUid, nextImage.id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "1.4.7",
+  "version": "1.4.9",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",