@yogiswara/honcho-editor-ui 2.10.0 → 2.10.1

package/dist/hooks/demo/HonchoEditorBulkDemo.js

@@ -264,7 +264,8 @@ const ImageCard = React.memo(({ image, onToggleSelection }) => {
         photoSrc: image.src,
         adjustments: image.adjustments,
         enableEditor: shouldLoadImage && isInView, // Only enable when we should load the image AND it's in view
-        abortSignal: currentAbortSignalRef.current // Use stable abort signal
+        abortSignal: currentAbortSignalRef.current, // Use stable abort signal
+        frame: null,
     }), [image.key, image.src, image.adjustments, shouldLoadImage, isInView]);
     // Only call useImageProcessor when the card is visible AND we should load the image AND it's in view
     const { processedImageSrc, isProcessingComplete, cancelProcessing, isProcessing } = useImageProcessor(imageProcessorParams);

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

@@ -1,4 +1,4 @@
-import type { EditorTask, EditorResponse } from '../lib/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 '../lib/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 } from '../lib/editor/honcho-editor';
+import type { AdjustmentValues, HonchoEditor } 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: any;
+    editor: HonchoEditor | null;
     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,4 +1,4 @@
-import type { AdjustmentValues } from '../lib/editor/honcho-editor';
+import type { AdjustmentValues } from '../../lib/editor/honcho-editor';
 interface UseImageProcessorProps {
     photoId: string;
     photoSrc: string;
@@ -6,10 +6,13 @@ interface UseImageProcessorProps {
     adjustments?: Partial<AdjustmentValues>;
     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, }: UseImageProcessorProps): UseImageProcessorReturn;
+export declare function useImageProcessor({ photoId, photoSrc, enableEditor, adjustments, frame, priority, abortSignal, }: UseImageProcessorProps): UseImageProcessorReturn;
 export {};

package/dist/lib/hooks/useImageProcessor.js

@@ -1,5 +1,5 @@
-import { useState, useEffect, useMemo } from 'react';
-import { useEditorHighPriority, useEditorLowPriority } from '../lib/hooks/useEditor';
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { useEditorHighPriority, useEditorLowPriority } from '../../lib/hooks/useEditor';
 const initAdjustments = {
     temperature: 0,
     tint: 0,
@@ -14,13 +14,25 @@ const initAdjustments = {
     clarity: 0,
     sharpness: 0
 };
-export function useImageProcessor({ photoId, photoSrc, enableEditor = true, adjustments, frame, priority = 'low', }) {
+export function useImageProcessor({ photoId, photoSrc, enableEditor = true, adjustments, frame, priority = 'low', abortSignal, }) {
     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]);
@@ -69,8 +81,21 @@ export function useImageProcessor({ photoId, photoSrc, enableEditor = true, adju
             cancelled = true;
         };
     }, [photoSrc, adjustmentsString, frameMemoized, enableEditor, isEditorReady, processImage, photoId]);
+    useEffect(() => {
+        if (!abortSignal)
+            return;
+        const handleAbort = () => {
+            cancelProcessing();
+        };
+        abortSignal.addEventListener('abort', handleAbort);
+        return () => {
+            abortSignal.removeEventListener('abort', handleAbort);
+        };
+    }, [abortSignal]);
     return {
         processedImageSrc,
-        isProcessingComplete
+        isProcessingComplete,
+        cancelProcessing,
+        isProcessing
     };
 }

package/dist/services/type.d.ts

@@ -1,4 +1,10 @@
-import { Content } from "@/types";
+export interface Content {
+    key: string;
+    path: string;
+    size: number;
+    width: number;
+    height: number;
+}
 export interface Response<T> {
     code: number;
     data?: T;

package/package.json

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