Add double click handler for schematic components

examples/example14-double-click-edit.fixture.tsx

@@ -0,0 +1,89 @@
+import { useCallback, useState } from "react"
+import { ControlledSchematicViewer } from "lib/components/ControlledSchematicViewer"
+import { renderToCircuitJson } from "lib/dev/render-to-circuit-json"
+
+export default function Example14DoubleClickEdit() {
+  const [lastDoubleClickedComponent, setLastDoubleClickedComponent] = useState<
+    string | null
+  >(null)
+
+  const handleDoubleClick = useCallback(
+    ({ schematicComponentId }: { schematicComponentId: string }) => {
+      setLastDoubleClickedComponent(schematicComponentId)
+
+      if (typeof window !== "undefined") {
+        window.alert(`Open edit dialog for ${schematicComponentId}`)
+      }
+    },
+    [],
+  )
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem",
+        padding: "1rem",
+        height: "100%",
+        boxSizing: "border-box",
+      }}
+    >
+      <div style={{ flex: 1, minHeight: 400 }}>
+        <ControlledSchematicViewer
+          circuitJson={renderToCircuitJson(
+            <board width="12mm" height="12mm">
+              <resistor
+                name="R1"
+                resistance={220}
+                schX={-4}
+                schY={1}
+              />
+              <capacitor
+                name="C1"
+                capacitance="10uF"
+                schX={4}
+                schY={-1}
+              />
+              <chip
+                name="U1"
+                footprint="soic8"
+                pinLabels={{
+                  pin1: "OUT",
+                  pin2: "GND",
+                  pin3: "IN-",
+                  pin4: "IN+",
+                  pin5: "VREF",
+                  pin6: "NC",
+                  pin7: "NC",
+                  pin8: "VCC",
+                }}
+                schX={0}
+                schY={0}
+              />
+              <trace from=".R1 .pin2" to=".U1 .pin4" />
+              <trace from=".C1 .pin1" to=".U1 .pin3" />
+              <trace from=".R1 .pin1" to=".C1 .pin2" />
+            </board>,
+          )}
+          containerStyle={{ height: "100%" }}
+          onClickComponent={handleDoubleClick}
+        />
+      </div>
+
+      <div>
+        <p>
+          Double-click any component to simulate opening its editing dialog. The
+          cursor becomes a pointer to indicate interactivity.
+        </p>
+        {lastDoubleClickedComponent ? (
+          <p>
+            Last double-clicked component: <strong>{lastDoubleClickedComponent}</strong>
+          </p>
+        ) : (
+          <p>Double-click a component to see its identifier here.</p>
+        )}
+      </div>
+    </div>
+  )
+}

lib/components/ControlledSchematicViewer.tsx

@@ -9,13 +9,18 @@ export const ControlledSchematicViewer = ({
   editingEnabled = false,
   debug = false,
   clickToInteractEnabled = false,
+  onClickComponent,
 }: {
   circuitJson: any[]
   containerStyle?: React.CSSProperties
   debugGrid?: boolean
   editingEnabled?: boolean
   debug?: boolean
   clickToInteractEnabled?: boolean
+  onClickComponent?: (args: {
+    schematicComponentId: string
+    event: MouseEvent
+  }) => void
 }) => {
   const [editEvents, setEditEvents] = useState<ManualEditEvent[]>([])
 
@@ -29,6 +34,7 @@ export const ControlledSchematicViewer = ({
       editingEnabled={editingEnabled}
       debug={debug}
       clickToInteractEnabled={clickToInteractEnabled}
+      onClickComponent={onClickComponent}
     />
   )
 }

lib/components/SchematicViewer.tsx

@@ -27,6 +27,7 @@ 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 { useSchematicComponentDoubleClick } from "lib/hooks/useSchematicComponentDoubleClick"
 
 interface Props {
   circuitJson: CircuitJson
@@ -41,6 +42,10 @@ interface Props {
   colorOverrides?: ColorOverrides
   spiceSimulationEnabled?: boolean
   disableGroups?: boolean
+  onClickComponent?: (args: {
+    schematicComponentId: string
+    event: MouseEvent
+  }) => void
 }
 
 export const SchematicViewer = ({
@@ -56,6 +61,7 @@ export const SchematicViewer = ({
   colorOverrides,
   spiceSimulationEnabled = false,
   disableGroups = false,
+  onClickComponent,
 }: Props) => {
   if (debug) {
     enableDebug()
@@ -264,6 +270,15 @@ export const SchematicViewer = ({
     handleComponentTouchStartRef.current = handleComponentTouchStart
   }, [handleComponentTouchStart])
 
+  useSchematicComponentDoubleClick({
+    svgDivRef,
+    svgString,
+    onClickComponent,
+    clickToInteractEnabled,
+    isInteractionEnabled,
+    showSpiceOverlay,
+  })
+
   const svgDiv = useMemo(
     () => (
       <div