@yogiswara/honcho-editor-ui 3.1.5 → 3.1.7
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.
|
@@ -1,10 +1,25 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useState } from "react";
|
|
3
|
-
import { Stack, Typography } from "@mui/material";
|
|
3
|
+
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
|
-
|
|
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
|
+
}
|
|
8
23
|
const formatValue = (value) => {
|
|
9
24
|
if (value > 0)
|
|
10
25
|
return `+${value}`;
|
|
@@ -115,40 +130,108 @@ export default function HSliderColorMobile(props) {
|
|
|
115
130
|
color: colors.surface,
|
|
116
131
|
width: "40px", // Keep the fixed width for alignment
|
|
117
132
|
textAlign: "right", // Keep the text alignment
|
|
118
|
-
}, children: formatValue(props.tempScore) })] }), _jsx(
|
|
119
|
-
width: "100%",
|
|
120
|
-
|
|
121
|
-
'& .MuiSlider-
|
|
122
|
-
|
|
123
|
-
|
|
133
|
+
}, children: formatValue(props.tempScore) })] }), _jsx(Slider, { sx: {
|
|
134
|
+
width: "100%",
|
|
135
|
+
color: colors.surface,
|
|
136
|
+
'& .MuiSlider-rail': {
|
|
137
|
+
background: tempGradient,
|
|
138
|
+
opacity: 1,
|
|
139
|
+
pointerEvents: 'none', // Make the rail non-interactive
|
|
140
|
+
},
|
|
141
|
+
'& .MuiSlider-track': {
|
|
142
|
+
background: 'transparent',
|
|
143
|
+
border: 'none',
|
|
144
|
+
pointerEvents: 'none', // Make the track non-interactive
|
|
145
|
+
},
|
|
146
|
+
'& .MuiSlider-thumb': {
|
|
147
|
+
boxShadow: 'none',
|
|
148
|
+
pointerEvents: 'auto', // IMPORTANT: Re-enable interaction ONLY for the thumb
|
|
149
|
+
touchAction: 'none',
|
|
150
|
+
}
|
|
151
|
+
}, slotProps: {
|
|
152
|
+
thumb: {
|
|
153
|
+
ref: tempSliderRef
|
|
154
|
+
}
|
|
155
|
+
}, 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: {
|
|
124
156
|
...typography.bodyMedium, // Use your standard typography
|
|
125
157
|
color: colors.surface,
|
|
126
158
|
width: "40px", // Keep the fixed width for alignment
|
|
127
159
|
textAlign: "right", // Keep the text alignment
|
|
128
|
-
}, children: formatValue(props.tintScore) })] }), _jsx(
|
|
129
|
-
width: "100%",
|
|
130
|
-
|
|
131
|
-
'& .MuiSlider-
|
|
132
|
-
|
|
133
|
-
|
|
160
|
+
}, children: formatValue(props.tintScore) })] }), _jsx(Slider, { sx: {
|
|
161
|
+
width: "100%",
|
|
162
|
+
color: colors.surface,
|
|
163
|
+
'& .MuiSlider-rail': {
|
|
164
|
+
background: tintGradient,
|
|
165
|
+
opacity: 1,
|
|
166
|
+
pointerEvents: 'none',
|
|
167
|
+
},
|
|
168
|
+
'& .MuiSlider-track': {
|
|
169
|
+
background: 'transparent',
|
|
170
|
+
border: 'none',
|
|
171
|
+
pointerEvents: 'none',
|
|
172
|
+
},
|
|
173
|
+
'& .MuiSlider-thumb': {
|
|
174
|
+
boxShadow: 'none',
|
|
175
|
+
pointerEvents: 'auto',
|
|
176
|
+
touchAction: 'none',
|
|
177
|
+
}
|
|
178
|
+
}, slotProps: {
|
|
179
|
+
thumb: {
|
|
180
|
+
ref: tintSliderRef
|
|
181
|
+
}
|
|
182
|
+
}, 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: {
|
|
134
183
|
...typography.bodyMedium, // Use your standard typography
|
|
135
184
|
color: colors.surface,
|
|
136
185
|
width: "40px", // Keep the fixed width for alignment
|
|
137
186
|
textAlign: "right", // Keep the text alignment
|
|
138
|
-
}, children: formatValue(props.vibranceScore) })] }), _jsx(
|
|
139
|
-
width: "100%",
|
|
140
|
-
|
|
141
|
-
'& .MuiSlider-
|
|
142
|
-
|
|
143
|
-
|
|
187
|
+
}, children: formatValue(props.vibranceScore) })] }), _jsx(Slider, { sx: {
|
|
188
|
+
width: "100%",
|
|
189
|
+
color: colors.surface,
|
|
190
|
+
'& .MuiSlider-rail': {
|
|
191
|
+
background: fullTrackGradient,
|
|
192
|
+
opacity: 1,
|
|
193
|
+
pointerEvents: 'none',
|
|
194
|
+
},
|
|
195
|
+
'& .MuiSlider-track': {
|
|
196
|
+
background: 'transparent',
|
|
197
|
+
border: 'none',
|
|
198
|
+
pointerEvents: 'none',
|
|
199
|
+
},
|
|
200
|
+
'& .MuiSlider-thumb': {
|
|
201
|
+
boxShadow: 'none',
|
|
202
|
+
pointerEvents: 'auto',
|
|
203
|
+
touchAction: 'none',
|
|
204
|
+
}
|
|
205
|
+
}, slotProps: {
|
|
206
|
+
thumb: {
|
|
207
|
+
ref: vibranceSliderRef
|
|
208
|
+
}
|
|
209
|
+
}, 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: {
|
|
144
210
|
...typography.bodyMedium, // Use your standard typography
|
|
145
211
|
color: colors.surface,
|
|
146
212
|
width: "40px", // Keep the fixed width for alignment
|
|
147
213
|
textAlign: "right", // Keep the text alignment
|
|
148
|
-
}, children: formatValue(props.saturationScore) })] }), _jsx(
|
|
149
|
-
width: "100%",
|
|
150
|
-
|
|
151
|
-
'& .MuiSlider-
|
|
152
|
-
|
|
153
|
-
|
|
214
|
+
}, children: formatValue(props.saturationScore) })] }), _jsx(Slider, { sx: {
|
|
215
|
+
width: "100%",
|
|
216
|
+
color: colors.surface,
|
|
217
|
+
'& .MuiSlider-rail': {
|
|
218
|
+
background: fullTrackGradient,
|
|
219
|
+
opacity: 1,
|
|
220
|
+
pointerEvents: 'none',
|
|
221
|
+
},
|
|
222
|
+
'& .MuiSlider-track': {
|
|
223
|
+
background: 'transparent',
|
|
224
|
+
border: 'none',
|
|
225
|
+
pointerEvents: 'none',
|
|
226
|
+
},
|
|
227
|
+
'& .MuiSlider-thumb': {
|
|
228
|
+
boxShadow: 'none',
|
|
229
|
+
pointerEvents: 'auto',
|
|
230
|
+
touchAction: 'none',
|
|
231
|
+
}
|
|
232
|
+
}, slotProps: {
|
|
233
|
+
thumb: {
|
|
234
|
+
ref: saturationSliderRef
|
|
235
|
+
}
|
|
236
|
+
}, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.setSaturationScore("saturationScore", newValue), onDoubleClick: saturationInput.handleDoubleClick })] }) }));
|
|
154
237
|
}
|
|
@@ -1,33 +1,25 @@
|
|
|
1
1
|
import { useEffect, useRef } from "react";
|
|
2
2
|
export default function useSliderEvents(onDragStart, onDragEnd, isBatchMode) {
|
|
3
|
-
// Use a generic HTMLElement to work for both <div> and <span>
|
|
4
3
|
const elementRef = useRef(null);
|
|
5
4
|
useEffect(() => {
|
|
6
5
|
const element = elementRef.current;
|
|
7
6
|
if (!element)
|
|
8
7
|
return;
|
|
9
|
-
// This handler is attached to the WINDOW for the 'pointerup' event.
|
|
10
8
|
const handleDragEnd = () => {
|
|
11
9
|
onDragEnd();
|
|
12
|
-
// Clean up the global listener immediately after the drag ends.
|
|
13
10
|
window.removeEventListener('pointerup', handleDragEnd);
|
|
14
11
|
};
|
|
15
|
-
// This handler is attached to the slider THUMB for the 'pointerdown' event.
|
|
16
12
|
const handleDragStart = (event) => {
|
|
17
|
-
//
|
|
18
|
-
|
|
13
|
+
// DO NOT call event.preventDefault() here.
|
|
14
|
+
// This allows the MUI Slider to handle its own drag logic.
|
|
19
15
|
if (!isBatchMode) {
|
|
20
16
|
onDragStart();
|
|
21
17
|
}
|
|
22
|
-
// When dragging starts, listen on the entire window for the end.
|
|
23
18
|
window.addEventListener('pointerup', handleDragEnd);
|
|
24
19
|
};
|
|
25
|
-
// Attach a single "start" listener to the specific element (the thumb).
|
|
26
20
|
element.addEventListener('pointerdown', handleDragStart);
|
|
27
|
-
// Cleanup function when the component unmounts
|
|
28
21
|
return () => {
|
|
29
22
|
element.removeEventListener('pointerdown', handleDragStart);
|
|
30
|
-
// Ensure any lingering window listeners are also removed.
|
|
31
23
|
window.removeEventListener('pointerup', handleDragEnd);
|
|
32
24
|
};
|
|
33
25
|
}, [onDragStart, onDragEnd, isBatchMode]);
|