@yogiswara/honcho-editor-ui 1.0.13 → 1.0.15

package/dist/hooks/editor/useHonchoEditor.d.ts

@@ -39,19 +39,13 @@ export type ImageItem = {
     file: File;
 };
 export declare function useHonchoEditor(controller: Controller, initImageId: string, firebaseUid: string): {
-    handlePrev: (firebaseUid: string) => Promise<void>;
-    handleNext: (firebaseUid: string) => Promise<void>;
     canvasRef: import("react").MutableRefObject<HTMLCanvasElement | null>;
     canvasContainerRef: import("react").MutableRefObject<HTMLDivElement | null>;
     fileInputRef: import("react").MutableRefObject<HTMLInputElement | null>;
     displayedToken: string | null;
-    handleBack: (firebaseUid: string) => void;
-    onGetImage: (firebaseUid: string, imageID: string) => Promise<Gallery>;
-    getImageList: (firebaseUid: string) => Promise<Gallery[]>;
-    syncConfig: (firebaseUid: string) => Promise<void>;
-    getPresets: (firebaseUid: string) => Promise<Preset[]>;
-    createPreset: (firebaseUid: string, name: string, settings: AdjustmentState) => Promise<Preset>;
-    deletePreset: (firebaseUid: string, presetId: string) => Promise<void>;
+    handleBackCallback: () => void;
+    handlePrev: (firebaseUid: string) => Promise<void>;
+    handleNext: (firebaseUid: string) => Promise<void>;
     panelRef: import("react").MutableRefObject<HTMLDivElement | null>;
     contentRef: import("react").MutableRefObject<HTMLDivElement | null>;
     panelHeight: number;

package/dist/hooks/editor/useHonchoEditor.js

@@ -157,6 +157,11 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
             handleOpenCopyDialog(); // Assumes handleOpenCopyDialog is defined in the hook
         }
     }, [ /* handleOpenCopyDialog dependency */]);
+    useEffect(() => {
+        if (editorRef.current?.getInitialized() === false) {
+            editorRef.current?.initialize();
+        }
+    }, [editorRef]);
     // Effect for measuring mobile panel content
     useEffect(() => {
         const timeoutId = setTimeout(() => {
@@ -227,6 +232,7 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
         try {
             await editorRef.current.loadImageFromFile(file);
             setIsImageLoaded(true);
+            updateCanvas();
         }
         catch (e) {
             console.error("Error loading image:", e);
@@ -281,20 +287,31 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
         }
     }, [controller, loadImageFromUrl]);
     const handlePrev = useCallback(async (firebaseUid) => {
-        const prevImageId = imageList[imageList.length - 2]?.id;
-        if (prevImageId) {
-            setCurrentImageId(prevImageId);
+        // Find the current image index
+        const currentIndex = imageList.findIndex(img => img.id === currentImageId);
+        // If not the first image, go to previous
+        if (currentIndex > 0) {
+            const prevImageId = imageList[currentIndex - 1]?.id;
+            if (prevImageId) {
+                setCurrentImageId(prevImageId);
+            }
         }
-    }, [imageList]);
+    }, [imageList, currentImageId]);
     const handleNext = useCallback(async (firebaseUid) => {
-        const nextImageId = imageList[1]?.id;
-        if (nextImageId) {
-            setCurrentImageId(nextImageId);
+        // Find the current image index
+        const currentIndex = imageList.findIndex(img => img.id === currentImageId);
+        // If not the last image, go to next
+        if (currentIndex < imageList.length - 1 && currentIndex !== -1) {
+            const nextImageId = imageList[currentIndex + 1]?.id;
+            if (nextImageId) {
+                setCurrentImageId(nextImageId);
+            }
         }
-    }, [imageList]);
+    }, [imageList, currentImageId]);
     useEffect(() => {
-        loadImageFromId(firebaseUid, currentImageId); // initImageId became state
-        // so when next prev changes only setCurrentImageId
+        if (currentImageId && firebaseUid) {
+            loadImageFromId(firebaseUid, currentImageId);
+        }
     }, [currentImageId, firebaseUid, loadImageFromId]);
     const handleFileChange = (event) => {
         const files = event.target?.files;
@@ -369,91 +386,6 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
             setHistoryIndex(nextIndex);
         }
     }, [history, historyIndex, applyAdjustmentState]);
-    // MARK: - Bulk Editor Functions For Desktop and Mobile
-    // const adjustTempBulk = useCallback((uiAmount: number) => {
-    //     setTempScore(prevScore => {
-    //         const newScore = clamp(prevScore + uiAmount);
-    //         console.log("Adjusting temperature. New score:", newScore);
-    //         return newScore;
-    //     });
-    // }, []);
-    // const adjustTintBulk = useCallback((uiAmount: number) => {
-    //     setTintScore(prevScore => {
-    //         const newScore = clamp(prevScore + uiAmount);
-    //         console.log("Adjusting tint. New score:", newScore);
-    //         return newScore;
-    //     });
-    // }, []);
-    // const adjustVibranceBulk = useCallback((uiAmount: number) => {
-    //     setVibranceScore(prevScore => {
-    //         const newScore = clamp(prevScore + uiAmount);
-    //         console.log("Adjusting vibrance. New score:", newScore);
-    //         return newScore;
-    //     });
-    // }, []);
-    // const adjustSaturationBulk = useCallback((uiAmount: number) => {
-    //     setSaturationScore(prevScore => {
-    //         const newScore = clamp(prevScore + uiAmount);
-    //         console.log("Adjusting saturation. New score:", newScore);
-    //         return newScore;
-    //     });
-    // }, []);
-    // const adjustExposureBulk = useCallback((uiAmount: number) => {
-    //     setExposureScore(prevScore => {
-    //         const newScore = clamp(prevScore + uiAmount);
-    //         console.log("Adjusting exposure. New score:", newScore);
-    //         return newScore;
-    //     });
-    // }, []);
-    // const adjustContrastBulk = useCallback((uiAmount: number) => {
-    //     setContrastScore(prevScore => {
-    //         const newScore = clamp(prevScore + uiAmount);
-    //         console.log("Adjusting contrast. New score:", newScore);
-    //         return newScore;
-    //     });
-    // }, []);
-    // const adjustHighlightsBulk = useCallback((uiAmount: number) => {
-    //     setHighlightsScore(prevScore => {
-    //         const newScore = clamp(prevScore + uiAmount);
-    //         console.log("Adjusting highlights. New score:", newScore);
-    //         return newScore;
-    //     });
-    // }, []);
-    // const adjustShadowsBulk = useCallback((uiAmount: number) => {
-    //     setShadowsScore(prevScore => {
-    //         const newScore = clamp(prevScore + uiAmount);
-    //         console.log("Adjusting shadows. New score:", newScore);
-    //         return newScore;
-    //     });
-    // }, []);
-    // const adjustWhitesBulk = useCallback((uiAmount: number) => {
-    //     setWhitesScore(prevScore => {
-    //         const newScore = clamp(prevScore + uiAmount);
-    //         console.log("Adjusting whites. New score:", newScore);
-    //         return newScore;
-    //     });
-    // }, []);
-    // const adjustBlacksBulk = useCallback((uiAmount: number) => {
-    //     setBlacksScore(prevScore => {
-    //         const newScore = clamp(prevScore + uiAmount);
-    //         console.log("Adjusting blacks. New score:", newScore);
-    //         return newScore;
-    //     });
-    // }, []);
-    // const adjustClarityBulk = useCallback((uiAmount: number) => {
-    //     setClarityScore(prevScore => {
-    //         const newScore = clamp(prevScore + uiAmount);
-    //         console.log("Adjusting clarity. New score:", newScore);
-    //         return newScore;
-    //     });
-    // }, []);
-    // const adjustSharpnessBulk = useCallback((uiAmount: number) => {
-    //     setSharpnessScore(prevScore => {
-    //         const newScore = clamp(prevScore + uiAmount);
-    //         console.log("Adjusting sharpness. New score:", newScore);
-    //         return newScore;
-    //     });
-    // }, []);
     const handleToggleImageSelection = useCallback((imageId) => {
         const newSelectedIds = new Set(selectedImageIds);
         const isCurrentlySelected = newSelectedIds.has(imageId);
@@ -593,6 +525,9 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
             });
         }
     }, []);
+    const handleBackCallback = useCallback(() => {
+        controller.handleBack(firebaseUid);
+    }, [controller]);
     // MARK: - UI Handlers (Moved from page.tsx)
     // Header and Dialog Handlers
     const handleHeaderMenuClick = (event) => setHeaderMenuAnchorEl(event.currentTarget);
@@ -973,20 +908,14 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
         };
     }, []);
     return {
-        handlePrev,
-        handleNext,
         // Refs
         canvasRef,
         canvasContainerRef,
         fileInputRef,
         displayedToken,
-        handleBack: controller.handleBack,
-        onGetImage: controller.onGetImage,
-        getImageList: controller.getImageList,
-        syncConfig: controller.syncConfig,
-        getPresets: controller.getPresets,
-        createPreset: controller.createPreset,
-        deletePreset: controller.deletePreset,
+        handleBackCallback,
+        handlePrev,
+        handleNext,
         // Refs for mobile panel
         panelRef,
         contentRef,

package/package.json

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