diff --git a/src/components/led-strip-configuration/led-strip-part.tsx b/src/components/led-strip-configuration/led-strip-part.tsx index 7724528..a560875 100644 --- a/src/components/led-strip-configuration/led-strip-part.tsx +++ b/src/components/led-strip-configuration/led-strip-part.tsx @@ -43,7 +43,7 @@ export const Pixel: Component = (props) => { export const LedStripPart: Component = (props) => { const [localProps, rootProps] = splitProps(props, ['config']); - const [stripConfiguration] = useContext(LedStripConfigurationContext); + const [stripConfiguration, { setHoveredStripPart }] = useContext(LedStripConfigurationContext); const [colors, setColors] = createSignal([]); @@ -116,12 +116,25 @@ export const LedStripPart: Component = (props) => { } }; + const onMouseEnter = () => { + if (localProps.config) { + setHoveredStripPart({ + displayId: localProps.config.display_id, + border: localProps.config.border, + }); + } + }; + + const onMouseLeave = () => { + setHoveredStripPart(null); + }; + return (
= (props) => { stripConfiguration.selectedStripPart?.border === localProps.config?.border && stripConfiguration.selectedStripPart?.displayId === localProps.config?.display_id, + 'ring-2 ring-primary bg-primary/20 border-primary': + stripConfiguration.hoveredStripPart?.border === localProps.config?.border && + stripConfiguration.hoveredStripPart?.displayId === localProps.config?.display_id, }} onWheel={onWheel} + onMouseEnter={onMouseEnter} + onMouseLeave={onMouseLeave} > {(item) => }