@yogiswara/honcho-editor-ui 3.8.6 → 3.9.1

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

@@ -17,6 +17,8 @@ export interface UseHonchoEditorSingleState {
     canRedo: boolean;
     isNextAvailable: boolean;
     isPrevAvailable: boolean;
+    imageList: Gallery[];
+    currentIndex: number;
     presets: Preset[];
     activePreset: Preset | null;
     presetsLoading: boolean;
@@ -43,6 +45,9 @@ export interface UseHonchoEditorSingleState {
 export interface UseHonchoEditorSingleActions {
     navigateNext: () => void;
     navigatePrev: () => void;
+    navigateToIndex: (index: number) => void;
+    removeImageFromList: (imageId: string) => Promise<void>;
+    refreshAndGoToTop: () => Promise<void>;
     updateAdjustment: (field: keyof AdjustmentState, value: number) => void;
     setBatchMode: (enabled: boolean) => void;
     startBatchMode: () => void;

package/dist/hooks/editor/useHonchoEditorSingle.js

@@ -41,6 +41,15 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
             gallerySwipe.onSwipePrev();
         }
     }, [gallerySwipe.isPrevAvailable, gallerySwipe.onSwipePrev]);
+    const navigateToIndex = useCallback((index) => {
+        gallerySwipe.onSwipeToIndex(index);
+    }, [gallerySwipe.onSwipeToIndex]);
+    const removeImageFromList = useCallback(async (imageId) => {
+        await gallerySwipe.removeImageFromList(imageId);
+    }, [gallerySwipe.removeImageFromList]);
+    const refreshAndGoToTop = useCallback(async () => {
+        await gallerySwipe.refreshAndGoToTop();
+    }, [gallerySwipe.refreshAndGoToTop]);
     const updateAdjustment = useCallback((field, value) => {
         // Apply specific clamping for sharpness (0-100), others use -100 to 100
         let clampedValue = value;
@@ -108,7 +117,6 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
         };
         log.debug({ presetName: preset.name }, `Applying preset:`);
         log.debug({ adjustmentState }, `with adjustments:`);
-        // 'with adjustments:', adjustmentState);
         // Always apply preset and add to history (this automatically syncs to backend via batch mode)
         await adjustmentHistory.config.setBatchMode(true);
         adjustmentHistory.actions.pushState(adjustmentState);
@@ -173,6 +181,9 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
         // Navigation
         navigateNext,
         navigatePrev,
+        navigateToIndex,
+        removeImageFromList,
+        refreshAndGoToTop,
         // Adjustments
         updateAdjustment,
         setBatchMode,
@@ -199,6 +210,8 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
         currentImageData: gallerySwipe.currentImageData,
         isGalleryLoading: gallerySwipe.isLoading,
         galleryError: gallerySwipe.error,
+        imageList: gallerySwipe.imageList,
+        currentIndex: gallerySwipe.currentIndex,
         // Adjustment state
         currentAdjustments: adjustmentHistory.currentState,
         isBatchMode: adjustmentHistory.historyInfo.isBatchMode,

package/dist/hooks/useGallerySwipe.d.ts

@@ -23,6 +23,11 @@ interface UseGallerySwipeReturn {
     isReady: boolean;
     /** Indicates if there was an error during initialization */
     hasError: boolean;
+    imageList: Gallery[];
+    currentIndex: number;
+    onSwipeToIndex: (index: number) => Promise<void>;
+    removeImageFromList: (imageId: string) => Promise<void>;
+    refreshAndGoToTop: () => Promise<void>;
 }
 /**
  * Custom hook for handling image gallery navigation with automatic pagination

package/dist/hooks/useGallerySwipe.js

@@ -29,6 +29,11 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
     // This prevents the hook from re-initializing when the same values are passed
     const prevFirebaseUid = useRef(null);
     const prevInitImageId = useRef(null);
+    const currentImageListRef = useRef([]);
+    const currentImageIdRef = useRef(null);
+    // Keep refs in sync with state
+    useEffect(() => { currentImageListRef.current = currentImageList; }, [currentImageList]);
+    useEffect(() => { currentImageIdRef.current = currentImageId; }, [currentImageId]);
     /**
      * Get the index of the current image in the loaded image list
      * Returns -1 if the current image is not found in the list
@@ -283,6 +288,94 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
             setIsLoading(false);
         }
     }, [currentImageId, isLoading, getCurrentImageIndex, currentImageList, controller, firebaseUid]);
+    const onSwipeToIndex = useCallback(async (index) => {
+        if (isLoading || index < 0 || index >= currentImageList.length)
+            return;
+        setIsLoading(true);
+        setError(null);
+        try {
+            const targetImage = currentImageList[index];
+            setCurrentImageId(targetImage.id);
+            const imageData = await controller.onGetImage(firebaseUid, targetImage.id);
+            if (imageData) {
+                setCurrentImageData(imageData);
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Error navigating to index';
+            setError(errorMessage);
+            log.error({ err }, 'Error in onSwipeToIndex');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [isLoading, currentImageList, controller, firebaseUid]);
+    const removeImageFromList = useCallback(async (imageId) => {
+        const list = currentImageListRef.current; // ← always fresh
+        const currentId = currentImageIdRef.current; // ← always fresh
+        const indexToRemove = list.findIndex(img => img.id === imageId);
+        if (indexToRemove === -1)
+            return;
+        const newList = list.filter(img => img.id !== imageId);
+        setCurrentImageList(newList);
+        // Only navigate if the removed image was the one being viewed
+        if (imageId !== currentId)
+            return;
+        if (newList.length === 0) {
+            setCurrentImageData(null);
+            setCurrentImageId(null);
+            return;
+        }
+        const nextIndex = Math.min(indexToRemove, newList.length - 1);
+        const nextImage = newList[nextIndex];
+        setIsLoading(true);
+        try {
+            setCurrentImageId(nextImage.id);
+            const nextImageData = await controller.onGetImage(firebaseUid, nextImage.id);
+            if (nextImageData)
+                setCurrentImageData(nextImageData);
+        }
+        catch (err) {
+            log.error({ err }, 'Error fetching next image after removal');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [controller, firebaseUid]);
+    const refreshAndGoToTop = useCallback(async () => {
+        if (!firebaseUid || !controller || !currentEventId)
+            return;
+        setIsLoading(true);
+        setError(null);
+        try {
+            // Fetch the brand new Page 1 with the latest sorting rules applied
+            const response = await controller.getImageList(firebaseUid, currentEventId, 1, 20);
+            if (response.gallery && response.gallery.length > 0) {
+                setCurrentImageList(response.gallery);
+                setCurrentPage(1);
+                setHasNextPage(response.next_page !== 0 && response.next_page > response.current_page);
+                // Grab the true top image
+                const firstImage = response.gallery[0];
+                setCurrentImageId(firstImage.id);
+                const imageData = await controller.onGetImage(firebaseUid, firstImage.id);
+                if (imageData) {
+                    setCurrentImageData(imageData);
+                }
+            }
+            else {
+                setCurrentImageList([]);
+                setCurrentImageData(null);
+                setCurrentImageId(null);
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Error refreshing list');
+            log.error({ err }, 'Error in refreshAndGoToTop');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [controller, firebaseUid, currentEventId]);
     /**
      * Calculate if next image navigation is available
      * Returns true if:
@@ -343,6 +436,11 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
         isPrevAvailable: isPrevAvailable(),
         onSwipeNext,
         onSwipePrev,
+        onSwipeToIndex,
+        removeImageFromList,
+        refreshAndGoToTop,
+        imageList: currentImageList,
+        currentIndex: getCurrentImageIndex(),
         isLoading,
         error,
         isReady: isInitialized && currentImageData !== null && !isLoading,

package/package.json

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