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>
   )
 }

src/plugin-ui/SpectrogramScope.tsx

@@ -8,6 +8,10 @@ import { spectrogramSettingsToOptions } from './spectrogramOptions'
 import { resolveScrollingCanvasSize } from './scrollingCanvas'
 import { getScopeCanvasTransformStyle } from '../renderer/scopeCanvasTransform'
 import { applyPluginScopeCanvasLayout } from './scopeCanvasLayout'
+import {
+  ScopeMeasurementOverlay,
+  useScopeMeasurement,
+} from '../renderer/components/ScopeMeasurementOverlay'
 
 interface SpectrogramScopeProps {
   dataSource: PluginWebViewDataSource
@@ -28,6 +32,13 @@ export default function SpectrogramScope({
   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
@@ -78,12 +89,20 @@ export default function SpectrogramScope({
   }, [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>
   )
 }

src/plugin-ui/SpectrumScope.tsx

@@ -8,6 +8,11 @@ import type { PluginWebViewDataSource } from './PluginWebViewDataSource'
 import { spectrumSettingsToOptions } from './spectrumOptions'
 import { getScopeCanvasTransformStyle } from '../renderer/scopeCanvasTransform'
 import { applyPluginScopeCanvasLayout } from './scopeCanvasLayout'
+import {
+  ScopeMeasurementOverlay,
+  useScopeMeasurement,
+} from '../renderer/components/ScopeMeasurementOverlay'
+import { emitToHost } from './juceBridge'
 import {
   formatSpectrumPeakDbfs,
   formatSpectrumPeakFrequency,
@@ -41,6 +46,16 @@ export default function SpectrumScope({
 
   const peakMode = settings.peakInfoMode
   rotationRef.current = settings.rotation
+  const measurementController = useScopeMeasurement({
+    containerRef,
+    enabled: true,
+    rotation: settings.rotation,
+    mirrorHorizontal: settings.mirrorHorizontal,
+    getSource: () => analyzerRef.current,
+    onActiveChange: (active) => {
+      emitToHost('prismScopeMeasurement', { active })
+    },
+  })
 
   // Create the analyzer once per data source / shim.
   useEffect(() => {
@@ -125,13 +140,21 @@ export default function SpectrumScope({
       : undefined
 
   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)}
       />
-      {showPeak && peak && (
+      <ScopeMeasurementOverlay
+        containerRef={containerRef}
+        measurement={measurementController.measurement}
+      />
+      {!measurementController.active && showPeak && peak && (
         <div
           ref={peakMode === 'following' ? peakOverlayRef : null}
           className={['scope-module__peak-info', peakMode === 'following' ? 'is-following' : 'is-corner'].join(' ')}

src/plugin-ui/WaveformScope.tsx

@@ -8,6 +8,10 @@ import { waveformSettingsToOptions } from './waveformOptions'
 import { resolveScrollingCanvasSize } from './scrollingCanvas'
 import { getScopeCanvasTransformStyle } from '../renderer/scopeCanvasTransform'
 import { applyPluginScopeCanvasLayout } from './scopeCanvasLayout'
+import {
+  ScopeMeasurementOverlay,
+  useScopeMeasurement,
+} from '../renderer/components/ScopeMeasurementOverlay'
 
 interface WaveformScopeProps {
   dataSource: PluginWebViewDataSource
@@ -28,6 +32,13 @@ export default function WaveformScope({
   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
@@ -78,12 +89,20 @@ export default function WaveformScope({
   }, [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>
   )
 }