@yogiswara/honcho-editor-ui 2.9.1 → 2.10.0

package/dist/lib/editor/honcho-editor.js

@@ -23,20 +23,7 @@
  * C++ handles all image processing algorithms.
  */
 // Adjustment ranges for UI components
-const ADJUSTMENT_RANGES = {
-    temperature: { min: -100, max: 100, default: 0, step: 1 },
-    tint: { min: -100, max: 100, default: 0, step: 1 },
-    saturation: { min: -100, max: 100, default: 0, step: 1 },
-    vibrance: { min: -100, max: 100, default: 0, step: 1 },
-    exposure: { min: -100, max: 100, default: 0, step: 1 },
-    contrast: { min: -100, max: 100, default: 0, step: 1 },
-    highlights: { min: -100, max: 100, default: 0, step: 1 },
-    shadows: { min: -100, max: 100, default: 0, step: 1 },
-    whites: { min: -100, max: 100, default: 0, step: 1 },
-    blacks: { min: -100, max: 100, default: 0, step: 1 },
-    clarity: { min: -100, max: 100, default: 0, step: 1 },
-    sharpness: { min: -100, max: 100, default: 0, step: 1 }
-};
+// Moved inside HonchoEditor class as static property
 class HonchoEditor {
     constructor() {
         this.wasmModule = null;
@@ -554,6 +541,9 @@ class HonchoEditor {
                 }
                 console.log('✅ Frame applied successfully');
             }
+            else {
+                this.clearFrame();
+            }
             // Step 3: Apply all adjustments
             console.log('🎛️ Applying adjustments:', adjustments);
             const validAdjustments = [
@@ -718,7 +708,7 @@ class HonchoEditor {
      * Validate adjustment value against range
      */
     validateAdjustment(name, value) {
-        const range = ADJUSTMENT_RANGES[name];
+        const range = HonchoEditor.ADJUSTMENT_RANGES[name];
         if (!range) {
             throw new Error(`Unknown adjustment: ${name}`);
         }
@@ -742,6 +732,21 @@ class HonchoEditor {
         this.canvas = null;
     }
 }
+// Static adjustment ranges for UI components
+HonchoEditor.ADJUSTMENT_RANGES = {
+    temperature: { min: -100, max: 100, default: 0, step: 1 },
+    tint: { min: -100, max: 100, default: 0, step: 1 },
+    saturation: { min: -100, max: 100, default: 0, step: 1 },
+    vibrance: { min: -100, max: 100, default: 0, step: 1 },
+    exposure: { min: -100, max: 100, default: 0, step: 1 },
+    contrast: { min: -100, max: 100, default: 0, step: 1 },
+    highlights: { min: -100, max: 100, default: 0, step: 1 },
+    shadows: { min: -100, max: 100, default: 0, step: 1 },
+    whites: { min: -100, max: 100, default: 0, step: 1 },
+    blacks: { min: -100, max: 100, default: 0, step: 1 },
+    clarity: { min: -100, max: 100, default: 0, step: 1 },
+    sharpness: { min: -100, max: 100, default: 0, step: 1 }
+};
 // Export for convenience
 // export default HonchoEditor; // Disabled for browser compatibility
 // Helper functions for common operations
@@ -816,10 +821,10 @@ const HonchoEditorUtils = {
 };
 // Export for both Node.js and browser
 if (typeof module !== 'undefined' && module.exports) {
-    module.exports = { HonchoEditor, HonchoEditorUtils, ADJUSTMENT_RANGES };
+    module.exports = { HonchoEditor, HonchoEditorUtils };
 }
 else {
     window.HonchoEditor = HonchoEditor;
     window.HonchoEditorUtils = HonchoEditorUtils;
-    window.ADJUSTMENT_RANGES = ADJUSTMENT_RANGES;
+    //window.ADJUSTMENT_RANGES = ADJUSTMENT_RANGES;
 }

package/dist/lib/hooks/useEditor.d.ts

@@ -1,4 +1,4 @@
-import type { EditorTask, EditorResponse } from '../context/EditorProcessingService';
+import type { EditorTask, EditorResponse } from '../lib/context/EditorProcessingService';
 interface UseEditorOptions {
     priority?: number;
 }

package/dist/lib/hooks/useEditor.js

@@ -1,6 +1,6 @@
 'use client';
 import { useCallback } from 'react';
-import { useEditorContext } from '../context/EditorContext';
+import { useEditorContext } from '../lib/context/EditorContext';
 /**
  * Lightweight hook for components to request image processing
  * Uses the global editor instance via context

package/dist/lib/hooks/useEditorHeadless.d.ts

@@ -1,4 +1,4 @@
-import type { AdjustmentValues, HonchoEditor } from '../editor/honcho-editor';
+import type { AdjustmentValues } from '../lib/editor/honcho-editor';
 declare global {
     interface Window {
         HonchoEditor: new () => any;
@@ -22,7 +22,7 @@ interface UseEditorHeadlessOptions {
     wasmUrl?: string;
 }
 export declare function useEditorHeadless(options?: UseEditorHeadlessOptions): {
-    editor: HonchoEditor | null;
+    editor: any;
     isReady: boolean;
     error: Error | null;
     processImage: (task: EditorTask) => Promise<EditorResponse>;

package/dist/lib/hooks/useEditorHeadless.js

@@ -1,6 +1,6 @@
 'use client';
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { loadImageAsFile } from '../../utils/imageLoader';
+import { loadImageAsFile } from '../utils/imageLoader';
 export function useEditorHeadless(options = {}) {
     const { scriptUrl = '/honcho-photo-editor.js', wasmUrl = '/honcho-photo-editor.wasm' } = options;
     const editorRef = useRef(null);

package/dist/lib/hooks/useImageProcessor.d.ts

@@ -1,18 +1,15 @@
-import type { AdjustmentValues } from '../editor/honcho-editor';
+import type { AdjustmentValues } from '../lib/editor/honcho-editor';
 interface UseImageProcessorProps {
     photoId: string;
     photoSrc: string;
     enableEditor?: boolean;
     adjustments?: Partial<AdjustmentValues>;
-    frame?: string | null;
+    frame: string | null;
     priority?: 'high' | 'low';
-    abortSignal?: AbortSignal;
 }
 interface UseImageProcessorReturn {
     processedImageSrc: string;
     isProcessingComplete: boolean;
-    cancelProcessing: () => void;
-    isProcessing: boolean;
 }
-export declare function useImageProcessor({ photoId, photoSrc, enableEditor, adjustments, frame, priority, abortSignal, }: UseImageProcessorProps): UseImageProcessorReturn;
+export declare function useImageProcessor({ photoId, photoSrc, enableEditor, adjustments, frame, priority, }: UseImageProcessorProps): UseImageProcessorReturn;
 export {};

package/dist/lib/hooks/useImageProcessor.js

@@ -1,113 +1,76 @@
-import { useState, useEffect, useMemo, useRef } from 'react';
-import { useEditorHighPriority, useEditorLowPriority } from '../hooks/useEditor';
-export function useImageProcessor({ photoId, photoSrc, enableEditor = true, adjustments, frame, priority = 'low', abortSignal, }) {
+import { useState, useEffect, useMemo } from 'react';
+import { useEditorHighPriority, useEditorLowPriority } from '../lib/hooks/useEditor';
+const initAdjustments = {
+    temperature: 0,
+    tint: 0,
+    saturation: 0,
+    vibrance: 0,
+    exposure: 0,
+    contrast: 0,
+    highlights: 0,
+    shadows: 0,
+    whites: 0,
+    blacks: 0,
+    clarity: 0,
+    sharpness: 0
+};
+export function useImageProcessor({ photoId, photoSrc, enableEditor = true, adjustments, frame, priority = 'low', }) {
     const { processImage, isEditorReady } = priority === 'high'
         ? useEditorHighPriority()
         : useEditorLowPriority();
     // State for processed image and processing status
     const [processedImageSrc, setProcessedImageSrc] = useState(photoSrc);
     const [isProcessingComplete, setIsProcessingComplete] = useState(false);
-    const [isProcessing, setIsProcessing] = useState(false);
-    // Internal abort controller for this hook
-    const abortControllerRef = useRef(null);
-    // Function to cancel current processing
-    const cancelProcessing = () => {
-        if (abortControllerRef.current) {
-            abortControllerRef.current.abort();
-            abortControllerRef.current = null;
-        }
-        setIsProcessing(false);
-        console.debug(`[useImageProcessor] Cancelled processing for image ${photoId}`);
-    };
     // Memoize adjustments to prevent unnecessary effect triggers
     const adjustmentsString = useMemo(() => adjustments ? JSON.stringify(adjustments) : '', [adjustments]);
-    const frameMemoized = useMemo(() => frame ? frame : null, [frame]);
+    const frameMemoized = useMemo(() => frame, [frame]);
+    if (!adjustments) {
+        adjustments = { ...initAdjustments };
+    }
     // Process image when adjustments change
     useEffect(() => {
-        // Cancel any previous processing
-        if (abortControllerRef.current) {
-            abortControllerRef.current.abort();
-        }
-        if (!enableEditor || !isEditorReady || !adjustments) {
+        if (!enableEditor || !isEditorReady) {
             console.debug("Skipping editor processing:", {
                 enableEditor,
                 isEditorReady,
-                hasAdjustments: !!adjustments,
-                hasFrame: frameMemoized,
-                photoId
+                hasAdjustments: adjustments,
+                hasFrame: frameMemoized
             });
             setProcessedImageSrc(photoSrc);
             setIsProcessingComplete(true);
-            setIsProcessing(false);
             return;
         }
-        // Create new abort controller for this processing cycle
-        const controller = new AbortController();
-        abortControllerRef.current = controller;
         // Reset processing state when starting new processing
         setIsProcessingComplete(false);
-        setIsProcessing(true);
+        let cancelled = false;
         const processImageWithEditor = async () => {
             try {
-                // Check if already aborted before starting
-                if (controller.signal.aborted || abortSignal?.aborted) {
-                    console.debug(`[useImageProcessor] Aborted before processing started for image ${photoId}`);
-                    return;
-                }
-                console.debug(`[useImageProcessor] Starting processing for image ${photoId}`);
                 const result = await processImage({
                     id: photoId,
                     path: photoSrc,
                     frame: frameMemoized,
-                    adjustments: adjustments,
-                    abortSignal: controller.signal // Pass the abort signal to the processing service
+                    adjustments: adjustments
                 });
-                // Check if aborted after processing completes
-                if (!controller.signal.aborted && !abortSignal?.aborted) {
-                    console.debug(`[useImageProcessor] Completed processing for image ${photoId}`);
+                if (!cancelled) {
                     setProcessedImageSrc(result.path);
                     setIsProcessingComplete(true);
-                    setIsProcessing(false);
-                }
-                else {
-                    console.debug(`[useImageProcessor] Aborted after processing completed for image ${photoId}`);
                 }
             }
             catch (error) {
-                if (error.name === 'AbortError' || controller.signal.aborted || abortSignal?.aborted) {
-                    console.debug(`[useImageProcessor] Processing cancelled for image ${photoId}`);
-                }
-                else {
+                if (!cancelled) {
                     console.error({ error, photoKey: photoId, isEditorReady }, 'Failed to process image with editor');
+                    // setProcessedImageSrc(photoSrc); // Fallback to original
+                    // setIsProcessingComplete(true); // Show fallback image
                 }
-                setIsProcessing(false);
             }
         };
         processImageWithEditor();
         return () => {
-            // Cleanup: abort the controller when effect cleanup runs
-            controller.abort();
-            if (abortControllerRef.current === controller) {
-                abortControllerRef.current = null;
-            }
-        };
-    }, [photoSrc, adjustmentsString, frameMemoized, enableEditor, isEditorReady, processImage, photoId, abortSignal]);
-    // Listen to external abort signal
-    useEffect(() => {
-        if (!abortSignal)
-            return;
-        const handleAbort = () => {
-            cancelProcessing();
-        };
-        abortSignal.addEventListener('abort', handleAbort);
-        return () => {
-            abortSignal.removeEventListener('abort', handleAbort);
+            cancelled = true;
         };
-    }, [abortSignal]);
+    }, [photoSrc, adjustmentsString, frameMemoized, enableEditor, isEditorReady, processImage, photoId]);
     return {
         processedImageSrc,
-        isProcessingComplete,
-        cancelProcessing,
-        isProcessing
+        isProcessingComplete
     };
 }

package/dist/services/base.d.ts

@@ -0,0 +1,57 @@
+import { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
+import { Observable } from "rxjs/internal/Observable";
+export declare const api: any;
+export interface ResponseData<T> {
+    code?: number;
+    message?: string;
+    data?: T;
+    error_message?: string;
+}
+export declare class ResponseError extends Error {
+    code: number;
+    error_message: string;
+    isEmptyData: boolean;
+    constructor(code: number, error_message: string, originalError?: Error, isEmptyData?: boolean);
+}
+export declare class EmptyDataError extends Error {
+    constructor();
+}
+export declare function handleResponse<T>(res: AxiosResponse<ResponseData<T>>): T;
+export declare function handleError(error: any): Observable<any>;
+export declare function isResponseError(error: any): Boolean;
+/**
+ * @deprecated use axiosGetObservable, axiosPostObservable, axiosPutObservable, axiosDeleteObservable instead
+ * @param promise
+ */
+export declare function fromAxiosToObservable<T>(promise: Promise<AxiosResponse<ResponseData<T>>>): Observable<T>;
+export declare const apiV3: any;
+export declare class BaseServices {
+    protected axios: AxiosInstance;
+    protected constructor(axios: AxiosInstance);
+    protected axiosGetObservable<T>(url: string, params?: AxiosRequestConfig<any> | undefined): Observable<T>;
+    protected axiosPostObservable<T>(url: string, data: any, params?: AxiosRequestConfig<any> | undefined): Observable<T>;
+    protected axiosPutObservable<T>(url: string, data: any, params?: AxiosRequestConfig<any> | undefined): Observable<T>;
+    protected axiosDeleteObservable<T>(url: string, params?: AxiosRequestConfig<any> | undefined): Observable<T>;
+}
+export interface Result<T> {
+    getStatus(): "loading" | "success" | "error" | "not-found" | "idle";
+    getData(): T;
+    getDataOrNull(): T | null | undefined;
+    getError(): any;
+}
+export declare class ResultImpl<T> implements Result<T> {
+    private readonly status;
+    private readonly data;
+    private readonly error;
+    getStatus(): "loading" | "success" | "error" | "not-found" | "idle";
+    getData(): T;
+    getError(): any;
+    getDataOrNull(): T | null | undefined;
+    private constructor();
+    static success<T>(data: T): Result<T>;
+    static loading<T>(): Result<T>;
+    static error<T>(err: any): Result<T>;
+    static notFound<T>(): Result<T>;
+    static idle<T>(): Result<T>;
+}
+export declare function fromPromise<T>(promise: Promise<T>): Observable<T>;

package/dist/services/base.js

@@ -0,0 +1,243 @@
+import axios from "axios";
+import axiosRetry from 'axios-retry';
+import { Observable } from "rxjs/internal/Observable";
+import { catchError, from, map } from "rxjs";
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:8080";
+const apiConfig = (version) => {
+    return axios.create({
+        baseURL: `${BASE_URL}/${version}/`,
+        timeout: 60000 * 2,
+    });
+};
+export const api = axios.create({
+    baseURL: `${BASE_URL}`,
+    timeout: 60000 * 2,
+});
+axiosRetry(api, { retries: 3, retryDelay: axiosRetry.linearDelay() });
+export class ResponseError extends Error {
+    constructor(code, error_message, originalError, isEmptyData = false) {
+        super(`${code}: ${error_message}`);
+        this.isEmptyData = false;
+        this.code = code;
+        this.error_message = error_message;
+        this.isEmptyData = isEmptyData;
+        if (originalError && originalError.stack) {
+            this.stack += `\nCaused by: ${originalError.stack}`;
+        }
+        // we need to set prototype to make this object can check by
+        // instanceof ResponseError
+        Object.setPrototypeOf(this, ResponseError.prototype);
+    }
+}
+export class EmptyDataError extends Error {
+    constructor() {
+        super("Data Empty, server not send any data in response");
+        // we need to set prototype to make this object can check by
+        // instanceof EmptyDataError
+        Object.setPrototypeOf(this, EmptyDataError.prototype);
+    }
+}
+// get data from response
+export function handleResponse(res) {
+    if (!res.data.data) {
+        throw new EmptyDataError();
+    }
+    return res.data.data;
+}
+function mapError(error) {
+    if (error.isAxiosError) {
+        if (error.response) {
+            if (typeof error.response.data === "string") {
+                return {
+                    code: error.response.status,
+                    message: `${error.response.status}: ${error.response.statusText}`,
+                    data: undefined,
+                    error_message: error.response.data,
+                };
+            }
+            else {
+                return error.response?.data;
+            }
+        }
+        else if (error.request) {
+            return {
+                code: 400,
+                message: "`${error.name}: failed connect to server check your connection`",
+                data: undefined,
+                error_message: "failed connect to server",
+            };
+        }
+        else {
+            return {
+                code: 400,
+                message: error.message,
+                data: undefined,
+                error_message: error.message,
+            };
+        }
+    }
+    else {
+        return {
+            code: 500,
+            message: String(error),
+            data: undefined,
+            error_message: String(error),
+        };
+    }
+}
+// handle error from response convert it and throw it as ResponseError
+export function handleError(error) {
+    if (error instanceof EmptyDataError) {
+        // if data is empty just throw error
+        throw new ResponseError(204, "Data Empty, server not send any data in response", error, true);
+    }
+    let response = mapError(error);
+    throw new ResponseError(response.code || 500, response.error_message || "Unknown error", error);
+}
+export function isResponseError(error) {
+    return !!((error.code) && (error.error_message));
+}
+/**
+ * @deprecated use axiosGetObservable, axiosPostObservable, axiosPutObservable, axiosDeleteObservable instead
+ * @param promise
+ */
+export function fromAxiosToObservable(promise) {
+    return from(promise).pipe(map(handleResponse), catchError(handleError));
+}
+export const apiV3 = apiConfig('v3');
+export class BaseServices {
+    constructor(axios) {
+        this.axios = axios;
+    }
+    axiosGetObservable(url, params) {
+        return new Observable(subscriber => {
+            const controller = new AbortController();
+            const paramsData = { signal: controller.signal, ...params };
+            this.axios.get(url, paramsData)
+                .then(res => {
+                console.debug({ res, url, params }, "success GET request");
+                subscriber.next(res);
+                subscriber.complete();
+            })
+                .catch((error) => {
+                console.error({ error, url, params }, "Failed GET request");
+                subscriber.error(error);
+            });
+            return () => {
+                console.debug({ url, params, method: "GET" }, "Abort request");
+                controller.abort();
+            };
+        }).pipe(map(handleResponse), catchError(handleError));
+    }
+    axiosPostObservable(url, data, params) {
+        return new Observable(subscriber => {
+            const controller = new AbortController();
+            const paramsData = { signal: controller.signal, ...params };
+            this.axios.post(url, data, paramsData)
+                .then(res => {
+                console.debug({ res, url, params }, "success POST request");
+                subscriber.next(res);
+                subscriber.complete();
+            })
+                .catch((error) => {
+                console.error({ error, url, params }, "Failed POST request");
+                subscriber.error(error);
+            });
+            return () => {
+                console.debug({ url, params, method: "POST" }, "Abort request");
+                controller.abort();
+            };
+        }).pipe(map(handleResponse), catchError(handleError));
+    }
+    axiosPutObservable(url, data, params) {
+        return new Observable(subscriber => {
+            const controller = new AbortController();
+            const paramsData = { signal: controller.signal, ...params };
+            this.axios.put(url, data, paramsData)
+                .then(res => {
+                console.debug({ res, url, params }, "success PUT request");
+                subscriber.next(res);
+                subscriber.complete();
+            })
+                .catch((error) => {
+                console.error({ error, url, params }, "Failed PUT request");
+                subscriber.error(error);
+            });
+            return () => {
+                console.debug({ url, params, method: "PUT" }, "Abort request");
+                controller.abort();
+            };
+        }).pipe(map(handleResponse), catchError(handleError));
+    }
+    axiosDeleteObservable(url, params) {
+        return new Observable(subscriber => {
+            const controller = new AbortController();
+            const paramsData = { signal: controller.signal, ...params };
+            this.axios.delete(url, paramsData)
+                .then(res => {
+                console.debug({ res, url, params }, "success DELETE request");
+                subscriber.next(res);
+                subscriber.complete();
+            })
+                .catch((error) => {
+                console.error({ error, url, params }, "Failed DELETE request");
+                subscriber.error(error);
+            });
+            return () => {
+                console.debug({ url, params, method: "DELETE" }, "Abort request");
+                controller.abort();
+            };
+        }).pipe(map(handleResponse), catchError(handleError));
+    }
+}
+export class ResultImpl {
+    getStatus() {
+        return this.status;
+    }
+    getData() {
+        if (this.data)
+            return this.data;
+        throw new Error("Data is not available");
+    }
+    getError() {
+        if (this.error)
+            return this.error;
+        throw new Error("Error is not available");
+    }
+    getDataOrNull() {
+        return this.data;
+    }
+    constructor(status, data, error) {
+        this.status = "idle";
+        this.status = status;
+        this.data = data;
+        this.error = error;
+    }
+    static success(data) {
+        return new ResultImpl("success", data, null);
+    }
+    static loading() {
+        return new ResultImpl("loading");
+    }
+    static error(err) {
+        return new ResultImpl("error", null, err);
+    }
+    static notFound() {
+        return new ResultImpl("not-found");
+    }
+    static idle() {
+        return new ResultImpl("idle");
+    }
+}
+export function fromPromise(promise) {
+    return new Observable(subscriber => {
+        promise.then(value => {
+            console.debug({ value }, "Promise success");
+            subscriber.next(value);
+            subscriber.complete();
+        }).catch(err => {
+            console.error({ err }, "Promise error");
+            subscriber.error(err);
+        });
+    });
+}