diff --git a/src/components/Nodes/CustomNode.tsx b/src/components/Nodes/CustomNode.tsx index 60b7d1d..f28d987 100644 --- a/src/components/Nodes/CustomNode.tsx +++ b/src/components/Nodes/CustomNode.tsx @@ -1,10 +1,13 @@ -import { memo, useMemo } from 'react'; -import { Handle, Position, NodeProps, useStore } from 'reactflow'; -import { useGraphStore } from '../../stores/graphStore'; -import { useSearchStore } from '../../stores/searchStore'; -import { getContrastColor, adjustColorBrightness } from '../../utils/colorUtils'; -import { getIconComponent } from '../../utils/iconUtils'; -import type { ActorData } from '../../types'; +import { memo, useMemo } from "react"; +import { Handle, Position, NodeProps, useStore } from "reactflow"; +import { useGraphStore } from "../../stores/graphStore"; +import { useSearchStore } from "../../stores/searchStore"; +import { + getContrastColor, + adjustColorBrightness, +} from "../../utils/colorUtils"; +import { getIconComponent } from "../../utils/iconUtils"; +import type { ActorData } from "../../types"; /** * CustomNode - Represents an actor in the constellation graph @@ -27,13 +30,15 @@ const CustomNode = ({ data, selected }: NodeProps) => { // Find the node type configuration const nodeTypeConfig = nodeTypes.find((nt) => nt.id === data.type); - const nodeColor = nodeTypeConfig?.color || '#6b7280'; - const nodeLabel = nodeTypeConfig?.label || 'Unknown'; + const nodeColor = nodeTypeConfig?.color || "#6b7280"; + const nodeLabel = nodeTypeConfig?.label || "Unknown"; const IconComponent = getIconComponent(nodeTypeConfig?.icon); // Determine text color based on background const textColor = getContrastColor(nodeColor); - const borderColor = selected ? adjustColorBrightness(nodeColor, -20) : nodeColor; + const borderColor = selected + ? adjustColorBrightness(nodeColor, -20) + : nodeColor; // Show handles when selected or when connecting const showHandles = selected || isConnecting; @@ -49,8 +54,8 @@ const CustomNode = ({ data, selected }: NodeProps) => { // Check search text match if (searchText.trim()) { const searchLower = searchText.toLowerCase(); - const label = data.label?.toLowerCase() || ''; - const description = data.description?.toLowerCase() || ''; + const label = data.label?.toLowerCase() || ""; + const description = data.description?.toLowerCase() || ""; const typeName = nodeLabel.toLowerCase(); return ( @@ -61,11 +66,19 @@ const CustomNode = ({ data, selected }: NodeProps) => { } return true; - }, [searchText, visibleActorTypes, data.type, data.label, data.description, nodeLabel]); + }, [ + searchText, + visibleActorTypes, + data.type, + data.label, + data.description, + nodeLabel, + ]); // Determine if filters are active - const hasActiveFilters = searchText.trim() !== '' || - Object.values(visibleActorTypes).some(v => v === false); + const hasActiveFilters = + searchText.trim() !== "" || + Object.values(visibleActorTypes).some((v) => v === false); // Calculate opacity based on match status const nodeOpacity = hasActiveFilters && !isMatch ? 0.2 : 1.0; @@ -76,20 +89,20 @@ const CustomNode = ({ data, selected }: NodeProps) => { className={` px-4 py-3 rounded-lg shadow-md min-w-[120px] transition-all duration-200 - ${selected ? 'shadow-xl' : 'shadow-md'} + ${selected ? "shadow-xl" : "shadow-md"} `} style={{ backgroundColor: nodeColor, - borderWidth: '3px', // Keep consistent border width - borderStyle: 'solid', + borderWidth: "3px", // Keep consistent border width + borderStyle: "solid", borderColor: borderColor, color: textColor, opacity: nodeOpacity, boxShadow: selected ? `0 0 0 3px ${nodeColor}40` // Add outer glow when selected (40 = ~25% opacity) : isHighlighted - ? `0 0 0 3px ${nodeColor}80, 0 0 12px ${nodeColor}60` // Highlight glow for search matches - : undefined, + ? `0 0 0 3px ${nodeColor}80, 0 0 12px ${nodeColor}60` // Highlight glow for search matches + : undefined, }} > {/* Connection handles - shown only when selected or connecting */} @@ -157,7 +170,10 @@ const CustomNode = ({ data, selected }: NodeProps) => {
{/* Icon (if available) */} {IconComponent && ( -
+
)} @@ -177,19 +193,6 @@ const CustomNode = ({ data, selected }: NodeProps) => { > {nodeLabel}
- - {/* Description (if available) */} - {data.description && ( -
- {data.description} -
- )}
);