@yogiswara/honcho-editor-ui 3.1.15 → 3.1.17

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 +104 -65
  2. package/dist/components/editor/sliderComponents/useSliderEvents.js +10 -3
  3. package/package.json +1 -1
package/dist/components/editor/HSliderColorMobile.js CHANGED
@@ -114,7 +114,7 @@ export default function HSliderColorMobile(props) {
114
114
  color: colors.surface,
115
115
  width: "40px", // Keep the fixed width for alignment
116
116
  textAlign: "right", // Keep the text alignment
117
- }, children: formatValue(props.tempScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%', pt: "10px" }, children: [_jsx("div", { style: {
117
+ }, children: formatValue(props.tempScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
118
118
  position: 'absolute',
119
119
  top: 0,
120
120
  bottom: 0,
@@ -123,7 +123,7 @@ export default function HSliderColorMobile(props) {
123
123
  right: '16px',
124
124
  zIndex: 1,
125
125
  touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
126
- }, onDoubleClick: tempInput.handleDoubleClick }), _jsx(Slider, { sx: {
126
+ } }), _jsx(Slider, { sx: {
127
127
  width: "100%",
128
128
  color: colors.surface,
129
129
  '& .MuiSlider-rail': {
@@ -152,75 +152,114 @@ export default function HSliderColorMobile(props) {
152
152
  color: colors.surface,
153
153
  width: "40px", // Keep the fixed width for alignment
154
154
  textAlign: "right", // Keep the text alignment
155
- }, children: formatValue(props.tintScore) })] }), _jsx(Slider, { sx: {
156
- width: "100%",
157
- color: colors.surface,
158
- '& .MuiSlider-rail': {
159
- background: tintGradient,
160
- opacity: 1,
161
- },
162
- '& .MuiSlider-track': {
163
- background: 'transparent',
164
- border: '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, userSelect: 'none' }, onDoubleClick: vibranceInput.handleDoubleClick, children: "Vibrance" }), _jsx(Typography, { sx: {
155
+ }, children: formatValue(props.tintScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
156
+ position: 'absolute',
157
+ top: 0,
158
+ bottom: 0,
159
+ // Offset by 16px to align with the slider's track inside the component
160
+ left: '16px',
161
+ right: '16px',
162
+ zIndex: 1,
163
+ touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
164
+ } }), _jsx(Slider, { sx: {
165
+ width: "100%",
166
+ color: colors.surface,
167
+ '& .MuiSlider-rail': {
168
+ background: tintGradient,
169
+ opacity: 1,
170
+ pointerEvents: 'none', // Track is not interactive
171
+ },
172
+ '& .MuiSlider-track': {
173
+ background: 'transparent',
174
+ border: 'none',
175
+ pointerEvents: 'none', // Track is not interactive
176
+ },
177
+ '& .MuiSlider-thumb': {
178
+ boxShadow: 'none',
179
+ pointerEvents: 'auto', // Thumb IS interactive
180
+ touchAction: 'none',
181
+ zIndex: 2, // Thumb is on top of the overlay
182
+ }
183
+ }, slotProps: {
184
+ thumb: {
185
+ ref: tintSliderRef,
186
+ onDoubleClick: tintInput.handleDoubleClick
187
+ }
188
+ }, size: "small", value: props.tintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setTintScore("tintScore", newValue) })] }), _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, userSelect: 'none' }, onDoubleClick: vibranceInput.handleDoubleClick, children: "Vibrance" }), _jsx(Typography, { sx: {
176
189
  ...typography.bodyMedium, // Use your standard typography
177
190
  color: colors.surface,
178
191
  width: "40px", // Keep the fixed width for alignment
179
192
  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
- },
187
- '& .MuiSlider-track': {
188
- background: 'transparent',
189
- border: 'none',
190
- },
191
- '& .MuiSlider-thumb': {
192
- boxShadow: 'none',
193
- pointerEvents: 'auto',
194
- touchAction: 'none',
195
- }
196
- }, slotProps: {
197
- thumb: {
198
- ref: vibranceSliderRef
199
- }
200
- }, 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, userSelect: 'none' }, onDoubleClick: saturationInput.handleDoubleClick, children: "Saturation" }), _jsx(Typography, { sx: {
193
+ }, children: formatValue(props.vibranceScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
194
+ position: 'absolute',
195
+ top: 0,
196
+ bottom: 0,
197
+ // Offset by 16px to align with the slider's track inside the component
198
+ left: '16px',
199
+ right: '16px',
200
+ zIndex: 1,
201
+ touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
202
+ } }), _jsx(Slider, { sx: {
203
+ width: "100%",
204
+ color: colors.surface,
205
+ '& .MuiSlider-rail': {
206
+ background: fullTrackGradient,
207
+ opacity: 1,
208
+ pointerEvents: 'none', // Track is not interactive
209
+ },
210
+ '& .MuiSlider-track': {
211
+ background: 'transparent',
212
+ border: 'none',
213
+ pointerEvents: 'none', // Track is not interactive
214
+ },
215
+ '& .MuiSlider-thumb': {
216
+ boxShadow: 'none',
217
+ pointerEvents: 'auto', // Thumb IS interactive
218
+ touchAction: 'none',
219
+ zIndex: 2, // Thumb is on top of the overlay
220
+ }
221
+ }, slotProps: {
222
+ thumb: {
223
+ ref: vibranceSliderRef,
224
+ onDoubleClick: vibranceInput.handleDoubleClick
225
+ }
226
+ }, size: "small", value: props.vibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setVibranceScore("vibranceScore", newValue) })] }), _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, userSelect: 'none' }, onDoubleClick: saturationInput.handleDoubleClick, children: "Saturation" }), _jsx(Typography, { sx: {
201
227
  ...typography.bodyMedium, // Use your standard typography
202
228
  color: colors.surface,
203
229
  width: "40px", // Keep the fixed width for alignment
204
230
  textAlign: "right", // Keep the text alignment
205
- }, children: formatValue(props.saturationScore) })] }), _jsx(Slider, { sx: {
206
- width: "100%",
207
- color: colors.surface,
208
- '& .MuiSlider-rail': {
209
- background: fullTrackGradient,
210
- opacity: 1,
211
- },
212
- '& .MuiSlider-track': {
213
- background: 'transparent',
214
- border: 'none',
215
- },
216
- '& .MuiSlider-thumb': {
217
- boxShadow: 'none',
218
- pointerEvents: 'auto',
219
- touchAction: 'none',
220
- }
221
- }, slotProps: {
222
- thumb: {
223
- ref: saturationSliderRef
224
- }
225
- }, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setSaturationScore("saturationScore", newValue), onDoubleClick: saturationInput.handleDoubleClick })] }) }));
231
+ }, children: formatValue(props.saturationScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
232
+ position: 'absolute',
233
+ top: 0,
234
+ bottom: 0,
235
+ // Offset by 16px to align with the slider's track inside the component
236
+ left: '16px',
237
+ right: '16px',
238
+ zIndex: 1,
239
+ touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
240
+ } }), _jsx(Slider, { sx: {
241
+ width: "100%",
242
+ color: colors.surface,
243
+ '& .MuiSlider-rail': {
244
+ background: fullTrackGradient,
245
+ opacity: 1,
246
+ pointerEvents: 'none',
247
+ },
248
+ '& .MuiSlider-track': {
249
+ background: 'transparent',
250
+ border: 'none',
251
+ pointerEvents: 'none',
252
+ },
253
+ '& .MuiSlider-thumb': {
254
+ boxShadow: 'none',
255
+ pointerEvents: 'auto',
256
+ touchAction: 'none',
257
+ zIndex: 2,
258
+ }
259
+ }, slotProps: {
260
+ thumb: {
261
+ ref: saturationSliderRef,
262
+ onDoubleClick: saturationInput.handleDoubleClick
263
+ }
264
+ }, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setSaturationScore("saturationScore", newValue) })] })] }) }));
226
265
  }
package/dist/components/editor/sliderComponents/useSliderEvents.js CHANGED
@@ -1,17 +1,24 @@
1
1
  import { useEffect, useRef } from "react";
2
2
  export default function useSliderEvents(onDragStart, onDragEnd, isBatchMode) {
3
3
  const elementRef = useRef(null);
4
+ // ✅ 1. Add a ref to track if a drag is active
5
+ const isDraggingRef = useRef(false);
4
6
  useEffect(() => {
5
7
  const element = elementRef.current;
6
8
  if (!element)
7
9
  return;
8
10
  const handleDragEnd = () => {
9
- onDragEnd();
11
+ // ✅ 2. Check the flag. If not dragging, do nothing.
12
+ if (!isDraggingRef.current)
13
+ return;
14
+ // If we are dragging, set the flag to false immediately
15
+ isDraggingRef.current = false;
16
+ onDragEnd(); // Then call the function
10
17
  window.removeEventListener('pointerup', handleDragEnd);
11
18
  };
12
19
  const handleDragStart = (event) => {
13
- // DO NOT call event.preventDefault() here.
14
- // This allows the MUI Slider to handle its own drag logic.
20
+ // ✅ 3. When a drag starts, set the flag to true
21
+ isDraggingRef.current = true;
15
22
  if (!isBatchMode) {
16
23
  onDragStart();
17
24
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yogiswara/honcho-editor-ui",
3
- "version": "3.1.15",
3
+ "version": "3.1.17",
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",