基本完成Q Scheme的Builder功能。
This commit is contained in:
徐涛
parent
92229b0de4
commit
b124bb4eda
37
src/page-components/scheme/q-scheme/Builder.module.css
Normal file
37
src/page-components/scheme/q-scheme/Builder.module.css
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
@layer pages {
|
||||
.builder_layout {
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
font-size: var(--font-size-s);
|
||||
line-height: 1.3em;
|
||||
display: grid;
|
||||
grid-template-columns: 200px 200px 200px;
|
||||
gap: var(--spacing-xs);
|
||||
.label {
|
||||
max-width: 200px;
|
||||
grid-column: 1;
|
||||
padding-inline-end: var(--spacing-m);
|
||||
text-align: right;
|
||||
}
|
||||
.color_picker_row {
|
||||
grid-column: 2 / span 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-s);
|
||||
.error_msg {
|
||||
color: var(--color-danger);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
}
|
||||
.segment_title {
|
||||
grid-column: 1 / span 2;
|
||||
text-align: center;
|
||||
}
|
||||
.parameter_input {
|
||||
max-width: 8em;
|
||||
}
|
||||
h5 {
|
||||
font-size: var(--font-size-m);
|
||||
line-height: 1.7em;
|
||||
}
|
||||
}
|
||||
}
|
||||
378
src/page-components/scheme/q-scheme/Builder.tsx
Normal file
378
src/page-components/scheme/q-scheme/Builder.tsx
Normal file
|
|
@ -0,0 +1,378 @@
|
|||
import { every, isEmpty, isNil } from 'lodash-es';
|
||||
import { useActionState, useMemo } from 'react';
|
||||
import {
|
||||
ColorExpand,
|
||||
ColorShifting,
|
||||
SchemeSetting,
|
||||
WACGSetting,
|
||||
} from '../../../color_functions/color_module';
|
||||
import { useColorFunction } from '../../../ColorFunctionContext';
|
||||
import { FloatColorPicker } from '../../../components/FloatcolorPicker';
|
||||
import { ScrollArea } from '../../../components/ScrollArea';
|
||||
import { VSegmentedControl } from '../../../components/VSegmentedControl';
|
||||
import { SchemeContent } from '../../../models';
|
||||
import { QSchemeSource, QSchemeStorage } from '../../../q-scheme';
|
||||
import { useUpdateScheme } from '../../../stores/schemes';
|
||||
import { defaultEmptyFormData } from '../../../utls';
|
||||
import styles from './Builder.module.css';
|
||||
|
||||
type QSchemeBuilderProps = {
|
||||
scheme: SchemeContent<QSchemeStorage>;
|
||||
};
|
||||
|
||||
export function QSchemeBuilder({ scheme }: QSchemeBuilderProps) {
|
||||
const { colorFn } = useColorFunction();
|
||||
const updateScheme = useUpdateScheme(scheme.id);
|
||||
const defaultSetting = useMemo(() => {
|
||||
try {
|
||||
if (!colorFn) throw 'Web Assembly functions is not available';
|
||||
const defaultValues = colorFn.q_scheme_default_settings();
|
||||
if (!scheme.schemeStorage.source?.setting)
|
||||
return {
|
||||
hover: {
|
||||
chroma:
|
||||
scheme.schemeStorage.source?.setting?.hover.chroma ?? defaultValues.hover.chroma,
|
||||
lightness:
|
||||
scheme.schemeStorage.source?.setting?.hover.lightness ??
|
||||
defaultValues.hover.lightness,
|
||||
},
|
||||
active: {
|
||||
chroma:
|
||||
scheme.schemeStorage.source?.setting?.active.chroma ?? defaultValues.active.chroma,
|
||||
lightness:
|
||||
scheme.schemeStorage.source?.setting?.active.lightness ??
|
||||
defaultValues.active.lightness,
|
||||
},
|
||||
focus: {
|
||||
chroma:
|
||||
scheme.schemeStorage.source?.setting?.focus.chroma ?? defaultValues.focus.chroma,
|
||||
lightness:
|
||||
scheme.schemeStorage.source?.setting?.focus.lightness ??
|
||||
defaultValues.focus.lightness,
|
||||
},
|
||||
disabled: {
|
||||
chroma:
|
||||
scheme.schemeStorage.source?.setting?.disabled.chroma ??
|
||||
defaultValues.disabled.chroma,
|
||||
lightness:
|
||||
scheme.schemeStorage.source?.setting?.disabled.lightness ??
|
||||
defaultValues.disabled.lightness,
|
||||
},
|
||||
dark_convert: {
|
||||
chroma:
|
||||
scheme.schemeStorage.source?.setting?.dark_convert.chroma ??
|
||||
defaultValues.dark_convert.chroma,
|
||||
lightness:
|
||||
scheme.schemeStorage.source?.setting?.dark_convert.lightness ??
|
||||
defaultValues.dark_convert.lightness,
|
||||
},
|
||||
expand_method:
|
||||
scheme.schemeStorage.source?.setting?.expand_method ?? defaultValues.expand_method,
|
||||
wacg_follows:
|
||||
scheme.schemeStorage.source?.setting?.wacg_follows ?? defaultValues.wacg_follows,
|
||||
} as SchemeSetting;
|
||||
return defaultValues;
|
||||
} catch (e) {
|
||||
console.error('[Q scheme builder]', e);
|
||||
}
|
||||
return null;
|
||||
}, [scheme]);
|
||||
const expandingMethods = useMemo(() => {
|
||||
try {
|
||||
if (!colorFn) throw 'Web Assembly functions is not available';
|
||||
return colorFn.q_scheme_color_expanding_methods();
|
||||
} catch (e) {
|
||||
console.error('[Q scheme builder]', e);
|
||||
}
|
||||
return [];
|
||||
}, []);
|
||||
const wacgFollowStrategies = useMemo(() => {
|
||||
try {
|
||||
if (!colorFn) throw 'Web Assembly functions is not available';
|
||||
return colorFn.q_scheme_wacg_settings();
|
||||
} catch (e) {
|
||||
console.error('[Q scheme builder]', e);
|
||||
}
|
||||
return [];
|
||||
}, []);
|
||||
|
||||
const [errMsg, handleSubmitAction] = useActionState((state, formData) => {
|
||||
const errMsg = new Map<string, string>();
|
||||
const requiredFields = [
|
||||
'primary',
|
||||
'danger',
|
||||
'success',
|
||||
'warn',
|
||||
'info',
|
||||
'foreground',
|
||||
'background',
|
||||
];
|
||||
for (const field of requiredFields) {
|
||||
if (!formData.get(field)) {
|
||||
errMsg.set(field, 'This color is required for scheme generating.');
|
||||
}
|
||||
}
|
||||
if (!isEmpty(errMsg)) return errMsg;
|
||||
try {
|
||||
const schemeSetting = new SchemeSetting(
|
||||
new ColorShifting(
|
||||
Number(formData.get('hover_chroma')) / 100,
|
||||
Number(formData.get('hover_lightness')) / 100,
|
||||
),
|
||||
new ColorShifting(
|
||||
Number(formData.get('active_chroma')) / 100,
|
||||
Number(formData.get('active_lightness')) / 100,
|
||||
),
|
||||
new ColorShifting(
|
||||
Number(formData.get('focus_chroma')) / 100,
|
||||
Number(formData.get('focus_lightness')) / 100,
|
||||
),
|
||||
new ColorShifting(
|
||||
Number(formData.get('disabled_chroma')) / 100,
|
||||
Number(formData.get('disabled_lightness')) / 100,
|
||||
),
|
||||
new ColorShifting(
|
||||
Number(formData.get('dark_chroma')) / 100,
|
||||
Number(formData.get('dark_lightness')) / 100,
|
||||
),
|
||||
Number(formData.get('expanding')) as ColorExpand,
|
||||
Number(formData.get('wacg')) as WACGSetting,
|
||||
);
|
||||
|
||||
const source: QSchemeSource = {
|
||||
primary: defaultEmptyFormData(formData, 'primary', null),
|
||||
secondary: defaultEmptyFormData(formData, 'secondary', undefined),
|
||||
tertiary: defaultEmptyFormData(formData, 'tertiary', undefined),
|
||||
accent: defaultEmptyFormData(formData, 'accent', undefined),
|
||||
danger: defaultEmptyFormData(formData, 'danger', null),
|
||||
success: defaultEmptyFormData(formData, 'success', null),
|
||||
warning: defaultEmptyFormData(formData, 'warn', null),
|
||||
info: defaultEmptyFormData(formData, 'info', null),
|
||||
foreground: defaultEmptyFormData(formData, 'foreground', null),
|
||||
background: defaultEmptyFormData(formData, 'background', null),
|
||||
setting: schemeSetting,
|
||||
};
|
||||
console.debug('[collected]', source);
|
||||
const generatedScheme = every([source.secondary, source.tertiary, source.accent], isNil)
|
||||
? colorFn?.generate_q_scheme_automatically(
|
||||
source.primary,
|
||||
source.danger,
|
||||
source.success,
|
||||
source.warning,
|
||||
source.info,
|
||||
source.foreground,
|
||||
source.background,
|
||||
source.setting,
|
||||
)
|
||||
: colorFn?.generate_q_scheme_manually(
|
||||
source.primary,
|
||||
source.secondary ?? undefined,
|
||||
source.tertiary ?? undefined,
|
||||
source.accent ?? undefined,
|
||||
source.danger,
|
||||
source.success,
|
||||
source.warning,
|
||||
source.info,
|
||||
source.foreground,
|
||||
source.background,
|
||||
source.setting,
|
||||
);
|
||||
updateScheme((prev) => {
|
||||
prev.schemeStorage.source = source;
|
||||
prev.schemeStorage.scheme = generatedScheme[0];
|
||||
prev.schemeStorage.cssVariables = generatedScheme[1];
|
||||
prev.schemeStorage.scssVariables = generatedScheme[2];
|
||||
prev.schemeStorage.jsVariables = generatedScheme[3];
|
||||
return prev;
|
||||
});
|
||||
console.debug('[generated]', generatedScheme);
|
||||
} catch (e) {
|
||||
console.error('[build q scheme]', e);
|
||||
}
|
||||
|
||||
return errMsg;
|
||||
}, new Map<string, string>());
|
||||
|
||||
return (
|
||||
<ScrollArea enableY>
|
||||
<form action={handleSubmitAction} className={styles.builder_layout}>
|
||||
<h5 className={styles.segment_title}>Original Colors</h5>
|
||||
<label className={styles.label}>Primary Color*</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker name="primary" color={scheme.schemeStorage.source?.primary} />
|
||||
{errMsg.has('primary') && (
|
||||
<span className={styles.error_msg}>{errMsg.get('primary')}</span>
|
||||
)}
|
||||
</div>
|
||||
<label className={styles.label}>Secondary Color</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker name="secondary" color={scheme.schemeStorage.source?.secondary} />
|
||||
</div>
|
||||
<label className={styles.label}>Tertiary Color</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker name="tertiary" color={scheme.schemeStorage.source?.tertiary} />
|
||||
</div>
|
||||
<label className={styles.label}>Accent Color</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker name="accent" color={scheme.schemeStorage.source?.accent} />
|
||||
</div>
|
||||
<label className={styles.label}>Danger Color*</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker name="danger" color={scheme.schemeStorage.source?.danger} />
|
||||
{errMsg.has('danger') && <span className={styles.error_msg}>{errMsg.get('danger')}</span>}
|
||||
</div>
|
||||
<label className={styles.label}>Success Color*</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker name="success" color={scheme.schemeStorage.source?.success} />
|
||||
{errMsg.has('success') && (
|
||||
<span className={styles.error_msg}>{errMsg.get('success')}</span>
|
||||
)}
|
||||
</div>
|
||||
<label className={styles.label}>Warning Color*</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker name="warn" color={scheme.schemeStorage.source?.warning} />
|
||||
{errMsg.has('warn') && <span className={styles.error_msg}>{errMsg.get('warn')}</span>}
|
||||
</div>
|
||||
<label className={styles.label}>Info Color*</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker name="info" color={scheme.schemeStorage.source?.info} />
|
||||
{errMsg.has('info') && <span className={styles.error_msg}>{errMsg.get('info')}</span>}
|
||||
</div>
|
||||
<label className={styles.label}>Foreground Color*</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker name="foreground" color={scheme.schemeStorage.source?.foreground} />
|
||||
{errMsg.has('foreground') && (
|
||||
<span className={styles.error_msg}>{errMsg.get('foreground')}</span>
|
||||
)}
|
||||
</div>
|
||||
<label className={styles.label}>Background Color*</label>
|
||||
<div className={styles.color_picker_row}>
|
||||
<FloatColorPicker name="background" color={scheme.schemeStorage.source?.background} />
|
||||
{errMsg.has('background') && (
|
||||
<span className={styles.error_msg}>{errMsg.get('background')}</span>
|
||||
)}
|
||||
</div>
|
||||
<h5 className={styles.segment_title}>Automated parameters</h5>
|
||||
<label style={{ gridColumn: 2 }}>Chroma shifting</label>
|
||||
<label style={{ gridColumn: 3 }}>Lightness shifting</label>
|
||||
<label className={styles.label}>Hover</label>
|
||||
<div className="input_wrapper">
|
||||
<input
|
||||
type="number"
|
||||
name="hover_chroma"
|
||||
defaultValue={((defaultSetting?.hover.chroma ?? 0) * 100).toFixed(2)}
|
||||
className={styles.parameter_input}
|
||||
/>
|
||||
<span>%</span>
|
||||
</div>
|
||||
<div className="input_wrapper">
|
||||
<input
|
||||
type="number"
|
||||
name="hover_lightness"
|
||||
defaultValue={((defaultSetting?.hover.lightness ?? 0) * 100).toFixed(2)}
|
||||
className={styles.parameter_input}
|
||||
/>
|
||||
<span>%</span>
|
||||
</div>
|
||||
<label className={styles.label}>Active</label>
|
||||
<div className="input_wrapper">
|
||||
<input
|
||||
type="number"
|
||||
name="active_chroma"
|
||||
defaultValue={((defaultSetting?.active.chroma ?? 0) * 100).toFixed(2)}
|
||||
className={styles.parameter_input}
|
||||
/>
|
||||
<span>%</span>
|
||||
</div>
|
||||
<div className="input_wrapper">
|
||||
<input
|
||||
type="number"
|
||||
name="active_lightness"
|
||||
defaultValue={((defaultSetting?.active.lightness ?? 0) * 100).toFixed(2)}
|
||||
className={styles.parameter_input}
|
||||
/>
|
||||
<span>%</span>
|
||||
</div>
|
||||
<label className={styles.label}>Focus</label>
|
||||
<div className="input_wrapper">
|
||||
<input
|
||||
type="number"
|
||||
name="focus_chroma"
|
||||
defaultValue={((defaultSetting?.focus.chroma ?? 0) * 100).toFixed(2)}
|
||||
className={styles.parameter_input}
|
||||
/>
|
||||
<span>%</span>
|
||||
</div>
|
||||
<div className="input_wrapper">
|
||||
<input
|
||||
type="number"
|
||||
name="focus_lightness"
|
||||
defaultValue={((defaultSetting?.focus.lightness ?? 0) * 100).toFixed(2)}
|
||||
className={styles.parameter_input}
|
||||
/>
|
||||
<span>%</span>
|
||||
</div>
|
||||
<label className={styles.label}>Disabled</label>
|
||||
<div className="input_wrapper">
|
||||
<input
|
||||
type="number"
|
||||
name="disabled_chroma"
|
||||
defaultValue={((defaultSetting?.disabled.chroma ?? 0) * 100).toFixed(2)}
|
||||
className={styles.parameter_input}
|
||||
/>
|
||||
<span>%</span>
|
||||
</div>
|
||||
<div className="input_wrapper">
|
||||
<input
|
||||
type="number"
|
||||
name="disabled_lightness"
|
||||
defaultValue={((defaultSetting?.disabled.lightness ?? 0) * 100).toFixed(2)}
|
||||
className={styles.parameter_input}
|
||||
/>
|
||||
<span>%</span>
|
||||
</div>
|
||||
<label className={styles.label}>Convert to Dark scheme</label>
|
||||
<div className="input_wrapper">
|
||||
<input
|
||||
type="number"
|
||||
name="dark_chroma"
|
||||
defaultValue={((defaultSetting?.dark_convert.chroma ?? 0) * 100).toFixed(2)}
|
||||
className={styles.parameter_input}
|
||||
/>
|
||||
<span>%</span>
|
||||
</div>
|
||||
<div className="input_wrapper">
|
||||
<input
|
||||
type="number"
|
||||
name="dark_lightness"
|
||||
defaultValue={((defaultSetting?.dark_convert.lightness ?? 0) * 100).toFixed(2)}
|
||||
className={styles.parameter_input}
|
||||
/>
|
||||
<span>%</span>
|
||||
</div>
|
||||
<h5 className={styles.segment_title}>Settings</h5>
|
||||
<label className={styles.label}>Color Expanding Method</label>
|
||||
<div style={{ gridColumn: '2 / span 2' }}>
|
||||
<VSegmentedControl
|
||||
options={expandingMethods}
|
||||
name="expanding"
|
||||
defaultValue={defaultSetting?.expand_method}
|
||||
/>
|
||||
</div>
|
||||
<label className={styles.label}>Follow WACG Standard</label>
|
||||
<div style={{ gridColumn: '2 / span 2' }}>
|
||||
<VSegmentedControl
|
||||
options={wacgFollowStrategies}
|
||||
name="wacg"
|
||||
defaultValue={defaultSetting?.wacg_follows}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ gridColumn: '2 / span 2' }}>
|
||||
<button type="submit" className="primary">
|
||||
Build Scheme
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user