fix: render styled canvas nodes for zwave types

The zwave_* node types were not registered in the React Flow nodeTypes
map, so imported Z-Wave devices fell back to the default unstyled node
(no icon, no accent). Add ZwaveCoordinator/Router/EndDevice node
components and register them. Adds a registry guard test.

ha-relevant: yes
This commit is contained in:
Pouzor
2026-06-26 20:42:52 +02:00
parent f749b38edc
commit d41896fadf
3 changed files with 25 additions and 1 deletions
@@ -0,0 +1,15 @@
import { describe, it, expect } from 'vitest'
import { nodeTypes } from '../nodeTypes'
describe('nodeTypes registry', () => {
it('registers a component for every wireless mesh node type', () => {
// Regression: zwave_* types were missing, so React Flow fell back to the
// default (unstyled) node — no icon, no accent. (Zigbee covered too.)
for (const t of [
'zigbee_coordinator', 'zigbee_router', 'zigbee_enddevice',
'zwave_coordinator', 'zwave_router', 'zwave_enddevice',
]) {
expect(nodeTypes[t as keyof typeof nodeTypes], `missing nodeType: ${t}`).toBeDefined()
}
})
})
@@ -1,7 +1,7 @@
import { type NodeProps, type Node } from '@xyflow/react'
import {
Globe, Router, Network, Server, Layers, Box, Container,
HardDrive, Cpu, Wifi, Circle, Cctv, Printer, Monitor, Laptop, Smartphone, PlugZap, Anchor, Package, Flame, Radio, Antenna,
HardDrive, Cpu, Wifi, Circle, Cctv, Printer, Monitor, Laptop, Smartphone, PlugZap, Anchor, Package, Flame, Radio, Antenna, RadioTower, Share2,
Grid3x3, Battery, Fuel, Sun, Repeat2, Split, ToggleLeft, Lightbulb, Gauge, Combine, Cable, Zap,
} from 'lucide-react'
import { BaseNode } from './BaseNode'
@@ -34,6 +34,11 @@ export const ZigbeeCoordinatorNode = (props: N) => <BaseNode {...props} icon={Ne
export const ZigbeeRouterNode = (props: N) => <BaseNode {...props} icon={Radio} />
export const ZigbeeEndDeviceNode = (props: N) => <BaseNode {...props} icon={Antenna} />
// Z-Wave node types
export const ZwaveCoordinatorNode = (props: N) => <BaseNode {...props} icon={RadioTower} />
export const ZwaveRouterNode = (props: N) => <BaseNode {...props} icon={Share2} />
export const ZwaveEndDeviceNode = (props: N) => <BaseNode {...props} icon={Antenna} />
// Electrical node types
export const GridNode = (props: N) => <BaseNode {...props} icon={Grid3x3} />
export const UpsNode = (props: N) => <BaseNode {...props} icon={Battery} />
@@ -3,6 +3,7 @@ import {
NasNode, IotNode, ApNode, CameraNode, PrinterNode, ComputerNode, LaptopNode,
MobileNode, CplNode, DockerHostNode, DockerContainerNode, GenericNode,
ZigbeeCoordinatorNode, ZigbeeRouterNode, ZigbeeEndDeviceNode,
ZwaveCoordinatorNode, ZwaveRouterNode, ZwaveEndDeviceNode,
GridNode, UpsNode, BatteryNode, GeneratorNode, SolarPanelNode, InverterNode,
CircuitBreakerNode, ContactorNode, ElectricalSwitchNode, SocketNode,
LightNode, MeterNode, TransformerNode, LoadNode,
@@ -39,6 +40,9 @@ export const nodeTypes = {
zigbee_coordinator: ZigbeeCoordinatorNode,
zigbee_router: ZigbeeRouterNode,
zigbee_enddevice: ZigbeeEndDeviceNode,
zwave_coordinator: ZwaveCoordinatorNode,
zwave_router: ZwaveRouterNode,
zwave_enddevice: ZwaveEndDeviceNode,
grid: GridNode,
ups: UpsNode,
battery: BatteryNode,