@yogiswara/honcho-editor-ui 3.1.0 → 3.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/components/editor/HSliderColorMobile.js +40 -101
  2. package/dist/components/editor/HSliderLightMobile.js +30 -6
  3. package/package.json +1 -1
package/dist/components/editor/HSliderColorMobile.js CHANGED
@@ -4,6 +4,22 @@ import { Stack, Slider, Typography } from "@mui/material";
4
4
  import useHonchoTypography from "../../themes/honchoTheme";
5
5
  import useColors from '../../themes/colors';
6
6
  import useSliderEvents from "../editor/sliderComponents/useSliderEvents";
7
+ function ThumbOnlySlider({ sx, slotProps, size, value, step, min, max, onChange, onDoubleClick, }) {
8
+ const handleInteractionStart = (event) => {
9
+ // Check if the element that was clicked is the thumb or is inside the thumb.
10
+ const isThumb = event.target.closest('.MuiSlider-thumb');
11
+ // If the click was NOT on the thumb, isThumb will be null.
12
+ if (!isThumb) {
13
+ // These two lines stop the event dead in its tracks.
14
+ // The Slider's internal logic will never know this click happened.
15
+ event.preventDefault();
16
+ event.stopPropagation();
17
+ }
18
+ };
19
+ return (
20
+ // This wrapper div catches the event before the Slider can.
21
+ _jsx("div", { onMouseDown: handleInteractionStart, onTouchStart: handleInteractionStart, children: _jsx(Slider, { sx: sx, slotProps: slotProps, size: size, value: value, step: step, min: min, max: max, onChange: onChange, onDoubleClick: onDoubleClick }) }));
22
+ }
7
23
  const formatValue = (value) => {
8
24
  if (value > 0)
9
25
  return `+${value}`;
@@ -79,15 +95,6 @@ function useAdjustmentField(propValue, setValue, onDragStart, onDragEnd, isBatch
79
95
  export default function HSliderColorMobile(props) {
80
96
  const typography = useHonchoTypography();
81
97
  const colors = useColors();
82
- console.log(`[HSliderColorMobile TEMPERATURE] Received tempScore prop: ${props.tempScore}`);
83
- const handleDragStartWithLog = () => {
84
- console.log('[HSliderColorMobile TEMPERATURE] SLIDER onDragStart triggered.');
85
- props.onDragStart();
86
- };
87
- const handleDragEndWithLog = () => {
88
- console.log('[HSliderColorMobile TEMPERATURE] SLIDER onDragEnd triggered.');
89
- props.onDragEnd();
90
- };
91
98
  const tempSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
92
99
  const tintSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
93
100
  const vibranceSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
@@ -123,108 +130,40 @@ export default function HSliderColorMobile(props) {
123
130
  color: colors.surface,
124
131
  width: "40px", // Keep the fixed width for alignment
125
132
  textAlign: "right", // Keep the text alignment
126
- }, children: formatValue(props.tempScore) })] }), _jsx(Slider, { sx: {
127
- width: "100%",
128
- color: colors.surface,
129
- '& .MuiSlider-rail': {
130
- background: tempGradient,
131
- opacity: 1,
132
- pointerEvents: 'none', // Make the rail non-interactive
133
- },
134
- '& .MuiSlider-track': {
135
- background: 'transparent',
136
- border: 'none',
137
- pointerEvents: 'none', // Make the track non-interactive
138
- },
139
- '& .MuiSlider-thumb': {
140
- boxShadow: 'none',
141
- pointerEvents: 'auto', // IMPORTANT: Re-enable interaction ONLY for the thumb
142
- touchAction: 'none',
143
- }
144
- }, slotProps: {
145
- thumb: {
146
- ref: tempSliderRef
147
- }
148
- }, size: "small", value: props.tempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setTempScore("tempScore", newValue), onDoubleClick: tempInput.handleDoubleClick }), _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: tintInput.handleDoubleClick, children: "Tint" }), _jsx(Typography, { sx: {
133
+ }, children: formatValue(props.tempScore) })] }), _jsx(ThumbOnlySlider, { sx: {
134
+ width: "100%", color: colors.surface,
135
+ '& .MuiSlider-rail': { background: tempGradient, opacity: 1 },
136
+ '& .MuiSlider-track': { background: 'transparent', border: 'none' },
137
+ '& .MuiSlider-thumb': { boxShadow: 'none', touchAction: 'none' }
138
+ }, slotProps: { thumb: { ref: tempSliderRef } }, size: "small", value: props.tempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setTempScore("tempScore", newValue), onDoubleClick: tempInput.handleDoubleClick }), _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: tintInput.handleDoubleClick, children: "Tint" }), _jsx(Typography, { sx: {
149
139
  ...typography.bodyMedium, // Use your standard typography
150
140
  color: colors.surface,
151
141
  width: "40px", // Keep the fixed width for alignment
152
142
  textAlign: "right", // Keep the text alignment
153
- }, children: formatValue(props.tintScore) })] }), _jsx(Slider, { sx: {
154
- width: "100%",
155
- color: colors.surface,
156
- '& .MuiSlider-rail': {
157
- background: tintGradient,
158
- opacity: 1,
159
- pointerEvents: 'none',
160
- },
161
- '& .MuiSlider-track': {
162
- background: 'transparent',
163
- border: 'none',
164
- pointerEvents: 'none',
165
- },
166
- '& .MuiSlider-thumb': {
167
- boxShadow: 'none',
168
- pointerEvents: 'auto',
169
- touchAction: 'none',
170
- }
171
- }, slotProps: {
172
- thumb: {
173
- ref: tintSliderRef
174
- }
175
- }, size: "small", value: props.tintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setTintScore("tintScore", newValue), onDoubleClick: tintInput.handleDoubleClick }), _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: vibranceInput.handleDoubleClick, children: "Vibrance" }), _jsx(Typography, { sx: {
143
+ }, children: formatValue(props.tintScore) })] }), _jsx(ThumbOnlySlider, { sx: {
144
+ width: "100%", color: colors.surface,
145
+ '& .MuiSlider-rail': { background: tintGradient, opacity: 1 },
146
+ '& .MuiSlider-track': { background: 'transparent', border: 'none' },
147
+ '& .MuiSlider-thumb': { boxShadow: 'none', touchAction: 'none' }
148
+ }, slotProps: { thumb: { ref: tintSliderRef } }, size: "small", value: props.tintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setTintScore("tintScore", newValue), onDoubleClick: tintInput.handleDoubleClick }), _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: vibranceInput.handleDoubleClick, children: "Vibrance" }), _jsx(Typography, { sx: {
176
149
  ...typography.bodyMedium, // Use your standard typography
177
150
  color: colors.surface,
178
151
  width: "40px", // Keep the fixed width for alignment
179
152
  textAlign: "right", // Keep the text alignment
180
- }, children: formatValue(props.vibranceScore) })] }), _jsx(Slider, { sx: {
181
- width: "100%",
182
- color: colors.surface,
183
- '& .MuiSlider-rail': {
184
- background: fullTrackGradient,
185
- opacity: 1,
186
- pointerEvents: 'none',
187
- },
188
- '& .MuiSlider-track': {
189
- background: 'transparent',
190
- border: 'none',
191
- pointerEvents: 'none',
192
- },
193
- '& .MuiSlider-thumb': {
194
- boxShadow: 'none',
195
- pointerEvents: 'auto',
196
- touchAction: 'none',
197
- }
198
- }, slotProps: {
199
- thumb: {
200
- ref: vibranceSliderRef
201
- }
202
- }, size: "small", value: props.vibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setVibranceScore("vibranceScore", newValue), onDoubleClick: vibranceInput.handleDoubleClick }), _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: saturationInput.handleDoubleClick, children: "Saturation" }), _jsx(Typography, { sx: {
153
+ }, children: formatValue(props.vibranceScore) })] }), _jsx(ThumbOnlySlider, { sx: {
154
+ width: "100%", color: colors.surface,
155
+ '& .MuiSlider-rail': { background: fullTrackGradient, opacity: 1 },
156
+ '& .MuiSlider-track': { background: 'transparent', border: 'none' },
157
+ '& .MuiSlider-thumb': { boxShadow: 'none', touchAction: 'none' }
158
+ }, slotProps: { thumb: { ref: vibranceSliderRef } }, size: "small", value: props.vibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setVibranceScore("vibranceScore", newValue), onDoubleClick: vibranceInput.handleDoubleClick }), _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: saturationInput.handleDoubleClick, children: "Saturation" }), _jsx(Typography, { sx: {
203
159
  ...typography.bodyMedium, // Use your standard typography
204
160
  color: colors.surface,
205
161
  width: "40px", // Keep the fixed width for alignment
206
162
  textAlign: "right", // Keep the text alignment
207
- }, children: formatValue(props.saturationScore) })] }), _jsx(Slider, { sx: {
208
- width: "100%",
209
- color: colors.surface,
210
- '& .MuiSlider-rail': {
211
- background: fullTrackGradient,
212
- opacity: 1,
213
- pointerEvents: 'none',
214
- },
215
- '& .MuiSlider-track': {
216
- background: 'transparent',
217
- border: 'none',
218
- pointerEvents: 'none',
219
- },
220
- '& .MuiSlider-thumb': {
221
- boxShadow: 'none',
222
- pointerEvents: 'auto',
223
- touchAction: 'none',
224
- }
225
- }, slotProps: {
226
- thumb: {
227
- ref: saturationSliderRef
228
- }
229
- }, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setSaturationScore("saturationScore", newValue), onDoubleClick: saturationInput.handleDoubleClick })] }) }));
163
+ }, children: formatValue(props.saturationScore) })] }), _jsx(ThumbOnlySlider, { sx: {
164
+ width: "100%", color: colors.surface,
165
+ '& .MuiSlider-rail': { background: fullTrackGradient, opacity: 1 },
166
+ '& .MuiSlider-track': { background: 'transparent', border: 'none' },
167
+ '& .MuiSlider-thumb': { boxShadow: 'none', touchAction: 'none' }
168
+ }, slotProps: { thumb: { ref: saturationSliderRef } }, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setSaturationScore("saturationScore", newValue), onDoubleClick: saturationInput.handleDoubleClick })] }) }));
230
169
  }
package/dist/components/editor/HSliderLightMobile.js CHANGED
@@ -32,7 +32,7 @@ export default function HSliderLightMobile(props) {
32
32
  color: colors.surface,
33
33
  width: "40px", // Keep the fixed width for alignment
34
34
  textAlign: "right", // Keep the text alignment
35
- }, children: formatValue(props.exposureScore) })] }), _jsx(Slider, { ref: exposureSliderRef, sx: {
35
+ }, children: formatValue(props.exposureScore) })] }), _jsx(Slider, { sx: {
36
36
  width: "100%",
37
37
  color: colors.onSurfaceVariant,
38
38
  '& .MuiSlider-rail': {
@@ -50,12 +50,16 @@ export default function HSliderLightMobile(props) {
50
50
  boxShadow: 'none',
51
51
  pointerEvents: 'auto',
52
52
  }
53
+ }, slotProps: {
54
+ thumb: {
55
+ ref: exposureSliderRef
56
+ }
53
57
  }, 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(Typography, { sx: {
54
58
  ...typography.bodyMedium, // Use your standard typography
55
59
  color: colors.surface,
56
60
  width: "40px", // Keep the fixed width for alignment
57
61
  textAlign: "right", // Keep the text alignment
58
- }, children: formatValue(props.contrastScore) })] }), _jsx(Slider, { ref: contrastSliderRef, sx: {
62
+ }, children: formatValue(props.contrastScore) })] }), _jsx(Slider, { sx: {
59
63
  width: "100%",
60
64
  color: colors.onSurfaceVariant,
61
65
  '& .MuiSlider-rail': {
@@ -73,12 +77,16 @@ export default function HSliderLightMobile(props) {
73
77
  boxShadow: 'none',
74
78
  pointerEvents: 'auto',
75
79
  }
80
+ }, slotProps: {
81
+ thumb: {
82
+ ref: contrastSliderRef
83
+ }
76
84
  }, 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(Typography, { sx: {
77
85
  ...typography.bodyMedium, // Use your standard typography
78
86
  color: colors.surface,
79
87
  width: "40px", // Keep the fixed width for alignment
80
88
  textAlign: "right", // Keep the text alignment
81
- }, children: formatValue(props.highlightsScore) })] }), _jsx(Slider, { ref: highlightsSliderRef, sx: {
89
+ }, children: formatValue(props.highlightsScore) })] }), _jsx(Slider, { sx: {
82
90
  width: "100%",
83
91
  color: colors.onSurfaceVariant,
84
92
  '& .MuiSlider-rail': {
@@ -96,12 +104,16 @@ export default function HSliderLightMobile(props) {
96
104
  boxShadow: 'none',
97
105
  pointerEvents: 'auto',
98
106
  }
107
+ }, slotProps: {
108
+ thumb: {
109
+ ref: highlightsSliderRef
110
+ }
99
111
  }, 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(Typography, { sx: {
100
112
  ...typography.bodyMedium, // Use your standard typography
101
113
  color: colors.surface,
102
114
  width: "40px", // Keep the fixed width for alignment
103
115
  textAlign: "right", // Keep the text alignment
104
- }, children: formatValue(props.shadowScore) })] }), _jsx(Slider, { ref: shadowsSliderRef, sx: {
116
+ }, children: formatValue(props.shadowScore) })] }), _jsx(Slider, { sx: {
105
117
  width: "100%",
106
118
  color: colors.onSurfaceVariant,
107
119
  '& .MuiSlider-rail': {
@@ -119,12 +131,16 @@ export default function HSliderLightMobile(props) {
119
131
  boxShadow: 'none',
120
132
  pointerEvents: 'auto',
121
133
  }
134
+ }, slotProps: {
135
+ thumb: {
136
+ ref: shadowsSliderRef
137
+ }
122
138
  }, 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(Typography, { sx: {
123
139
  ...typography.bodyMedium, // Use your standard typography
124
140
  color: colors.surface,
125
141
  width: "40px", // Keep the fixed width for alignment
126
142
  textAlign: "right", // Keep the text alignment
127
- }, children: formatValue(props.whiteScore) })] }), _jsx(Slider, { ref: whitesSliderRef, sx: {
143
+ }, children: formatValue(props.whiteScore) })] }), _jsx(Slider, { sx: {
128
144
  width: "100%",
129
145
  color: colors.onSurfaceVariant,
130
146
  '& .MuiSlider-rail': {
@@ -142,12 +158,16 @@ export default function HSliderLightMobile(props) {
142
158
  boxShadow: 'none',
143
159
  pointerEvents: 'auto',
144
160
  }
161
+ }, slotProps: {
162
+ thumb: {
163
+ ref: whitesSliderRef
164
+ }
145
165
  }, 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(Typography, { sx: {
146
166
  ...typography.bodyMedium, // Use your standard typography
147
167
  color: colors.surface,
148
168
  width: "40px", // Keep the fixed width for alignment
149
169
  textAlign: "right", // Keep the text alignment
150
- }, children: formatValue(props.blackScore) })] }), _jsx(Slider, { ref: blacksSliderRef, sx: {
170
+ }, children: formatValue(props.blackScore) })] }), _jsx(Slider, { sx: {
151
171
  width: "100%",
152
172
  color: colors.onSurfaceVariant,
153
173
  '& .MuiSlider-rail': {
@@ -165,5 +185,9 @@ export default function HSliderLightMobile(props) {
165
185
  boxShadow: 'none',
166
186
  pointerEvents: 'auto',
167
187
  }
188
+ }, slotProps: {
189
+ thumb: {
190
+ ref: blacksSliderRef
191
+ }
168
192
  }, size: "small", value: props.blackScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange("blacksScore", newValue), onDoubleClick: () => props.onBlacksChange("blacksScore", 0) })] }) }));
169
193
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yogiswara/honcho-editor-ui",
3
- "version": "3.1.0",
3
+ "version": "3.1.2",
4
4
  "description": "A complete UI component library for the Honcho photo editor.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",