Highlight connected schematic traces on hover

examples/example21-connected-trace-hover.fixture.tsx

@@ -0,0 +1,62 @@
+import type { CircuitJson } from "circuit-json"
+import { SchematicViewer } from "lib/components/SchematicViewer"
+
+const circuitJson = [
+  {
+    type: "source_net",
+    source_net_id: "source_net_gnd",
+    name: "GND",
+  },
+  {
+    type: "source_net",
+    source_net_id: "source_net_signal",
+    name: "SIGNAL",
+  },
+  {
+    type: "source_trace",
+    source_trace_id: "source_trace_gnd_left",
+    connected_source_net_ids: ["source_net_gnd"],
+    connected_source_port_ids: [],
+  },
+  {
+    type: "source_trace",
+    source_trace_id: "source_trace_gnd_right",
+    connected_source_net_ids: ["source_net_gnd"],
+    connected_source_port_ids: [],
+  },
+  {
+    type: "source_trace",
+    source_trace_id: "source_trace_signal",
+    connected_source_net_ids: ["source_net_signal"],
+    connected_source_port_ids: [],
+  },
+  {
+    type: "schematic_trace",
+    schematic_trace_id: "schematic_trace_gnd_left",
+    source_trace_id: "source_trace_gnd_left",
+    edges: [{ from: { x: -4, y: 1 }, to: { x: -1, y: 1 } }],
+    junctions: [{ x: -1, y: 1 }],
+  },
+  {
+    type: "schematic_trace",
+    schematic_trace_id: "schematic_trace_gnd_right",
+    source_trace_id: "source_trace_gnd_right",
+    edges: [{ from: { x: 1, y: 1 }, to: { x: 4, y: 1 } }],
+    junctions: [{ x: 1, y: 1 }],
+  },
+  {
+    type: "schematic_trace",
+    schematic_trace_id: "schematic_trace_signal",
+    source_trace_id: "source_trace_signal",
+    edges: [{ from: { x: -4, y: -1 }, to: { x: 4, y: -1 } }],
+    junctions: [],
+  },
+] as CircuitJson
+
+export default () => (
+  <SchematicViewer
+    circuitJson={circuitJson}
+    containerStyle={{ height: "100%" }}
+    debugGrid
+  />
+)

lib/components/SchematicViewer.tsx

@@ -1,10 +1,16 @@
+import { su } from "@tscircuit/soup-util"
+import type { CircuitJson } from "circuit-json"
 import {
-  convertCircuitJsonToSchematicSvg,
   type ColorOverrides,
+  convertCircuitJsonToSchematicSvg,
 } from "circuit-to-svg"
-import { su } from "@tscircuit/soup-util"
 import { useChangeSchematicComponentLocationsInSvg } from "lib/hooks/useChangeSchematicComponentLocationsInSvg"
 import { useChangeSchematicTracesForMovedComponents } from "lib/hooks/useChangeSchematicTracesForMovedComponents"
+import {
+  schematicTraceHoverStyle,
+  useHighlightConnectedTracesOnHover,
+} from "lib/hooks/useHighlightConnectedTracesOnHover"
+import { getStoredBoolean, setStoredBoolean } from "lib/hooks/useLocalStorage"
 import { useSchematicGroupsOverlay } from "lib/hooks/useSchematicGroupsOverlay"
 import { enableDebug } from "lib/utils/debug"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
@@ -16,21 +22,19 @@ import {
 import { useMouseMatrixTransform } from "use-mouse-matrix-transform"
 import { useResizeHandling } from "../hooks/use-resize-handling"
 import { useComponentDragging } from "../hooks/useComponentDragging"
+import { useSpiceSimulation } from "../hooks/useSpiceSimulation"
 import type { ManualEditEvent } from "../types/edit-events"
+import { getSpiceFromCircuitJson } from "../utils/spice-utils"
+import { zIndexMap } from "../utils/z-index-map"
 import { EditIcon } from "./EditIcon"
 import { GridIcon } from "./GridIcon"
-import { ViewMenuIcon } from "./ViewMenuIcon"
-import { ViewMenu } from "./ViewMenu"
-import type { CircuitJson } from "circuit-json"
-import { SpiceSimulationIcon } from "./SpiceSimulationIcon"
-import { SpiceSimulationOverlay } from "./SpiceSimulationOverlay"
-import { zIndexMap } from "../utils/z-index-map"
-import { useSpiceSimulation } from "../hooks/useSpiceSimulation"
-import { getSpiceFromCircuitJson } from "../utils/spice-utils"
-import { getStoredBoolean, setStoredBoolean } from "lib/hooks/useLocalStorage"
 import { MouseTracker } from "./MouseTracker"
 import { SchematicComponentMouseTarget } from "./SchematicComponentMouseTarget"
 import { SchematicPortMouseTarget } from "./SchematicPortMouseTarget"
+import { SpiceSimulationIcon } from "./SpiceSimulationIcon"
+import { SpiceSimulationOverlay } from "./SpiceSimulationOverlay"
+import { ViewMenu } from "./ViewMenu"
+import { ViewMenuIcon } from "./ViewMenuIcon"
 
 interface Props {
   circuitJson: CircuitJson
@@ -345,6 +349,12 @@ export const SchematicViewer = ({
     editEvents: editEventsWithUnappliedEditEvents,
   })
 
+  useHighlightConnectedTracesOnHover({
+    svgDivRef,
+    circuitJson,
+    circuitJsonKey,
+  })
+
   // Add group overlays when enabled
   useSchematicGroupsOverlay({
     svgDivRef,
@@ -398,14 +408,17 @@ export const SchematicViewer = ({
     <MouseTracker>
       {onSchematicComponentClicked && (
         <style>
-          {`.schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }`}
+          {
+            ".schematic-component-clickable [data-schematic-component-id]:hover { cursor: pointer !important; }"
+          }
         </style>
       )}
       {onSchematicPortClicked && (
         <style>
-          {`[data-schematic-port-id]:hover { cursor: pointer !important; }`}
+          {"[data-schematic-port-id]:hover { cursor: pointer !important; }"}
         </style>
       )}
+      <style>{schematicTraceHoverStyle}</style>
       <div
         ref={containerRef}
         style={{

lib/hooks/useHighlightConnectedTracesOnHover.ts

@@ -0,0 +1,104 @@
+import type { CircuitJson } from "circuit-json"
+import { useEffect } from "react"
+import { getConnectedSchematicTraceIdsByHoveredTrace } from "../utils/getConnectedSchematicTraceIdsByHoveredTrace"
+
+const HOVER_ATTR = "data-schematic-trace-net-hover"
+const TRACE_SELECTOR =
+  '[data-circuit-json-type="schematic_trace"][data-schematic-trace-id]'
+
+export const schematicTraceHoverStyle = `
+  [data-circuit-json-type="schematic_trace"][${HOVER_ATTR}="true"] path:not(.trace-invisible-hover-outline):not([class*="invisible"]) {
+    stroke: var(--tscircuit-schematic-trace-hover-color, #3b82f6) !important;
+  }
+
+  [data-circuit-json-type="schematic_trace"][${HOVER_ATTR}="true"] circle {
+    stroke: var(--tscircuit-schematic-trace-hover-color, #3b82f6) !important;
+    fill: var(--tscircuit-schematic-trace-hover-color, #3b82f6) !important;
+  }
+
+  [data-circuit-json-type="schematic_trace"][${HOVER_ATTR}="true"] .trace-crossing-outline {
+    opacity: 0;
+  }
+`
+
+const getTraceElement = (target: EventTarget | null) => {
+  if (!(target instanceof Element)) return null
+  return target.closest(TRACE_SELECTOR)
+}
+
+export const useHighlightConnectedTracesOnHover = ({
+  svgDivRef,
+  circuitJson,
+  circuitJsonKey,
+}: {
+  svgDivRef: React.RefObject<HTMLDivElement | null>
+  circuitJson: CircuitJson
+  circuitJsonKey: string
+}) => {
+  useEffect(() => {
+    const svg = svgDivRef.current
+    if (!svg) return
+
+    const connectedSchematicTraceIdsByTraceId =
+      getConnectedSchematicTraceIdsByHoveredTrace(circuitJson)
+
+    let currentHoveredTraceId: string | null = null
+
+    const clearHighlightedTraces = () => {
+      currentHoveredTraceId = null
+      for (const traceElement of Array.from(
+        svg.querySelectorAll(`[${HOVER_ATTR}]`),
+      )) {
+        traceElement.removeAttribute(HOVER_ATTR)
+      }
+    }
+
+    const highlightConnectedTraces = (schematicTraceId: string) => {
+      if (schematicTraceId === currentHoveredTraceId) return
+
+      currentHoveredTraceId = schematicTraceId
+      const connectedSchematicTraceIds =
+        connectedSchematicTraceIdsByTraceId.get(schematicTraceId) ??
+        new Set([schematicTraceId])
+
+      for (const traceElement of Array.from(
+        svg.querySelectorAll(TRACE_SELECTOR),
+      )) {
+        const traceId = traceElement.getAttribute("data-schematic-trace-id")
+        if (traceId && connectedSchematicTraceIds.has(traceId)) {
+          traceElement.setAttribute(HOVER_ATTR, "true")
+        } else {
+          traceElement.removeAttribute(HOVER_ATTR)
+        }
+      }
+    }
+
+    const handlePointerOver = (event: PointerEvent) => {
+      const traceElement = getTraceElement(event.target)
+      const schematicTraceId = traceElement?.getAttribute(
+        "data-schematic-trace-id",
+      )
+      if (!schematicTraceId) return
+
+      highlightConnectedTraces(schematicTraceId)
+    }
+
+    const handlePointerOut = (event: PointerEvent) => {
+      const nextTraceElement = getTraceElement(event.relatedTarget)
+      if (!nextTraceElement) {
+        clearHighlightedTraces()
+      }
+    }
+
+    svg.addEventListener("pointerover", handlePointerOver)
+    svg.addEventListener("pointerout", handlePointerOut)
+    svg.addEventListener("pointerleave", clearHighlightedTraces)
+
+    return () => {
+      svg.removeEventListener("pointerover", handlePointerOver)
+      svg.removeEventListener("pointerout", handlePointerOut)
+      svg.removeEventListener("pointerleave", clearHighlightedTraces)
+      clearHighlightedTraces()
+    }
+  }, [svgDivRef, circuitJson, circuitJsonKey])
+}