refactor(chart): introduce hybrid domain architecture

src/components/core/useWaveformChartController.ts

@@ -18,6 +18,7 @@ import { useWaveformChartAnnotations } from '../annotation/useWaveformChartAnnot
 import { useWaveformHover } from '../interaction/useWaveformHover'
 import { useWaveformViewport } from '../interaction/useWaveformViewport'
 import { useWaveformZoom } from '../interaction/useWaveformZoom'
+import { ViewportInteractionStateMachine } from '../interaction/viewportInteractionState'
 import { useAnimationFrameThrottle } from '../utils/useAnimationFrameThrottle'
 import { margin } from './constants'
 import { getPageSize } from './grid'
@@ -78,7 +79,8 @@ export function useWaveformChartController(
     },
     { deep: true },
   )
-  const selection = ref<ViewportSelectionState | null>(null)
+  const selection = shallowRef<ViewportSelectionState | null>(null)
+  const viewportInteraction = shallowRef(markRaw(new ViewportInteractionStateMachine()))
   const spacePressed = ref(false)
   const pointerInsideChart = ref(false)
   let handleDataReferenceChange: () => void = () => undefined
@@ -193,6 +195,7 @@ export function useWaveformChartController(
     props,
     emit,
     selection,
+    viewportInteraction,
     spacePressed,
     trackLayouts,
     chartTracks,

src/components/core/waveformChartTypes.ts

@@ -95,16 +95,17 @@ export interface WaveformChartEmit {
   (event: 'page-change', page: number, pageCount: number): void
 }
 
-export interface ViewportSelectionState {
+interface ViewportSelectionBase {
   trackIndex: number
   independent: boolean
-  overlay: SVGRectElement
   startX: number
   startY: number
   currentX: number
   currentY: number
   pointerId: number
-  mode: 'box' | 'pan'
   xDomain: [number, number]
   yDomains: Record<string, [number, number]>
 }
+
+export type ViewportSelectionState =
+  (ViewportSelectionBase & { kind: 'box' }) | (ViewportSelectionBase & { kind: 'pan' })