@yogiswara/honcho-editor-ui 1.4.23 → 1.4.25

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

@@ -40,6 +40,8 @@ export declare function useHonchoEditor(controller: Controller, initImageId: str
     canvasRef: import("react").MutableRefObject<HTMLCanvasElement | null>;
     canvasContainerRef: import("react").MutableRefObject<HTMLDivElement | null>;
     fileInputRef: import("react").MutableRefObject<HTMLInputElement | null>;
+    handleShowOriginal: () => void;
+    handleShowEdited: () => void;
     editorStatus: string;
     isEditorReady: boolean;
     isImageLoaded: boolean;

package/dist/hooks/editor/useHonchoEditor.js

@@ -91,17 +91,6 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
     const initialHeight = useRef(0);
     const panelRef = useRef(null);
     const contentRef = useRef(null);
-    // Effect for measuring mobile panel content
-    // useEffect(() => {
-    //     const timeoutId = setTimeout(() => {
-    //         if (contentRef.current) {
-    //             const height = contentRef.current.scrollHeight;
-    //             setContentHeight(height);
-    //         }
-    //     }, 50);
-    //     return () => clearTimeout(timeoutId);
-    // }, [activeSubPanel ]);
-    // isBulkEditing
     // Effect for keyboard shortcuts
     // MARK: - Core Editor Logic
     // MARK: Batch Edit logic
@@ -227,27 +216,6 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
     //     });
     // };
     // const handleSelectBulkPreset = (event: SelectChangeEvent<string>) => setSelectedBulkPreset(event.target.value as string);
-    // MARK : Image original and canvas
-    // const handleShowOriginal = useCallback(() => {
-    //     if (!editorRef.current || !isImageLoaded) return;
-    //     console.log("Showing original image...");
-    //     // 1. Set the flag to true to pause history recording
-    //     setIsViewingOriginal(true);
-    //     // 2. Apply the initial state to the view
-    //     // applyAdjustmentState(initialAdjustments);
-    // }, [isImageLoaded]);
-    // const handleShowEdited = useCallback(() => {
-    //     if (!editorRef.current || !isImageLoaded) return;
-    //     console.log("Restoring edited image...");
-    //     const latestState = history[historyIndex];
-    //     if (latestState) {
-    //         // 3. Re-apply the latest state from history
-    //         // applyAdjustmentState(latestState);
-    //     }
-    //     // 4. Set the flag back to false AFTER the state has been restored.
-    //     // A small timeout ensures this runs after the re-render.
-    //     setTimeout(() => setIsViewingOriginal(false), 0);
-    // }, [isImageLoaded, history, historyIndex]);
     // Mobile Panel Drag Handlers
     const handleContentHeightChange = useCallback((height) => {
         if (height > 0 && height !== contentHeight)
@@ -368,6 +336,21 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
     const handlePresetAccordionChange = (panel) => (_, isExpanded) => {
         setPresetExpandedPanels(prev => isExpanded ? [...new Set([...prev, panel])] : prev.filter(p => p !== panel));
     };
+    const handleShowOriginal = useCallback(() => {
+        if (!editorRef.current || !isImageLoaded || !canvasRef.current)
+            return;
+        console.log("Showing original image...");
+        editorRef.current.setAdjustments(mapAdjustmentStateToAdjustmentEditor(initialAdjustments));
+        editorRef.current.processImage();
+        editorRef.current.renderToCanvas(canvasRef.current);
+    }, [isImageLoaded, editorRef, canvasRef]);
+    const handleShowEdited = useCallback(() => {
+        if (!editorRef.current || !isImageLoaded || !canvasRef.current)
+            return;
+        editorRef.current.setAdjustments(mapAdjustmentStateToAdjustmentEditor(currentAdjustmentsState));
+        editorRef.current.processImage();
+        editorRef.current.renderToCanvas(canvasRef.current);
+    }, [isImageLoaded, editorRef, canvasRef, currentAdjustmentsState]);
     // MARK: - Preset Handlers
     // Also it calls for the backend endpoint
     const handleSelectMobilePreset = (presetId) => setSelectedMobilePreset(presetId);
@@ -602,6 +585,15 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
     const handleCloseCopyDialog = () => setCopyDialogOpen(false);
     const handleConfirmCopy = () => { handleCopyEdit(); handleCloseCopyDialog(); setShowCopyAlert(true); };
     // MARK: useEffect HERE!
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            if (contentRef.current) {
+                const height = contentRef.current.scrollHeight;
+                setContentHeight(height);
+            }
+        }, 50);
+        return () => clearTimeout(timeoutId);
+    }, [activePanel, activeSubPanel]);
     useEffect(() => {
         if (showCopyAlert) {
             const timer = setTimeout(() => setShowCopyAlert(false), 2000);
@@ -716,6 +708,8 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
         canvasRef,
         canvasContainerRef,
         fileInputRef,
+        handleShowOriginal,
+        handleShowEdited,
         // Status & State
         editorStatus,
         isEditorReady,

package/package.json

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