@yogiswara/honcho-editor-ui 1.0.9 → 1.0.11

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

@@ -0,0 +1,76 @@
+interface Log {
+    created_at: string;
+    updated_at: string;
+}
+export interface Content {
+    key: string;
+    path: string;
+    size: number;
+    width: number;
+    height: number;
+}
+export interface ColorAdjustment {
+    temperature: number;
+    tint: number;
+    saturation: number;
+    vibrance: number;
+    exposure: number;
+    contrast: number;
+    highlights: number;
+    shadows: number;
+    whites: number;
+    blacks: number;
+    clarity: number;
+    sharpness: number;
+}
+export interface TransformationAdjustment {
+    angle_score?: number;
+    direction?: "cw" | "ccw";
+    scale_score?: number;
+    keep_dimension?: boolean;
+    flip_mode?: "horizontal" | "vertical" | "mix";
+    aspect_ratio?: string;
+    width?: number;
+    height?: number;
+}
+export interface Watermark {
+    path: string;
+    max_pct: [number, number];
+    anchor: [string, number | null, number[] | null];
+    rotate_deg: [number, "cw" | "ccw"];
+}
+export interface EditorConfig {
+    color_adjustment: ColorAdjustment;
+    transformation_adjustment: TransformationAdjustment[];
+    watermarks: Watermark[];
+}
+export interface Gallery {
+    id: string;
+    uid: string;
+    event_id: string;
+    download: Content;
+    download_edited: Content | null;
+    raw?: Content;
+    raw_edited?: Content;
+    raw_preview?: Content;
+    raw_thumbnail?: Content;
+    original?: Content;
+    original_edited?: Content | null;
+    large?: Content;
+    large_edited?: Content | null;
+    medium?: Content | null;
+    medium_edited?: Content | null;
+    small?: Content | null;
+    small_edited?: Content | null;
+    mini?: Content | null;
+    mini_edited?: Content | null;
+    create_from?: string[];
+    thumbnail: Content;
+    thumbnail_edited: Content | null;
+    is_original: boolean;
+    available: boolean;
+    show_gallery: boolean;
+    editor_config?: EditorConfig;
+    log: Log;
+}
+export {};

package/dist/hooks/editor/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,20 +1,19 @@
 import { SelectChangeEvent } from "@mui/material";
+import { Gallery } from '../../hooks/editor/type';
 declare global {
     interface Window {
         Module: any;
     }
 }
 export interface Controller {
-    onGetImage(imageID: string): Promise<string | null>;
-    getImageList(): Promise<ImageItem[]>;
-    syncConfig(): Promise<void>;
-    handleBack(): void;
-    handleNext(): void;
-    handlePrev(): void;
-    getPresets(): Promise<Preset[]>;
-    createPreset(name: string, settings: AdjustmentState): Promise<Preset | null>;
-    deletePreset(presetId: string): Promise<void>;
-    renamePreset(presetId: string, newName: string): Promise<void>;
+    onGetImage(firebaseUid: string, imageID: string): Promise<Gallery>;
+    getImageList(firebaseUid: string): Promise<Gallery[]>;
+    syncConfig(firebaseUid: string): Promise<void>;
+    handleBack(firebaseUid: string): void;
+    getPresets(firebaseUid: string): Promise<Preset[]>;
+    createPreset(firebaseUid: string, name: string, settings: AdjustmentState): Promise<Preset>;
+    deletePreset(firebaseUid: string, presetId: string): Promise<void>;
+    renamePreset(firebaseUid: string, presetId: string, newName: string): Promise<void>;
 }
 export type AdjustmentState = {
     tempScore: number;
@@ -40,21 +39,21 @@ export type ImageItem = {
     name: string;
     file: File;
 };
-export declare function useHonchoEditor(controller: Controller): {
+export declare function useHonchoEditor(controller: Controller, initImageId: string, firebaseUid: string): {
+    handlePrev: (firebaseUid: string) => Promise<void>;
+    handleNext: (firebaseUid: string) => Promise<void>;
     canvasRef: import("react").MutableRefObject<HTMLCanvasElement | null>;
     canvasContainerRef: import("react").MutableRefObject<HTMLDivElement | null>;
     fileInputRef: import("react").MutableRefObject<HTMLInputElement | null>;
     displayedToken: string | null;
-    handleBack: () => void;
-    onGetImage: (imageID: string) => Promise<string | null>;
-    getImageList: () => Promise<ImageItem[]>;
-    syncConfig: () => Promise<void>;
-    getPresets: () => Promise<Preset[]>;
-    createPreset: (name: string, settings: AdjustmentState) => Promise<Preset | null>;
-    deletePreset: (presetId: string) => Promise<void>;
-    renamePreset: (presetId: string, newName: string) => Promise<void>;
-    handleNext: () => void;
-    handlePrev: () => void;
+    handleBack: (firebaseUid: string) => void;
+    onGetImage: (firebaseUid: string, imageID: string) => Promise<Gallery>;
+    getImageList: (firebaseUid: string) => Promise<Gallery[]>;
+    syncConfig: (firebaseUid: string) => Promise<void>;
+    getPresets: (firebaseUid: string) => Promise<Preset[]>;
+    createPreset: (firebaseUid: string, name: string, settings: AdjustmentState) => Promise<Preset>;
+    deletePreset: (firebaseUid: string, presetId: string) => Promise<void>;
+    renamePreset: (firebaseUid: string, presetId: string, newName: string) => Promise<void>;
     panelRef: import("react").MutableRefObject<HTMLDivElement | null>;
     contentRef: import("react").MutableRefObject<HTMLDivElement | null>;
     panelHeight: number;
@@ -105,7 +104,7 @@ export declare function useHonchoEditor(controller: Controller): {
     handleScriptReady: () => Promise<void>;
     handleFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     handleAlertClose: () => void;
-    loadImageFromId: (imageId: string) => Promise<void>;
+    loadImageFromId: (firebaseUid: string, imageId: string) => Promise<void>;
     loadImageFromUrl: (url: string) => Promise<void>;
     handleRevert: () => void;
     handleUndo: () => void;

package/dist/hooks/editor/useHonchoEditor.js

@@ -6,7 +6,8 @@ const initialAdjustments = {
     whitesScore: 0, blacksScore: 0, saturationScore: 0, contrastScore: 0, clarityScore: 0, sharpnessScore: 0,
 };
 const clamp = (value) => Math.max(-100, Math.min(100, value));
-export function useHonchoEditor(controller) {
+export function useHonchoEditor(controller, initImageId, firebaseUid) {
+    const [currentImageId, setCurrentImageId] = useState(initImageId);
     // MARK: - Core Editor State & Refs
     const editorRef = useRef(null);
     const canvasRef = useRef(null);
@@ -258,17 +259,20 @@ export function useHonchoEditor(controller) {
             setEditorStatus("Error: Could not load image from URL.");
         }
     }, [loadImage]);
-    const loadImageFromId = useCallback(async (imageId) => {
+    const loadImageFromId = useCallback(async (firebaseUid, imageId) => {
         if (!controller)
             return;
-        setEditorStatus("Fetching image URL...");
+        setEditorStatus("Fetching image...");
         try {
-            const imageUrl = await controller.onGetImage(imageId);
-            if (imageUrl) {
-                await loadImageFromUrl(imageUrl);
+            const gallery = await controller.onGetImage(firebaseUid, imageId);
+            const imagePath = gallery?.raw_edited?.path
+                ? gallery.raw_edited.path
+                : gallery?.download?.path;
+            if (imagePath) {
+                await loadImageFromUrl(imagePath);
             }
             else {
-                throw new Error("Controller did not return an image URL.");
+                throw new Error("Controller did not return a valid image object with path.");
             }
         }
         catch (error) {
@@ -276,26 +280,22 @@ export function useHonchoEditor(controller) {
             setEditorStatus("Error: Could not fetch the image.");
         }
     }, [controller, loadImageFromUrl]);
+    const handlePrev = useCallback(async (firebaseUid) => {
+        const prevImageId = imageList[imageList.length - 2]?.id;
+        if (prevImageId) {
+            setCurrentImageId(prevImageId);
+        }
+    }, [imageList]);
+    const handleNext = useCallback(async (firebaseUid) => {
+        const nextImageId = imageList[1]?.id;
+        if (nextImageId) {
+            setCurrentImageId(nextImageId);
+        }
+    }, [imageList]);
     useEffect(() => {
-        // Define the function that the native app will call to load an image
-        const loadInitialImageFromNative = (imageId) => {
-            if (typeof imageId === 'string' && imageId) {
-                console.log(`[WebView Bridge] Received command to load imageId: ${imageId}`);
-                // Use the loadImageFromId function directly from the hook's scope
-                loadImageFromId(imageId);
-            }
-            else {
-                console.error(`[WebView Bridge] Invalid imageId received from native:`, imageId);
-            }
-        };
-        // Expose both functions on the window object for native code to access
-        window.loadInitialImageFromNative = loadInitialImageFromNative;
-        // Cleanup function to remove the global handlers when the component unmounts
-        return () => {
-            delete window.loadInitialImageFromNative;
-            delete window.setAuthToken;
-        };
-    }, [loadImageFromId]);
+        loadImageFromId(firebaseUid, currentImageId); // initImageId became state
+        // so when next prev changes only setCurrentImageId
+    }, [currentImageId, firebaseUid, loadImageFromId]);
     const handleFileChange = (event) => {
         const files = event.target?.files;
         if (!files || files.length === 0)
@@ -704,7 +704,7 @@ export function useHonchoEditor(controller) {
         if (!controller)
             return;
         try {
-            const fetchedPresets = await controller.getPresets();
+            const fetchedPresets = await controller.getPresets(firebaseUid);
             setPresets(fetchedPresets);
         }
         catch (error) {
@@ -724,7 +724,7 @@ export function useHonchoEditor(controller) {
         if (!controller || !activePresetMenuId)
             return;
         try {
-            await controller.renamePreset(activePresetMenuId, newName);
+            await controller.renamePreset(firebaseUid, activePresetMenuId, newName);
             // On success, update the preset in local state
             setPresets(prev => prev.map(p => p.id === activePresetMenuId ? { ...p, name: newName } : p));
         }
@@ -737,7 +737,7 @@ export function useHonchoEditor(controller) {
         if (!controller || !activePresetMenuId)
             return;
         try {
-            await controller.deletePreset(activePresetMenuId);
+            await controller.deletePreset(firebaseUid, activePresetMenuId);
             // On success, remove the preset from local state
             setPresets(prevPresets => prevPresets.filter(p => p.id !== activePresetMenuId));
         }
@@ -754,7 +754,7 @@ export function useHonchoEditor(controller) {
             return;
         const currentAdjustments = { tempScore, tintScore, vibranceScore, exposureScore, highlightsScore, shadowsScore, whitesScore, blacksScore, saturationScore, contrastScore, clarityScore, sharpnessScore };
         try {
-            const newPreset = await controller.createPreset(presetName, currentAdjustments);
+            const newPreset = await controller.createPreset(firebaseUid, presetName, currentAdjustments);
             if (newPreset) {
                 // Add the new preset returned from the API to our local state
                 setPresets(prevPresets => [...prevPresets, newPreset]);
@@ -805,7 +805,7 @@ export function useHonchoEditor(controller) {
         if (!presetToRename || !newPresetName)
             return;
         try {
-            await controller.renamePreset(presetToRename.id, newPresetName);
+            await controller.renamePreset(firebaseUid, presetToRename.id, newPresetName);
             // On success, update the preset in local state
             setPresets(prev => prev.map(p => p.id === presetToRename.id ? { ...p, name: newPresetName } : p));
         }
@@ -999,6 +999,8 @@ export function useHonchoEditor(controller) {
         };
     }, []);
     return {
+        handlePrev,
+        handleNext,
         // Refs
         canvasRef,
         canvasContainerRef,
@@ -1012,8 +1014,6 @@ export function useHonchoEditor(controller) {
         createPreset: controller.createPreset,
         deletePreset: controller.deletePreset,
         renamePreset: controller.renamePreset,
-        handleNext: controller.handleNext,
-        handlePrev: controller.handlePrev,
         // Refs for mobile panel
         panelRef,
         contentRef,

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { useHonchoEditor } from './hooks/editor/useHonchoEditor';
 export type { Controller, AdjustmentState, Preset, ImageItem, } from './hooks/editor/useHonchoEditor';
+export type { Gallery, Content } from './hooks/editor/type';
 export { default as HHeaderEditor } from './components/editor/HHeaderEditor';
 export { default as HFooter } from './components/editor/HFooter';
 export { default as HAccordionColorAdjustment } from './components/editor/HAccordionColorAdjustment';

package/package.json

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