@yogiswara/honcho-editor-ui 3.8.2 → 3.8.5

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

@@ -47,7 +47,7 @@ export interface UseHonchoEditorSingleActions {
     setBatchMode: (enabled: boolean) => void;
     startBatchMode: () => void;
     endBatchMode: () => void;
-    updateFromSocket: (imageId: string, adjustmentTaskId: string, adjustment: ColorAdjustment) => void;
+    updateFromSocket: (imageId: string, adjustmentTaskId: string, adjustment: ColorAdjustment, preset_id?: string) => void;
     pushState: (state: AdjustmentState) => void;
     undo: () => void;
     redo: () => void;

package/dist/hooks/editor/useHonchoEditorSingle.js

@@ -166,8 +166,8 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
             sharpness: adjustments.sharpnessScore,
         };
     }, [adjustmentHistory.currentState]);
-    const updateFromSocket = useCallback((imageId, adjustmentTaskId, adjustment) => {
-        adjustmentHistory.actions.updateFromBackend(imageId, adjustmentTaskId, adjustment);
+    const updateFromSocket = useCallback((imageId, adjustmentTaskId, adjustment, preset_id) => {
+        adjustmentHistory.actions.updateFromBackend(imageId, adjustmentTaskId, adjustment, preset_id);
     }, [adjustmentHistory.actions.updateFromBackend]);
     const actions = {
         // Navigation

package/dist/hooks/useAdjustmentHistory.d.ts

@@ -53,7 +53,7 @@ export interface HistoryActions {
     /** Sync history from backend using getEditorHistory */
     syncFromBackend: () => Promise<void>;
     /** Update specific history entry from backend without changing current index */
-    updateFromBackend: (imageId: string, adjustmentTaskId: string, adjustment: ColorAdjustment) => void;
+    updateFromBackend: (imageId: string, adjustmentTaskId: string, adjustment: ColorAdjustment, preset_id?: string) => void;
 }
 /**
  * Configuration actions for runtime adjustment

package/dist/hooks/useAdjustmentHistory.js

@@ -22,7 +22,7 @@ const convertAdjustmentStateToColorAdjustment = (adjustmentState) => {
 /**
  * Convert ColorAdjustment from backend to AdjustmentState format
  */
-const convertColorAdjustmentToAdjustmentState = (colorAdjustment) => {
+const convertColorAdjustmentToAdjustmentState = (colorAdjustment, preset_id) => {
     return {
         tempScore: colorAdjustment.temperature,
         tintScore: colorAdjustment.tint,
@@ -36,6 +36,7 @@ const convertColorAdjustmentToAdjustmentState = (colorAdjustment) => {
         blacksScore: colorAdjustment.blacks,
         clarityScore: colorAdjustment.clarity,
         sharpnessScore: Math.max(0, Math.min(100, colorAdjustment.sharpness)),
+        preset_id: preset_id,
     };
 };
 /**
@@ -579,32 +580,32 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
         }
     }, [internalOptions]);
     // Update specific history entry from backend without changing current index
-    const updateFromBackend = useCallback((imageId, adjustmentTaskId, adjustment) => {
+    const updateFromBackend = useCallback((imageId, adjustmentTaskId, adjustment, preset_id) => {
         // Ignore updates if imageID doesn't match current image
         if (imageId !== internalOptions.currentImageId) {
-            console.log(`🚫 updateFromBackend: Ignoring update for different image (${imageId} vs ${internalOptions.currentImageId})`);
+            log.debug({ receivedImageId: imageId, currentImageId: internalOptions.currentImageId }, '🚫 updateFromBackend: Ignoring update for different image');
             return;
         }
         // Ignore updates during batch mode
         if (batchModeRef.current) {
-            console.log(`🚫 updateFromBackend: Ignoring update during batch mode for taskId: ${adjustmentTaskId}`);
+            log.debug({ adjustmentTaskId }, '🚫 updateFromBackend: Ignoring update during batch mode for taskId');
             return;
         }
-        console.log(`🔄 updateFromBackend: Received update for taskId: ${adjustmentTaskId}, imageId: ${imageId}`);
+        log.info({ adjustmentTaskId, imageId, preset_id }, '🔄 updateFromBackend: Received update');
         // Convert ColorAdjustment to AdjustmentState
-        const updatedState = convertColorAdjustmentToAdjustmentState(adjustment);
+        const updatedState = convertColorAdjustmentToAdjustmentState(adjustment, preset_id);
         setHistory(prevHistory => {
             // Find the index of the task to update
             const taskIndex = prevHistory.findIndex(entry => entry.taskId === adjustmentTaskId);
             if (taskIndex === -1) {
                 // Task doesn't exist in current history, we need to sync from backend
                 // to get the complete history with proper chronological order
-                console.log(`📝 updateFromBackend: TaskId ${adjustmentTaskId} not found in current history, triggering sync from backend`);
+                log.info({ adjustmentTaskId }, '📝 updateFromBackend: TaskId not found in current history, triggering sync from backend');
                 // Don't modify history here, instead trigger a sync
                 // Use setTimeout to avoid calling async function inside setState
                 setTimeout(() => {
                     syncFromBackend().catch(error => {
-                        console.error('❌ Failed to sync history after unknown taskId:', error);
+                        log.error({ error, adjustmentTaskId }, '❌ Failed to sync history after unknown taskId');
                     });
                 }, 0);
                 // Return unchanged history for now
@@ -613,10 +614,10 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             // Task exists, check if it's the current index
             const isCurrentIndex = taskIndex === currentIndexRef.current;
             if (isCurrentIndex) {
-                console.log(`🔄 updateFromBackend: Updating current index (${taskIndex}) but not changing current state`);
+                log.debug({ taskIndex }, '🔄 updateFromBackend: Updating current index but not changing current state');
             }
             else {
-                console.log(`🔄 updateFromBackend: Updating history entry at index ${taskIndex} (far behind current ${currentIndexRef.current})`);
+                log.debug({ taskIndex, currentIndex: currentIndexRef.current }, '🔄 updateFromBackend: Updating history entry far behind current');
             }
             // Update the specific history entry
             const updatedHistory = [...prevHistory];
@@ -626,7 +627,7 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             };
             return updatedHistory;
         });
-        console.log(`✅ updateFromBackend: Successfully updated taskId ${adjustmentTaskId}`);
+        log.info({ adjustmentTaskId }, '✅ updateFromBackend: Successfully updated taskId');
     }, [internalOptions]);
     // History info object
     const historyInfo = useMemo(() => ({

package/dist/lib/worker/editor.worker.d.ts

@@ -0,0 +1,7 @@
+/**
+ * STEP 2: Web Worker for Image Processing
+ *
+ * This worker runs the HonchoEditor in a separate thread to prevent
+ * UI freezing on iOS Safari. It uses OffscreenCanvas for processing.
+ */
+export {};

package/dist/lib/worker/editor.worker.js

@@ -0,0 +1,156 @@
+/**
+ * STEP 2: Web Worker for Image Processing
+ *
+ * This worker runs the HonchoEditor in a separate thread to prevent
+ * UI freezing on iOS Safari. It uses OffscreenCanvas for processing.
+ */
+// Import the HonchoEditor class
+// @ts-ignore - dynamic import for worker context
+import { HonchoEditor } from '../honcho-editor.js';
+// Create a single editor instance that will be reused
+let editor = null;
+let isInitialized = false;
+let envConfig = {};
+// Helper function to log messages from worker (visible in main thread console)
+const log = (message, ...args) => {
+    console.log(`[Worker] ${message}`, ...args);
+};
+// Pre-configure Module BEFORE importing the script
+// This ensures the locateFile function is available when the WASM loads
+self.Module = {
+    locateFile: (path) => {
+        // Resolve WASM file path relative to the public folder
+        if (path.endsWith('.wasm')) {
+            log('WASM path resolved to:', '/honcho-photo-editor.wasm');
+            return '/honcho-photo-editor.wasm';
+        }
+        return path;
+    }
+};
+log('Worker script loaded and ready');
+// Handle incoming messages from the main thread
+self.onmessage = async (event) => {
+    const { type, id, path, framePath, adjustments, env } = event.data;
+    log(`📥 Received message: ${type}`, { id, path, framePath });
+    try {
+        if (type === 'INIT') {
+            log('🔧 Starting initialization...');
+            // Store environment variables
+            if (env) {
+                envConfig = env;
+                log('✓ Environment variables stored:', envConfig);
+            }
+            // Initialize the editor
+            if (!editor) {
+                log('📦 Loading WASM module script...');
+                // Load the WASM module script
+                // The Module config above will be picked up by the script
+                self.importScripts('/honcho-photo-editor.js');
+                log('⏳ Waiting for Module to be available...');
+                // Wait a moment for Module to be available
+                await new Promise(resolve => setTimeout(resolve, 200));
+                log('🎨 Creating HonchoEditor instance...');
+                editor = new HonchoEditor();
+                log('⚙️ Initializing editor...');
+                await editor.initialize(false);
+                isInitialized = true;
+                log('✅ Editor initialized successfully');
+            }
+            else {
+                log('ℹ️ Editor already initialized, skipping...');
+            }
+            // Notify main thread that initialization is complete
+            log('📤 Sending INIT_SUCCESS to main thread');
+            self.postMessage({ type: 'INIT_SUCCESS' });
+        }
+        else if (type === 'PROCESS') {
+            log(`🖼️ Processing image: ${id}`);
+            // Ensure editor is initialized
+            if (!isInitialized || !editor) {
+                throw new Error('Editor not initialized - call INIT first');
+            }
+            // Fetch image blobs in the worker
+            log(`📦 Fetching image from: ${path}`);
+            const imageBlob = await fetchImageAsBlob(path);
+            log(`✓ Fetched image blob: ${imageBlob.size} bytes`);
+            let frameBlob = null;
+            if (framePath) {
+                log(`📦 Fetching frame from: ${framePath}`);
+                frameBlob = await fetchImageAsBlob(framePath);
+                log(`✓ Fetched frame blob: ${frameBlob.size} bytes`);
+            }
+            log('🎛️ Adjustments:', adjustments);
+            log('⚡ Starting processToBlobFast...');
+            const startTime = performance.now();
+            // Process the image
+            const resultBlob = await editor.processToBlobFast(imageBlob, adjustments || {}, frameBlob);
+            const duration = Math.round(performance.now() - startTime);
+            log(`✅ Processing complete in ${duration}ms, result size: ${resultBlob.size} bytes`);
+            // Send the result back to the main thread
+            log(`📤 Sending PROCESS_SUCCESS to main thread for ${id}`);
+            self.postMessage({
+                type: 'PROCESS_SUCCESS',
+                id,
+                blob: resultBlob
+            });
+        }
+        else {
+            throw new Error(`Unknown message type: ${type}`);
+        }
+    }
+    catch (error) {
+        log(`❌ Error processing message type ${type}:`, error);
+        // Send error back to main thread
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        const errorStack = error instanceof Error ? error.stack : undefined;
+        log(`📤 Sending ERROR to main thread for ${id}`, { error: errorMessage });
+        self.postMessage({
+            type: 'ERROR',
+            id,
+            error: errorMessage,
+            stack: errorStack
+        });
+    }
+};
+// Helper function to fetch image as blob in worker
+async function fetchImageAsBlob(url) {
+    const BUCKET_HOST = envConfig.bucketHost;
+    const CLOUD_FRONT_HOST = envConfig.cloudFrontHost;
+    // Try CloudFront first if available
+    if (CLOUD_FRONT_HOST && BUCKET_HOST) {
+        try {
+            const key = url.replace(BUCKET_HOST, "");
+            const response = await fetch(`${CLOUD_FRONT_HOST}${key}`);
+            if (response.ok) {
+                log(`✓ Fetched from CloudFront: ${key}`);
+                return response.blob();
+            }
+        }
+        catch (error) {
+            log(`⚠️ CloudFront fetch failed for ${url}:`, error);
+        }
+    }
+    // Fallback to direct fetch
+    try {
+        const response = await fetch(url, {
+            mode: 'cors',
+            credentials: 'omit'
+        });
+        if (response.ok) {
+            log(`✓ Fetched directly: ${url}`);
+            return response.blob();
+        }
+    }
+    catch (error) {
+        log(`⚠️ Direct fetch failed for ${url}:`, error);
+    }
+    // Final fallback to proxy
+    const proxyUrl = `/api/image?imageUrl=${encodeURIComponent(url)}`;
+    log(`⚠️ Using proxy fallback: ${proxyUrl}`);
+    const response = await fetch(proxyUrl);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch image: ${response.statusText}`);
+    }
+    return response.blob();
+}
+log('Worker message handler registered');

package/package.json

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