@yogiswara/honcho-editor-ui 2.6.5 → 2.6.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.
- package/dist/components/editor/HAccordionColor.d.ts +5 -4
- package/dist/components/editor/HAccordionColor.js +5 -5
- package/dist/components/editor/HAccordionColorAdjustment.d.ts +13 -12
- package/dist/components/editor/HAccordionDetails.d.ts +3 -2
- package/dist/components/editor/HAccordionDetails.js +3 -3
- package/dist/components/editor/HAccordionLight.d.ts +7 -6
- package/dist/components/editor/HAccordionLight.js +7 -7
- package/dist/components/editor/HAccordionPreset.js +30 -30
- package/dist/components/editor/HImageEditorMobile.d.ts +13 -12
- package/dist/components/editor/HSliderColorMobile.d.ts +5 -4
- package/dist/components/editor/HSliderColorMobile.js +5 -5
- package/dist/components/editor/HSliderDetailsMobile.d.ts +3 -2
- package/dist/components/editor/HSliderDetailsMobile.js +3 -3
- package/dist/components/editor/HSliderLightMobile.d.ts +7 -6
- package/dist/components/editor/HSliderLightMobile.js +7 -7
- package/dist/components/editor/HTabColorAdjustmentMobile.d.ts +13 -12
- package/dist/hooks/demo/HonchoEditorBulkDemo.js +47 -12
- package/dist/hooks/demo/HonchoEditorSingleCleanDemo.js +1 -1
- package/dist/hooks/editor/type.d.ts +1 -1
- package/dist/hooks/editor/useHonchoEditorBulk.d.ts +15 -1
- package/dist/hooks/editor/useHonchoEditorBulk.js +88 -15
- package/dist/hooks/editor/useHonchoEditorSingle.d.ts +2 -1
- package/dist/hooks/editor/useHonchoEditorSingle.js +7 -3
- package/dist/hooks/useAdjustmentHistoryBatch.d.ts +2 -0
- package/dist/hooks/useAdjustmentHistoryBatch.js +478 -206
- package/dist/hooks/usePreset.js +35 -23
- package/package.json +1 -1
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
import { AdjustmentState } from '../../hooks/editor/type';
|
|
1
2
|
interface Props {
|
|
2
3
|
TempScore: number;
|
|
3
4
|
TintScore: number;
|
|
4
5
|
SaturationScore: number;
|
|
5
6
|
VibranceScore: number;
|
|
6
|
-
onTempChange: (value: number) => void;
|
|
7
|
-
onTintChange: (value: number) => void;
|
|
8
|
-
onSaturationChange: (value: number) => void;
|
|
9
|
-
onVibranceChange: (value: number) => void;
|
|
7
|
+
onTempChange: (field: keyof AdjustmentState, value: number) => void;
|
|
8
|
+
onTintChange: (field: keyof AdjustmentState, value: number) => void;
|
|
9
|
+
onSaturationChange: (field: keyof AdjustmentState, value: number) => void;
|
|
10
|
+
onVibranceChange: (field: keyof AdjustmentState, value: number) => void;
|
|
10
11
|
}
|
|
11
12
|
export default function HAccordionColor(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
12
13
|
export {};
|
|
@@ -42,7 +42,7 @@ export default function HAccordionColor(props) {
|
|
|
42
42
|
const clampedValue = Math.max(min, Math.min(max, numericValue));
|
|
43
43
|
onChange(clampedValue);
|
|
44
44
|
};
|
|
45
|
-
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: "temperature-input", onDoubleClick: () => props.onTempChange(0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Temperature" }), _jsx(TextField, { hiddenLabel: true, id: "temperature-input", value: formatValue(props.TempScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onTempChange), className: "control-label", sx: {
|
|
45
|
+
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: "temperature-input", onDoubleClick: () => props.onTempChange("tempScore", 0), sx: { ...typography.bodyMedium, userSelect: 'none' }, children: "Temperature" }), _jsx(TextField, { hiddenLabel: true, id: "temperature-input", value: formatValue(props.TempScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTempChange("tempScore", val)), className: "control-label", sx: {
|
|
46
46
|
width: "40px",
|
|
47
47
|
height: "10px",
|
|
48
48
|
alignItems: "center",
|
|
@@ -89,7 +89,7 @@ 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(newValue), onDoubleClick: () => props.onTempChange(0) })] }), _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(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, props.onTintChange), sx: {
|
|
92
|
+
}, size: "small", value: props.TempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTempChange("tempScore", newValue), onDoubleClick: () => props.onTempChange("tempScore", 0) })] }), _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
93
|
width: "40px",
|
|
94
94
|
height: "10px",
|
|
95
95
|
alignItems: "center",
|
|
@@ -136,7 +136,7 @@ export default function HAccordionColor(props) {
|
|
|
136
136
|
'& .MuiSlider-thumb:hover': {
|
|
137
137
|
boxShadow: 'none',
|
|
138
138
|
},
|
|
139
|
-
}, size: "small", value: props.TintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange(newValue), onDoubleClick: () => props.onTintChange(0) })] }), _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(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, props.onVibranceChange), sx: {
|
|
139
|
+
}, size: "small", value: props.TintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange("tintScore", newValue), onDoubleClick: () => props.onTintChange("tintScore", 0) })] }), _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
140
|
width: "40px",
|
|
141
141
|
height: "10px",
|
|
142
142
|
alignItems: "center",
|
|
@@ -183,7 +183,7 @@ export default function HAccordionColor(props) {
|
|
|
183
183
|
'& .MuiSlider-thumb:hover': {
|
|
184
184
|
boxShadow: 'none',
|
|
185
185
|
},
|
|
186
|
-
}, size: "small", value: props.VibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange(newValue), onDoubleClick: () => props.onVibranceChange(0) })] }), _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(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, props.onSaturationChange), sx: {
|
|
186
|
+
}, size: "small", value: props.VibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange("vibranceScore", newValue), onDoubleClick: () => props.onVibranceChange("vibranceScore", 0) })] }), _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
187
|
width: "40px",
|
|
188
188
|
height: "10px",
|
|
189
189
|
alignItems: "center",
|
|
@@ -230,5 +230,5 @@ export default function HAccordionColor(props) {
|
|
|
230
230
|
'& .MuiSlider-thumb:hover': {
|
|
231
231
|
boxShadow: 'none',
|
|
232
232
|
},
|
|
233
|
-
}, size: "small", value: props.SaturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange(newValue), onDoubleClick: () => props.onSaturationChange(0) })] })] }) }));
|
|
233
|
+
}, size: "small", value: props.SaturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange("saturationScore", newValue), onDoubleClick: () => props.onSaturationChange("saturationScore", 0) })] })] }) }));
|
|
234
234
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { AdjustmentState } from '../../hooks/editor/type';
|
|
2
3
|
interface Props {
|
|
3
4
|
tempScore: number;
|
|
4
5
|
tintScore: number;
|
|
@@ -13,18 +14,18 @@ interface Props {
|
|
|
13
14
|
clarityScore: number;
|
|
14
15
|
sharpnessScore: number;
|
|
15
16
|
expandedPanels: string[];
|
|
16
|
-
setTempScore: (value: number) => void;
|
|
17
|
-
setTintScore: (value: number) => void;
|
|
18
|
-
setExposureScore: (value: number) => void;
|
|
19
|
-
setVibranceScore: (value: number) => void;
|
|
20
|
-
setSaturationScore: (value: number) => void;
|
|
21
|
-
setHighlightsScore: (value: number) => void;
|
|
22
|
-
setShadowsScore: (value: number) => void;
|
|
23
|
-
setWhitesScore: (value: number) => void;
|
|
24
|
-
setBlacksScore: (value: number) => void;
|
|
25
|
-
setContrastScore: (value: number) => void;
|
|
26
|
-
setClarityScore: (value: number) => void;
|
|
27
|
-
setSharpnessScore: (value: number) => void;
|
|
17
|
+
setTempScore: (field: keyof AdjustmentState, value: number) => void;
|
|
18
|
+
setTintScore: (field: keyof AdjustmentState, value: number) => void;
|
|
19
|
+
setExposureScore: (field: keyof AdjustmentState, value: number) => void;
|
|
20
|
+
setVibranceScore: (field: keyof AdjustmentState, value: number) => void;
|
|
21
|
+
setSaturationScore: (field: keyof AdjustmentState, value: number) => void;
|
|
22
|
+
setHighlightsScore: (field: keyof AdjustmentState, value: number) => void;
|
|
23
|
+
setShadowsScore: (field: keyof AdjustmentState, value: number) => void;
|
|
24
|
+
setWhitesScore: (field: keyof AdjustmentState, value: number) => void;
|
|
25
|
+
setBlacksScore: (field: keyof AdjustmentState, value: number) => void;
|
|
26
|
+
setContrastScore: (field: keyof AdjustmentState, value: number) => void;
|
|
27
|
+
setClarityScore: (field: keyof AdjustmentState, value: number) => void;
|
|
28
|
+
setSharpnessScore: (field: keyof AdjustmentState, value: number) => void;
|
|
28
29
|
onPanelChange: (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => void;
|
|
29
30
|
}
|
|
30
31
|
export default function HAccordionColorAdjustment(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import { AdjustmentState } from '../../hooks/editor/type';
|
|
1
2
|
interface Props {
|
|
2
3
|
ClarityScore: number;
|
|
3
4
|
SharpnessScore: number;
|
|
4
|
-
onClarityChange: (value: number) => void;
|
|
5
|
-
onSharpnessChange: (value: number) => void;
|
|
5
|
+
onClarityChange: (field: keyof AdjustmentState, value: number) => void;
|
|
6
|
+
onSharpnessChange: (field: keyof AdjustmentState, value: number) => void;
|
|
6
7
|
}
|
|
7
8
|
export default function HAccordionDetails(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
8
9
|
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", onDoubleClick: () => props.onClarityChange(0), 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, props.onClarityChange), sx: {
|
|
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", onDoubleClick: () => props.onClarityChange("clarityScore", 0), 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,7 @@ 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(newValue), onDoubleClick: () => props.onClarityChange(0) })] }), _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", onDoubleClick: () => props.onSharpnessChange(0), 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, props.onSharpnessChange), sx: {
|
|
80
|
+
}, size: "small", value: props.ClarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onClarityChange("clarityScore", newValue), onDoubleClick: () => props.onClarityChange("clarityScore", 0) })] }), _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", onDoubleClick: () => props.onSharpnessChange("sharpnessScore", 0), 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
81
|
width: "40px",
|
|
82
82
|
height: "10px",
|
|
83
83
|
alignItems: "center",
|
|
@@ -129,5 +129,5 @@ export default function HAccordionDetails(props) {
|
|
|
129
129
|
opacity: 1,
|
|
130
130
|
boxShadow: 'none',
|
|
131
131
|
},
|
|
132
|
-
}, size: "small", value: props.SharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange(newValue), onDoubleClick: () => props.onSharpnessChange(0) })] })] }) }));
|
|
132
|
+
}, size: "small", value: props.SharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange("sharpnessScore", newValue), onDoubleClick: () => props.onSharpnessChange("sharpnessScore", 0) })] })] }) }));
|
|
133
133
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { AdjustmentState } from '../../hooks/editor/type';
|
|
1
2
|
interface Props {
|
|
2
3
|
ExposureScore: number;
|
|
3
4
|
ContrastScore: number;
|
|
@@ -5,12 +6,12 @@ interface Props {
|
|
|
5
6
|
ShadowsScore: number;
|
|
6
7
|
WhitesScore: number;
|
|
7
8
|
BlacksScore: number;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
onHighlightsChange: (value: number) => void;
|
|
11
|
-
onShadowsChange: (value: number) => void;
|
|
12
|
-
onWhitesChange: (value: number) => void;
|
|
13
|
-
onBlacksChange: (value: number) => void;
|
|
9
|
+
onExposureChange: (field: keyof AdjustmentState, value: number) => void;
|
|
10
|
+
onContrastChange: (field: keyof AdjustmentState, value: number) => void;
|
|
11
|
+
onHighlightsChange: (field: keyof AdjustmentState, value: number) => void;
|
|
12
|
+
onShadowsChange: (field: keyof AdjustmentState, value: number) => void;
|
|
13
|
+
onWhitesChange: (field: keyof AdjustmentState, value: number) => void;
|
|
14
|
+
onBlacksChange: (field: keyof AdjustmentState, value: number) => void;
|
|
14
15
|
}
|
|
15
16
|
export default function HAccordionLight(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
16
17
|
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", onDoubleClick: () => props.onExposureChange(0), 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, props.onExposureChange), sx: {
|
|
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", onDoubleClick: () => props.onExposureChange("exposureScore", 0), 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,7 @@ 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(newValue), onDoubleClick: () => props.onExposureChange(0) })] }), _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", onDoubleClick: () => props.onContrastChange(0), 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, props.onContrastChange), sx: {
|
|
81
|
+
}, 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: "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", onDoubleClick: () => props.onContrastChange("contrastScore", 0), 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
82
|
width: "40px",
|
|
83
83
|
height: "10px",
|
|
84
84
|
alignItems: "center",
|
|
@@ -130,7 +130,7 @@ export default function HAccordionLight(props) {
|
|
|
130
130
|
opacity: 1,
|
|
131
131
|
boxShadow: 'none',
|
|
132
132
|
}
|
|
133
|
-
}, size: "small", value: props.ContrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange(newValue), onDoubleClick: () => props.onContrastChange(0) })] }), _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", onDoubleClick: () => props.onHighlightsChange(0), 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, props.onHighlightsChange), sx: {
|
|
133
|
+
}, 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: "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", onDoubleClick: () => props.onHighlightsChange("highlightsScore", 0), 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
134
|
width: "40px",
|
|
135
135
|
height: "10px",
|
|
136
136
|
alignItems: "center",
|
|
@@ -182,7 +182,7 @@ export default function HAccordionLight(props) {
|
|
|
182
182
|
opacity: 1,
|
|
183
183
|
boxShadow: 'none',
|
|
184
184
|
}
|
|
185
|
-
}, size: "small", value: props.HighlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange(newValue), onDoubleClick: () => props.onHighlightsChange(0) })] }), _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", onDoubleClick: () => props.onShadowsChange(0), 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, props.onShadowsChange), sx: {
|
|
185
|
+
}, 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: "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", onDoubleClick: () => props.onShadowsChange("shadowsScore", 0), 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
186
|
width: "40px",
|
|
187
187
|
height: "10px",
|
|
188
188
|
alignItems: "center",
|
|
@@ -234,7 +234,7 @@ export default function HAccordionLight(props) {
|
|
|
234
234
|
opacity: 1,
|
|
235
235
|
boxShadow: 'none',
|
|
236
236
|
}
|
|
237
|
-
}, size: "small", value: props.ShadowsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange(newValue), onDoubleClick: () => props.onShadowsChange(0) })] }), _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", onDoubleClick: () => props.onWhitesChange(0), 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, props.onWhitesChange), sx: {
|
|
237
|
+
}, size: "small", value: props.ShadowsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("shadowsScore", newValue), onDoubleClick: () => props.onShadowsChange("shadowsScore", 0) })] }), _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", onDoubleClick: () => props.onWhitesChange("whitesScore", 0), 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
238
|
width: "40px",
|
|
239
239
|
height: "10px",
|
|
240
240
|
alignItems: "center",
|
|
@@ -286,7 +286,7 @@ export default function HAccordionLight(props) {
|
|
|
286
286
|
opacity: 1,
|
|
287
287
|
boxShadow: 'none',
|
|
288
288
|
}
|
|
289
|
-
}, size: "small", value: props.WhitesScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange(newValue), onDoubleClick: () => props.onWhitesChange(0) })] }), _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", onDoubleClick: () => props.onBlacksChange(0), 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, props.onBlacksChange), sx: {
|
|
289
|
+
}, size: "small", value: props.WhitesScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange("whitesScore", newValue), onDoubleClick: () => props.onWhitesChange("whitesScore", 0) })] }), _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", onDoubleClick: () => props.onBlacksChange("blacksScore", 0), 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
290
|
width: "40px",
|
|
291
291
|
height: "10px",
|
|
292
292
|
alignItems: "center",
|
|
@@ -338,5 +338,5 @@ export default function HAccordionLight(props) {
|
|
|
338
338
|
opacity: 1,
|
|
339
339
|
boxShadow: 'none',
|
|
340
340
|
}
|
|
341
|
-
}, size: "small", value: props.BlacksScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange(newValue), onDoubleClick: () => props.onBlacksChange(0) })] })] }) }));
|
|
341
|
+
}, size: "small", value: props.BlacksScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange("blacksScore", newValue), onDoubleClick: () => props.onBlacksChange("blacksScore", 0) })] })] }) }));
|
|
342
342
|
}
|
|
@@ -26,34 +26,34 @@ export default function HAccordionPreset(props) {
|
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
28
|
const isPanelExpanded = (panelName) => props.expandedPanels.includes(panelName);
|
|
29
|
-
return (_jsx(_Fragment, { children:
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
29
|
+
return (_jsx(_Fragment, { children: _jsx(Box, { children: _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('preset'), onChange: props.onChange('preset'), 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, color: colors.surface }, children: "Preset" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('preset') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsxs(Stack, { direction: "column", gap: "8px", sx: { pt: '0px', pb: '0px', mx: '0px', width: '100%' }, children: [props.presets.map((preset) => (_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [props.selectedPreset != preset.id && (_jsx(Button, { sx: {
|
|
30
|
+
width: '100px',
|
|
31
|
+
textWrap: 'nowrap',
|
|
32
|
+
overflow: 'hidden',
|
|
33
|
+
textOverflow: 'ellipsis',
|
|
34
|
+
display: 'block',
|
|
35
|
+
textTransform: 'none',
|
|
36
|
+
color: colors.surface,
|
|
37
|
+
pr: "120px",
|
|
38
|
+
pl: "0px",
|
|
39
|
+
ml: "0px",
|
|
40
|
+
justifyContent: 'flex-start',
|
|
41
|
+
...typography.bodyMedium
|
|
42
|
+
}, onClick: () => props.onSelectPreset(preset.id), children: preset.name })), props.selectedPreset === preset.id && (_jsx(Button, { sx: {
|
|
43
|
+
width: '84px',
|
|
44
|
+
textWrap: 'nowrap',
|
|
45
|
+
overflow: 'hidden',
|
|
46
|
+
textOverflow: 'ellipsis',
|
|
47
|
+
display: 'block',
|
|
48
|
+
color: colors.surface,
|
|
49
|
+
pr: "82px",
|
|
50
|
+
pl: "0px",
|
|
51
|
+
ml: "0px",
|
|
52
|
+
justifyContent: 'flex-start',
|
|
53
|
+
...typography.bodyMedium
|
|
54
|
+
}, onClick: () => props.onSelectPreset(preset.id), children: preset.name })), _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [props.selectedPreset === preset.id && (_jsx(CardMedia, { component: "img", image: "v1/svg/check-ratio-editor.svg", sx: { width: "20px", height: "20px" } })), _jsx(IconButton, { "aria-label": preset.name, onClick: (event) => props.onPresetMenuClick(event, preset.id), sx: { padding: "0px", margin: "0px" }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options", sx: { padding: "0px", margin: "0px" } }) })] })] }, preset.id))), _jsx(Button, { variant: "text", sx: { color: colors.surface, border: "1px solid",
|
|
55
|
+
borderColor: colors.surface,
|
|
56
|
+
borderRadius: "40px",
|
|
57
|
+
textTransform: 'none',
|
|
58
|
+
}, onClick: props.onOpenPresetModal, children: "Create Preset" })] }) })] }) }) }));
|
|
59
59
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { AdjustmentState } from '../../hooks/editor/type';
|
|
2
3
|
type Preset = {
|
|
3
4
|
id: string;
|
|
4
5
|
name: string;
|
|
@@ -26,18 +27,18 @@ interface Props {
|
|
|
26
27
|
contrastScore: number;
|
|
27
28
|
clarityScore: number;
|
|
28
29
|
sharpnessScore: number;
|
|
29
|
-
onTempChange: (value: number) => void;
|
|
30
|
-
onTintChange: (value: number) => void;
|
|
31
|
-
onVibranceChange: (value: number) => void;
|
|
32
|
-
onSaturationChange: (value: number) => void;
|
|
33
|
-
onExposureChange: (value: number) => void;
|
|
34
|
-
onHighlightsChange: (value: number) => void;
|
|
35
|
-
onShadowsChange: (value: number) => void;
|
|
36
|
-
onWhitesChange: (value: number) => void;
|
|
37
|
-
onBlacksChange: (value: number) => void;
|
|
38
|
-
onContrastChange: (value: number) => void;
|
|
39
|
-
onClarityChange: (value: number) => void;
|
|
40
|
-
onSharpnessChange: (value: number) => void;
|
|
30
|
+
onTempChange: (field: keyof AdjustmentState, value: number) => void;
|
|
31
|
+
onTintChange: (field: keyof AdjustmentState, value: number) => void;
|
|
32
|
+
onVibranceChange: (field: keyof AdjustmentState, value: number) => void;
|
|
33
|
+
onSaturationChange: (field: keyof AdjustmentState, value: number) => void;
|
|
34
|
+
onExposureChange: (field: keyof AdjustmentState, value: number) => void;
|
|
35
|
+
onHighlightsChange: (field: keyof AdjustmentState, value: number) => void;
|
|
36
|
+
onShadowsChange: (field: keyof AdjustmentState, value: number) => void;
|
|
37
|
+
onWhitesChange: (field: keyof AdjustmentState, value: number) => void;
|
|
38
|
+
onBlacksChange: (field: keyof AdjustmentState, value: number) => void;
|
|
39
|
+
onContrastChange: (field: keyof AdjustmentState, value: number) => void;
|
|
40
|
+
onClarityChange: (field: keyof AdjustmentState, value: number) => void;
|
|
41
|
+
onSharpnessChange: (field: keyof AdjustmentState, value: number) => void;
|
|
41
42
|
selectedPreset: string | null;
|
|
42
43
|
onSelectPreset: (id: string) => void;
|
|
43
44
|
onOpenPresetModal: () => void;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
import { AdjustmentState } from '../../hooks/editor/type';
|
|
1
2
|
interface Props {
|
|
2
3
|
tempScore: number;
|
|
3
4
|
tintScore: number;
|
|
4
5
|
saturationScore: number;
|
|
5
6
|
vibranceScore: number;
|
|
6
|
-
onTempChange: (value: number) => void;
|
|
7
|
-
onTintChange: (value: number) => void;
|
|
8
|
-
onVibranceChange: (value: number) => void;
|
|
9
|
-
onSaturationChange: (value: number) => void;
|
|
7
|
+
onTempChange: (field: keyof AdjustmentState, value: number) => void;
|
|
8
|
+
onTintChange: (field: keyof AdjustmentState, value: number) => void;
|
|
9
|
+
onVibranceChange: (field: keyof AdjustmentState, value: number) => void;
|
|
10
|
+
onSaturationChange: (field: keyof AdjustmentState, value: number) => void;
|
|
10
11
|
}
|
|
11
12
|
export default function HSliderColorMobile(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
12
13
|
export {};
|
|
@@ -42,7 +42,7 @@ export default function HSliderColorMobile(props) {
|
|
|
42
42
|
const clampedValue = Math.max(min, Math.min(max, numericValue));
|
|
43
43
|
onChange(clampedValue);
|
|
44
44
|
};
|
|
45
|
-
return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1, m: "0px" }, children: [_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: "Temperature" }), _jsx(TextField, { hiddenLabel: true, id: "temperature-input", value: formatValue(props.tempScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onTempChange), sx: {
|
|
45
|
+
return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1, m: "0px" }, children: [_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: "Temperature" }), _jsx(TextField, { hiddenLabel: true, id: "temperature-input", value: formatValue(props.tempScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onTempChange("tempScore", val)), sx: {
|
|
46
46
|
width: "40px",
|
|
47
47
|
alignItems: "center",
|
|
48
48
|
textAlign: "right",
|
|
@@ -86,7 +86,7 @@ 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(newValue), onDoubleClick: () => props.onTempChange(0) }), _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, props.onTintChange), sx: {
|
|
89
|
+
}, size: "small", value: props.tempScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTempChange("tempScore", newValue), onDoubleClick: () => props.onTempChange("tempScore", 0) }), _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
90
|
width: "40px",
|
|
91
91
|
alignItems: "center",
|
|
92
92
|
textAlign: "right",
|
|
@@ -130,7 +130,7 @@ export default function HSliderColorMobile(props) {
|
|
|
130
130
|
'& .MuiSlider-thumb': {
|
|
131
131
|
boxShadow: 'none',
|
|
132
132
|
}
|
|
133
|
-
}, size: "small", value: props.tintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange(newValue), onDoubleClick: () => props.onTintChange(0) }), _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, props.onVibranceChange), sx: {
|
|
133
|
+
}, size: "small", value: props.tintScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onTintChange("tintScore", newValue), onDoubleClick: () => props.onTintChange("tintScore", 0) }), _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
134
|
width: "40px",
|
|
135
135
|
alignItems: "center",
|
|
136
136
|
textAlign: "right",
|
|
@@ -174,7 +174,7 @@ export default function HSliderColorMobile(props) {
|
|
|
174
174
|
'& .MuiSlider-thumb': {
|
|
175
175
|
boxShadow: 'none',
|
|
176
176
|
}
|
|
177
|
-
}, size: "small", value: props.vibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange(newValue), onDoubleClick: () => props.onVibranceChange(0) }), _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, props.onSaturationChange), sx: {
|
|
177
|
+
}, size: "small", value: props.vibranceScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onVibranceChange("vibranceScore", newValue), onDoubleClick: () => props.onVibranceChange("vibranceScore", 0) }), _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
178
|
width: "40px",
|
|
179
179
|
alignItems: "center",
|
|
180
180
|
textAlign: "right",
|
|
@@ -218,5 +218,5 @@ export default function HSliderColorMobile(props) {
|
|
|
218
218
|
'& .MuiSlider-thumb': {
|
|
219
219
|
boxShadow: 'none',
|
|
220
220
|
}
|
|
221
|
-
}, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange(newValue), onDoubleClick: () => props.onSaturationChange(0) })] }) }));
|
|
221
|
+
}, size: "small", value: props.saturationScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSaturationChange("saturationScore", newValue), onDoubleClick: () => props.onSaturationChange("saturationScore", 0) })] }) }));
|
|
222
222
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import { AdjustmentState } from '../../hooks/editor/type';
|
|
1
2
|
interface Props {
|
|
2
3
|
clarityScore: number;
|
|
3
4
|
sharpnessScore: number;
|
|
4
|
-
onClarityChange: (value: number) => void;
|
|
5
|
-
onSharpnessChange: (value: number) => void;
|
|
5
|
+
onClarityChange: (field: keyof AdjustmentState, value: number) => void;
|
|
6
|
+
onSharpnessChange: (field: keyof AdjustmentState, value: number) => void;
|
|
6
7
|
}
|
|
7
8
|
export default function HSliderDetailsMobile(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
8
9
|
export {};
|
|
@@ -20,7 +20,7 @@ export default function HSliderDetailsMobile(props) {
|
|
|
20
20
|
const clampedValue = Math.max(min, Math.min(max, numericValue));
|
|
21
21
|
onChange(clampedValue);
|
|
22
22
|
};
|
|
23
|
-
return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1 }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Clarity" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.clarityScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onClarityChange), sx: {
|
|
23
|
+
return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1 }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Clarity" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.clarityScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onClarityChange("clarityScore", val)), sx: {
|
|
24
24
|
width: "40px",
|
|
25
25
|
alignItems: "center",
|
|
26
26
|
textAlign: "right",
|
|
@@ -73,7 +73,7 @@ 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(newValue), onDoubleClick: () => props.onClarityChange(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: "Sharpness" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.sharpnessScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onSharpnessChange), sx: {
|
|
76
|
+
}, size: "small", value: props.clarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onClarityChange("clarityScore", newValue), onDoubleClick: () => props.onClarityChange("clarityScore", 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: "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
77
|
width: "40px",
|
|
78
78
|
alignItems: "center",
|
|
79
79
|
textAlign: "right",
|
|
@@ -126,5 +126,5 @@ export default function HSliderDetailsMobile(props) {
|
|
|
126
126
|
'& .MuiSlider-thumb:hover': {
|
|
127
127
|
boxShadow: 'none',
|
|
128
128
|
}
|
|
129
|
-
}, size: "small", value: props.sharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange(newValue), onDoubleClick: () => props.onSharpnessChange(0) })] }) }));
|
|
129
|
+
}, size: "small", value: props.sharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange("sharpnessScore", newValue), onDoubleClick: () => props.onSharpnessChange("sharpnessScore", 0) })] }) }));
|
|
130
130
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { AdjustmentState } from '../../hooks/editor/type';
|
|
1
2
|
interface Props {
|
|
2
3
|
exposureScore: number;
|
|
3
4
|
contrastScore: number;
|
|
@@ -5,12 +6,12 @@ interface Props {
|
|
|
5
6
|
shadowScore: number;
|
|
6
7
|
whiteScore: number;
|
|
7
8
|
blackScore: number;
|
|
8
|
-
onExposureChange: (value: number) => void;
|
|
9
|
-
onContrastChange: (value: number) => void;
|
|
10
|
-
onHighlightsChange: (value: number) => void;
|
|
11
|
-
onShadowsChange: (value: number) => void;
|
|
12
|
-
onWhitesChange: (value: number) => void;
|
|
13
|
-
onBlacksChange: (value: number) => void;
|
|
9
|
+
onExposureChange: (field: keyof AdjustmentState, value: number) => void;
|
|
10
|
+
onContrastChange: (field: keyof AdjustmentState, value: number) => void;
|
|
11
|
+
onHighlightsChange: (field: keyof AdjustmentState, value: number) => void;
|
|
12
|
+
onShadowsChange: (field: keyof AdjustmentState, value: number) => void;
|
|
13
|
+
onWhitesChange: (field: keyof AdjustmentState, value: number) => void;
|
|
14
|
+
onBlacksChange: (field: keyof AdjustmentState, value: number) => void;
|
|
14
15
|
}
|
|
15
16
|
export default function HSliderLightMobile(props: Props): import("react/jsx-runtime").JSX.Element;
|
|
16
17
|
export {};
|
|
@@ -20,7 +20,7 @@ export default function HSliderLightMobile(props) {
|
|
|
20
20
|
const clampedValue = Math.max(min, Math.min(max, numericValue));
|
|
21
21
|
onChange(clampedValue);
|
|
22
22
|
};
|
|
23
|
-
return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1 }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Exposure" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.exposureScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onExposureChange), sx: {
|
|
23
|
+
return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1 }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Exposure" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.exposureScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onExposureChange("exposureScore", val)), sx: {
|
|
24
24
|
width: "40px",
|
|
25
25
|
alignItems: "center",
|
|
26
26
|
textAlign: "right",
|
|
@@ -74,7 +74,7 @@ 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(newValue), onDoubleClick: () => props.onExposureChange(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(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.contrastScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onContrastChange), sx: {
|
|
77
|
+
}, 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(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
78
|
width: "40px",
|
|
79
79
|
alignItems: "center",
|
|
80
80
|
textAlign: "right",
|
|
@@ -128,7 +128,7 @@ export default function HSliderLightMobile(props) {
|
|
|
128
128
|
'& .MuiSlider-thumb:hover': {
|
|
129
129
|
boxShadow: 'none',
|
|
130
130
|
}
|
|
131
|
-
}, size: "small", value: props.contrastScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onContrastChange(newValue), onDoubleClick: () => props.onContrastChange(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: "Highlights" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.highlightsScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onHighlightsChange), sx: {
|
|
131
|
+
}, 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 }, 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
132
|
width: "40px",
|
|
133
133
|
alignItems: "center",
|
|
134
134
|
textAlign: "right",
|
|
@@ -182,7 +182,7 @@ export default function HSliderLightMobile(props) {
|
|
|
182
182
|
'& .MuiSlider-thumb:hover': {
|
|
183
183
|
boxShadow: 'none',
|
|
184
184
|
}
|
|
185
|
-
}, size: "small", value: props.highlightsScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onHighlightsChange(newValue), onDoubleClick: () => props.onHighlightsChange(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: "Shadows" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.shadowScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onShadowsChange), sx: {
|
|
185
|
+
}, 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 }, 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("sharpnessScore", val)), sx: {
|
|
186
186
|
width: "40px",
|
|
187
187
|
alignItems: "center",
|
|
188
188
|
textAlign: "right",
|
|
@@ -236,7 +236,7 @@ export default function HSliderLightMobile(props) {
|
|
|
236
236
|
'& .MuiSlider-thumb:hover': {
|
|
237
237
|
boxShadow: 'none',
|
|
238
238
|
}
|
|
239
|
-
}, size: "small", value: props.shadowScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange(newValue), onDoubleClick: () => props.onShadowsChange(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: "Whites" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.whiteScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onWhitesChange), sx: {
|
|
239
|
+
}, size: "small", value: props.shadowScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onShadowsChange("sharpnessScore", newValue), onDoubleClick: () => props.onShadowsChange("sharpnessScore", 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: "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
240
|
width: "40px",
|
|
241
241
|
alignItems: "center",
|
|
242
242
|
textAlign: "right",
|
|
@@ -290,7 +290,7 @@ export default function HSliderLightMobile(props) {
|
|
|
290
290
|
'& .MuiSlider-thumb:hover': {
|
|
291
291
|
boxShadow: 'none',
|
|
292
292
|
}
|
|
293
|
-
}, size: "small", value: props.whiteScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onWhitesChange(newValue), onDoubleClick: () => props.onWhitesChange(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: "Blacks" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.blackScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onBlacksChange), sx: {
|
|
293
|
+
}, 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 }, 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
294
|
width: "40px",
|
|
295
295
|
alignItems: "center",
|
|
296
296
|
textAlign: "right",
|
|
@@ -344,5 +344,5 @@ export default function HSliderLightMobile(props) {
|
|
|
344
344
|
'& .MuiSlider-thumb:hover': {
|
|
345
345
|
boxShadow: 'none',
|
|
346
346
|
}
|
|
347
|
-
}, size: "small", value: props.blackScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange(newValue), onDoubleClick: () => props.onBlacksChange(0) })] }) }));
|
|
347
|
+
}, size: "small", value: props.blackScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onBlacksChange("blacksScore", newValue), onDoubleClick: () => props.onBlacksChange("blacksScore", 0) })] }) }));
|
|
348
348
|
}
|