@yogiswara/honcho-editor-ui 2.10.0 → 2.10.2

package/dist/components/editor/HSliderColorMobile.js

@@ -2,9 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Stack, Slider, Typography, TextField } from "@mui/material";
 import useHonchoTypography from "../../themes/honchoTheme";
 import useColors from '../../themes/colors';
+import useSliderEvents from "../editor/sliderComponents/useSliderEvents";
 export default function HSliderColorMobile(props) {
     const typography = useHonchoTypography();
     const colors = useColors();
+    const tempSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
+    const tintSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
+    const vibranceSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
+    const saturationSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
     const blueScale = '#292bc0'; // Blue color on left
     const yellowScale = '#dfdc28'; // Yellow color on right
     const greenScale = '#00ff04';
@@ -72,7 +77,7 @@ export default function HSliderColorMobile(props) {
                                     color: colors.surface,
                                     fontSize: "14px",
                                 },
-                            } })] }), _jsx(Slider, { sx: {
+                            } })] }), _jsx(Slider, { ref: tempSliderRef, sx: {
                         width: "100%",
                         color: colors.surface,
                         '& .MuiSlider-rail': {
@@ -86,19 +91,7 @@ export default function HSliderColorMobile(props) {
                         '& .MuiSlider-thumb': {
                             boxShadow: 'none',
                         }
-                    }, size: "small", value: props.tempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTempChange("tempScore", newValue), onDoubleClick: () => props.onTempChange("tempScore", 0), onMouseDown: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onMouseUp: () => {
-                        props.onDragEnd();
-                    }, onTouchStart: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onTouchEnd: () => {
-                        props.onDragEnd();
-                    } }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onTintChange("tintScore", 0), children: "Tint" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.tintScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTintChange("tintScore", val)), sx: {
+                    }, size: "small", value: props.tempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTempChange("tempScore", newValue), onDoubleClick: () => props.onTempChange("tempScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onTintChange("tintScore", 0), children: "Tint" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.tintScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTintChange("tintScore", val)), sx: {
                                 width: "40px",
                                 alignItems: "center",
                                 textAlign: "right",
@@ -128,7 +121,7 @@ export default function HSliderColorMobile(props) {
                                     color: colors.surface,
                                     fontSize: "14px",
                                 },
-                            } })] }), _jsx(Slider, { sx: {
+                            } })] }), _jsx(Slider, { ref: tintSliderRef, sx: {
                         width: "100%",
                         color: colors.surface,
                         '& .MuiSlider-rail': {
@@ -142,19 +135,7 @@ export default function HSliderColorMobile(props) {
                         '& .MuiSlider-thumb': {
                             boxShadow: 'none',
                         }
-                    }, size: "small", value: props.tintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange("tintScore", newValue), onDoubleClick: () => props.onTintChange("tintScore", 0), onMouseDown: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onMouseUp: () => {
-                        props.onDragEnd();
-                    }, onTouchStart: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onTouchEnd: () => {
-                        props.onDragEnd();
-                    } }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onVibranceChange("vibranceScore", 0), children: "Vibrance" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.vibranceScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onVibranceChange("vibranceScore", val)), sx: {
+                    }, size: "small", value: props.tintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange("tintScore", newValue), onDoubleClick: () => props.onTintChange("tintScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onVibranceChange("vibranceScore", 0), children: "Vibrance" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.vibranceScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onVibranceChange("vibranceScore", val)), sx: {
                                 width: "40px",
                                 alignItems: "center",
                                 textAlign: "right",
@@ -184,7 +165,7 @@ export default function HSliderColorMobile(props) {
                                     color: colors.surface,
                                     fontSize: "14px",
                                 },
-                            } })] }), _jsx(Slider, { sx: {
+                            } })] }), _jsx(Slider, { ref: vibranceSliderRef, sx: {
                         width: "100%",
                         color: colors.surface,
                         '& .MuiSlider-rail': {
@@ -198,19 +179,7 @@ export default function HSliderColorMobile(props) {
                         '& .MuiSlider-thumb': {
                             boxShadow: 'none',
                         }
-                    }, size: "small", value: props.vibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange("vibranceScore", newValue), onDoubleClick: () => props.onVibranceChange("vibranceScore", 0), onMouseDown: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onMouseUp: () => {
-                        props.onDragEnd();
-                    }, onTouchStart: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onTouchEnd: () => {
-                        props.onDragEnd();
-                    } }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onSaturationChange("saturationScore", 0), children: "Saturation" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.saturationScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSaturationChange("saturationScore", val)), sx: {
+                    }, size: "small", value: props.vibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange("vibranceScore", newValue), onDoubleClick: () => props.onVibranceChange("vibranceScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onSaturationChange("saturationScore", 0), children: "Saturation" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.saturationScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSaturationChange("saturationScore", val)), sx: {
                                 width: "40px",
                                 alignItems: "center",
                                 textAlign: "right",
@@ -240,7 +209,7 @@ export default function HSliderColorMobile(props) {
                                     color: colors.surface,
                                     fontSize: "14px",
                                 },
-                            } })] }), _jsx(Slider, { sx: {
+                            } })] }), _jsx(Slider, { ref: saturationSliderRef, sx: {
                         width: "100%",
                         color: colors.surface,
                         '& .MuiSlider-rail': {
@@ -254,17 +223,5 @@ export default function HSliderColorMobile(props) {
                         '& .MuiSlider-thumb': {
                             boxShadow: 'none',
                         }
-                    }, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange("saturationScore", newValue), onDoubleClick: () => props.onSaturationChange("saturationScore", 0), onMouseDown: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onMouseUp: () => {
-                        props.onDragEnd();
-                    }, onTouchStart: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onTouchEnd: () => {
-                        props.onDragEnd();
-                    } })] }) }));
+                    }, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange("saturationScore", newValue), onDoubleClick: () => props.onSaturationChange("saturationScore", 0) })] }) }));
 }

package/dist/components/editor/HSliderLightMobile.js

@@ -2,9 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Stack, Slider, Typography, TextField } from "@mui/material";
 import useHonchoTypography from "../../themes/honchoTheme";
 import useColors from '../../themes/colors';
+import useSliderEvents from "../editor/sliderComponents/useSliderEvents";
 export default function HSliderLightMobile(props) {
     const typography = useHonchoTypography();
     const colors = useColors();
+    const exposureSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
+    const contrastSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
+    const highlightsSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
+    const shadowsSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
+    const whitesSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
+    const blacksSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
     const formatValue = (value) => {
         if (value > 0)
             return `+${value}`;
@@ -59,7 +66,7 @@ export default function HSliderLightMobile(props) {
                                         pl: '2px',
                                     }
                                 }
-                            } })] }), _jsx(Slider, { sx: {
+                            } })] }), _jsx(Slider, { ref: exposureSliderRef, sx: {
                         width: "100%",
                         color: colors.onSurfaceVariant,
                         '& .MuiSlider-rail': {
@@ -74,19 +81,7 @@ export default function HSliderLightMobile(props) {
                         '& .MuiSlider-thumb:hover': {
                             boxShadow: 'none',
                         }
-                    }, size: "small", value: props.exposureScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange("exposureScore", newValue), onDoubleClick: () => props.onExposureChange("exposureScore", 0), onMouseDown: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onMouseUp: () => {
-                        props.onDragEnd();
-                    }, onTouchStart: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onTouchEnd: () => {
-                        props.onDragEnd();
-                    } }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Contrast" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.contrastScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onContrastChange("contrastScore", val)), sx: {
+                    }, size: "small", value: props.exposureScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange("exposureScore", newValue), onDoubleClick: () => props.onExposureChange("exposureScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Contrast" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.contrastScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onContrastChange("contrastScore", val)), sx: {
                                 width: "40px",
                                 alignItems: "center",
                                 textAlign: "right",
@@ -125,7 +120,7 @@ export default function HSliderLightMobile(props) {
                                         pl: '2px',
                                     }
                                 }
-                            } })] }), _jsx(Slider, { sx: {
+                            } })] }), _jsx(Slider, { ref: contrastSliderRef, sx: {
                         width: "100%",
                         color: colors.onSurfaceVariant,
                         '& .MuiSlider-rail': {
@@ -140,19 +135,7 @@ export default function HSliderLightMobile(props) {
                         '& .MuiSlider-thumb:hover': {
                             boxShadow: 'none',
                         }
-                    }, size: "small", value: props.contrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange("contrastScore", newValue), onDoubleClick: () => props.onContrastChange("contrastScore", 0), onMouseDown: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onMouseUp: () => {
-                        props.onDragEnd();
-                    }, onTouchStart: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onTouchEnd: () => {
-                        props.onDragEnd();
-                    } }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0), children: "Highlights" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.highlightsScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onHighlightsChange("highlightsScore", val)), sx: {
+                    }, size: "small", value: props.contrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange("contrastScore", newValue), onDoubleClick: () => props.onContrastChange("contrastScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0), children: "Highlights" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.highlightsScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onHighlightsChange("highlightsScore", val)), sx: {
                                 width: "40px",
                                 alignItems: "center",
                                 textAlign: "right",
@@ -191,7 +174,7 @@ export default function HSliderLightMobile(props) {
                                         pl: '2px',
                                     }
                                 }
-                            } })] }), _jsx(Slider, { sx: {
+                            } })] }), _jsx(Slider, { ref: highlightsSliderRef, sx: {
                         width: "100%",
                         color: colors.onSurfaceVariant,
                         '& .MuiSlider-rail': {
@@ -206,19 +189,7 @@ export default function HSliderLightMobile(props) {
                         '& .MuiSlider-thumb:hover': {
                             boxShadow: 'none',
                         }
-                    }, size: "small", value: props.highlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange("highlightsScore", newValue), onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0), onMouseDown: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onMouseUp: () => {
-                        props.onDragEnd();
-                    }, onTouchStart: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onTouchEnd: () => {
-                        props.onDragEnd();
-                    } }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onShadowsChange("shadowsScore", 0), children: "Shadows" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.shadowScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onShadowsChange("shadowsScore", val)), sx: {
+                    }, size: "small", value: props.highlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange("highlightsScore", newValue), onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onShadowsChange("shadowsScore", 0), children: "Shadows" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.shadowScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onShadowsChange("shadowsScore", val)), sx: {
                                 width: "40px",
                                 alignItems: "center",
                                 textAlign: "right",
@@ -257,7 +228,7 @@ export default function HSliderLightMobile(props) {
                                         pl: '2px',
                                     }
                                 }
-                            } })] }), _jsx(Slider, { sx: {
+                            } })] }), _jsx(Slider, { ref: shadowsSliderRef, sx: {
                         width: "100%",
                         color: colors.onSurfaceVariant,
                         '& .MuiSlider-rail': {
@@ -272,19 +243,7 @@ export default function HSliderLightMobile(props) {
                         '& .MuiSlider-thumb:hover': {
                             boxShadow: 'none',
                         }
-                    }, size: "small", value: props.shadowScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("shadowsScore", newValue), onDoubleClick: () => props.onShadowsChange("shadowsScore", 0), onMouseDown: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onMouseUp: () => {
-                        props.onDragEnd();
-                    }, onTouchStart: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onTouchEnd: () => {
-                        props.onDragEnd();
-                    } }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onWhitesChange("whitesScore", 0), children: "Whites" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.whiteScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onWhitesChange("whitesScore", val)), sx: {
+                    }, size: "small", value: props.shadowScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("shadowsScore", newValue), onDoubleClick: () => props.onShadowsChange("shadowsScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onWhitesChange("whitesScore", 0), children: "Whites" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.whiteScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onWhitesChange("whitesScore", val)), sx: {
                                 width: "40px",
                                 alignItems: "center",
                                 textAlign: "right",
@@ -323,7 +282,7 @@ export default function HSliderLightMobile(props) {
                                         pl: '2px',
                                     }
                                 }
-                            } })] }), _jsx(Slider, { sx: {
+                            } })] }), _jsx(Slider, { ref: whitesSliderRef, sx: {
                         width: "100%",
                         color: colors.onSurfaceVariant,
                         '& .MuiSlider-rail': {
@@ -338,19 +297,7 @@ export default function HSliderLightMobile(props) {
                         '& .MuiSlider-thumb:hover': {
                             boxShadow: 'none',
                         }
-                    }, size: "small", value: props.whiteScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange("whitesScore", newValue), onDoubleClick: () => props.onWhitesChange("whitesScore", 0), onMouseDown: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onMouseUp: () => {
-                        props.onDragEnd();
-                    }, onTouchStart: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onTouchEnd: () => {
-                        props.onDragEnd();
-                    } }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onBlacksChange("blacksScore", 0), children: "Blacks" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.blackScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onBlacksChange("blacksScore", val)), sx: {
+                    }, size: "small", value: props.whiteScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange("whitesScore", newValue), onDoubleClick: () => props.onWhitesChange("whitesScore", 0) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: () => props.onBlacksChange("blacksScore", 0), children: "Blacks" }), _jsx(TextField, { InputProps: { readOnly: true }, hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.blackScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onBlacksChange("blacksScore", val)), sx: {
                                 width: "40px",
                                 alignItems: "center",
                                 textAlign: "right",
@@ -389,7 +336,7 @@ export default function HSliderLightMobile(props) {
                                         pl: '2px',
                                     }
                                 },
-                            } })] }), _jsx(Slider, { sx: {
+                            } })] }), _jsx(Slider, { ref: blacksSliderRef, sx: {
                         width: "100%",
                         color: colors.onSurfaceVariant,
                         '& .MuiSlider-rail': {
@@ -404,17 +351,5 @@ export default function HSliderLightMobile(props) {
                         '& .MuiSlider-thumb:hover': {
                             boxShadow: 'none',
                         }
-                    }, size: "small", value: props.blackScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange("blacksScore", newValue), onDoubleClick: () => props.onBlacksChange("blacksScore", 0), onMouseDown: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onMouseUp: () => {
-                        props.onDragEnd();
-                    }, onTouchStart: () => {
-                        if (!props.isBatchMode) {
-                            props.onDragStart();
-                        }
-                    }, onTouchEnd: () => {
-                        props.onDragEnd();
-                    } })] }) }));
+                    }, size: "small", value: props.blackScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange("blacksScore", newValue), onDoubleClick: () => props.onBlacksChange("blacksScore", 0) })] }) }));
 }

package/dist/components/editor/sliderComponents/useSliderEvents.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function useSliderEvents(onDragStart: () => void, onDragEnd: () => void, isBatchMode: boolean): React.RefObject<HTMLDivElement>;

package/dist/components/editor/sliderComponents/useSliderEvents.js

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from "react";
+export default function useSliderEvents(onDragStart, onDragEnd, isBatchMode) {
+    const sliderRef = useRef(null);
+    useEffect(() => {
+        const sliderElement = sliderRef.current;
+        if (!sliderElement)
+            return;
+        const handleMouseDown = () => {
+            if (!isBatchMode) {
+                onDragStart();
+            }
+        };
+        const handleMouseUp = () => {
+            onDragEnd();
+        };
+        sliderElement.addEventListener("mousedown", handleMouseDown);
+        sliderElement.addEventListener("mouseup", handleMouseUp);
+        sliderElement.addEventListener("touchstart", handleMouseDown);
+        sliderElement.addEventListener("touchend", handleMouseUp);
+        return () => {
+            sliderElement.removeEventListener("mousedown", handleMouseDown);
+            sliderElement.removeEventListener("mouseup", handleMouseUp);
+            sliderElement.removeEventListener("touchstart", handleMouseDown);
+            sliderElement.removeEventListener("touchend", handleMouseUp);
+        };
+    }, [onDragStart, onDragEnd, isBatchMode]);
+    return sliderRef; // Return the ref to be attached to the slider
+}

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/index.d.ts

@@ -1,3 +1,5 @@
+export { HonchoEditorBulkDemo } from './hooks/demo/HonchoEditorBulkDemo';
+export { HonchoEditorSingleCleanDemo } from './hooks/demo/HonchoEditorSingleCleanDemo';
 export { useHonchoEditorSingle } from './hooks/editor/useHonchoEditorSingle';
 export { useHonchoEditorBulk } from './hooks/editor/useHonchoEditorBulk';
 export type { Controller, AdjustmentState, Preset, ImageItem, ColorAdjustment, CreateEditorTaskRequest, EditorHistoryEntry, GetGalleryUpdateTimestampResponse, GetHistoryResponse, } from './hooks/editor/type';
@@ -37,3 +39,4 @@ export { usePaging, type UsePagingReturn, type PagingInfo, type PagingActions, t
 export { default as useColors } from './themes/colors';
 export { default as useHonchoTypography } from './themes/honchoTheme';
 export { default as useIsMobile } from './utils/isMobile';
+export { default as useSliderEvents } from '../src/components/editor/sliderComponents/useSliderEvents';

package/dist/index.js

@@ -1,6 +1,6 @@
 // START: delete later
-// export { HonchoEditorBulkDemo } from './hooks/demo/HonchoEditorBulkDemo';
-// export { HonchoEditorSingleCleanDemo } from './hooks/demo/HonchoEditorSingleCleanDemo';
+export { HonchoEditorBulkDemo } from './hooks/demo/HonchoEditorBulkDemo';
+export { HonchoEditorSingleCleanDemo } from './hooks/demo/HonchoEditorSingleCleanDemo';
 // END
 export { useHonchoEditorSingle } from './hooks/editor/useHonchoEditorSingle';
 export { useHonchoEditorBulk } from './hooks/editor/useHonchoEditorBulk';
@@ -42,3 +42,4 @@ export { usePaging } from './hooks/usePaging';
 export { default as useColors } from './themes/colors';
 export { default as useHonchoTypography } from './themes/honchoTheme';
 export { default as useIsMobile } from './utils/isMobile';
+export { default as useSliderEvents } from '../src/components/editor/sliderComponents/useSliderEvents';

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.2",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/dist/services/base.d.ts

@@ -1,57 +0,0 @@
-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

@@ -1,243 +0,0 @@
-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);
-        });
-    });
-}