Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): style handles

Browse Source
This commit is contained in:
psychedelicious
2023-09-04 15:24:53 +10:00
parent d65553841e
commit 34e3c2e000
2 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx
View File

@ -4,6 +4,7 @@ import {
COLLECTION_TYPES, COLLECTION_TYPES,
FIELDS, FIELDS,
HANDLE_TOOLTIP_OPEN_DELAY, HANDLE_TOOLTIP_OPEN_DELAY,
MODEL_TYPES,
POLYMORPHIC_TYPES, POLYMORPHIC_TYPES,
} from 'features/nodes/types/constants'; } from 'features/nodes/types/constants';
import { import {
@ -52,6 +53,7 @@ const FieldHandle = (props: FieldHandleProps) => {
const styles: CSSProperties = useMemo(() => { const styles: CSSProperties = useMemo(() => {
const isCollectionType = COLLECTION_TYPES.includes(type); const isCollectionType = COLLECTION_TYPES.includes(type);
const isPolymorphicType = POLYMORPHIC_TYPES.includes(type); const isPolymorphicType = POLYMORPHIC_TYPES.includes(type);
const isModelType = MODEL_TYPES.includes(type);
const color = colorTokenToCssVar(typeColor); const color = colorTokenToCssVar(typeColor);
const s: CSSProperties = { const s: CSSProperties = {
backgroundColor: backgroundColor:
@ -64,7 +66,7 @@ const FieldHandle = (props: FieldHandleProps) => {
borderWidth: isCollectionType || isPolymorphicType ? 4 : 0, borderWidth: isCollectionType || isPolymorphicType ? 4 : 0,
borderStyle: 'solid', borderStyle: 'solid',
borderColor: color, borderColor: color,
borderRadius: isPolymorphicType ? 4 : '100%', borderRadius: isModelType ? 4 : '100%',
zIndex: 1, zIndex: 1,
}; };

31
invokeai/frontend/web/src/features/nodes/types/constants.ts
View File

@ -39,6 +39,19 @@ export const POLYMORPHIC_TYPES = [
'ColorPolymorphic', 'ColorPolymorphic',
]; ];
export const MODEL_TYPES = [
'ControlNetModelField',
'LoRAModelField',
'MainModelField',
'ONNXModelField',
'SDXLMainModelField',
'SDXLRefinerModelField',
'VaeModelField',
'UNetField',
'VaeField',
'ClipField',
];
export const COLLECTION_MAP = { export const COLLECTION_MAP = {
integer: 'IntegerCollection', integer: 'IntegerCollection',
boolean: 'BooleanCollection', boolean: 'BooleanCollection',
@ -103,7 +116,7 @@ export const FIELDS: Record<FieldType, FieldUIConfig> = {
title: 'Boolean Polymorphic', title: 'Boolean Polymorphic',
}, },
ClipField: { ClipField: {
color: 'green.300', color: 'green.500',
description: 'Tokenizer and text_encoder submodels.', description: 'Tokenizer and text_encoder submodels.',
title: 'Clip', title: 'Clip',
}, },
@ -238,17 +251,17 @@ export const FIELDS: Record<FieldType, FieldUIConfig> = {
title: 'Latents Polymorphic', title: 'Latents Polymorphic',
}, },
LoRAModelField: { LoRAModelField: {
color: 'teal.300', color: 'teal.500',
description: 'TODO', description: 'TODO',
title: 'LoRA', title: 'LoRA',
}, },
MainModelField: { MainModelField: {
color: 'teal.300', color: 'teal.500',
description: 'TODO', description: 'TODO',
title: 'Model', title: 'Model',
}, },
ONNXModelField: { ONNXModelField: {
color: 'teal.300', color: 'teal.500',
description: 'ONNX model field.', description: 'ONNX model field.',
title: 'ONNX Model', title: 'ONNX Model',
}, },
@ -258,12 +271,12 @@ export const FIELDS: Record<FieldType, FieldUIConfig> = {
title: 'Scheduler', title: 'Scheduler',
}, },
SDXLMainModelField: { SDXLMainModelField: {
color: 'teal.300', color: 'teal.500',
description: 'SDXL model field.', description: 'SDXL model field.',
title: 'SDXL Model', title: 'SDXL Model',
}, },
SDXLRefinerModelField: { SDXLRefinerModelField: {
color: 'teal.300', color: 'teal.500',
description: 'TODO', description: 'TODO',
title: 'Refiner Model', title: 'Refiner Model',
}, },
@ -283,17 +296,17 @@ export const FIELDS: Record<FieldType, FieldUIConfig> = {
title: 'String Polymorphic', title: 'String Polymorphic',
}, },
UNetField: { UNetField: {
color: 'red.300', color: 'red.500',
description: 'UNet submodel.', description: 'UNet submodel.',
title: 'UNet', title: 'UNet',
}, },
VaeField: { VaeField: {
color: 'blue.300', color: 'blue.500',
description: 'Vae submodel.', description: 'Vae submodel.',
title: 'Vae', title: 'Vae',
}, },
VaeModelField: { VaeModelField: {
color: 'teal.300', color: 'teal.500',
description: 'TODO', description: 'TODO',
title: 'VAE', title: 'VAE',
}, },