@yogiswara/honcho-editor-ui 2.7.10 → 2.7.12
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.
- package/dist/components/editor/HAccordionColor.d.ts +3 -0
- package/dist/components/editor/HAccordionColor.js +52 -4
- package/dist/components/editor/HAccordionColorAdjustment.d.ts +3 -0
- package/dist/components/editor/HAccordionColorAdjustment.js +1 -7
- package/dist/components/editor/HAccordionDetails.d.ts +3 -0
- package/dist/components/editor/HAccordionDetails.js +27 -3
- package/dist/components/editor/HAccordionLight.d.ts +3 -0
- package/dist/components/editor/HAccordionLight.js +79 -7
- package/dist/components/editor/HImageEditorMobile.d.ts +3 -0
- package/dist/components/editor/HSliderColorMobile.d.ts +3 -0
- package/dist/components/editor/HSliderColorMobile.js +52 -4
- package/dist/components/editor/HSliderDetailsMobile.d.ts +3 -0
- package/dist/components/editor/HSliderDetailsMobile.js +26 -2
- package/dist/components/editor/HSliderLightMobile.d.ts +3 -0
- package/dist/components/editor/HSliderLightMobile.js +78 -6
- package/dist/components/editor/HTabColorAdjustmentMobile.d.ts +3 -0
- package/dist/components/editor/HTabColorAdjustmentMobile.js +3 -3
- package/package.json +1 -1
|
@@ -4,10 +4,13 @@ interface Props {
|
|
|
4
4
|
TintScore: number;
|
|
5
5
|
SaturationScore: number;
|
|
6
6
|
VibranceScore: number;
|
|
7
|
+
isBatchMode: boolean;
|
|
7
8
|
onTempChange: (field: keyof AdjustmentState, value: number) => void;
|
|
8
9
|
onTintChange: (field: keyof AdjustmentState, value: number) => void;
|
|
9
10
|
onSaturationChange: (field: keyof AdjustmentState, value: number) => void;
|
|
10
11
|
onVibranceChange: (field: keyof AdjustmentState, value: number) => void;
|
|
12
|
+
onDragStart: () => void;
|
|
13
|
+
onDragEnd: () => void;
|
|
11
14
|
}
|
|
12
15
|
export default function HAccordionColor(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
13
16
|
export {};
|
|
@@ -89,7 +89,19 @@ export default function HAccordionColor(props) {
|
|
|
89
89
|
'& .MuiSlider-thumb:hover': {
|
|
90
90
|
boxShadow: 'none',
|
|
91
91
|
},
|
|
92
|
-
}, size: "small", value: props.TempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTempChange("tempScore", newValue), onDoubleClick: () => props.onTempChange("tempScore", 0)
|
|
92
|
+
}, size: "small", value: props.TempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTempChange("tempScore", newValue), onDoubleClick: () => props.onTempChange("tempScore", 0), onMouseDown: () => {
|
|
93
|
+
if (!props.isBatchMode) {
|
|
94
|
+
props.onDragStart();
|
|
95
|
+
}
|
|
96
|
+
}, onMouseUp: () => {
|
|
97
|
+
props.onDragEnd();
|
|
98
|
+
}, onTouchStart: () => {
|
|
99
|
+
if (!props.isBatchMode) {
|
|
100
|
+
props.onDragStart();
|
|
101
|
+
}
|
|
102
|
+
}, onTouchEnd: () => {
|
|
103
|
+
props.onDragEnd();
|
|
104
|
+
} })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "tint-input", onDoubleClick: () => props.onTintChange("tintScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Tint" }), _jsx(TextField, { hiddenLabel: true, id: "tint-input", value: formatValue(props.TintScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTintChange("tintScore", val)), sx: {
|
|
93
105
|
width: "40px",
|
|
94
106
|
height: "10px",
|
|
95
107
|
alignItems: "center",
|
|
@@ -136,7 +148,19 @@ export default function HAccordionColor(props) {
|
|
|
136
148
|
'& .MuiSlider-thumb:hover': {
|
|
137
149
|
boxShadow: 'none',
|
|
138
150
|
},
|
|
139
|
-
}, size: "small", value: props.TintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange("tintScore", newValue), onDoubleClick: () => props.onTintChange("tintScore", 0)
|
|
151
|
+
}, size: "small", value: props.TintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange("tintScore", newValue), onDoubleClick: () => props.onTintChange("tintScore", 0), onMouseDown: () => {
|
|
152
|
+
if (!props.isBatchMode) {
|
|
153
|
+
props.onDragStart();
|
|
154
|
+
}
|
|
155
|
+
}, onMouseUp: () => {
|
|
156
|
+
props.onDragEnd();
|
|
157
|
+
}, onTouchStart: () => {
|
|
158
|
+
if (!props.isBatchMode) {
|
|
159
|
+
props.onDragStart();
|
|
160
|
+
}
|
|
161
|
+
}, onTouchEnd: () => {
|
|
162
|
+
props.onDragEnd();
|
|
163
|
+
} })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "vibrance-input", onDoubleClick: () => props.onVibranceChange("vibranceScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Vibrance" }), _jsx(TextField, { hiddenLabel: true, id: "vibrance-input", value: formatValue(props.VibranceScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onVibranceChange("vibranceScore", val)), sx: {
|
|
140
164
|
width: "40px",
|
|
141
165
|
height: "10px",
|
|
142
166
|
alignItems: "center",
|
|
@@ -183,7 +207,19 @@ export default function HAccordionColor(props) {
|
|
|
183
207
|
'& .MuiSlider-thumb:hover': {
|
|
184
208
|
boxShadow: 'none',
|
|
185
209
|
},
|
|
186
|
-
}, size: "small", value: props.VibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange("vibranceScore", newValue), onDoubleClick: () => props.onVibranceChange("vibranceScore", 0)
|
|
210
|
+
}, size: "small", value: props.VibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange("vibranceScore", newValue), onDoubleClick: () => props.onVibranceChange("vibranceScore", 0), onMouseDown: () => {
|
|
211
|
+
if (!props.isBatchMode) {
|
|
212
|
+
props.onDragStart();
|
|
213
|
+
}
|
|
214
|
+
}, onMouseUp: () => {
|
|
215
|
+
props.onDragEnd();
|
|
216
|
+
}, onTouchStart: () => {
|
|
217
|
+
if (!props.isBatchMode) {
|
|
218
|
+
props.onDragStart();
|
|
219
|
+
}
|
|
220
|
+
}, onTouchEnd: () => {
|
|
221
|
+
props.onDragEnd();
|
|
222
|
+
} })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "saturation-input", onDoubleClick: () => props.onSaturationChange("saturationScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Saturation" }), _jsx(TextField, { hiddenLabel: true, id: "saturation-input", value: formatValue(props.SaturationScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSaturationChange("saturationScore", val)), sx: {
|
|
187
223
|
width: "40px",
|
|
188
224
|
height: "10px",
|
|
189
225
|
alignItems: "center",
|
|
@@ -230,5 +266,17 @@ export default function HAccordionColor(props) {
|
|
|
230
266
|
'& .MuiSlider-thumb:hover': {
|
|
231
267
|
boxShadow: 'none',
|
|
232
268
|
},
|
|
233
|
-
}, size: "small", value: props.SaturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange("saturationScore", newValue), onDoubleClick: () => props.onSaturationChange("saturationScore", 0)
|
|
269
|
+
}, size: "small", value: props.SaturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange("saturationScore", newValue), onDoubleClick: () => props.onSaturationChange("saturationScore", 0), onMouseDown: () => {
|
|
270
|
+
if (!props.isBatchMode) {
|
|
271
|
+
props.onDragStart();
|
|
272
|
+
}
|
|
273
|
+
}, onMouseUp: () => {
|
|
274
|
+
props.onDragEnd();
|
|
275
|
+
}, onTouchStart: () => {
|
|
276
|
+
if (!props.isBatchMode) {
|
|
277
|
+
props.onDragStart();
|
|
278
|
+
}
|
|
279
|
+
}, onTouchEnd: () => {
|
|
280
|
+
props.onDragEnd();
|
|
281
|
+
} })] })] }) }));
|
|
234
282
|
}
|
|
@@ -27,6 +27,9 @@ interface Props {
|
|
|
27
27
|
setClarityScore: (field: keyof AdjustmentState, value: number) => void;
|
|
28
28
|
setSharpnessScore: (field: keyof AdjustmentState, value: number) => void;
|
|
29
29
|
onPanelChange: (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => void;
|
|
30
|
+
isBatchMode: boolean;
|
|
31
|
+
onDragStart: () => void;
|
|
32
|
+
onDragEnd: () => void;
|
|
30
33
|
}
|
|
31
34
|
export default function HAccordionColorAdjustment(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
32
35
|
export {};
|
|
@@ -27,11 +27,5 @@ export default function HAccordionColorAdjustment(props) {
|
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
29
|
const isPanelExpanded = (panelName) => props.expandedPanels.includes(panelName);
|
|
30
|
-
return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "column", sx: { accordionStyle }, children: [_jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('whiteBalance'), onChange: props.onPanelChange('whiteBalance'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Color" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('whiteBalance') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(HAccordionColor, { TempScore: props.tempScore, TintScore: props.tintScore, VibranceScore: props.vibranceScore, SaturationScore: props.saturationScore, onTempChange: props.setTempScore, onTintChange: props.setTintScore, onVibranceChange: props.setVibranceScore, onSaturationChange: props.setSaturationScore }) })] }), _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('light'), onChange: props.onPanelChange('light'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Light" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('light') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(HAccordionLight, { ExposureScore: props.exposureScore, ContrastScore: props.contrastScore, HighlightsScore: props.HighlightsScore, ShadowsScore: props.shadowsScore, WhitesScore: props.whitesScore, BlacksScore: props.blacksScore, onExposureChange: props.setExposureScore, onContrastChange: props.setContrastScore, onHighlightsChange: props.setHighlightsScore, onShadowsChange: props.setShadowsScore, onWhitesChange: props.setWhitesScore, onBlacksChange: props.setBlacksScore }) })] }), _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('details'), onChange: props.onPanelChange('details'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Details" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('details') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(HAccordionDetails
|
|
31
|
-
// ContrastScore = {props.contrastScore}
|
|
32
|
-
, {
|
|
33
|
-
// ContrastScore = {props.contrastScore}
|
|
34
|
-
ClarityScore: props.clarityScore, SharpnessScore: props.sharpnessScore,
|
|
35
|
-
// onContrastChange={props.setContrastScore}
|
|
36
|
-
onClarityChange: props.setClarityScore, onSharpnessChange: props.setSharpnessScore }) })] })] }) }));
|
|
30
|
+
return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "column", sx: { accordionStyle }, children: [_jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('whiteBalance'), onChange: props.onPanelChange('whiteBalance'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Color" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('whiteBalance') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(HAccordionColor, { TempScore: props.tempScore, TintScore: props.tintScore, VibranceScore: props.vibranceScore, SaturationScore: props.saturationScore, onTempChange: props.setTempScore, onTintChange: props.setTintScore, onVibranceChange: props.setVibranceScore, onSaturationChange: props.setSaturationScore, isBatchMode: props.isBatchMode, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd }) })] }), _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('light'), onChange: props.onPanelChange('light'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Light" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('light') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(HAccordionLight, { ExposureScore: props.exposureScore, ContrastScore: props.contrastScore, HighlightsScore: props.HighlightsScore, ShadowsScore: props.shadowsScore, WhitesScore: props.whitesScore, BlacksScore: props.blacksScore, onExposureChange: props.setExposureScore, onContrastChange: props.setContrastScore, onHighlightsChange: props.setHighlightsScore, onShadowsChange: props.setShadowsScore, onWhitesChange: props.setWhitesScore, onBlacksChange: props.setBlacksScore, isBatchMode: props.isBatchMode, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd }) })] }), _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('details'), onChange: props.onPanelChange('details'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium }, children: "Details" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('details') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(HAccordionDetails, { ClarityScore: props.clarityScore, SharpnessScore: props.sharpnessScore, onClarityChange: props.setClarityScore, onSharpnessChange: props.setSharpnessScore, isBatchMode: props.isBatchMode, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd }) })] })] }) }));
|
|
37
31
|
}
|
|
@@ -4,6 +4,9 @@ interface Props {
|
|
|
4
4
|
SharpnessScore: number;
|
|
5
5
|
onClarityChange: (field: keyof AdjustmentState, value: number) => void;
|
|
6
6
|
onSharpnessChange: (field: keyof AdjustmentState, value: number) => void;
|
|
7
|
+
onDragStart: () => void;
|
|
8
|
+
onDragEnd: () => void;
|
|
9
|
+
isBatchMode: boolean;
|
|
7
10
|
}
|
|
8
11
|
export default function HAccordionDetails(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
9
12
|
export {};
|
|
@@ -26,7 +26,7 @@ export default function HAccordionDetails(props) {
|
|
|
26
26
|
const clampedValue = Math.max(min, Math.min(max, numericValue));
|
|
27
27
|
onChange(clampedValue);
|
|
28
28
|
};
|
|
29
|
-
return (_jsx(_Fragment, { children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "column", gap: "4px", sx: { pt: '6px', pb: '2px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "clarity-input",
|
|
29
|
+
return (_jsx(_Fragment, { children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "column", gap: "4px", sx: { pt: '6px', pb: '2px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "clarity-input", sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Clarity" }), _jsx(TextField, { hiddenLabel: true, id: "clarity-input", value: formatValue(props.ClarityScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onClarityChange("clarityScore", val)), sx: {
|
|
30
30
|
width: "40px",
|
|
31
31
|
height: "10px",
|
|
32
32
|
alignItems: "center",
|
|
@@ -77,7 +77,19 @@ export default function HAccordionDetails(props) {
|
|
|
77
77
|
opacity: 1,
|
|
78
78
|
boxShadow: 'none',
|
|
79
79
|
},
|
|
80
|
-
}, size: "small", value: props.ClarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onClarityChange("clarityScore", newValue), onDoubleClick: () => props.onClarityChange("clarityScore", 0)
|
|
80
|
+
}, size: "small", value: props.ClarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onClarityChange("clarityScore", newValue), onDoubleClick: () => props.onClarityChange("clarityScore", 0), onMouseDown: () => {
|
|
81
|
+
if (!props.isBatchMode) {
|
|
82
|
+
props.onDragStart();
|
|
83
|
+
}
|
|
84
|
+
}, onMouseUp: () => {
|
|
85
|
+
props.onDragEnd();
|
|
86
|
+
}, onTouchStart: () => {
|
|
87
|
+
if (!props.isBatchMode) {
|
|
88
|
+
props.onDragStart();
|
|
89
|
+
}
|
|
90
|
+
}, onTouchEnd: () => {
|
|
91
|
+
props.onDragEnd();
|
|
92
|
+
} })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "sharpness-input", sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Sharpness" }), _jsx(TextField, { hiddenLabel: true, id: "sharpness-input", value: formatValue(props.SharpnessScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSharpnessChange("sharpnessScore", val)), sx: {
|
|
81
93
|
width: "40px",
|
|
82
94
|
height: "10px",
|
|
83
95
|
alignItems: "center",
|
|
@@ -129,5 +141,17 @@ export default function HAccordionDetails(props) {
|
|
|
129
141
|
opacity: 1,
|
|
130
142
|
boxShadow: 'none',
|
|
131
143
|
},
|
|
132
|
-
}, size: "small", value: props.SharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange("sharpnessScore", newValue), onDoubleClick: () => props.onSharpnessChange("sharpnessScore", 0)
|
|
144
|
+
}, size: "small", value: props.SharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange("sharpnessScore", newValue), onDoubleClick: () => props.onSharpnessChange("sharpnessScore", 0), onMouseDown: () => {
|
|
145
|
+
if (!props.isBatchMode) {
|
|
146
|
+
props.onDragStart();
|
|
147
|
+
}
|
|
148
|
+
}, onMouseUp: () => {
|
|
149
|
+
props.onDragEnd();
|
|
150
|
+
}, onTouchStart: () => {
|
|
151
|
+
if (!props.isBatchMode) {
|
|
152
|
+
props.onDragStart();
|
|
153
|
+
}
|
|
154
|
+
}, onTouchEnd: () => {
|
|
155
|
+
props.onDragEnd();
|
|
156
|
+
} })] })] }) }));
|
|
133
157
|
}
|
|
@@ -6,12 +6,15 @@ interface Props {
|
|
|
6
6
|
ShadowsScore: number;
|
|
7
7
|
WhitesScore: number;
|
|
8
8
|
BlacksScore: number;
|
|
9
|
+
isBatchMode: boolean;
|
|
9
10
|
onExposureChange: (field: keyof AdjustmentState, value: number) => void;
|
|
10
11
|
onContrastChange: (field: keyof AdjustmentState, value: number) => void;
|
|
11
12
|
onHighlightsChange: (field: keyof AdjustmentState, value: number) => void;
|
|
12
13
|
onShadowsChange: (field: keyof AdjustmentState, value: number) => void;
|
|
13
14
|
onWhitesChange: (field: keyof AdjustmentState, value: number) => void;
|
|
14
15
|
onBlacksChange: (field: keyof AdjustmentState, value: number) => void;
|
|
16
|
+
onDragStart: () => void;
|
|
17
|
+
onDragEnd: () => void;
|
|
15
18
|
}
|
|
16
19
|
export default function HAccordionLight(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
17
20
|
export {};
|
|
@@ -26,7 +26,7 @@ export default function HAccordionLight(props) {
|
|
|
26
26
|
const clampedValue = Math.max(min, Math.min(max, numericValue));
|
|
27
27
|
onChange(clampedValue);
|
|
28
28
|
};
|
|
29
|
-
return (_jsx(_Fragment, { children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "column", gap: "4px", sx: { pt: '6px', pb: '2px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "exposure-input",
|
|
29
|
+
return (_jsx(_Fragment, { children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "column", gap: "4px", sx: { pt: '6px', pb: '2px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "exposure-input", sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Exposure" }), _jsx(TextField, { hiddenLabel: true, id: "exposure-input", value: formatValue(props.ExposureScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onExposureChange("exposureScore", val)), sx: {
|
|
30
30
|
width: "40px",
|
|
31
31
|
height: "10px",
|
|
32
32
|
alignItems: "center",
|
|
@@ -78,7 +78,19 @@ export default function HAccordionLight(props) {
|
|
|
78
78
|
opacity: 1,
|
|
79
79
|
boxShadow: 'none',
|
|
80
80
|
}
|
|
81
|
-
}, size: "small", value: props.ExposureScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange("exposureScore", newValue), onDoubleClick: () => props.onExposureChange("exposureScore", 0)
|
|
81
|
+
}, size: "small", value: props.ExposureScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange("exposureScore", newValue), onDoubleClick: () => props.onExposureChange("exposureScore", 0), onMouseDown: () => {
|
|
82
|
+
if (!props.isBatchMode) {
|
|
83
|
+
props.onDragStart();
|
|
84
|
+
}
|
|
85
|
+
}, onMouseUp: () => {
|
|
86
|
+
props.onDragEnd();
|
|
87
|
+
}, onTouchStart: () => {
|
|
88
|
+
if (!props.isBatchMode) {
|
|
89
|
+
props.onDragStart();
|
|
90
|
+
}
|
|
91
|
+
}, onTouchEnd: () => {
|
|
92
|
+
props.onDragEnd();
|
|
93
|
+
} })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "contrast-input", sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Contrast" }), _jsx(TextField, { hiddenLabel: true, id: "contrast-input", value: formatValue(props.ContrastScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onContrastChange("contrastScore", val)), sx: {
|
|
82
94
|
width: "40px",
|
|
83
95
|
height: "10px",
|
|
84
96
|
alignItems: "center",
|
|
@@ -130,7 +142,19 @@ export default function HAccordionLight(props) {
|
|
|
130
142
|
opacity: 1,
|
|
131
143
|
boxShadow: 'none',
|
|
132
144
|
}
|
|
133
|
-
}, size: "small", value: props.ContrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange("contrastScore", newValue), onDoubleClick: () => props.onContrastChange("contrastScore", 0)
|
|
145
|
+
}, size: "small", value: props.ContrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange("contrastScore", newValue), onDoubleClick: () => props.onContrastChange("contrastScore", 0), onMouseDown: () => {
|
|
146
|
+
if (!props.isBatchMode) {
|
|
147
|
+
props.onDragStart();
|
|
148
|
+
}
|
|
149
|
+
}, onMouseUp: () => {
|
|
150
|
+
props.onDragEnd();
|
|
151
|
+
}, onTouchStart: () => {
|
|
152
|
+
if (!props.isBatchMode) {
|
|
153
|
+
props.onDragStart();
|
|
154
|
+
}
|
|
155
|
+
}, onTouchEnd: () => {
|
|
156
|
+
props.onDragEnd();
|
|
157
|
+
} })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "highlights-input", sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Highlights" }), _jsx(TextField, { hiddenLabel: true, id: "highlights-input", value: formatValue(props.HighlightsScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onHighlightsChange("highlightsScore", val)), sx: {
|
|
134
158
|
width: "40px",
|
|
135
159
|
height: "10px",
|
|
136
160
|
alignItems: "center",
|
|
@@ -182,7 +206,19 @@ export default function HAccordionLight(props) {
|
|
|
182
206
|
opacity: 1,
|
|
183
207
|
boxShadow: 'none',
|
|
184
208
|
}
|
|
185
|
-
}, size: "small", value: props.HighlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange("highlightsScore", newValue), onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0)
|
|
209
|
+
}, size: "small", value: props.HighlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange("highlightsScore", newValue), onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0), onMouseDown: () => {
|
|
210
|
+
if (!props.isBatchMode) {
|
|
211
|
+
props.onDragStart();
|
|
212
|
+
}
|
|
213
|
+
}, onMouseUp: () => {
|
|
214
|
+
props.onDragEnd();
|
|
215
|
+
}, onTouchStart: () => {
|
|
216
|
+
if (!props.isBatchMode) {
|
|
217
|
+
props.onDragStart();
|
|
218
|
+
}
|
|
219
|
+
}, onTouchEnd: () => {
|
|
220
|
+
props.onDragEnd();
|
|
221
|
+
} })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "shadows-input", sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Shadows" }), _jsx(TextField, { hiddenLabel: true, id: "shadows-input", value: formatValue(props.ShadowsScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onShadowsChange("shadowsScore", val)), sx: {
|
|
186
222
|
width: "40px",
|
|
187
223
|
height: "10px",
|
|
188
224
|
alignItems: "center",
|
|
@@ -234,7 +270,19 @@ export default function HAccordionLight(props) {
|
|
|
234
270
|
opacity: 1,
|
|
235
271
|
boxShadow: 'none',
|
|
236
272
|
}
|
|
237
|
-
}, size: "small", value: props.ShadowsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("shadowsScore", newValue), onDoubleClick: () => props.onShadowsChange("shadowsScore", 0)
|
|
273
|
+
}, size: "small", value: props.ShadowsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("shadowsScore", newValue), onDoubleClick: () => props.onShadowsChange("shadowsScore", 0), onMouseDown: () => {
|
|
274
|
+
if (!props.isBatchMode) {
|
|
275
|
+
props.onDragStart();
|
|
276
|
+
}
|
|
277
|
+
}, onMouseUp: () => {
|
|
278
|
+
props.onDragEnd();
|
|
279
|
+
}, onTouchStart: () => {
|
|
280
|
+
if (!props.isBatchMode) {
|
|
281
|
+
props.onDragStart();
|
|
282
|
+
}
|
|
283
|
+
}, onTouchEnd: () => {
|
|
284
|
+
props.onDragEnd();
|
|
285
|
+
} })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "whites-input", sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Whites" }), _jsx(TextField, { hiddenLabel: true, id: "whites-input", value: formatValue(props.WhitesScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onWhitesChange("whitesScore", val)), sx: {
|
|
238
286
|
width: "40px",
|
|
239
287
|
height: "10px",
|
|
240
288
|
alignItems: "center",
|
|
@@ -286,7 +334,19 @@ export default function HAccordionLight(props) {
|
|
|
286
334
|
opacity: 1,
|
|
287
335
|
boxShadow: 'none',
|
|
288
336
|
}
|
|
289
|
-
}, size: "small", value: props.WhitesScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange("whitesScore", newValue), onDoubleClick: () => props.onWhitesChange("whitesScore", 0)
|
|
337
|
+
}, size: "small", value: props.WhitesScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange("whitesScore", newValue), onDoubleClick: () => props.onWhitesChange("whitesScore", 0), onMouseDown: () => {
|
|
338
|
+
if (!props.isBatchMode) {
|
|
339
|
+
props.onDragStart();
|
|
340
|
+
}
|
|
341
|
+
}, onMouseUp: () => {
|
|
342
|
+
props.onDragEnd();
|
|
343
|
+
}, onTouchStart: () => {
|
|
344
|
+
if (!props.isBatchMode) {
|
|
345
|
+
props.onDragStart();
|
|
346
|
+
}
|
|
347
|
+
}, onTouchEnd: () => {
|
|
348
|
+
props.onDragEnd();
|
|
349
|
+
} })] }), _jsxs(Stack, { direction: "column", gap: "3px", sx: { pt: '10px', pb: '0px', px: '0px', mx: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle, }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [_jsx(Typography, { component: "label", htmlFor: "blacks-input", sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Blacks" }), _jsx(TextField, { hiddenLabel: true, id: "blacks-input", value: formatValue(props.BlacksScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onBlacksChange("blacksScore", val)), sx: {
|
|
290
350
|
width: "40px",
|
|
291
351
|
height: "10px",
|
|
292
352
|
alignItems: "center",
|
|
@@ -338,5 +398,17 @@ export default function HAccordionLight(props) {
|
|
|
338
398
|
opacity: 1,
|
|
339
399
|
boxShadow: 'none',
|
|
340
400
|
}
|
|
341
|
-
}, size: "small", value: props.BlacksScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange("blacksScore", newValue), onDoubleClick: () => props.onBlacksChange("blacksScore", 0)
|
|
401
|
+
}, size: "small", value: props.BlacksScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange("blacksScore", newValue), onDoubleClick: () => props.onBlacksChange("blacksScore", 0), onMouseDown: () => {
|
|
402
|
+
if (!props.isBatchMode) {
|
|
403
|
+
props.onDragStart();
|
|
404
|
+
}
|
|
405
|
+
}, onMouseUp: () => {
|
|
406
|
+
props.onDragEnd();
|
|
407
|
+
}, onTouchStart: () => {
|
|
408
|
+
if (!props.isBatchMode) {
|
|
409
|
+
props.onDragStart();
|
|
410
|
+
}
|
|
411
|
+
}, onTouchEnd: () => {
|
|
412
|
+
props.onDragEnd();
|
|
413
|
+
} })] })] }) }));
|
|
342
414
|
}
|
|
@@ -39,6 +39,9 @@ interface Props {
|
|
|
39
39
|
onContrastChange: (field: keyof AdjustmentState, value: number) => void;
|
|
40
40
|
onClarityChange: (field: keyof AdjustmentState, value: number) => void;
|
|
41
41
|
onSharpnessChange: (field: keyof AdjustmentState, value: number) => void;
|
|
42
|
+
isBatchMode: boolean;
|
|
43
|
+
onDragStart: () => void;
|
|
44
|
+
onDragEnd: () => void;
|
|
42
45
|
selectedPreset: string | null;
|
|
43
46
|
onSelectPreset: (id: string) => void;
|
|
44
47
|
onOpenPresetModal: () => void;
|
|
@@ -4,10 +4,13 @@ interface Props {
|
|
|
4
4
|
tintScore: number;
|
|
5
5
|
saturationScore: number;
|
|
6
6
|
vibranceScore: number;
|
|
7
|
+
isBatchMode: boolean;
|
|
7
8
|
onTempChange: (field: keyof AdjustmentState, value: number) => void;
|
|
8
9
|
onTintChange: (field: keyof AdjustmentState, value: number) => void;
|
|
9
10
|
onVibranceChange: (field: keyof AdjustmentState, value: number) => void;
|
|
10
11
|
onSaturationChange: (field: keyof AdjustmentState, value: number) => void;
|
|
12
|
+
onDragStart: () => void;
|
|
13
|
+
onDragEnd: () => void;
|
|
11
14
|
}
|
|
12
15
|
export default function HSliderColorMobile(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
13
16
|
export {};
|
|
@@ -86,7 +86,19 @@ export default function HSliderColorMobile(props) {
|
|
|
86
86
|
'& .MuiSlider-thumb': {
|
|
87
87
|
boxShadow: 'none',
|
|
88
88
|
}
|
|
89
|
-
}, size: "small", value: props.tempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTempChange("tempScore", newValue), onDoubleClick: () => props.onTempChange("tempScore", 0)
|
|
89
|
+
}, size: "small", value: props.tempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTempChange("tempScore", newValue), onDoubleClick: () => props.onTempChange("tempScore", 0), onMouseDown: () => {
|
|
90
|
+
if (!props.isBatchMode) {
|
|
91
|
+
props.onDragStart();
|
|
92
|
+
}
|
|
93
|
+
}, onMouseUp: () => {
|
|
94
|
+
props.onDragEnd();
|
|
95
|
+
}, onTouchStart: () => {
|
|
96
|
+
if (!props.isBatchMode) {
|
|
97
|
+
props.onDragStart();
|
|
98
|
+
}
|
|
99
|
+
}, onTouchEnd: () => {
|
|
100
|
+
props.onDragEnd();
|
|
101
|
+
} }), _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 }, children: "Tint" }), _jsx(TextField, { 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: {
|
|
90
102
|
width: "40px",
|
|
91
103
|
alignItems: "center",
|
|
92
104
|
textAlign: "right",
|
|
@@ -130,7 +142,19 @@ export default function HSliderColorMobile(props) {
|
|
|
130
142
|
'& .MuiSlider-thumb': {
|
|
131
143
|
boxShadow: 'none',
|
|
132
144
|
}
|
|
133
|
-
}, size: "small", value: props.tintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange("tintScore", newValue), onDoubleClick: () => props.onTintChange("tintScore", 0)
|
|
145
|
+
}, size: "small", value: props.tintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange("tintScore", newValue), onDoubleClick: () => props.onTintChange("tintScore", 0), onMouseDown: () => {
|
|
146
|
+
if (!props.isBatchMode) {
|
|
147
|
+
props.onDragStart();
|
|
148
|
+
}
|
|
149
|
+
}, onMouseUp: () => {
|
|
150
|
+
props.onDragEnd();
|
|
151
|
+
}, onTouchStart: () => {
|
|
152
|
+
if (!props.isBatchMode) {
|
|
153
|
+
props.onDragStart();
|
|
154
|
+
}
|
|
155
|
+
}, onTouchEnd: () => {
|
|
156
|
+
props.onDragEnd();
|
|
157
|
+
} }), _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 }, children: "Vibrance" }), _jsx(TextField, { 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: {
|
|
134
158
|
width: "40px",
|
|
135
159
|
alignItems: "center",
|
|
136
160
|
textAlign: "right",
|
|
@@ -174,7 +198,19 @@ export default function HSliderColorMobile(props) {
|
|
|
174
198
|
'& .MuiSlider-thumb': {
|
|
175
199
|
boxShadow: 'none',
|
|
176
200
|
}
|
|
177
|
-
}, size: "small", value: props.vibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange("vibranceScore", newValue), onDoubleClick: () => props.onVibranceChange("vibranceScore", 0)
|
|
201
|
+
}, size: "small", value: props.vibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange("vibranceScore", newValue), onDoubleClick: () => props.onVibranceChange("vibranceScore", 0), onMouseDown: () => {
|
|
202
|
+
if (!props.isBatchMode) {
|
|
203
|
+
props.onDragStart();
|
|
204
|
+
}
|
|
205
|
+
}, onMouseUp: () => {
|
|
206
|
+
props.onDragEnd();
|
|
207
|
+
}, onTouchStart: () => {
|
|
208
|
+
if (!props.isBatchMode) {
|
|
209
|
+
props.onDragStart();
|
|
210
|
+
}
|
|
211
|
+
}, onTouchEnd: () => {
|
|
212
|
+
props.onDragEnd();
|
|
213
|
+
} }), _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 }, children: "Saturation" }), _jsx(TextField, { 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: {
|
|
178
214
|
width: "40px",
|
|
179
215
|
alignItems: "center",
|
|
180
216
|
textAlign: "right",
|
|
@@ -218,5 +254,17 @@ export default function HSliderColorMobile(props) {
|
|
|
218
254
|
'& .MuiSlider-thumb': {
|
|
219
255
|
boxShadow: 'none',
|
|
220
256
|
}
|
|
221
|
-
}, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange("saturationScore", newValue), onDoubleClick: () => props.onSaturationChange("saturationScore", 0)
|
|
257
|
+
}, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange("saturationScore", newValue), onDoubleClick: () => props.onSaturationChange("saturationScore", 0), onMouseDown: () => {
|
|
258
|
+
if (!props.isBatchMode) {
|
|
259
|
+
props.onDragStart();
|
|
260
|
+
}
|
|
261
|
+
}, onMouseUp: () => {
|
|
262
|
+
props.onDragEnd();
|
|
263
|
+
}, onTouchStart: () => {
|
|
264
|
+
if (!props.isBatchMode) {
|
|
265
|
+
props.onDragStart();
|
|
266
|
+
}
|
|
267
|
+
}, onTouchEnd: () => {
|
|
268
|
+
props.onDragEnd();
|
|
269
|
+
} })] }) }));
|
|
222
270
|
}
|
|
@@ -2,8 +2,11 @@ import { AdjustmentState } from '../../hooks/editor/type';
|
|
|
2
2
|
interface Props {
|
|
3
3
|
clarityScore: number;
|
|
4
4
|
sharpnessScore: number;
|
|
5
|
+
isBatchMode: boolean;
|
|
5
6
|
onClarityChange: (field: keyof AdjustmentState, value: number) => void;
|
|
6
7
|
onSharpnessChange: (field: keyof AdjustmentState, value: number) => void;
|
|
8
|
+
onDragStart: () => void;
|
|
9
|
+
onDragEnd: () => void;
|
|
7
10
|
}
|
|
8
11
|
export default function HSliderDetailsMobile(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
9
12
|
export {};
|
|
@@ -73,7 +73,19 @@ export default function HSliderDetailsMobile(props) {
|
|
|
73
73
|
'& .MuiSlider-thumb:hover': {
|
|
74
74
|
boxShadow: 'none',
|
|
75
75
|
}
|
|
76
|
-
}, size: "small", value: props.clarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onClarityChange("clarityScore", newValue), onDoubleClick: () => props.onClarityChange("clarityScore", 0)
|
|
76
|
+
}, size: "small", value: props.clarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onClarityChange("clarityScore", newValue), onDoubleClick: () => props.onClarityChange("clarityScore", 0), onMouseDown: () => {
|
|
77
|
+
if (!props.isBatchMode) {
|
|
78
|
+
props.onDragStart();
|
|
79
|
+
}
|
|
80
|
+
}, onMouseUp: () => {
|
|
81
|
+
props.onDragEnd();
|
|
82
|
+
}, onTouchStart: () => {
|
|
83
|
+
if (!props.isBatchMode) {
|
|
84
|
+
props.onDragStart();
|
|
85
|
+
}
|
|
86
|
+
}, onTouchEnd: () => {
|
|
87
|
+
props.onDragEnd();
|
|
88
|
+
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Sharpness" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.sharpnessScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSharpnessChange("sharpnessScore", val)), sx: {
|
|
77
89
|
width: "40px",
|
|
78
90
|
alignItems: "center",
|
|
79
91
|
textAlign: "right",
|
|
@@ -126,5 +138,17 @@ export default function HSliderDetailsMobile(props) {
|
|
|
126
138
|
'& .MuiSlider-thumb:hover': {
|
|
127
139
|
boxShadow: 'none',
|
|
128
140
|
}
|
|
129
|
-
}, size: "small", value: props.sharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange("sharpnessScore", newValue), onDoubleClick: () => props.onSharpnessChange("sharpnessScore", 0)
|
|
141
|
+
}, size: "small", value: props.sharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange("sharpnessScore", newValue), onDoubleClick: () => props.onSharpnessChange("sharpnessScore", 0), onMouseDown: () => {
|
|
142
|
+
if (!props.isBatchMode) {
|
|
143
|
+
props.onDragStart();
|
|
144
|
+
}
|
|
145
|
+
}, onMouseUp: () => {
|
|
146
|
+
props.onDragEnd();
|
|
147
|
+
}, onTouchStart: () => {
|
|
148
|
+
if (!props.isBatchMode) {
|
|
149
|
+
props.onDragStart();
|
|
150
|
+
}
|
|
151
|
+
}, onTouchEnd: () => {
|
|
152
|
+
props.onDragEnd();
|
|
153
|
+
} })] }) }));
|
|
130
154
|
}
|
|
@@ -6,12 +6,15 @@ interface Props {
|
|
|
6
6
|
shadowScore: number;
|
|
7
7
|
whiteScore: number;
|
|
8
8
|
blackScore: number;
|
|
9
|
+
isBatchMode: boolean;
|
|
9
10
|
onExposureChange: (field: keyof AdjustmentState, value: number) => void;
|
|
10
11
|
onContrastChange: (field: keyof AdjustmentState, value: number) => void;
|
|
11
12
|
onHighlightsChange: (field: keyof AdjustmentState, value: number) => void;
|
|
12
13
|
onShadowsChange: (field: keyof AdjustmentState, value: number) => void;
|
|
13
14
|
onWhitesChange: (field: keyof AdjustmentState, value: number) => void;
|
|
14
15
|
onBlacksChange: (field: keyof AdjustmentState, value: number) => void;
|
|
16
|
+
onDragStart: () => void;
|
|
17
|
+
onDragEnd: () => void;
|
|
15
18
|
}
|
|
16
19
|
export default function HSliderLightMobile(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
17
20
|
export {};
|
|
@@ -74,7 +74,19 @@ export default function HSliderLightMobile(props) {
|
|
|
74
74
|
'& .MuiSlider-thumb:hover': {
|
|
75
75
|
boxShadow: 'none',
|
|
76
76
|
}
|
|
77
|
-
}, size: "small", value: props.exposureScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange("exposureScore", newValue), onDoubleClick: () => props.onExposureChange("exposureScore", 0)
|
|
77
|
+
}, size: "small", value: props.exposureScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange("exposureScore", newValue), onDoubleClick: () => props.onExposureChange("exposureScore", 0), onMouseDown: () => {
|
|
78
|
+
if (!props.isBatchMode) {
|
|
79
|
+
props.onDragStart();
|
|
80
|
+
}
|
|
81
|
+
}, onMouseUp: () => {
|
|
82
|
+
props.onDragEnd();
|
|
83
|
+
}, onTouchStart: () => {
|
|
84
|
+
if (!props.isBatchMode) {
|
|
85
|
+
props.onDragStart();
|
|
86
|
+
}
|
|
87
|
+
}, onTouchEnd: () => {
|
|
88
|
+
props.onDragEnd();
|
|
89
|
+
} }), _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, { 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: {
|
|
78
90
|
width: "40px",
|
|
79
91
|
alignItems: "center",
|
|
80
92
|
textAlign: "right",
|
|
@@ -128,7 +140,19 @@ export default function HSliderLightMobile(props) {
|
|
|
128
140
|
'& .MuiSlider-thumb:hover': {
|
|
129
141
|
boxShadow: 'none',
|
|
130
142
|
}
|
|
131
|
-
}, size: "small", value: props.contrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange("contrastScore", newValue), onDoubleClick: () => props.onContrastChange("contrastScore", 0)
|
|
143
|
+
}, size: "small", value: props.contrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange("contrastScore", newValue), onDoubleClick: () => props.onContrastChange("contrastScore", 0), onMouseDown: () => {
|
|
144
|
+
if (!props.isBatchMode) {
|
|
145
|
+
props.onDragStart();
|
|
146
|
+
}
|
|
147
|
+
}, onMouseUp: () => {
|
|
148
|
+
props.onDragEnd();
|
|
149
|
+
}, onTouchStart: () => {
|
|
150
|
+
if (!props.isBatchMode) {
|
|
151
|
+
props.onDragStart();
|
|
152
|
+
}
|
|
153
|
+
}, onTouchEnd: () => {
|
|
154
|
+
props.onDragEnd();
|
|
155
|
+
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Highlights" }), _jsx(TextField, { 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: {
|
|
132
156
|
width: "40px",
|
|
133
157
|
alignItems: "center",
|
|
134
158
|
textAlign: "right",
|
|
@@ -182,7 +206,19 @@ export default function HSliderLightMobile(props) {
|
|
|
182
206
|
'& .MuiSlider-thumb:hover': {
|
|
183
207
|
boxShadow: 'none',
|
|
184
208
|
}
|
|
185
|
-
}, size: "small", value: props.highlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange("highlightsScore", newValue), onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0)
|
|
209
|
+
}, size: "small", value: props.highlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange("highlightsScore", newValue), onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0), onMouseDown: () => {
|
|
210
|
+
if (!props.isBatchMode) {
|
|
211
|
+
props.onDragStart();
|
|
212
|
+
}
|
|
213
|
+
}, onMouseUp: () => {
|
|
214
|
+
props.onDragEnd();
|
|
215
|
+
}, onTouchStart: () => {
|
|
216
|
+
if (!props.isBatchMode) {
|
|
217
|
+
props.onDragStart();
|
|
218
|
+
}
|
|
219
|
+
}, onTouchEnd: () => {
|
|
220
|
+
props.onDragEnd();
|
|
221
|
+
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Shadows" }), _jsx(TextField, { 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: {
|
|
186
222
|
width: "40px",
|
|
187
223
|
alignItems: "center",
|
|
188
224
|
textAlign: "right",
|
|
@@ -236,7 +272,19 @@ export default function HSliderLightMobile(props) {
|
|
|
236
272
|
'& .MuiSlider-thumb:hover': {
|
|
237
273
|
boxShadow: 'none',
|
|
238
274
|
}
|
|
239
|
-
}, size: "small", value: props.shadowScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("shadowsScore", newValue), onDoubleClick: () => props.onShadowsChange("shadowsScore", 0)
|
|
275
|
+
}, size: "small", value: props.shadowScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("shadowsScore", newValue), onDoubleClick: () => props.onShadowsChange("shadowsScore", 0), onMouseDown: () => {
|
|
276
|
+
if (!props.isBatchMode) {
|
|
277
|
+
props.onDragStart();
|
|
278
|
+
}
|
|
279
|
+
}, onMouseUp: () => {
|
|
280
|
+
props.onDragEnd();
|
|
281
|
+
}, onTouchStart: () => {
|
|
282
|
+
if (!props.isBatchMode) {
|
|
283
|
+
props.onDragStart();
|
|
284
|
+
}
|
|
285
|
+
}, onTouchEnd: () => {
|
|
286
|
+
props.onDragEnd();
|
|
287
|
+
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Whites" }), _jsx(TextField, { 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: {
|
|
240
288
|
width: "40px",
|
|
241
289
|
alignItems: "center",
|
|
242
290
|
textAlign: "right",
|
|
@@ -290,7 +338,19 @@ export default function HSliderLightMobile(props) {
|
|
|
290
338
|
'& .MuiSlider-thumb:hover': {
|
|
291
339
|
boxShadow: 'none',
|
|
292
340
|
}
|
|
293
|
-
}, size: "small", value: props.whiteScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange("whitesScore", newValue), onDoubleClick: () => props.onWhitesChange("whitesScore", 0)
|
|
341
|
+
}, size: "small", value: props.whiteScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange("whitesScore", newValue), onDoubleClick: () => props.onWhitesChange("whitesScore", 0), onMouseDown: () => {
|
|
342
|
+
if (!props.isBatchMode) {
|
|
343
|
+
props.onDragStart();
|
|
344
|
+
}
|
|
345
|
+
}, onMouseUp: () => {
|
|
346
|
+
props.onDragEnd();
|
|
347
|
+
}, onTouchStart: () => {
|
|
348
|
+
if (!props.isBatchMode) {
|
|
349
|
+
props.onDragStart();
|
|
350
|
+
}
|
|
351
|
+
}, onTouchEnd: () => {
|
|
352
|
+
props.onDragEnd();
|
|
353
|
+
} }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Blacks" }), _jsx(TextField, { 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: {
|
|
294
354
|
width: "40px",
|
|
295
355
|
alignItems: "center",
|
|
296
356
|
textAlign: "right",
|
|
@@ -344,5 +404,17 @@ export default function HSliderLightMobile(props) {
|
|
|
344
404
|
'& .MuiSlider-thumb:hover': {
|
|
345
405
|
boxShadow: 'none',
|
|
346
406
|
}
|
|
347
|
-
}, size: "small", value: props.blackScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange("blacksScore", newValue), onDoubleClick: () => props.onBlacksChange("blacksScore", 0)
|
|
407
|
+
}, size: "small", value: props.blackScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange("blacksScore", newValue), onDoubleClick: () => props.onBlacksChange("blacksScore", 0), onMouseDown: () => {
|
|
408
|
+
if (!props.isBatchMode) {
|
|
409
|
+
props.onDragStart();
|
|
410
|
+
}
|
|
411
|
+
}, onMouseUp: () => {
|
|
412
|
+
props.onDragEnd();
|
|
413
|
+
}, onTouchStart: () => {
|
|
414
|
+
if (!props.isBatchMode) {
|
|
415
|
+
props.onDragStart();
|
|
416
|
+
}
|
|
417
|
+
}, onTouchEnd: () => {
|
|
418
|
+
props.onDragEnd();
|
|
419
|
+
} })] }) }));
|
|
348
420
|
}
|
|
@@ -25,6 +25,9 @@ interface Props {
|
|
|
25
25
|
onContrastChange: (field: keyof AdjustmentState, value: number) => void;
|
|
26
26
|
onClarityChange: (field: keyof AdjustmentState, value: number) => void;
|
|
27
27
|
onSharpnessChange: (field: keyof AdjustmentState, value: number) => void;
|
|
28
|
+
isBatchMode: boolean;
|
|
29
|
+
onDragStart: () => void;
|
|
30
|
+
onDragEnd: () => void;
|
|
28
31
|
}
|
|
29
32
|
export default function HTabColorAdjustmentMobile(props: Props): import("react/jsx-runtime").JSX.Element | null;
|
|
30
33
|
export {};
|
|
@@ -5,11 +5,11 @@ import HSliderDetailsMobile from "./HSliderDetailsMobile";
|
|
|
5
5
|
export default function HTabColorAdjustmentMobile(props) {
|
|
6
6
|
switch (props.activeSubPanel) {
|
|
7
7
|
case 'color':
|
|
8
|
-
return (_jsx(HSliderColorMobile, { tempScore: props.tempScore, tintScore: props.tintScore, onTempChange: props.onTempChange, onTintChange: props.onTintChange, vibranceScore: props.vibranceScore, onVibranceChange: props.onVibranceChange, saturationScore: props.saturationScore, onSaturationChange: props.onSaturationChange }));
|
|
8
|
+
return (_jsx(HSliderColorMobile, { tempScore: props.tempScore, tintScore: props.tintScore, onTempChange: props.onTempChange, onTintChange: props.onTintChange, vibranceScore: props.vibranceScore, onVibranceChange: props.onVibranceChange, saturationScore: props.saturationScore, onSaturationChange: props.onSaturationChange, isBatchMode: props.isBatchMode, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd }));
|
|
9
9
|
case 'light':
|
|
10
|
-
return (_jsx(HSliderLightMobile, { contrastScore: props.contrastScore, exposureScore: props.exposureScore, highlightsScore: props.highlightsScore, shadowScore: props.shadowScore, whiteScore: props.whiteScore, blackScore: props.blackScore, onExposureChange: props.onExposureChange, onContrastChange: props.onContrastChange, onHighlightsChange: props.onHighlightsChange, onShadowsChange: props.onShadowsChange, onWhitesChange: props.onWhitesChange, onBlacksChange: props.onBlacksChange }));
|
|
10
|
+
return (_jsx(HSliderLightMobile, { contrastScore: props.contrastScore, exposureScore: props.exposureScore, highlightsScore: props.highlightsScore, shadowScore: props.shadowScore, whiteScore: props.whiteScore, blackScore: props.blackScore, onExposureChange: props.onExposureChange, onContrastChange: props.onContrastChange, onHighlightsChange: props.onHighlightsChange, onShadowsChange: props.onShadowsChange, onWhitesChange: props.onWhitesChange, onBlacksChange: props.onBlacksChange, isBatchMode: props.isBatchMode, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd }));
|
|
11
11
|
case 'details':
|
|
12
|
-
return (_jsx(HSliderDetailsMobile, { clarityScore: props.clarityScore, sharpnessScore: props.sharpnessScore, onClarityChange: props.onClarityChange, onSharpnessChange: props.onSharpnessChange }));
|
|
12
|
+
return (_jsx(HSliderDetailsMobile, { clarityScore: props.clarityScore, sharpnessScore: props.sharpnessScore, onClarityChange: props.onClarityChange, onSharpnessChange: props.onSharpnessChange, isBatchMode: props.isBatchMode, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd }));
|
|
13
13
|
default:
|
|
14
14
|
return null;
|
|
15
15
|
}
|