@yogiswara/honcho-editor-ui 3.5.8 → 3.6.1

package/dist/components/editor/HSliderDetailsMobile.js

@@ -4,19 +4,21 @@ import { Stack, Slider, Typography, Box } from "@mui/material";
 import useHonchoTypography from "../../themes/honchoTheme";
 import useColors from '../../themes/colors';
 import useSliderEvents from "../editor/sliderComponents/useSliderEvents";
-const formatValue = (value) => {
+const formatValue = (value, isZeroBased = false) => {
+    if (isZeroBased)
+        return value.toString();
     if (value > 0)
         return `+${value}`;
     if (value < 0)
         return value.toString();
     return "0";
 };
-function useAdjustmentField(propValue, setValue, onDragStart, onDragEnd, isBatchMode) {
-    const [local, setLocal] = useState(formatValue(propValue));
+function useAdjustmentField(propValue, setValue, onDragStart, onDragEnd, isBatchMode, isZeroBased = false) {
+    const [local, setLocal] = useState(formatValue(propValue, isZeroBased));
     const [started, setStarted] = useState(false);
     // keep sync with external changes
     useEffect(() => {
-        setLocal(formatValue(propValue));
+        setLocal(formatValue(propValue, isZeroBased));
     }, [propValue]);
     const handleChange = (e, min, max) => {
         const raw = e.target.value;
@@ -56,7 +58,7 @@ function useAdjustmentField(propValue, setValue, onDragStart, onDragEnd, isBatch
             if (isNaN(num))
                 num = 0;
             num = Math.max(min, Math.min(max, num));
-            setLocal(formatValue(num));
+            setLocal(formatValue(num, isZeroBased));
             setValue(num);
         }
         // end batch when user leaves field
@@ -82,7 +84,7 @@ export default function HSliderDetailsMobile(props) {
     const clarityRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
     const sharpnessRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
     const clarityInput = useAdjustmentField(props.clarityScore, (val) => props.onClarityChange("clarityScore", val), props.onDragStart, props.onDragEnd, props.isBatchMode);
-    const sharpnessInput = useAdjustmentField(props.sharpnessScore, (val) => props.onSharpnessChange("sharpnessScore", val), props.onDragStart, props.onDragEnd, props.isBatchMode);
+    const sharpnessInput = useAdjustmentField(props.sharpnessScore, (val) => props.onSharpnessChange("sharpnessScore", val), props.onDragStart, props.onDragEnd, props.isBatchMode, true);
     return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1, m: "0px", userSelect: 'none' }, onTouchStart: (e) => e.stopPropagation(), children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface, userSelect: 'none' }, onDoubleClick: clarityInput.handleDoubleClick, children: "Clarity" }), _jsx(Typography, { sx: {
                                 ...typography.bodyMedium, // Use your standard typography
                                 color: colors.surface,
@@ -171,5 +173,5 @@ export default function HSliderDetailsMobile(props) {
                                     ref: sharpnessRef,
                                     onDoubleClick: sharpnessInput.handleDoubleClick
                                 }
-                            }, size: "small", value: props.sharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange("sharpnessScore", newValue) })] })] }) }));
+                            }, size: "small", value: props.sharpnessScore, step: 1, min: 0, max: 100, onChange: (_event, newValue) => props.onSharpnessChange("sharpnessScore", newValue) })] })] }) }));
 }

package/dist/hooks/editor/useHonchoEditorSingle.js

@@ -41,12 +41,21 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
         }
     }, [gallerySwipe.isPrevAvailable, gallerySwipe.onSwipePrev]);
     const updateAdjustment = useCallback((field, value) => {
+        // Apply specific clamping for sharpness (0-100), others use -100 to 100
+        let clampedValue = value;
+        if (field === 'sharpnessScore') {
+            clampedValue = Math.max(0, Math.min(100, value));
+        }
+        else if (field !== 'preset_id') {
+            clampedValue = Math.max(-100, Math.min(100, value));
+        }
         const newState = {
             ...adjustmentHistory.currentState,
-            [field]: value
+            [field]: clampedValue,
+            preset_id: undefined, // Clear preset_id when making manual adjustments
         };
         adjustmentHistory.actions.pushState(newState);
-    }, [adjustmentHistory.currentState, adjustmentHistory.actions.pushState, adjustmentHistory.historyInfo.isBatchMode]);
+    }, [adjustmentHistory.currentState, adjustmentHistory.actions.pushState]);
     const setBatchMode = useCallback((enabled) => {
         adjustmentHistory.config.setBatchMode(enabled);
     }, [adjustmentHistory.config.setBatchMode]);

package/dist/hooks/useAdjustmentHistory.js

@@ -34,7 +34,7 @@ const convertColorAdjustmentToAdjustmentState = (colorAdjustment) => {
         whitesScore: colorAdjustment.whites,
         blacksScore: colorAdjustment.blacks,
         clarityScore: colorAdjustment.clarity,
-        sharpnessScore: colorAdjustment.sharpness,
+        sharpnessScore: Math.max(0, Math.min(100, colorAdjustment.sharpness)),
     };
 };
 /**
@@ -188,22 +188,24 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
     }, [history.length, trimHistoryToSize]);
     // Push new state to history
     const pushState = useCallback((newState) => {
+        // Clamp sharpness to 0-100 before storing
+        const clampedState = {
+            ...newState,
+            sharpnessScore: Math.max(0, Math.min(100, newState.sharpnessScore || 0))
+        };
         // Always update currentState immediately for smooth UI
-        currentStateRef.current = newState;
-        setCurrentState(newState);
+        currentStateRef.current = clampedState;
+        setCurrentState(clampedState);
         if (batchModeRef.current) {
             // In batch mode: Don't update history yet, just update UI state
-            // History will be updated when batch mode ends
-            console.log(`[useAdjustmentHistory] Pushing state in batch mode:`, newState);
+            console.debug({ newState: clampedState }, '[useAdjustmentHistory] Pushing state in batch mode');
             return;
         }
         // Normal mode: Update history immediately
-        console.log(`[useAdjustmentHistory] Pushing new state to history:`, newState);
+        console.debug({ newState: clampedState }, '[useAdjustmentHistory] Pushing new state to history');
         setHistory(prevHistory => {
             const truncatedHistory = prevHistory.slice(0, currentIndexRef.current + 1);
-            // const taskId = `task_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-            // we put the taskId empty to check this state no need to save it
-            const newHistory = [...truncatedHistory, { state: newState, taskId: "" }];
+            const newHistory = [...truncatedHistory, { state: clampedState, taskId: "" }];
             currentIndexRef.current = newHistory.length - 1;
             return newHistory;
         });

package/dist/hooks/useAdjustmentHistoryBatch.js

@@ -238,7 +238,11 @@ export function useAdjustmentHistoryBatch(controller, firebaseUid, eventId, opti
                 const deltaValue = delta[key];
                 if (typeof deltaValue === 'number' && key !== 'preset_id') {
                     const currentValue = newAdjustment[key];
-                    newAdjustment[key] = Math.max(-100, Math.min(100, currentValue + deltaValue));
+                    const newValue = currentValue + deltaValue;
+                    // Sharpness has a range of 0-100, all others are -100 to 100
+                    newAdjustment[key] = key === 'sharpnessScore'
+                        ? Math.max(0, Math.min(100, newValue))
+                        : Math.max(-100, Math.min(100, newValue));
                 }
             });
             // Check if user is in the middle of history (not at latest state)
@@ -508,7 +512,10 @@ export function useAdjustmentHistoryBatch(controller, firebaseUid, eventId, opti
         Object.keys(clampedPreset).forEach(key => {
             const presetValue = clampedPreset[key];
             if (typeof presetValue === 'number' && key !== 'preset_id') {
-                clampedPreset[key] = Math.max(-100, Math.min(100, presetValue));
+                // Sharpness has a range of 0-100, all others are -100 to 100
+                clampedPreset[key] = key === 'sharpnessScore'
+                    ? Math.max(0, Math.min(100, presetValue))
+                    : Math.max(-100, Math.min(100, presetValue));
             }
         });
         // Include the preset_id in the adjustment state
@@ -555,7 +562,10 @@ export function useAdjustmentHistoryBatch(controller, firebaseUid, eventId, opti
                 const pasteValue = adjustments[key];
                 if (typeof pasteValue === 'number' && key !== 'preset_id') {
                     // Apply clamping to the pasted value
-                    newAdjustment[key] = Math.max(-100, Math.min(100, pasteValue));
+                    // Sharpness has a range of 0-100, all others are -100 to 100
+                    newAdjustment[key] = key === 'sharpnessScore'
+                        ? Math.max(0, Math.min(100, pasteValue))
+                        : Math.max(-100, Math.min(100, pasteValue));
                 }
                 else if (key === 'preset_id' && typeof pasteValue === 'string') {
                     newAdjustment[key] = pasteValue;

package/package.json

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