feat(chart): add presentation mode

src/components/core/useWaveformChartController.ts

@@ -90,6 +90,7 @@ export function useWaveformChartController(
     chartWidth,
     chartHeight,
     isCleanView,
+    isPresentationMode,
     hiddenSeriesIdSet,
     resolvedTitleText,
     titleAreaReserved,
@@ -151,6 +152,7 @@ export function useWaveformChartController(
     innerHeight,
     hasChartArea,
     isZoomMode,
+    isPresentationMode,
     resolveInitialTrackDomain,
     cancelPendingHover: () => hover.cancelPendingHover(),
   })
@@ -174,6 +176,7 @@ export function useWaveformChartController(
     titleAreaHeight,
     chartTopMargin,
     activeInteractionMode,
+    isPresentationMode,
   })
 
   const viewport = useWaveformViewport({
@@ -192,6 +195,7 @@ export function useWaveformChartController(
     sharedYDomains,
     independentYDomains,
     isZoomMode,
+    isPresentationMode,
     editorSeriesOptions,
     resolveInitialTrackDomain,
     canZoomTrack: zoom.canZoomTrack,
@@ -214,6 +218,7 @@ export function useWaveformChartController(
     titleAreaHeight,
     chartTopMargin,
     sharedOverlayElement,
+    isPresentationMode,
     updateViewportDrag: viewport.updateViewportDrag,
     resolveTrackAtPointer: annotations.resolveTrackAtPointer,
   })
@@ -248,10 +253,12 @@ export function useWaveformChartController(
     independentYDomains,
     annotationInteraction,
     editorSeriesOptions,
+    isPresentationMode,
     clearHover: hover.clearHover,
     cancelAnnotation: annotations.cancelAnnotation,
     configureZoom: zoom.configureZoom,
     resetViewport: viewport.resetViewport,
+    cancelViewportDrag: viewport.cancelViewportDrag,
     cancelPendingHover: hover.cancelPendingHover,
     clearZoomBindings: zoom.clearZoomBindings,
   })

src/components/core/useWaveformChartLifecycle.ts

@@ -44,10 +44,12 @@ interface LifecycleContext {
   independentYDomains: Ref<Record<number, [number, number]>>
   annotationInteraction: ReturnType<typeof useWaveformAnnotationInteraction>
   editorSeriesOptions: Ref<AnnotationSeriesCandidate[]>
+  isPresentationMode: ComputedRef<boolean>
   clearHover: () => void
   cancelAnnotation: () => void
   configureZoom: () => void
   resetViewport: () => void
+  cancelViewportDrag: () => void
   cancelPendingHover: () => void
   clearZoomBindings: () => void
 }
@@ -94,16 +96,25 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
     independentYDomains,
     annotationInteraction,
     editorSeriesOptions,
+    isPresentationMode,
     clearHover,
     cancelAnnotation,
     configureZoom,
     resetViewport,
+    cancelViewportDrag,
     cancelPendingHover,
     clearZoomBindings,
   } = context
 
   function handleInteractionKeyDown(event: KeyboardEvent) {
-    if (event.code !== 'Space' || !props.pannable || !pointerInsideChart.value) return
+    if (
+      isPresentationMode.value ||
+      event.code !== 'Space' ||
+      !props.pannable ||
+      !pointerInsideChart.value
+    ) {
+      return
+    }
     if (isEditableTarget(event.target)) return
     spacePressed.value = true
     event.preventDefault()
@@ -145,6 +156,7 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
       innerWidth,
       innerHeight,
       () => props.zoomable,
+      isPresentationMode,
       () => props.minZoomSpan,
       () => props.initialXDomain,
       () => props.initialXDomains,
@@ -191,6 +203,16 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
     editorSeriesOptions.value = []
   })
 
+  watch(isPresentationMode, (enabled) => {
+    spacePressed.value = false
+    if (!enabled) return
+    cancelViewportDrag()
+    clearZoomBindings()
+    clearHover()
+    annotationInteraction.closeContextMenu()
+    cancelAnnotation()
+  })
+
   watch(
     () => chartSeries.value.map((series) => series.id).join('\u0000'),
     () => {

src/components/core/useWaveformPresentation.ts

@@ -49,6 +49,7 @@ export function useWaveformPresentation(context: PresentationContext) {
     height: fixedHeight.value === undefined ? '100%' : `${fixedHeight.value}px`,
   }))
   const isCleanView = computed(() => props.cleanView === true)
+  const isPresentationMode = computed(() => props.presentationMode === true)
   const resolvedZeroLine = computed(() => {
     const width = props.zeroLine.width
     return {
@@ -178,6 +179,7 @@ export function useWaveformPresentation(context: PresentationContext) {
     chartHeight,
     containerStyle,
     isCleanView,
+    isPresentationMode,
     resolvedZeroLine,
     legendBackgroundColor,
     legendInteractive,

src/components/core/waveformChartTypes.ts

@@ -45,6 +45,7 @@ export interface WaveformChartProps {
   hiddenSeriesIds?: string[]
   defaultHiddenSeriesIds?: string[]
   cleanView?: boolean
+  presentationMode?: boolean
   zeroLine?: WaveformZeroLineOptions
 }
 
@@ -65,6 +66,7 @@ type DefaultedProp =
   | 'legend'
   | 'defaultHiddenSeriesIds'
   | 'cleanView'
+  | 'presentationMode'
   | 'zeroLine'
 
 export type ResolvedWaveformChartProps = Readonly<