feat: per-node custom color styling (border, background, icon)
- Add resolveNodeColors() utility merging type defaults with per-node overrides - Default colors per node type (cyan=isp/router/lxc/ap, green=switch/nas, purple=server/vm, orange=proxmox, amber=iot, gray=generic) - Remove glowColor prop from BaseNode — colors now come from node data - ProxmoxGroupNode uses resolveNodeColors for group border/header/icon - NodeModal: Appearance section with 3 color swatches (border, background, icon) — click swatch to open native color picker; Reset to defaults button - custom_colors persisted as JSON in DB (backend model + schemas + migration) - 7 new unit tests for resolveNodeColors covering all node types + partial overrides
This commit is contained in:
Pouzor
@@ -1,6 +1,7 @@
|
||||
import { Handle, Position, type NodeProps, type Node } from '@xyflow/react'
|
||||
import { type LucideIcon } from 'lucide-react'
|
||||
import type { NodeData, NodeStatus } from '@/types'
|
||||
import { resolveNodeColors } from '@/utils/nodeColors'
|
||||
|
||||
const STATUS_COLORS: Record<NodeStatus, string> = {
|
||||
online: '#39d353',
|
||||
@@ -11,10 +12,10 @@ const STATUS_COLORS: Record<NodeStatus, string> = {
|
||||
|
||||
interface BaseNodeProps extends NodeProps<Node<NodeData>> {
|
||||
icon: LucideIcon
|
||||
glowColor?: string
|
||||
}
|
||||
|
||||
export function BaseNode({ data, selected, icon: Icon, glowColor = '#00d4ff' }: BaseNodeProps) {
|
||||
export function BaseNode({ data, selected, icon: Icon }: BaseNodeProps) {
|
||||
const colors = resolveNodeColors(data)
|
||||
const statusColor = STATUS_COLORS[data.status]
|
||||
const isOnline = data.status === 'online'
|
||||
|
||||
@@ -22,12 +23,12 @@ export function BaseNode({ data, selected, icon: Icon, glowColor = '#00d4ff' }:
|
||||
<div
|
||||
className="relative flex flex-row items-center gap-2.5 px-2.5 py-2 rounded-lg border transition-all duration-200"
|
||||
style={{
|
||||
background: '#21262d',
|
||||
borderColor: selected ? glowColor : '#30363d',
|
||||
background: colors.background,
|
||||
borderColor: selected ? colors.border : '#30363d',
|
||||
boxShadow: isOnline
|
||||
? `0 0 10px ${glowColor}2e, 0 0 3px ${glowColor}1a`
|
||||
? `0 0 10px ${colors.border}2e, 0 0 3px ${colors.border}1a`
|
||||
: selected
|
||||
? `0 0 8px ${glowColor}44`
|
||||
? `0 0 8px ${colors.border}44`
|
||||
: 'none',
|
||||
opacity: data.status === 'offline' ? 0.55 : 1,
|
||||
minWidth: 140,
|
||||
@@ -38,7 +39,7 @@ export function BaseNode({ data, selected, icon: Icon, glowColor = '#00d4ff' }:
|
||||
{/* Icon */}
|
||||
<div
|
||||
className="flex items-center justify-center w-7 h-7 rounded-md shrink-0"
|
||||
style={{ color: isOnline ? glowColor : '#8b949e', background: '#161b22' }}
|
||||
style={{ color: isOnline ? colors.icon : '#8b949e', background: '#161b22' }}
|
||||
>
|
||||
<Icon size={15} />
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Handle, Position, NodeResizer, type NodeProps, type Node } from '@xyflow/react'
|
||||
import { Layers } from 'lucide-react'
|
||||
import type { NodeData, NodeStatus } from '@/types'
|
||||
import { resolveNodeColors } from '@/utils/nodeColors'
|
||||
import { BaseNode } from './BaseNode'
|
||||
|
||||
const STATUS_COLORS: Record<NodeStatus, string> = {
|
||||
@@ -10,18 +11,18 @@ const STATUS_COLORS: Record<NodeStatus, string> = {
|
||||
unknown: '#8b949e',
|
||||
}
|
||||
|
||||
const GLOW = '#ff6e00'
|
||||
|
||||
export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
|
||||
const { data, selected } = props
|
||||
const colors = resolveNodeColors(data)
|
||||
|
||||
// Render as a regular node when container mode is disabled
|
||||
if (data.container_mode === false) {
|
||||
return <BaseNode {...props} icon={Layers} glowColor={GLOW} />
|
||||
return <BaseNode {...props} icon={Layers} />
|
||||
}
|
||||
|
||||
const statusColor = STATUS_COLORS[data.status]
|
||||
const isOnline = data.status === 'online'
|
||||
const glow = colors.border
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -29,36 +30,36 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
|
||||
minWidth={220}
|
||||
minHeight={160}
|
||||
isVisible={selected}
|
||||
lineStyle={{ borderColor: GLOW, opacity: 0.6 }}
|
||||
handleStyle={{ borderColor: GLOW, backgroundColor: '#21262d' }}
|
||||
lineStyle={{ borderColor: glow, opacity: 0.6 }}
|
||||
handleStyle={{ borderColor: glow, backgroundColor: '#21262d' }}
|
||||
/>
|
||||
|
||||
{/* Group border */}
|
||||
<div
|
||||
className="w-full h-full rounded-xl border-2 flex flex-col overflow-hidden"
|
||||
style={{
|
||||
borderColor: selected ? GLOW : isOnline ? `${GLOW}66` : '#30363d',
|
||||
background: isOnline ? `${GLOW}08` : '#0d111766',
|
||||
borderColor: selected ? glow : isOnline ? `${glow}66` : '#30363d',
|
||||
background: isOnline ? `${colors.background}cc` : `${colors.background}aa`,
|
||||
boxShadow: isOnline
|
||||
? `0 0 20px ${GLOW}1a, inset 0 0 40px ${GLOW}08`
|
||||
? `0 0 20px ${glow}1a, inset 0 0 40px ${glow}08`
|
||||
: selected
|
||||
? `0 0 12px ${GLOW}33`
|
||||
? `0 0 12px ${glow}33`
|
||||
: 'none',
|
||||
}}
|
||||
>
|
||||
{/* Header bar */}
|
||||
<div
|
||||
className="flex items-center gap-2 px-2.5 py-1.5 shrink-0"
|
||||
style={{ background: isOnline ? `${GLOW}18` : '#161b2288', borderBottom: `1px solid ${isOnline ? `${GLOW}33` : '#30363d'}` }}
|
||||
style={{ background: isOnline ? `${glow}18` : '#161b2288', borderBottom: `1px solid ${isOnline ? `${glow}33` : '#30363d'}` }}
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-center w-5 h-5 rounded-md shrink-0"
|
||||
style={{ color: isOnline ? GLOW : '#8b949e', background: '#161b22' }}
|
||||
style={{ color: isOnline ? colors.icon : '#8b949e', background: '#161b22' }}
|
||||
>
|
||||
<Layers size={12} />
|
||||
</div>
|
||||
<div className="flex flex-col min-w-0 flex-1">
|
||||
<span className="text-[11px] font-semibold leading-tight truncate" style={{ color: isOnline ? GLOW : '#c9d1d9' }}>
|
||||
<span className="text-[11px] font-semibold leading-tight truncate" style={{ color: isOnline ? glow : '#c9d1d9' }}>
|
||||
{data.label}
|
||||
</span>
|
||||
{data.ip && (
|
||||
|
||||
@@ -8,15 +8,14 @@ import type { NodeData } from '@/types'
|
||||
|
||||
type N = NodeProps<Node<NodeData>>
|
||||
|
||||
export const IspNode = (props: N) => <BaseNode {...props} icon={Globe} glowColor="#00d4ff" />
|
||||
export const RouterNode = (props: N) => <BaseNode {...props} icon={Router} glowColor="#00d4ff" />
|
||||
export const SwitchNode = (props: N) => <BaseNode {...props} icon={Network} glowColor="#39d353" />
|
||||
export const ServerNode = (props: N) => <BaseNode {...props} icon={Server} glowColor="#a855f7" />
|
||||
export const ProxmoxNode = (props: N) => <BaseNode {...props} icon={Layers} glowColor="#ff6e00" />
|
||||
export const VmNode = (props: N) => <BaseNode {...props} icon={Box} glowColor="#a855f7" />
|
||||
export const LxcNode = (props: N) => <BaseNode {...props} icon={Container} glowColor="#00d4ff" />
|
||||
export const NasNode = (props: N) => <BaseNode {...props} icon={HardDrive} glowColor="#39d353" />
|
||||
export const IotNode = (props: N) => <BaseNode {...props} icon={Cpu} glowColor="#e3b341" />
|
||||
export const ApNode = (props: N) => <BaseNode {...props} icon={Wifi} glowColor="#00d4ff" />
|
||||
export const GenericNode = (props: N) => <BaseNode {...props} icon={Circle} glowColor="#8b949e" />
|
||||
|
||||
export const IspNode = (props: N) => <BaseNode {...props} icon={Globe} />
|
||||
export const RouterNode = (props: N) => <BaseNode {...props} icon={Router} />
|
||||
export const SwitchNode = (props: N) => <BaseNode {...props} icon={Network} />
|
||||
export const ServerNode = (props: N) => <BaseNode {...props} icon={Server} />
|
||||
export const ProxmoxNode = (props: N) => <BaseNode {...props} icon={Layers} />
|
||||
export const VmNode = (props: N) => <BaseNode {...props} icon={Box} />
|
||||
export const LxcNode = (props: N) => <BaseNode {...props} icon={Container} />
|
||||
export const NasNode = (props: N) => <BaseNode {...props} icon={HardDrive} />
|
||||
export const IotNode = (props: N) => <BaseNode {...props} icon={Cpu} />
|
||||
export const ApNode = (props: N) => <BaseNode {...props} icon={Wifi} />
|
||||
export const GenericNode = (props: N) => <BaseNode {...props} icon={Circle} />
|
||||
|
||||
Reference in New Issue
Block a user