xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

为M3D Builder增加保存草稿的功能。

Browse Source
This commit is contained in:
徐涛 2025-03-30 22:01:01 +08:00
parent ef3ef2b349
commit 5f3d58f0f5
2 changed files with 64 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/page-components/scheme/m3-dynamic-scheme/Builder.module.css
View File

@ -29,6 +29,12 @@
align-items: center;
gap: var(--spacing-s);
}
.button_row {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-s);
}
h5 {
font-size: var(--font-size-m);
line-height: 1.7em;

85
src/page-components/scheme/m3-dynamic-scheme/Builder.tsx
View File

@ -2,10 +2,14 @@ import { includes, isEmpty, isEqual, isNil } from 'lodash-es';
import { useActionState, useCallback, useMemo, useState } from 'react';
import { useColorFunction } from '../../../ColorFunctionContext';
import { FloatColorPicker } from '../../../components/FloatColorPicker';
import { NotificationType, useNotification } from '../../../components/Notifications';
import { ScrollArea } from '../../../components/ScrollArea';
import { Switch } from '../../../components/Switch';
import { VSegmentedControl } from '../../../components/VSegmentedControl';
import { MaterialDesign3DynamicSchemeStorage } from '../../../material-3-scheme';
import {
MaterialDesign3DynamicSchemeSource,
MaterialDesign3DynamicSchemeStorage,
} from '../../../material-3-scheme';
import { Option, SchemeContent } from '../../../models';
import { useUpdateScheme } from '../../../stores/schemes';
import { mapToObject } from '../../../utls';
@ -18,6 +22,7 @@ type M3DynamicSchemeBuilderProps = {
};
export function M3DynamicSchemeBuilder({ scheme, onBuildCompleted }: M3DynamicSchemeBuilderProps) {
const { showToast } = useNotification();
const { colorFn } = useColorFunction();
const updateScheme = useUpdateScheme(scheme.id);
const originalColors = useMemo(() => {
@ -49,7 +54,47 @@ export function M3DynamicSchemeBuilder({ scheme, onBuildCompleted }: M3DynamicSc
const [contrastLevel, setContrastLevel] = useState<number>(
() => scheme.schemeStorage.source?.contrastLevel ?? 1,
);
const collectSchemeSource = (formData: FormData): MaterialDesign3DynamicSchemeSource => {
const sourceColor = formData.get('source') as string;
const dynamicVariant = Number(formData.get('variant'));
const contrast = Number(formData.get('contrast_level'));
const harmonizeCustoms = isEqual(formData.get('harmonize_customs'), 'true');
const errorColor = formData.get('error') as string;
const customColors: Record<string, string> = {};
for (const key of colorKeys) {
const name = formData.get(`name_${key}`) as string;
const color = formData.get(`color_${key}`) as string;
if (isNil(name) || isEmpty(name) || isNil(color) || isEmpty(color)) continue;
customColors[name] = color;
}
return {
source: isNil(sourceColor) || isEmpty(sourceColor) ? null : sourceColor,
error: isNil(errorColor) || isEmpty(errorColor) ? null : errorColor,
custom_colors: customColors,
variant: dynamicVariant,
contrastLevel: contrast,
harmonizeCustoms: harmonizeCustoms,
};
};
const [, handleDraftAction] = useActionState<Map<string, string>, FormData>(
(_state, formData) => {
const errMsg = new Map<string, string>();
const collectedSource = collectSchemeSource(formData);
updateScheme((prev) => {
prev.schemeStorage.source = collectedSource;
return prev;
});
showToast(NotificationType.SUCCESS, 'Scheme draft saved!', 'tabler:device-floppy', 3000);
return errMsg;
},
new Map<string, string>(),
);
const [errMsg, handleSubmitAction] = useActionState<Map<string, string>, FormData>(
(_state, formData) => {
const errMsg = new Map<string, string>();
@ -61,35 +106,18 @@ export function M3DynamicSchemeBuilder({ scheme, onBuildCompleted }: M3DynamicSc
if (!isEmpty(errMsg)) return errMsg;
try {
const dynamicVariant = Number(formData.get('variant'));
const contrast = Number(formData.get('contrast_level'));
const harmonizeCustoms = isEqual(formData.get('harmonize_customs'), 'true');
const errorColor = formData.get('error') as string;
const customColors: Record<string, string> = {};
for (const key of colorKeys) {
const name = formData.get(`name_${key}`) as string;
const color = formData.get(`color_${key}`) as string;
if (isNil(name) || isEmpty(name) || isNil(color) || isEmpty(color)) continue;
customColors[name] = color;
}
const collectedSource = collectSchemeSource(formData);
const generate_scheme = colorFn.generate_material_design_3_dynamic_scheme(
sourceColor,
isNil(errorColor) || isEmpty(errorColor) ? null : errorColor,
dynamicVariant,
contrastLevel,
harmonizeCustoms,
customColors,
collectedSource.source,
collectedSource.error,
collectedSource.variant,
collectedSource.contrastLevel,
collectedSource.harmonizeCustoms,
collectedSource.custom_colors,
);
updateScheme((prev) => {
prev.schemeStorage.source = {
source: sourceColor,
error: errorColor,
custom_colors: customColors,
variant: dynamicVariant,
contrastLevel: contrast,
harmonizeCustoms: harmonizeCustoms,
};
prev.schemeStorage.source = collectedSource;
prev.schemeStorage.scheme = {
white: generate_scheme[0].white,
black: generate_scheme[0].black,
@ -204,10 +232,13 @@ export function M3DynamicSchemeBuilder({ scheme, onBuildCompleted }: M3DynamicSc
onDelete={(index) => setDeleted((prev) => [...prev, index])}
/>
))}
<div style={{ gridColumn: '2 / span 2' }}>
<div className={styles.button_row} style={{ gridColumn: '2 / span 2' }}>
<button type="submit" className="primary">
Build Scheme
</button>
<button type="submit" className="secondary" formAction={handleDraftAction}>
Save Draft
</button>
</div>
</form>
</ScrollArea>