@yogiswara/honcho-editor-ui 2.7.13 → 2.7.14

package/dist/hooks/useAdjustmentHistory.d.ts

@@ -1,97 +0,0 @@
-import { AdjustmentState, Controller } from './editor/type';
-/**
- * Configuration options for the adjustment history hook
- */
-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 */
-    enableBatching?: boolean;
-    /** Enable development warnings for performance issues */
-    devWarnings?: boolean;
-}
-/**
- * Information about the current history state
- */
-export interface HistoryInfo {
-    /** Whether undo operation is available */
-    canUndo: boolean;
-    /** Whether redo operation is available */
-    canRedo: boolean;
-    /** Current position in history (0-based index) */
-    currentIndex: number;
-    /** Total number of states in history */
-    totalStates: number;
-    /** Current size of history in memory */
-    historySize: number;
-    /** Whether batch mode is currently active */
-    isBatchMode: boolean;
-}
-/**
- * Actions available for history management
- */
-export interface HistoryActions {
-    /** Add a new adjustment state to history */
-    pushState: (state: AdjustmentState) => void;
-    /** Undo to previous adjustment state */
-    undo: () => void;
-    /** Redo to next adjustment state */
-    redo: () => void;
-    /** Reset history with new initial adjustment state */
-    reset: (newInitialState: AdjustmentState) => void;
-    /** Jump to specific index in history */
-    jumpToIndex: (index: number) => void;
-    /** Clear all history and start fresh */
-    clearHistory: () => void;
-    /** Get a copy of the entire history array */
-    getHistory: () => AdjustmentState[];
-    /** Trim history to specified size, keeping most recent entries */
-    trimHistory: (keepLast: number) => void;
-    /** Replace entire history with new list of adjustment states */
-    syncHistory: (newHistory: AdjustmentState[], targetIndex?: number) => void;
-}
-/**
- * Configuration actions for runtime adjustment
- */
-export interface HistoryConfig {
-    /** Set maximum history size */
-    setMaxSize: (size: number | 'unlimited') => void;
-    /** Enable or disable batch mode */
-    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
- */
-export interface UseAdjustmentHistoryReturn {
-    /** Current adjustment state value */
-    currentState: AdjustmentState;
-    /** Information about history state */
-    historyInfo: HistoryInfo;
-    /** Available history actions */
-    actions: HistoryActions;
-    /** Configuration options */
-    config: HistoryConfig;
-}
-/**
- * Advanced hook for managing AdjustmentState history with undo/redo functionality.
- *
- * Features:
- * - Unlimited or configurable history size
- * - Batch mode for grouping multiple changes into single undo operations
- * - Memory usage monitoring and optimization
- * - Internal stabilization to prevent re-render issues
- * - Jump to any point in history
- * - 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, controller?: Controller, firebaseUid?: string, currentImageId?: string, options?: HistoryOptions): UseAdjustmentHistoryReturn;

package/dist/hooks/useAdjustmentHistory.js

@@ -1,493 +0,0 @@
-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
- */
-const compareAdjustmentStates = (a, b) => {
-    try {
-        return JSON.stringify(a) === JSON.stringify(b);
-    }
-    catch (error) {
-        // Fallback to manual comparison if JSON.stringify fails
-        console.warn('Failed to compare adjustment states with JSON.stringify, falling back to manual comparison:', error);
-        return (a.tempScore === b.tempScore &&
-            a.tintScore === b.tintScore &&
-            a.vibranceScore === b.vibranceScore &&
-            a.saturationScore === b.saturationScore &&
-            a.exposureScore === b.exposureScore &&
-            a.highlightsScore === b.highlightsScore &&
-            a.shadowsScore === b.shadowsScore &&
-            a.whitesScore === b.whitesScore &&
-            a.blacksScore === b.blacksScore &&
-            a.contrastScore === b.contrastScore &&
-            a.clarityScore === b.clarityScore &&
-            a.sharpnessScore === b.sharpnessScore);
-    }
-};
-/**
- * Advanced hook for managing AdjustmentState history with undo/redo functionality.
- *
- * Features:
- * - Unlimited or configurable history size
- * - Batch mode for grouping multiple changes into single undo operations
- * - Memory usage monitoring and optimization
- * - Internal stabilization to prevent re-render issues
- * - Jump to any point in history
- * - 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, 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,
-        controller: controller,
-        firebaseUid: firebaseUid,
-        currentImageId: currentImageId
-    }), [
-        options.maxSize,
-        options.enableBatching,
-        options.devWarnings,
-        controller,
-        firebaseUid,
-        currentImageId
-    ]);
-    // Core state management
-    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);
-    // Performance monitoring
-    const performanceRef = useRef({
-        lastHistorySize: 1,
-        lastUpdateTime: Date.now(),
-        largeHistoryWarningShown: false
-    });
-    // Sync currentState with history when not in batch mode
-    useEffect(() => {
-        if (!batchModeRef.current) {
-            setCurrentState(history[currentIndex]?.state || initialState);
-        }
-    }, [history, currentIndex, initialState]);
-    const getMemoryUsage = useCallback(() => {
-        try {
-            const historyString = JSON.stringify(history);
-            return historyString.length * 2; // Rough estimate: 2 bytes per character
-        }
-        catch (error) {
-            console.warn('Failed to estimate memory usage:', error);
-            return history.length * 1000; // Fallback estimate
-        }
-    }, [history]);
-    // Development warnings for performance
-    const checkPerformance = useCallback(() => {
-        if (!devWarningsRef.current)
-            return;
-        const now = Date.now();
-        const perfData = performanceRef.current;
-        // Warn about large history sizes
-        if (history.length > 1000 && !perfData.largeHistoryWarningShown) {
-            console.warn(`useAdjustmentHistory: Large history size detected (${history.length} entries). Consider setting a maxSize limit.`);
-            perfData.largeHistoryWarningShown = true;
-        }
-        // Update performance tracking
-        perfData.lastHistorySize = history.length;
-        perfData.lastUpdateTime = now;
-    }, [history.length]);
-    // Trim history to specified size, keeping most recent entries
-    const trimHistoryToSize = useCallback((size) => {
-        if (size <= 0)
-            return;
-        setHistory(prevHistory => {
-            if (prevHistory.length <= size)
-                return prevHistory;
-            const startIndex = Math.max(0, prevHistory.length - size);
-            const trimmedHistory = prevHistory.slice(startIndex);
-            // Adjust current index to maintain relative position
-            setCurrentIndex(prevIndex => {
-                const adjustedIndex = prevIndex - startIndex;
-                return Math.max(0, Math.min(adjustedIndex, trimmedHistory.length - 1));
-            });
-            return trimmedHistory;
-        });
-    }, []);
-    // Apply max size limit when history grows
-    const enforceMaxSize = useCallback(() => {
-        if (maxSizeRef.current === 'unlimited')
-            return;
-        const maxSize = maxSizeRef.current;
-        if (history.length > maxSize) {
-            trimHistoryToSize(maxSize);
-        }
-    }, [history.length, trimHistoryToSize]);
-    // Push new state to history
-    const pushState = useCallback((newState) => {
-        // Always update currentState immediately for smooth UI
-        setCurrentState(newState);
-        if (batchModeRef.current) {
-            // In batch mode: Don't update history yet, just update UI state
-            // History will be updated when batch mode ends
-            return;
-        }
-        // Normal mode: Update history immediately
-        setHistory(prevHistory => {
-            const truncatedHistory = prevHistory.slice(0, currentIndex + 1);
-            const newHistory = [...truncatedHistory, { state: newState }];
-            setCurrentIndex(newHistory.length - 1);
-            return newHistory;
-        });
-    }, [currentState, currentIndex]);
-    // Undo to previous state
-    const undo = useCallback(async () => {
-        if (currentIndex > 0) {
-            const newIndex = currentIndex - 1;
-            const historyEntry = history[newIndex];
-            const newState = historyEntry.state;
-            setCurrentIndex(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;
-                batchStartIndexRef.current = null;
-                batchStartStateRef.current = null;
-            }
-        }
-    }, [currentIndex, history, internalOptions]);
-    // Redo to next state
-    const redo = useCallback(async () => {
-        if (currentIndex < history.length - 1) {
-            const newIndex = currentIndex + 1;
-            const historyEntry = history[newIndex];
-            const newState = historyEntry.state;
-            setCurrentIndex(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, internalOptions]);
-    // Reset history with new initial state
-    const reset = useCallback((newInitialState) => {
-        setHistory([{ state: newInitialState }]);
-        setCurrentIndex(0);
-        setCurrentState(newInitialState);
-        batchModeRef.current = internalOptions.enableBatching;
-        batchStartIndexRef.current = null;
-        batchStartStateRef.current = null;
-    }, [internalOptions.enableBatching]);
-    // 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(newState);
-            // Exit batch mode when jumping
-            if (batchModeRef.current) {
-                batchModeRef.current = false;
-                batchStartIndexRef.current = null;
-                batchStartStateRef.current = null;
-            }
-        }
-    }, [history]);
-    // Clear all history and start fresh
-    const clearHistory = useCallback(() => {
-        setHistory([{ state: currentState }]);
-        setCurrentIndex(0);
-        batchModeRef.current = internalOptions.enableBatching;
-        batchStartIndexRef.current = null;
-        batchStartStateRef.current = null;
-    }, [currentState, internalOptions.enableBatching]);
-    // Get copy of entire history
-    const getHistory = useCallback(() => {
-        return history.map(entry => entry.state);
-    }, [history]);
-    // Manually trim history
-    const trimHistory = useCallback((keepLast) => {
-        trimHistoryToSize(keepLast);
-    }, [trimHistoryToSize]);
-    // Sync/replace entire history with new list
-    const syncHistory = useCallback((newHistory, targetIndex) => {
-        // Validate input
-        if (!Array.isArray(newHistory) || newHistory.length === 0) {
-            console.warn('syncHistory: newHistory must be a non-empty array');
-            return;
-        }
-        // Validate all items are AdjustmentState objects
-        const isValidHistory = newHistory.every(state => state && typeof state === 'object' &&
-            typeof state.tempScore === 'number' &&
-            typeof state.tintScore === 'number' &&
-            typeof state.vibranceScore === 'number' &&
-            typeof state.saturationScore === 'number' &&
-            typeof state.exposureScore === 'number' &&
-            typeof state.highlightsScore === 'number' &&
-            typeof state.shadowsScore === 'number' &&
-            typeof state.whitesScore === 'number' &&
-            typeof state.blacksScore === 'number' &&
-            typeof state.contrastScore === 'number' &&
-            typeof state.clarityScore === 'number' &&
-            typeof state.sharpnessScore === 'number');
-        if (!isValidHistory) {
-            console.warn('syncHistory: All items in newHistory must be valid AdjustmentState objects');
-            return;
-        }
-        // Exit batch mode if active
-        if (batchModeRef.current) {
-            batchModeRef.current = false;
-            batchStartIndexRef.current = null;
-            batchStartStateRef.current = null;
-        }
-        // 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 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;
-            const trimmedHistory = historyToSet.slice(trimAmount);
-            // Adjust target index
-            finalIndex = Math.max(0, finalIndex - trimAmount);
-            setHistory(trimmedHistory);
-            setCurrentIndex(finalIndex);
-            setCurrentState(trimmedHistory[finalIndex].state);
-            if (devWarningsRef.current) {
-                console.warn(`syncHistory: Trimmed ${trimAmount} entries to respect maxSize of ${maxSizeRef.current}`);
-            }
-        }
-        else {
-            // Set history as-is
-            setHistory(historyToSet);
-            setCurrentIndex(finalIndex);
-            setCurrentState(historyToSet[finalIndex].state);
-        }
-        if (devWarningsRef.current) {
-            console.log(`syncHistory: Synchronized ${historyToSet.length} states, current index: ${finalIndex}`);
-        }
-    }, []);
-    // Configuration setters
-    const setMaxSize = useCallback((size) => {
-        maxSizeRef.current = size;
-        if (size !== 'unlimited') {
-            enforceMaxSize();
-        }
-    }, [enforceMaxSize]);
-    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 => {
-                    // 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, internalOptions]);
-    // History info object
-    const historyInfo = useMemo(() => ({
-        canUndo: currentIndex > 0,
-        canRedo: currentIndex < history.length - 1,
-        currentIndex,
-        totalStates: history.length,
-        historySize: getMemoryUsage(),
-        isBatchMode: batchModeRef.current
-    }), [currentIndex, history.length, getMemoryUsage]);
-    // Actions object - stabilized with useMemo
-    const actions = useMemo(() => ({
-        pushState,
-        undo,
-        redo,
-        reset,
-        jumpToIndex,
-        clearHistory,
-        getHistory,
-        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,
-        syncToBackend
-    }), [setMaxSize, setBatchMode, getMemoryUsage, syncToBackend]);
-    // Apply max size enforcement when history changes
-    useEffect(() => {
-        enforceMaxSize();
-        checkPerformance();
-    }, [enforceMaxSize, checkPerformance]);
-    return {
-        currentState,
-        historyInfo,
-        actions,
-        config
-    };
-}