@yogiswara/honcho-editor-ui 2.5.9 → 2.6.0

package/dist/hooks/editor/useHonchoEditorBulk.js

@@ -1,6 +1,8 @@
 'use client';
-import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useAdjustmentHistoryBatch } from '../useAdjustmentHistoryBatch';
+import { usePaging } from "../usePaging";
+import { usePreset } from "../usePreset";
 // Helper function to map the API response to the format our UI component needs
 const mapGalleryToPhotoData = (gallery, selectedIds) => {
     return {
@@ -38,36 +40,152 @@ function mapColorAdjustmentToAdjustmentState(adj) {
         sharpnessScore: adj.sharpness || 0,
     };
 }
+// Helper function to convert Preset to AdjustmentState
+const presetToAdjustmentState = (preset) => {
+    return {
+        tempScore: preset.temperature || 0,
+        tintScore: preset.tint || 0,
+        vibranceScore: preset.vibrance || 0,
+        saturationScore: preset.saturation || 0,
+        exposureScore: preset.exposure || 0,
+        highlightsScore: preset.highlights || 0,
+        shadowsScore: preset.shadows || 0,
+        whitesScore: preset.whites || 0,
+        blacksScore: preset.blacks || 0,
+        contrastScore: preset.contrast || 0,
+        clarityScore: preset.clarity || 0,
+        sharpnessScore: preset.sharpness || 0,
+    };
+};
+// Helper function to compare adjustment states
+const adjustmentsMatch = (a, b) => {
+    const keys = [
+        'tempScore', 'tintScore', 'vibranceScore', 'saturationScore',
+        'exposureScore', 'highlightsScore', 'shadowsScore', 'whitesScore',
+        'blacksScore', 'contrastScore', 'clarityScore', 'sharpnessScore'
+    ];
+    return keys.every(key => (a[key] || 0) === (b[key] || 0));
+};
 export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
-    const { currentBatch, selectedIds, actions: batchActions } = useAdjustmentHistoryBatch();
-    // State for Bulk Editing
-    const [imageCollection, setImageCollection] = useState([]);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState(null);
-    const [page, setPage] = useState(1);
-    const [isFetchingMore, setIsFetchingMore] = useState(false);
-    const [hasMore, setHasMore] = useState(true);
-    const [selectedBulkPreset, setSelectedBulkPreset] = useState('preset1');
+    const { currentBatch, selectedIds, actions: batchActions, historyInfo } = useAdjustmentHistoryBatch({
+        controller,
+        firebaseUid,
+        eventId: eventID,
+        devWarnings: true
+    });
+    const { images, info, actions } = usePaging(controller, firebaseUid, eventID, {
+        autoLoad: true,
+        autoReset: false // Prevent auto-reset to avoid loops
+    });
+    // Preset management
+    const { presets, actions: presetActions } = usePreset(controller, firebaseUid, {
+        autoLoad: true,
+        devWarnings: true
+    });
+    // Track which images have been synced to prevent loops
+    const lastSyncedImageIds = useRef(new Set());
+    // State for Bulk Editing  
+    const [selectedBulkPreset, setSelectedBulkPreset] = useState('');
+    // Calculate active preset based on selected images' adjustments
+    const activePreset = useMemo(() => {
+        if (selectedIds.length === 0) {
+            return null;
+        }
+        // Get adjustments for all selected images
+        const selectedAdjustments = selectedIds.map(imageId => {
+            return currentBatch.allImages[imageId] || {
+                tempScore: 0, tintScore: 0, vibranceScore: 0, saturationScore: 0,
+                exposureScore: 0, highlightsScore: 0, shadowsScore: 0, whitesScore: 0,
+                blacksScore: 0, contrastScore: 0, clarityScore: 0, sharpnessScore: 0,
+            };
+        });
+        // Check if all selected images have the same adjustments
+        const firstAdjustment = selectedAdjustments[0];
+        const allSameAdjustments = selectedAdjustments.every(adj => adjustmentsMatch(adj, firstAdjustment));
+        if (!allSameAdjustments) {
+            // Selected images have different adjustments
+            return null;
+        }
+        // Find preset that matches the common adjustment state
+        const matchingPreset = presets.find(preset => {
+            const presetAdjustments = presetToAdjustmentState(preset);
+            return adjustmentsMatch(presetAdjustments, firstAdjustment);
+        });
+        return matchingPreset || null;
+    }, [selectedIds, currentBatch.allImages, presets]);
+    // Update selectedBulkPreset when activePreset changes
+    useEffect(() => {
+        setSelectedBulkPreset(activePreset?.id || '');
+    }, [activePreset]);
+    // Use loading states from usePaging instead of local state
+    const isLoading = info.isLoading;
+    const error = info.error;
+    const hasMore = info.hasMore;
     const imageData = useMemo(() => {
-        return imageCollection.map(item => {
-            console.log("item FROM USEHONCHOBULK: ", item);
-            return mapGalleryToPhotoData(item, selectedIds);
-        }).map(item => {
-            const adjustment = currentBatch.allImages[item.key];
-            console.log("adjustment FROM USEHONCHOBULK: ", adjustment);
-            return adjustment ? { ...item, ...adjustment } : item;
+        console.debug("imageData recalculating with:", {
+            imagesLength: images.length,
+            selectedIds,
+            currentBatch_allImages: currentBatch.allImages,
+            currentBatch_allImages_keys: Object.keys(currentBatch.allImages)
         });
-    }, [imageCollection, selectedIds, currentBatch.allImages]);
+        const res = images.map(item => {
+            const basePhoto = mapGalleryToPhotoData(item, selectedIds);
+            const batchAdjustment = currentBatch.allImages[item.id];
+            console.debug(`Processing image ${item.id}:`, {
+                basePhoto,
+                batchAdjustment,
+                hasBatchAdjustment: !!batchAdjustment
+            });
+            // Merge batch adjustments over backend adjustments
+            return batchAdjustment ? { ...basePhoto, ...batchAdjustment } : basePhoto;
+        });
+        console.debug("imageData result:", res);
+        return res;
+    }, [images, selectedIds, currentBatch.allImages]);
+    // Store the latest batchActions.syncAdjustment in a ref to avoid dependency issues
+    const syncAdjustmentRef = useRef(batchActions.syncAdjustment);
+    syncAdjustmentRef.current = batchActions.syncAdjustment;
+    // Safe sync: Only sync new images to prevent infinite loops
+    useEffect(() => {
+        if (images.length === 0)
+            return;
+        // Check if we have new images that haven't been synced
+        const currentImageIds = new Set(images.map(img => img.id));
+        const hasNewImages = images.some(img => !lastSyncedImageIds.current.has(img.id));
+        if (hasNewImages) {
+            console.log('[useHonchoEditorBulk] Syncing new images to batch:', images.length);
+            syncAdjustmentRef.current(images.map(mapToImageAdjustmentConfig));
+            lastSyncedImageIds.current = currentImageIds;
+        }
+    }, [images]); // Only depend on images, not batchActions
     const handleBackCallbackBulk = useCallback(() => {
         const lastSelectedId = selectedIds.length > 0 ? selectedIds[selectedIds.length - 1] : "";
         controller.handleBack(firebaseUid, lastSelectedId);
     }, [controller, firebaseUid, selectedIds]);
-    const handleSelectBulkPreset = (event) => setSelectedBulkPreset(event.target.value);
+    const handleSelectBulkPreset = useCallback((event) => {
+        const presetId = event.target.value;
+        setSelectedBulkPreset(presetId);
+        if (presetId && selectedIds.length > 0) {
+            // Find the preset
+            const preset = presets.find(p => p.id === presetId);
+            if (preset) {
+                // Convert preset to adjustment state
+                const presetAdjustments = presetToAdjustmentState(preset);
+                // Apply preset directly to all selected images using the clean action
+                batchActions.adjustSelectedWithPreset(presetAdjustments);
+            }
+        }
+    }, [presets, selectedIds, batchActions]);
     // This factory creates functions that adjust a value for all selected images
     const createRelativeAdjuster = useCallback((key, amount) => () => {
-        console.debug("createRelativeAdjuster", key, amount);
+        console.debug("createRelativeAdjuster called:", { key, amount, selectedIds });
+        console.debug("currentBatch.allImages before:", currentBatch.allImages);
         batchActions.adjustSelected({ [key]: amount });
-    }, [batchActions]);
+        // Debug after a short delay to see if the state changed
+        setTimeout(() => {
+            console.debug("currentBatch.allImages after:", currentBatch.allImages);
+        }, 100);
+    }, [batchActions, selectedIds, currentBatch.allImages]);
     const handleBulkTempDecreaseMax = createRelativeAdjuster('tempScore', -20);
     const handleBulkTempDecrease = createRelativeAdjuster('tempScore', -5);
     const handleBulkTempIncrease = createRelativeAdjuster('tempScore', 5);
@@ -148,26 +266,8 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
     //         loadImages(page + 1);
     //     }
     // }, [isFetchingMore, hasMore, page, loadImages]);
-    useEffect(() => {
-        if (eventID && firebaseUid) {
-            setIsLoading(true);
-            setError(null);
-            controller.getImageList(firebaseUid, eventID, 2)
-                .then(response => {
-                // TODO need do pagination for this one
-                batchActions.syncAdjustment(response.gallery.map(mapToImageAdjustmentConfig));
-                setImageCollection(response.gallery);
-            })
-                .catch(err => {
-                console.error("Failed to fetch image list:", err);
-                setError("Could not load images.");
-            })
-                .finally(() => {
-                setIsLoading(false);
-            });
-            console.log("Image data FROM USEHONCHOBULK: ", imageData);
-        }
-    }, [eventID, firebaseUid, controller]);
+    // Note: Image loading is now handled by usePaging hook
+    // The sync logic above handles syncing loaded images to batch state
     // useEffect(() => {
     //     if (eventID && firebaseUid) {
     //         setImageCollection([]); // reset when event changes
@@ -184,9 +284,17 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
         // loadMoreImages,
         // Gallery Handlers
         handleBackCallbackBulk,
+        // Preset functionality
+        presets,
         selectedBulkPreset,
-        handleToggleImageSelection: batchActions.toggleSelection,
+        activePreset,
         handleSelectBulkPreset,
+        // Preset creation handlers
+        handleOpenPresetModal: () => { }, // TODO: Implement preset modal for bulk editing
+        presetActions, // Expose preset actions for create/rename/delete
+        handleToggleImageSelection: batchActions.toggleSelection,
+        handleLoadMore: actions.loadMore,
+        handleRefresh: actions.refresh,
         // Adjustment
         handleBulkTempDecreaseMax,
         handleBulkTempDecrease,
@@ -238,5 +346,10 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
         handleBulkSharpnessDecrease,
         handleBulkSharpnessIncrease,
         handleBulkSharpnessIncreaseMax,
+        // History actions
+        handleUndo: batchActions.undo,
+        handleRedo: batchActions.redo,
+        handleReset: batchActions.reset,
+        historyInfo,
     };
 }

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

@@ -0,0 +1,43 @@
+import { Controller, AdjustmentState, Preset } from './type';
+import { Gallery } from './type';
+import { AdjustmentValues } from '../../lib/editor/honcho-editor';
+export interface UseHonchoEditorSingleOptions {
+    controller: Controller;
+    initImageId: string;
+    firebaseUid: string;
+}
+export interface UseHonchoEditorSingleState {
+    currentImageData: Gallery | null;
+    isGalleryLoading: boolean;
+    galleryError: string | null;
+    currentAdjustments: AdjustmentState;
+    isBatchMode: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    isNextAvailable: boolean;
+    isPrevAvailable: boolean;
+    presets: Preset[];
+    activePreset: Preset | null;
+    presetsLoading: boolean;
+    presetsError: string | null;
+}
+export interface UseHonchoEditorSingleActions {
+    navigateNext: () => void;
+    navigatePrev: () => void;
+    updateAdjustment: (field: keyof AdjustmentState, value: number) => void;
+    setBatchMode: (enabled: boolean) => void;
+    startBatchMode: () => void;
+    endBatchMode: () => void;
+    undo: () => void;
+    redo: () => void;
+    reset: () => void;
+    loadPresets: () => Promise<void>;
+    applyPreset: (preset: Preset) => void;
+    createPreset: (name: string) => Promise<Preset | null>;
+    deletePreset: (presetId: string) => Promise<void>;
+    getEditorAdjustments: () => AdjustmentValues;
+}
+export declare function useHonchoEditorSingle({ controller, initImageId, firebaseUid }: UseHonchoEditorSingleOptions): {
+    state: UseHonchoEditorSingleState;
+    actions: UseHonchoEditorSingleActions;
+};

package/dist/hooks/editor/useHonchoEditorSingle.js

@@ -0,0 +1,158 @@
+'use client';
+import { useCallback, useMemo } from 'react';
+import { useAdjustmentHistory } from '../useAdjustmentHistory';
+import { useGallerySwipe } from '../useGallerySwipe';
+import { usePreset } from '../usePreset';
+// Default adjustment values
+const initialAdjustments = {
+    tempScore: 0, tintScore: 0, vibranceScore: 0, saturationScore: 0,
+    exposureScore: 0, highlightsScore: 0, shadowsScore: 0, whitesScore: 0,
+    blacksScore: 0, contrastScore: 0, clarityScore: 0, sharpnessScore: 0,
+};
+export function useHonchoEditorSingle({ controller, initImageId, firebaseUid }) {
+    // Memoize parameters to prevent unnecessary re-renders
+    const memoizedController = useMemo(() => controller, [controller]);
+    const memoizedInitImageId = useMemo(() => initImageId, [initImageId]);
+    const memoizedFirebaseUid = useMemo(() => firebaseUid, [firebaseUid]);
+    // Initialize business logic hooks only
+    const adjustmentHistory = useAdjustmentHistory(initialAdjustments, memoizedController, memoizedFirebaseUid, memoizedInitImageId);
+    const gallerySwipe = useGallerySwipe(memoizedFirebaseUid, memoizedInitImageId, memoizedController);
+    const presetHook = usePreset(memoizedController, memoizedFirebaseUid, { autoLoad: true });
+    // Find active preset based on current adjustments
+    const activePreset = presetHook.actions.findByAdjustments(adjustmentHistory.currentState);
+    // Actions - pure business logic, no editor interaction - wrapped in useCallback to prevent re-renders
+    const navigateNext = useCallback(() => {
+        if (gallerySwipe.isNextAvailable) {
+            gallerySwipe.onSwipeNext();
+        }
+    }, [gallerySwipe.isNextAvailable, gallerySwipe.onSwipeNext]);
+    const navigatePrev = useCallback(() => {
+        if (gallerySwipe.isPrevAvailable) {
+            gallerySwipe.onSwipePrev();
+        }
+    }, [gallerySwipe.isPrevAvailable, gallerySwipe.onSwipePrev]);
+    const updateAdjustment = useCallback((field, value) => {
+        const newState = {
+            ...adjustmentHistory.currentState,
+            [field]: value
+        };
+        adjustmentHistory.actions.pushState(newState);
+    }, [adjustmentHistory.currentState, adjustmentHistory.actions.pushState]);
+    const setBatchMode = useCallback((enabled) => {
+        adjustmentHistory.config.setBatchMode(enabled);
+    }, [adjustmentHistory.config.setBatchMode]);
+    const startBatchMode = useCallback(() => {
+        adjustmentHistory.config.setBatchMode(true);
+    }, [adjustmentHistory.config.setBatchMode]);
+    const endBatchMode = useCallback(() => {
+        adjustmentHistory.config.setBatchMode(false);
+    }, [adjustmentHistory.config.setBatchMode]);
+    const undo = useCallback(() => {
+        adjustmentHistory.actions.undo();
+    }, [adjustmentHistory.actions.undo]);
+    const redo = useCallback(() => {
+        adjustmentHistory.actions.redo();
+    }, [adjustmentHistory.actions.redo]);
+    const reset = useCallback(async () => {
+        // Reset means setting all adjustments to 0 and adding it as new history entry
+        // This allows users to undo the reset operation
+        // Reset acts like normal adjustment - each reset creates a new history entry
+        console.log('Resetting adjustments to 0 - adding to history and sending to backend');
+        // First add reset to history (this creates local history entry)
+        adjustmentHistory.actions.pushState(initialAdjustments);
+        // Then sync to backend
+        await adjustmentHistory.config.syncToBackend();
+    }, [adjustmentHistory.actions.pushState, adjustmentHistory.config.syncToBackend]);
+    const loadPresets = useCallback(async () => {
+        await presetHook.actions.load();
+    }, [presetHook.actions.load]);
+    const applyPreset = useCallback(async (preset) => {
+        console.log('Applying preset:', preset.name, '- saving to backend history');
+        const adjustmentState = {
+            tempScore: preset.temperature,
+            tintScore: preset.tint,
+            vibranceScore: preset.vibrance,
+            saturationScore: preset.saturation,
+            exposureScore: preset.exposure,
+            highlightsScore: preset.highlights,
+            shadowsScore: preset.shadows,
+            whitesScore: preset.whites,
+            blacksScore: preset.blacks,
+            contrastScore: preset.contrast,
+            clarityScore: preset.clarity,
+            sharpnessScore: preset.sharpness,
+        };
+        // Apply preset directly and add to history
+        adjustmentHistory.actions.pushState(adjustmentState);
+        // Then sync to backend
+        await adjustmentHistory.config.syncToBackend();
+    }, [adjustmentHistory.actions.pushState, adjustmentHistory.config.syncToBackend]);
+    const createPreset = useCallback(async (name) => {
+        return await presetHook.actions.create(name, adjustmentHistory.currentState);
+    }, [presetHook.actions.create, adjustmentHistory.currentState]);
+    const deletePreset = useCallback(async (presetId) => {
+        await presetHook.actions.delete(presetId);
+    }, [presetHook.actions.delete]);
+    const getEditorAdjustments = useCallback(() => {
+        const adjustments = adjustmentHistory.currentState;
+        return {
+            temperature: adjustments.tempScore,
+            tint: adjustments.tintScore,
+            vibrance: adjustments.vibranceScore / 100,
+            saturation: adjustments.saturationScore / 100,
+            exposure: (adjustments.exposureScore / 100) * 3,
+            highlights: adjustments.highlightsScore / 100,
+            shadows: adjustments.shadowsScore / 100,
+            whites: adjustments.whitesScore / 100,
+            blacks: adjustments.blacksScore / 100,
+            contrast: adjustments.contrastScore / 100,
+            clarity: adjustments.clarityScore / 100,
+            sharpness: adjustments.sharpnessScore / 100,
+        };
+    }, [adjustmentHistory.currentState]);
+    const actions = {
+        // Navigation
+        navigateNext,
+        navigatePrev,
+        // Adjustments
+        updateAdjustment,
+        setBatchMode,
+        startBatchMode,
+        endBatchMode,
+        // History
+        undo,
+        redo,
+        reset,
+        // Presets
+        loadPresets,
+        applyPreset,
+        createPreset,
+        deletePreset,
+        // Adjustment conversion for editor
+        getEditorAdjustments
+    };
+    // State - pure business state, no editor state
+    const state = {
+        // Image state
+        currentImageData: gallerySwipe.currentImageData,
+        isGalleryLoading: gallerySwipe.isLoading,
+        galleryError: gallerySwipe.error,
+        // Adjustment state
+        currentAdjustments: adjustmentHistory.currentState,
+        isBatchMode: adjustmentHistory.historyInfo.isBatchMode,
+        canUndo: adjustmentHistory.historyInfo.canUndo,
+        canRedo: adjustmentHistory.historyInfo.canRedo,
+        // Navigation state
+        isNextAvailable: gallerySwipe.isNextAvailable,
+        isPrevAvailable: gallerySwipe.isPrevAvailable,
+        // Preset state
+        presets: presetHook.presets,
+        activePreset: activePreset || null,
+        presetsLoading: presetHook.info.isLoading,
+        presetsError: presetHook.info.error,
+    };
+    return {
+        state,
+        actions
+    };
+}

package/dist/hooks/useAdjustmentHistory.d.ts

@@ -1,8 +1,8 @@
-import { AdjustmentState } from './editor/useHonchoEditor';
+import { AdjustmentState, Controller } from './editor/type';
 /**
  * Configuration options for the adjustment history hook
  */
-interface HistoryOptions {
+export interface HistoryOptions {
     /** Maximum number of history entries to keep. Use 'unlimited' for no limit */
     maxSize?: number | 'unlimited';
     /** Whether to enable batch mode for grouping multiple changes */
@@ -57,9 +57,11 @@ export interface HistoryConfig {
     /** Set maximum history size */
     setMaxSize: (size: number | 'unlimited') => void;
     /** Enable or disable batch mode */
-    setBatchMode: (enabled: boolean) => void;
+    setBatchMode: (enabled: boolean) => Promise<void>;
     /** Get current memory usage estimate */
     getMemoryUsage: () => number;
+    /** Force sync current state to backend */
+    syncToBackend: () => Promise<void>;
 }
 /**
  * Return type for the useAdjustmentHistory hook
@@ -86,8 +88,10 @@ export interface UseAdjustmentHistoryReturn {
  * - Automatic AdjustmentState comparison
  *
  * @param initialState - The initial AdjustmentState value
+ * @param controller - Controller for backend operations (optional)
+ * @param firebaseUid - Firebase UID for backend operations (optional)
+ * @param currentImageId - Current image ID for backend operations (optional)
  * @param options - Configuration options for history behavior
  * @returns Object with current state, history info, actions, and config
  */
-export declare function useAdjustmentHistory(initialState: AdjustmentState, options?: HistoryOptions): UseAdjustmentHistoryReturn;
-export {};
+export declare function useAdjustmentHistory(initialState: AdjustmentState, controller?: Controller, firebaseUid?: string, currentImageId?: string, options?: HistoryOptions): UseAdjustmentHistoryReturn;