@yogiswara/honcho-editor-ui 3.1.16 → 3.1.18

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 +12 -12
  2. package/dist/components/editor/sliderComponents/useSliderEvents.js +10 -3
  3. package/package.json +1 -1
package/dist/components/editor/HSliderColorMobile.js CHANGED
@@ -114,13 +114,13 @@ 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: "5px" }, 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,
121
121
  // Offset by 16px to align with the slider's track inside the component
122
- left: '16px',
123
- right: '16px',
122
+ left: '20px',
123
+ right: '20px',
124
124
  zIndex: 1,
125
125
  touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
126
126
  } }), _jsx(Slider, { sx: {
@@ -152,13 +152,13 @@ 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) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%', pt: "5px" }, children: [_jsx("div", { style: {
155
+ }, children: formatValue(props.tintScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
156
156
  position: 'absolute',
157
157
  top: 0,
158
158
  bottom: 0,
159
159
  // Offset by 16px to align with the slider's track inside the component
160
- left: '16px',
161
- right: '16px',
160
+ left: '20px',
161
+ right: '20px',
162
162
  zIndex: 1,
163
163
  touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
164
164
  } }), _jsx(Slider, { sx: {
@@ -190,13 +190,13 @@ export default function HSliderColorMobile(props) {
190
190
  color: colors.surface,
191
191
  width: "40px", // Keep the fixed width for alignment
192
192
  textAlign: "right", // Keep the text alignment
193
- }, children: formatValue(props.vibranceScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%', pt: "5px" }, children: [_jsx("div", { style: {
193
+ }, children: formatValue(props.vibranceScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
194
194
  position: 'absolute',
195
195
  top: 0,
196
196
  bottom: 0,
197
197
  // Offset by 16px to align with the slider's track inside the component
198
- left: '16px',
199
- right: '16px',
198
+ left: '20px',
199
+ right: '20px',
200
200
  zIndex: 1,
201
201
  touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
202
202
  } }), _jsx(Slider, { sx: {
@@ -228,13 +228,13 @@ export default function HSliderColorMobile(props) {
228
228
  color: colors.surface,
229
229
  width: "40px", // Keep the fixed width for alignment
230
230
  textAlign: "right", // Keep the text alignment
231
- }, children: formatValue(props.saturationScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%', pt: "5px" }, children: [_jsx("div", { style: {
231
+ }, children: formatValue(props.saturationScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
232
232
  position: 'absolute',
233
233
  top: 0,
234
234
  bottom: 0,
235
235
  // Offset by 16px to align with the slider's track inside the component
236
- left: '16px',
237
- right: '16px',
236
+ left: '20px',
237
+ right: '20px',
238
238
  zIndex: 1,
239
239
  touchAction: 'manipulation', // ✅ 1. Add this to make double-tap reliable on mobile
240
240
  } }), _jsx(Slider, { sx: {
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.16",
3
+ "version": "3.1.18",
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",