@yogiswara/honcho-editor-ui 2.5.9 → 2.6.0

package/dist/hooks/useAdjustmentHistory.js

@@ -1,4 +1,23 @@
 import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+/**
+ * Convert AdjustmentState to ColorAdjustment format for backend
+ */
+const convertAdjustmentStateToColorAdjustment = (adjustmentState) => {
+    return {
+        temperature: adjustmentState.tempScore,
+        tint: adjustmentState.tintScore,
+        saturation: adjustmentState.saturationScore,
+        vibrance: adjustmentState.vibranceScore,
+        exposure: adjustmentState.exposureScore,
+        contrast: adjustmentState.contrastScore,
+        highlights: adjustmentState.highlightsScore,
+        shadows: adjustmentState.shadowsScore,
+        whites: adjustmentState.whitesScore,
+        blacks: adjustmentState.blacksScore,
+        clarity: adjustmentState.clarityScore,
+        sharpness: adjustmentState.sharpnessScore,
+    };
+};
 /**
  * Compare two AdjustmentState objects for equality
  * Uses JSON.stringify for deep comparison of all adjustment values
@@ -36,28 +55,38 @@ const compareAdjustmentStates = (a, b) => {
  * - 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 function useAdjustmentHistory(initialState, options = {}) {
+export function useAdjustmentHistory(initialState, controller, firebaseUid, currentImageId, options = {}) {
     // Internal stabilization - prevent re-renders from options object recreation
     const internalOptions = useMemo(() => ({
         maxSize: options.maxSize ?? 'unlimited',
         enableBatching: options.enableBatching ?? false,
-        devWarnings: options.devWarnings ?? false
+        devWarnings: options.devWarnings ?? false,
+        controller: controller,
+        firebaseUid: firebaseUid,
+        currentImageId: currentImageId
     }), [
         options.maxSize,
         options.enableBatching,
-        options.devWarnings
+        options.devWarnings,
+        controller,
+        firebaseUid,
+        currentImageId
     ]);
     // Core state management
-    const [history, setHistory] = useState([initialState]);
+    const [history, setHistory] = useState([{ state: initialState }]);
     const [currentIndex, setCurrentIndex] = useState(0);
     const [currentState, setCurrentState] = useState(initialState);
     // Batch mode state - ref to avoid triggering effects
     const batchModeRef = useRef(internalOptions.enableBatching);
     const batchStartIndexRef = useRef(null);
     const batchStartStateRef = useRef(null);
+    const batchModeProcessingRef = useRef(false); // Guard against double execution
     // Configuration refs - prevent re-renders when config changes
     const maxSizeRef = useRef(internalOptions.maxSize);
     const devWarningsRef = useRef(internalOptions.devWarnings);
@@ -70,9 +99,9 @@ export function useAdjustmentHistory(initialState, options = {}) {
     // Sync currentState with history when not in batch mode
     useEffect(() => {
         if (!batchModeRef.current) {
-            setCurrentState(history[currentIndex]);
+            setCurrentState(history[currentIndex]?.state || initialState);
         }
-    }, [history, currentIndex]);
+    }, [history, currentIndex, initialState]);
     const getMemoryUsage = useCallback(() => {
         try {
             const historyString = JSON.stringify(history);
@@ -126,10 +155,6 @@ export function useAdjustmentHistory(initialState, options = {}) {
     }, [history.length, trimHistoryToSize]);
     // Push new state to history
     const pushState = useCallback((newState) => {
-        // Skip if state hasn't changed
-        if (compareAdjustmentStates(newState, currentState)) {
-            return;
-        }
         // Always update currentState immediately for smooth UI
         setCurrentState(newState);
         if (batchModeRef.current) {
@@ -140,17 +165,30 @@ export function useAdjustmentHistory(initialState, options = {}) {
         // Normal mode: Update history immediately
         setHistory(prevHistory => {
             const truncatedHistory = prevHistory.slice(0, currentIndex + 1);
-            const newHistory = [...truncatedHistory, newState];
+            const newHistory = [...truncatedHistory, { state: newState }];
             setCurrentIndex(newHistory.length - 1);
             return newHistory;
         });
     }, [currentState, currentIndex]);
     // Undo to previous state
-    const undo = useCallback(() => {
+    const undo = useCallback(async () => {
         if (currentIndex > 0) {
             const newIndex = currentIndex - 1;
+            const historyEntry = history[newIndex];
+            const newState = historyEntry.state;
             setCurrentIndex(newIndex);
-            setCurrentState(history[newIndex]);
+            setCurrentState(newState);
+            // Call controller to set history index in backend if taskId exists
+            if (historyEntry.taskId && internalOptions.controller && internalOptions.firebaseUid && internalOptions.currentImageId) {
+                try {
+                    console.log(`🔙 Undo: Setting history index to taskId: ${historyEntry.taskId}`);
+                    await internalOptions.controller.setHistoryIndex(internalOptions.firebaseUid, internalOptions.currentImageId, historyEntry.taskId);
+                    console.log('✅ Successfully set history index for undo');
+                }
+                catch (error) {
+                    console.error('❌ Failed to set history index for undo:', error);
+                }
+            }
             // Exit batch mode when undoing
             if (batchModeRef.current) {
                 batchModeRef.current = false;
@@ -158,18 +196,31 @@ export function useAdjustmentHistory(initialState, options = {}) {
                 batchStartStateRef.current = null;
             }
         }
-    }, [currentIndex, history]);
+    }, [currentIndex, history, internalOptions]);
     // Redo to next state
-    const redo = useCallback(() => {
+    const redo = useCallback(async () => {
         if (currentIndex < history.length - 1) {
             const newIndex = currentIndex + 1;
+            const historyEntry = history[newIndex];
+            const newState = historyEntry.state;
             setCurrentIndex(newIndex);
-            setCurrentState(history[newIndex]);
+            setCurrentState(newState);
+            // Call controller to set history index in backend if taskId exists
+            if (historyEntry.taskId && internalOptions.controller && internalOptions.firebaseUid && internalOptions.currentImageId) {
+                try {
+                    console.log(`🔄 Redo: Setting history index to taskId: ${historyEntry.taskId}`);
+                    await internalOptions.controller.setHistoryIndex(internalOptions.firebaseUid, internalOptions.currentImageId, historyEntry.taskId);
+                    console.log('✅ Successfully set history index for redo');
+                }
+                catch (error) {
+                    console.error('❌ Failed to set history index for redo:', error);
+                }
+            }
         }
-    }, [currentIndex, history]);
+    }, [currentIndex, history, internalOptions]);
     // Reset history with new initial state
     const reset = useCallback((newInitialState) => {
-        setHistory([newInitialState]);
+        setHistory([{ state: newInitialState }]);
         setCurrentIndex(0);
         setCurrentState(newInitialState);
         batchModeRef.current = internalOptions.enableBatching;
@@ -179,8 +230,10 @@ export function useAdjustmentHistory(initialState, options = {}) {
     // Jump to specific index in history
     const jumpToIndex = useCallback((index) => {
         if (index >= 0 && index < history.length) {
+            const historyEntry = history[index];
+            const newState = historyEntry.state;
             setCurrentIndex(index);
-            setCurrentState(history[index]);
+            setCurrentState(newState);
             // Exit batch mode when jumping
             if (batchModeRef.current) {
                 batchModeRef.current = false;
@@ -191,7 +244,7 @@ export function useAdjustmentHistory(initialState, options = {}) {
     }, [history]);
     // Clear all history and start fresh
     const clearHistory = useCallback(() => {
-        setHistory([currentState]);
+        setHistory([{ state: currentState }]);
         setCurrentIndex(0);
         batchModeRef.current = internalOptions.enableBatching;
         batchStartIndexRef.current = null;
@@ -199,7 +252,7 @@ export function useAdjustmentHistory(initialState, options = {}) {
     }, [currentState, internalOptions.enableBatching]);
     // Get copy of entire history
     const getHistory = useCallback(() => {
-        return [...history];
+        return history.map(entry => entry.state);
     }, [history]);
     // Manually trim history
     const trimHistory = useCallback((keepLast) => {
@@ -239,8 +292,8 @@ export function useAdjustmentHistory(initialState, options = {}) {
         // Determine target index
         let finalIndex = targetIndex ?? newHistory.length - 1; // Default to last item
         finalIndex = Math.max(0, Math.min(finalIndex, newHistory.length - 1)); // Clamp to valid range
-        // Create a copy of the new history to avoid mutations
-        const historyToSet = newHistory.map(state => ({ ...state }));
+        // Create a copy of the new history to avoid mutations and convert to HistoryEntry format
+        const historyToSet = newHistory.map(state => ({ state: { ...state } }));
         // Apply max size limit if needed
         if (maxSizeRef.current !== 'unlimited' && historyToSet.length > maxSizeRef.current) {
             const trimAmount = historyToSet.length - maxSizeRef.current;
@@ -249,7 +302,7 @@ export function useAdjustmentHistory(initialState, options = {}) {
             finalIndex = Math.max(0, finalIndex - trimAmount);
             setHistory(trimmedHistory);
             setCurrentIndex(finalIndex);
-            setCurrentState(trimmedHistory[finalIndex]);
+            setCurrentState(trimmedHistory[finalIndex].state);
             if (devWarningsRef.current) {
                 console.warn(`syncHistory: Trimmed ${trimAmount} entries to respect maxSize of ${maxSizeRef.current}`);
             }
@@ -258,7 +311,7 @@ export function useAdjustmentHistory(initialState, options = {}) {
             // Set history as-is
             setHistory(historyToSet);
             setCurrentIndex(finalIndex);
-            setCurrentState(historyToSet[finalIndex]);
+            setCurrentState(historyToSet[finalIndex].state);
         }
         if (devWarningsRef.current) {
             console.log(`syncHistory: Synchronized ${historyToSet.length} states, current index: ${finalIndex}`);
@@ -271,31 +324,88 @@ export function useAdjustmentHistory(initialState, options = {}) {
             enforceMaxSize();
         }
     }, [enforceMaxSize]);
-    const setBatchMode = useCallback((enabled) => {
+    const setBatchMode = useCallback(async (enabled) => {
         const wasInBatch = batchModeRef.current;
+        console.log(`🔧 setBatchMode called: enabled=${enabled}, wasInBatch=${wasInBatch}, currentIndex=${currentIndex}, historyLength=${history.length}`);
         if (enabled && !wasInBatch) {
             // Starting batch mode - save current state as batch start
             batchModeRef.current = true;
             batchStartIndexRef.current = currentIndex;
             batchStartStateRef.current = currentState;
+            console.log("Current start batch ", currentState, `batchStartIndex=${currentIndex}`);
         }
         else if (!enabled && wasInBatch) {
+            // Guard against double execution
+            if (batchModeProcessingRef.current) {
+                console.log("⚠️ setBatchMode(false) already processing, skipping duplicate call");
+                return;
+            }
             // Ending batch mode - commit final state to history
+            batchModeProcessingRef.current = true;
             batchModeRef.current = false;
             // Only add to history if state actually changed from batch start
             if (batchStartStateRef.current &&
                 !compareAdjustmentStates(currentState, batchStartStateRef.current)) {
+                // Generate a unique task ID for this history entry
+                const taskId = `task_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
                 setHistory(prevHistory => {
-                    const truncatedHistory = prevHistory.slice(0, batchStartIndexRef.current + 1);
-                    const newHistory = [...truncatedHistory, currentState];
+                    // Check if we were in the middle of history BEFORE any truncation
+                    // Handle case where batchStartIndexRef.current might be null (e.g., after undo)
+                    const batchStartIndex = batchStartIndexRef.current ?? currentIndex;
+                    const wasInMiddleOfHistory = batchStartIndex < prevHistory.length - 1;
+                    const truncatedHistory = prevHistory.slice(0, batchStartIndex + 1);
+                    const newHistoryEntry = {
+                        state: currentState,
+                        taskId: taskId
+                    };
+                    const newHistory = [...truncatedHistory, newHistoryEntry];
                     setCurrentIndex(newHistory.length - 1);
                     return newHistory;
                 });
+                // Call controller to create history in backend - OUTSIDE of setHistory callback
+                if (internalOptions.controller && internalOptions.firebaseUid && internalOptions.currentImageId) {
+                    try {
+                        console.log('🔄 Creating editor history in backend for batch mode end');
+                        let replaceFromTaskId;
+                        const batchStartIndex = batchStartIndexRef.current ?? currentIndex;
+                        const wasInMiddleOfHistory = batchStartIndex < history.length - 1;
+                        if (wasInMiddleOfHistory) {
+                            // Get the task_id from the original history entry to use as replace_from
+                            const currentHistoryEntry = history[batchStartIndex];
+                            replaceFromTaskId = currentHistoryEntry?.taskId;
+                            console.log(`📍 Was in middle of history (index ${batchStartIndex}), using replace_from: ${replaceFromTaskId}`);
+                        }
+                        else {
+                            console.log(`📍 At latest history (index ${batchStartIndex}), no replace_from needed`);
+                        }
+                        const createEditorConfigPayload = {
+                            gallery_id: internalOptions.currentImageId,
+                            task_id: taskId,
+                            color_adjustment: convertAdjustmentStateToColorAdjustment(currentState),
+                            ...(replaceFromTaskId && { replace_from: replaceFromTaskId })
+                        };
+                        // Create editor config with current adjustments
+                        internalOptions.controller.createEditorConfig(internalOptions.firebaseUid, createEditorConfigPayload).then(() => {
+                            console.log('✅ Successfully created editor history in backend');
+                        }).catch((error) => {
+                            console.error('❌ Failed to create editor history in backend:', error);
+                        });
+                    }
+                    catch (error) {
+                        console.error('❌ Error calling controller.createEditorConfig:', error);
+                    }
+                }
+                else {
+                    if (internalOptions.devWarnings) {
+                        console.warn('⚠️ Controller, firebaseUid, or currentImageId not provided - skipping backend history creation');
+                    }
+                }
             }
             batchStartIndexRef.current = null;
             batchStartStateRef.current = null;
+            batchModeProcessingRef.current = false; // Reset processing flag
         }
-    }, [currentIndex, currentState]);
+    }, [currentIndex, currentState, internalOptions]);
     // History info object
     const historyInfo = useMemo(() => ({
         canUndo: currentIndex > 0,
@@ -317,12 +427,58 @@ export function useAdjustmentHistory(initialState, options = {}) {
         trimHistory,
         syncHistory
     }), [pushState, undo, redo, reset, jumpToIndex, clearHistory, getHistory, trimHistory, syncHistory]);
+    // Force sync current state to backend
+    const syncToBackend = useCallback(async () => {
+        if (internalOptions.controller && internalOptions.firebaseUid && internalOptions.currentImageId) {
+            try {
+                console.log('🔄 Force syncing current state to backend');
+                // Check if we're in middle of history (not at the latest)
+                const wasInMiddleOfHistory = currentIndex < history.length - 1;
+                let replaceFromTaskId;
+                if (wasInMiddleOfHistory) {
+                    // Get the task_id from the current history entry to use as replace_from
+                    const currentHistoryEntry = history[currentIndex];
+                    replaceFromTaskId = currentHistoryEntry?.taskId;
+                    console.log(`📍 In middle of history (index ${currentIndex}), using replace_from: ${replaceFromTaskId}`);
+                }
+                // Generate a unique task ID for this sync
+                const taskId = `task_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+                const createEditorConfigPayload = {
+                    gallery_id: internalOptions.currentImageId,
+                    task_id: taskId,
+                    color_adjustment: convertAdjustmentStateToColorAdjustment(currentState),
+                    ...(replaceFromTaskId && { replace_from: replaceFromTaskId })
+                };
+                await internalOptions.controller.createEditorConfig(internalOptions.firebaseUid, createEditorConfigPayload);
+                console.log('✅ Successfully synced current state to backend');
+                // Update the current history entry with the new task ID
+                setHistory(prevHistory => {
+                    const newHistory = [...prevHistory];
+                    if (newHistory[currentIndex]) {
+                        newHistory[currentIndex] = {
+                            ...newHistory[currentIndex],
+                            taskId: taskId
+                        };
+                    }
+                    return newHistory;
+                });
+            }
+            catch (error) {
+                console.error('❌ Failed to sync current state to backend:', error);
+                throw error;
+            }
+        }
+        else {
+            console.warn('⚠️ Controller, firebaseUid, or currentImageId not provided - skipping backend sync');
+        }
+    }, [currentState, currentIndex, history, internalOptions]);
     // Config object - stabilized with useMemo
     const config = useMemo(() => ({
         setMaxSize,
         setBatchMode,
-        getMemoryUsage
-    }), [setMaxSize, setBatchMode, getMemoryUsage]);
+        getMemoryUsage,
+        syncToBackend
+    }), [setMaxSize, setBatchMode, getMemoryUsage, syncToBackend]);
     // Apply max size enforcement when history changes
     useEffect(() => {
         enforceMaxSize();

package/dist/hooks/useAdjustmentHistoryBatch.d.ts

@@ -1,4 +1,13 @@
-import { AdjustmentState } from './editor/useHonchoEditor';
+import { AdjustmentState, Controller } from './editor/type';
+export interface HistoryAdjustmentBatch {
+    imageId: string;
+    currentHistoryEntryId: string;
+    history: HistoryAdjustmentEntry[];
+}
+export interface HistoryAdjustmentEntry {
+    id: string;
+    adjustment: AdjustmentState;
+}
 /**
  * Configuration for image with adjustment state
  */
@@ -34,6 +43,12 @@ interface BatchHistoryOptions {
     devWarnings?: boolean;
     /** Default adjustment state for new images */
     defaultAdjustmentState?: Partial<AdjustmentState>;
+    /** Controller for backend operations */
+    controller?: Controller;
+    /** Firebase UID for backend operations */
+    firebaseUid?: string;
+    /** Event ID for backend operations */
+    eventId?: string;
 }
 /**
  * Information about the current batch history state
@@ -60,6 +75,8 @@ export interface BatchHistoryInfo {
 export interface BatchHistoryActions {
     /** Apply adjustment deltas to selected images */
     adjustSelected: (delta: Partial<AdjustmentState>) => void;
+    /** Apply preset values directly to selected images (preserves history) */
+    adjustSelectedWithPreset: (presetAdjustments: AdjustmentState) => void;
     /** Undo last changes to selected images */
     undo: () => void;
     /** Redo next changes to selected images */