feat(ui): style handles

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

View File

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

View File

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