measurement crosshair overlay

src/plugin-ui/OscilloscopeScope.tsx

@@ -7,6 +7,10 @@ import type { PluginWebViewDataSource } from './PluginWebViewDataSource'
 import { oscilloscopeSettingsToOptions } from './oscilloscopeOptions'
 import { getScopeCanvasTransformStyle } from '../renderer/scopeCanvasTransform'
 import { applyPluginScopeCanvasLayout } from './scopeCanvasLayout'
+import {
+  ScopeMeasurementOverlay,
+  useScopeMeasurement,
+} from '../renderer/components/ScopeMeasurementOverlay'
 
 interface OscilloscopeScopeProps {
   dataSource: PluginWebViewDataSource
@@ -27,6 +31,13 @@ export default function OscilloscopeScope({
   const rotationRef = useRef(settings.rotation)
   const applySizeRef = useRef<(() => void) | null>(null)
   rotationRef.current = settings.rotation
+  const measurementController = useScopeMeasurement({
+    containerRef,
+    enabled: true,
+    rotation: settings.rotation,
+    mirrorHorizontal: settings.mirrorHorizontal,
+    getSource: () => vizRef.current,
+  })
 
   useEffect(() => {
     const container = containerRef.current
@@ -72,12 +83,20 @@ export default function OscilloscopeScope({
   }, [settings.rotation])
 
   return (
-    <div ref={containerRef} className="spectrum-scope">
+    <div
+      ref={containerRef}
+      className={`spectrum-scope scope-measurement-surface ${measurementController.active ? 'is-measuring' : ''}`.trim()}
+      {...measurementController.pointerBindings}
+    >
       <canvas
         ref={canvasRef}
         className="spectrum-scope__canvas"
         style={getScopeCanvasTransformStyle(settings.rotation, settings.mirrorHorizontal)}
       />
+      <ScopeMeasurementOverlay
+        containerRef={containerRef}
+        measurement={measurementController.measurement}
+      />
     </div>
   )
 }