diff --git a/frontend/src/components/network/nodes/DeviceNode.tsx b/frontend/src/components/network/nodes/DeviceNode.tsx index ec756fd7..a1be5308 100644 --- a/frontend/src/components/network/nodes/DeviceNode.tsx +++ b/frontend/src/components/network/nodes/DeviceNode.tsx @@ -7,10 +7,14 @@ import { NodeTooltip, NodeTooltipTrigger, NodeTooltipContent } from '../ui/node- import { getDeviceRenderConfig } from './deviceRegistry' import type { DeviceProperties } from '@/types' +export type IconSize = 'sm' | 'md' | 'lg' +export const ICON_SIZE_PX: Record = { sm: 18, md: 28, lg: 42 } + export interface DeviceNodeData { label: string deviceType: string category?: string + iconSize?: IconSize properties: DeviceProperties [key: string]: unknown } @@ -31,6 +35,7 @@ function DeviceNodeComponent({ data }: NodeProps) { const status = (nodeData.properties?.status || 'unknown') as NodeStatus const ip = nodeData.properties?.ip const props = nodeData.properties || {} + const iconPx = ICON_SIZE_PX[nodeData.iconSize ?? 'md'] const hasTooltipContent = props.hostname || props.ip || props.vendor || props.model || props.role || props.notes @@ -40,7 +45,7 @@ function DeviceNodeComponent({ data }: NodeProps) { - + {nodeData.label} diff --git a/frontend/src/components/network/panels/PropertiesPanel.tsx b/frontend/src/components/network/panels/PropertiesPanel.tsx index bdc72c0a..4043328d 100644 --- a/frontend/src/components/network/panels/PropertiesPanel.tsx +++ b/frontend/src/components/network/panels/PropertiesPanel.tsx @@ -3,7 +3,7 @@ import { Trash2, Minus, Spline, GitBranch, BringToFront, SendToBack } from 'luci import { cn } from '@/lib/utils' import type { DeviceProperties, DiagramEdge } from '@/types' import type { Node, Edge } from '@xyflow/react' -import type { DeviceNodeData } from '../nodes/DeviceNode' +import type { DeviceNodeData, IconSize } from '../nodes/DeviceNode' interface PropertiesPanelProps { selectedNode: Node | null @@ -272,6 +272,30 @@ export function PropertiesPanel({ + {/* Icon size */} +
+ Icon Size +
+ {(['sm', 'md', 'lg'] as IconSize[]).map(size => { + const active = (nodeData.iconSize ?? 'md') === size + return ( + + ) + })} +
+
+ {/* Layering */}
Layer