diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Graph/Nodes/Node/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Graph/Nodes/Node/index.tsx index c3a66e3f4..538b2e9fd 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Graph/Nodes/Node/index.tsx +++ b/src/components/ModalsContainer/BlueprintModal/Body/Graph/Nodes/Node/index.tsx @@ -8,6 +8,7 @@ import { SchemaExtended } from '~/components/ModalsContainer/BlueprintModal/type import { fontProps } from '~/components/Universe/Graph/Cubes/Text/constants' import { truncateText } from '~/utils/truncateText' import { NODE_RADIUS } from '../../constants' +import { useSchemaStore } from '~/stores/useSchemaStore' export const NODE_TYPE_COLORS = ['#ff13c9', '#5af0ff', '#3233ff', '#c2f0c2', '#ff6666', '#99ccff', '#ffb3b3'] @@ -40,6 +41,7 @@ export const boxGeometry = new BoxGeometry(2, 2, 2) export const Node = memo(({ node, setSelectedNode, onSimulationUpdate, isSelected }: Props) => { const meshRef = useRef(null) + const [normalizedSchemasByType] = useSchemaStore((s) => [s.normalizedSchemasByType]) const [showTooltip, setShowTooltip] = useState(false) console.log(isSelected) @@ -89,7 +91,9 @@ export const Node = memo(({ node, setSelectedNode, onSimulationUpdate, isSelecte } }) - const color = NODE_TYPE_COLORS[node?.children?.length] || 'red' + const primaryColor = normalizedSchemasByType[node.type]?.primary_color + + const color = primaryColor ?? (NODE_TYPE_COLORS[node?.children?.length] || 'red') const handleClick = (e: { stopPropagation: () => void }) => { e.stopPropagation() diff --git a/src/components/common/TypeBadge/index.tsx b/src/components/common/TypeBadge/index.tsx index a127a148e..f194c0492 100644 --- a/src/components/common/TypeBadge/index.tsx +++ b/src/components/common/TypeBadge/index.tsx @@ -15,10 +15,13 @@ type BadgeProps = { export const TypeBadge = ({ type }: Props) => { let badgeProps: Omit - const [getPrimaryColorByType] = useSchemaStore((s) => [s.getPrimaryColorByType]) + const [normalizedSchemasByType] = useSchemaStore((s) => [s.normalizedSchemasByType]) const nodeType = type.toLowerCase() - const primaryColor = getPrimaryColorByType(type) + const primaryColor = normalizedSchemasByType[type]?.primary_color + const primaryIcon = normalizedSchemasByType[type]?.icon + + const icon = primaryIcon ? `svg-icons/${primaryIcon}.svg` : null switch (nodeType) { case 'video': @@ -26,7 +29,7 @@ export const TypeBadge = ({ type }: Props) => { case 'podcast': case 'clip': badgeProps = { - iconStart: 'video_badge.svg', + iconStart: icon ?? 'video_badge.svg', color: primaryColor ?? colors.CLIP, } @@ -34,7 +37,7 @@ export const TypeBadge = ({ type }: Props) => { case 'show': badgeProps = { - iconStart: 'show_badge.svg', + iconStart: icon ?? 'show_badge.svg', color: primaryColor ?? colors.SHOW, } @@ -42,7 +45,7 @@ export const TypeBadge = ({ type }: Props) => { case 'tweet': badgeProps = { - iconStart: 'twitter_badge.svg', + iconStart: icon ?? 'twitter_badge.svg', color: primaryColor ?? colors.TWEET, } @@ -50,7 +53,7 @@ export const TypeBadge = ({ type }: Props) => { case 'episode': badgeProps = { - iconStart: 'audio_badge.svg', + iconStart: icon ?? 'audio_badge.svg', color: primaryColor ?? colors.EPISODE, } @@ -58,15 +61,15 @@ export const TypeBadge = ({ type }: Props) => { case 'document': badgeProps = { - iconStart: 'notes_badge.svg', + iconStart: icon ?? 'notes_badge.svg', color: primaryColor ?? colors.TEXT, } break - case 'organization': + case primaryIcon ?? 'organization': badgeProps = { - iconStart: 'organization_badge.svg', + iconStart: icon ?? 'organization_badge.svg', color: primaryColor ?? colors.ORGANIZATION, } @@ -76,7 +79,7 @@ export const TypeBadge = ({ type }: Props) => { case 'guest': case 'host': badgeProps = { - iconStart: 'person_badge.svg', + iconStart: icon ?? 'person_badge.svg', color: primaryColor ?? colors.PERSON, } @@ -84,7 +87,7 @@ export const TypeBadge = ({ type }: Props) => { case 'event': badgeProps = { - iconStart: 'event_badge.svg', + iconStart: icon ?? 'event_badge.svg', color: primaryColor ?? colors.EVENT, } @@ -92,7 +95,7 @@ export const TypeBadge = ({ type }: Props) => { case 'topic': badgeProps = { - iconStart: 'topic_badge.svg', + iconStart: icon ?? 'topic_badge.svg', color: primaryColor ?? colors.TOPIC, } @@ -100,7 +103,7 @@ export const TypeBadge = ({ type }: Props) => { default: badgeProps = { - iconStart: 'thing_badge.svg', + iconStart: icon ?? 'thing_badge.svg', color: primaryColor ?? colors.THING, }