diff --git a/lib/components/SchematicViewer.tsx b/lib/components/SchematicViewer.tsx index 798222c5..d7739a45 100644 --- a/lib/components/SchematicViewer.tsx +++ b/lib/components/SchematicViewer.tsx @@ -445,7 +445,18 @@ export const SchematicViewer = ({ {netHoverHighlightEnabled && ( )} {onSchematicComponentClicked && ( diff --git a/lib/hooks/useSchematicNetHover.ts b/lib/hooks/useSchematicNetHover.ts index 7bfb2c7b..477b916b 100644 --- a/lib/hooks/useSchematicNetHover.ts +++ b/lib/hooks/useSchematicNetHover.ts @@ -3,6 +3,7 @@ import type { CircuitJson } from "circuit-json" import { useEffect } from "react" const FADED_CLASS = "sch-net-faded" +const HOVERED_CLASS = "sch-net-hovered" const TRACE_SELECTOR = "g.trace[data-subcircuit-connectivity-map-key], g.trace-overlays[data-subcircuit-connectivity-map-key]" @@ -20,7 +21,8 @@ const NET_LABEL_SELECTOR = "[data-schematic-net-label-id]" * - components: g[data-schematic-component-id] * - net labels: [data-schematic-net-label-id] (per element, no wrapping group) * - * Faded elements get the `sch-net-faded` class (styled by SchematicViewer). + * Faded elements get the `sch-net-faded` class and hovered net elements get + * the `sch-net-hovered` class (styled by SchematicViewer). */ export const useSchematicNetHover = ({ svgDivRef, @@ -47,7 +49,9 @@ export const useSchematicNetHover = ({ let hoveredNetKey: string | null = null const collectNetElements = () => { - for (const { el } of netElements) el.classList.remove(FADED_CLASS) + for (const { el } of netElements) { + el.classList.remove(FADED_CLASS, HOVERED_CLASS) + } netElements = [] triggerNetKeys.clear() hoveredNetKey = null @@ -83,12 +87,14 @@ export const useSchematicNetHover = ({ } } - // Fade everything not on `key` (null clears the fade). + // Fade everything not on `key` and visibly highlight elements that are on + // the hovered net (null clears both states). const highlightNet = (key: string | null) => { if (key === hoveredNetKey) return hoveredNetKey = key for (const { el, keys } of netElements) { el.classList.toggle(FADED_CLASS, key !== null && !keys.has(key)) + el.classList.toggle(HOVERED_CLASS, key !== null && keys.has(key)) } } @@ -121,7 +127,9 @@ export const useSchematicNetHover = ({ observer.disconnect() svgDiv.removeEventListener("mouseover", handleMouseOver) svgDiv.removeEventListener("mouseleave", handleMouseLeave) - for (const { el } of netElements) el.classList.remove(FADED_CLASS) + for (const { el } of netElements) { + el.classList.remove(FADED_CLASS, HOVERED_CLASS) + } } // Keyed on circuitJsonKey (content hash) rather than the circuitJson // reference, matching the other post-render SVG hooks.