waveform-analysis 0.1.29 → 0.1.31

package/src/components/interaction/useWaveformViewport.ts

@@ -1,6 +1,5 @@
-import { pointer, scaleLinear, zoomIdentity, type ZoomTransform } from 'd3'
-import { computed, nextTick, type ComputedRef, type Ref, type ShallowRef } from 'vue'
-
+import { pointer, zoomIdentity, type ZoomTransform } from 'd3'
+import { computed, nextTick, shallowRef, type ComputedRef, type Ref, type ShallowRef } from 'vue'
 import { MINIMUM_SELECTION_SIZE } from '../core/constants'
 import type { DisplayTrack, TrackLayout } from '../core/types'
 import { hasFixedYDomainForTrack } from '../core/yDomain'
@@ -10,7 +9,9 @@ import type {
   WaveformChartEmit,
 } from '../core/waveformChartTypes'
 import type { AnnotationSeriesCandidate } from '../annotation'
-
+import { tryReleasePointerCapture } from './pointerCapture'
+import { transitionViewportInteraction } from './viewportInteractionState'
+import { constrainZoomDomain, transformForDomain } from './zoomConstraints'
 interface ViewportContext {
   props: ResolvedWaveformChartProps
   emit: WaveformChartEmit
@@ -37,7 +38,6 @@ interface ViewportContext {
   clearHover: () => void
   resolveTrackAtPointer: (pointerX: number, pointerY: number) => TrackLayout | undefined
 }
-
 export function useWaveformViewport(context: ViewportContext) {
   const {
     props,
@@ -65,6 +65,23 @@ export function useWaveformViewport(context: ViewportContext) {
     clearHover,
     resolveTrackAtPointer,
   } = context
+  const activeOverlay = shallowRef<SVGRectElement>()
+  const releasePointerCapture = (pointerId: number, event?: PointerEvent) => {
+    const overlay = activeOverlay.value
+    const eventTarget = event?.currentTarget as SVGRectElement | null
+    tryReleasePointerCapture(overlay, pointerId)
+    if (eventTarget && eventTarget !== overlay) tryReleasePointerCapture(eventTarget, pointerId)
+  }
+  const cleanupViewportDrag = (pointerId: number, event?: PointerEvent) => {
+    const active = selection.value
+    if (!active || active.pointerId !== pointerId) return
+    releasePointerCapture(pointerId, event)
+    selection.value = transitionViewportInteraction(selection.value, {
+      type: 'cancel',
+      pointerId,
+    }).state
+    activeOverlay.value = undefined
+  }
   const selectionBox = computed(() => {
     const active = selection.value
     if (!active) return null
@@ -76,48 +93,6 @@ export function useWaveformViewport(context: ViewportContext) {
       height: Math.abs(active.currentY - active.startY),
     }
   })
-  const transformForDomain = (
-    domain: [number, number],
-    baseDomain: [number, number],
-    width: number,
-  ): ZoomTransform => {
-    const baseSpan = baseDomain[1] - baseDomain[0]
-    const span = domain[1] - domain[0]
-    if (!Number.isFinite(baseSpan) || !Number.isFinite(span) || baseSpan <= 0 || span <= 0) {
-      return zoomIdentity
-    }
-    const scale = baseSpan / span
-    const baseScale = scaleLinear(baseDomain, [0, width])
-    return zoomIdentity.translate(-scale * baseScale(domain[0]), 0).scale(scale)
-  }
-  const resolveMinimumZoomSpan = (boundary: [number, number]): number => {
-    const boundarySpan = Math.abs(boundary[1] - boundary[0])
-    if (!Number.isFinite(boundarySpan) || boundarySpan <= 0) return 0
-    const configured = props.minZoomSpan
-    if (Number.isFinite(configured) && (configured ?? 0) > 0) {
-      return Math.min(boundarySpan, configured as number)
-    }
-    return boundarySpan / 40
-  }
-  const constrainZoomDomain = (
-    domain: [number, number],
-    boundary: [number, number],
-  ): [number, number] => {
-    const normalizedBoundary: [number, number] =
-      boundary[0] <= boundary[1] ? [...boundary] : [boundary[1], boundary[0]]
-    const boundarySpan = normalizedBoundary[1] - normalizedBoundary[0]
-    if (!Number.isFinite(boundarySpan) || boundarySpan <= 0) return normalizedBoundary
-    const requestedStart = Math.min(domain[0], domain[1])
-    const requestedEnd = Math.max(domain[0], domain[1])
-    const minimumSpan = resolveMinimumZoomSpan(normalizedBoundary)
-    const span = Math.max(minimumSpan, Math.min(boundarySpan, requestedEnd - requestedStart))
-    const center = (requestedStart + requestedEnd) / 2
-    const start = Math.max(
-      normalizedBoundary[0],
-      Math.min(center - span / 2, normalizedBoundary[1] - span),
-    )
-    return [start, start + span]
-  }
   const clampDomain = (domain: [number, number], boundary: [number, number]): [number, number] => {
     const span = domain[1] - domain[0]
     const boundarySpan = boundary[1] - boundary[0]
@@ -143,19 +118,22 @@ export function useWaveformViewport(context: ViewportContext) {
     const [rawX, rawY] = pointer(event, overlay)
     const x = Math.max(0, Math.min(independent ? track.width : innerWidth.value, rawX))
     const y = Math.max(0, Math.min(independent ? track.height : innerHeight.value, rawY))
-    selection.value = {
-      trackIndex,
-      independent,
-      overlay,
-      startX: x,
-      startY: y,
-      currentX: x,
-      currentY: y,
-      pointerId: event.pointerId,
-      mode: panRequested ? 'pan' : 'box',
-      xDomain: track.xScale.domain() as [number, number],
-      yDomains: currentYDomains(),
-    }
+    const started = transitionViewportInteraction(selection.value, {
+      type: 'begin',
+      gesture: {
+        trackIndex,
+        independent,
+        startX: x,
+        startY: y,
+        pointerId: event.pointerId,
+        kind: panRequested ? 'pan' : 'box',
+        xDomain: track.xScale.domain() as [number, number],
+        yDomains: currentYDomains(),
+      },
+    })
+    if (!started.accepted) return
+    selection.value = started.state
+    activeOverlay.value = overlay
     overlay.setPointerCapture?.(event.pointerId)
     clearHover()
     event.preventDefault()
@@ -213,27 +191,34 @@ export function useWaveformViewport(context: ViewportContext) {
   const updateViewportDrag = (event: PointerEvent) => {
     if (isPresentationMode.value) return
     const active = selection.value
-    if (!active || event.pointerId !== active.pointerId) return
+    const overlay = activeOverlay.value
+    if (!active || !overlay || event.pointerId !== active.pointerId) return
     const track = trackLayouts.value.find((item) => item.index === active.trackIndex)
     if (!track) return
-    const [rawX, rawY] = pointer(event, active.overlay)
-    active.currentX = Math.max(
+    const [rawX, rawY] = pointer(event, overlay)
+    const currentX = Math.max(
       0,
       Math.min(active.independent ? track.width : innerWidth.value, rawX),
     )
-    active.currentY = Math.max(
+    const currentY = Math.max(
       0,
       Math.min(active.independent ? track.height : innerHeight.value, rawY),
     )
-    selection.value = { ...active }
-    if (active.mode === 'pan') applyPan(active, track)
+    const transition = transitionViewportInteraction(selection.value, {
+      type: 'move',
+      pointerId: event.pointerId,
+      position: { currentX, currentY },
+    })
+    if (!transition.accepted || !transition.state) return
+    const next = transition.state
+    selection.value = next
+    if (next.kind === 'pan') applyPan(next, track)
     event.preventDefault()
   }
   const cancelViewportDrag = (event?: PointerEvent) => {
     const active = selection.value
     if (!active || (event && event.pointerId !== active.pointerId)) return
-    active.overlay.releasePointerCapture?.(active.pointerId)
-    selection.value = null
+    cleanupViewportDrag(active.pointerId, event)
   }
   const applyBoxZoom = (active: ViewportSelectionState) => {
     const track = trackLayouts.value.find((item) => item.index === active.trackIndex)
@@ -249,9 +234,14 @@ export function useWaveformViewport(context: ViewportContext) {
     )
     if (right - left < MINIMUM_SELECTION_SIZE) return
     const baseXDomain = active.independent ? resolveInitialTrackDomain(track) : initialXDomain.value
+    const groups = active.independent
+      ? [track.seriesList]
+      : trackLayouts.value.filter((item) => item.hasVisibleSeries).map((item) => item.seriesList)
     const xDomain = constrainZoomDomain(
       [track.xScale.invert(left), track.xScale.invert(right)],
       baseXDomain,
+      groups,
+      props,
     )
     if (active.independent) {
       const next = [...independentTransforms.value]
@@ -300,15 +290,38 @@ export function useWaveformViewport(context: ViewportContext) {
     }
     const active = selection.value
     if (!active || event.pointerId !== active.pointerId) return
-    updateViewportDrag(event)
-    active.overlay.releasePointerCapture?.(active.pointerId)
+    const track = trackLayouts.value.find((item) => item.index === active.trackIndex)
+    const overlay = activeOverlay.value
+    if (!track || !overlay || !overlay.parentNode) {
+      cleanupViewportDrag(active.pointerId, event)
+      return
+    }
+    const [rawX, rawY] = pointer(event, overlay)
+    const currentX = Math.max(
+      0,
+      Math.min(active.independent ? track.width : innerWidth.value, rawX),
+    )
+    const currentY = Math.max(
+      0,
+      Math.min(active.independent ? track.height : innerHeight.value, rawY),
+    )
+    const completed = transitionViewportInteraction(selection.value, {
+      type: 'finish',
+      pointerId: event.pointerId,
+      position: { currentX, currentY },
+    }).completed
+    if (!completed) return
     selection.value = null
-    if (active.mode === 'pan') {
+    releasePointerCapture(completed.pointerId, event)
+    activeOverlay.value = undefined
+    event.preventDefault()
+    if (completed.kind === 'pan') {
+      applyPan(completed, track)
       void nextTick(configureZoom)
       return
     }
-    if (Math.abs(active.currentX - active.startX) >= MINIMUM_SELECTION_SIZE) {
-      applyBoxZoom(active)
+    if (Math.abs(completed.currentX - completed.startX) >= MINIMUM_SELECTION_SIZE) {
+      applyBoxZoom(completed)
     }
   }
   const resetViewport = (trackIndex?: number) => {
@@ -337,7 +350,6 @@ export function useWaveformViewport(context: ViewportContext) {
     resetViewport()
     emit('zoom-reset')
   }
-
   return {
     selectionBox,
     beginViewportDrag,

package/src/components/interaction/useWaveformZoom.ts

@@ -15,6 +15,12 @@ import { WHEEL_ZOOM_DEBOUNCE_MS, ZOOM_CONSTRAINTS } from '../core/constants'
 import type { TrackLayout } from '../core/types'
 import type { ResolvedWaveformChartProps, WaveformChartEmit } from '../core/waveformChartTypes'
 import { useAnimationFrameThrottle } from '../utils/useAnimationFrameThrottle'
+import {
+  constrainZoomDomain,
+  resolveMinimumZoomSpan,
+  transformForDomain,
+  type ZoomSeriesGroup,
+} from './zoomConstraints'
 
 interface ZoomContext {
   props: ResolvedWaveformChartProps
@@ -216,24 +222,38 @@ export function useWaveformZoom(context: ZoomContext) {
       .forEach((overlay) => select(overlay).on('.zoom', null))
     zoomBehaviors.clear()
   }
-  const resolveMaximumZoomScale = (domain: [number, number]): number => {
-    const minZoomSpan = props.minZoomSpan
-    if (!Number.isFinite(minZoomSpan) || (minZoomSpan ?? 0) <= 0) {
-      return ZOOM_CONSTRAINTS.DEFAULT_MAX_SCALE
-    }
+  const resolveMaximumZoomScale = (
+    domain: [number, number],
+    groups: readonly ZoomSeriesGroup[],
+  ): number => {
     const domainSpan = Math.abs(domain[1] - domain[0])
     if (!Number.isFinite(domainSpan) || domainSpan <= 0) return ZOOM_CONSTRAINTS.MIN_SCALE
-    return Math.min(
-      ZOOM_CONSTRAINTS.DEFAULT_MAX_SCALE,
-      Math.max(ZOOM_CONSTRAINTS.MIN_SCALE, domainSpan / (minZoomSpan ?? domainSpan)),
+    const minimumSpan = resolveMinimumZoomSpan(domain, groups, props)
+    return Math.max(
+      ZOOM_CONSTRAINTS.MIN_SCALE,
+      minimumSpan > 0 ? domainSpan / minimumSpan : ZOOM_CONSTRAINTS.DEFAULT_MAX_SCALE,
     )
   }
-  const canZoomTrack = (track: TrackLayout): boolean =>
-    hasMinimumVisibleXValues(
+  const constrainTransform = (
+    transform: ZoomTransform,
+    domain: [number, number],
+    width: number,
+    groups: readonly ZoomSeriesGroup[],
+  ): ZoomTransform => {
+    const requested = transform.rescaleX(scaleLinear(domain, [0, width])).domain() as [
+      number,
+      number,
+    ]
+    return transformForDomain(constrainZoomDomain(requested, domain, groups, props), domain, width)
+  }
+  const canZoomTrack = (track: TrackLayout): boolean => {
+    const minimum = Number(props.minVisiblePoints)
+    return hasMinimumVisibleXValues(
       track.seriesList,
       track.xScale.domain() as [number, number],
-      Number(props.minVisiblePoints),
+      Number.isFinite(minimum) && minimum > 0 ? Math.ceil(minimum) + 1 : minimum,
     )
+  }
   const canZoomSharedTracks = (): boolean => {
     const tracks = trackLayouts.value.filter((track) => track.hasVisibleSeries)
     return tracks.length > 0 && tracks.every(canZoomTrack)
@@ -265,9 +285,15 @@ export function useWaveformZoom(context: ZoomContext) {
         )
         if (!overlay) return
         const dataDomain = resolveInitialTrackDomain(track)
+        const groups = [track.seriesList]
         const behavior = zoom<SVGRectElement, unknown>()
-          .filter((event) => canHandleWheelZoom(event, canZoomTrack(track)))
-          .scaleExtent([1, resolveMaximumZoomScale(dataDomain)])
+          .filter((event) => {
+            const currentTrack =
+              trackLayouts.value.find((item) => item.index === track.index) ?? track
+            return canHandleWheelZoom(event, canZoomTrack(currentTrack))
+          })
+          .scaleExtent([1, resolveMaximumZoomScale(dataDomain, groups)])
+          .constrain((transform) => constrainTransform(transform, dataDomain, track.width, groups))
           .extent([
             [0, 0],
             [track.width, track.height],
@@ -293,9 +319,15 @@ export function useWaveformZoom(context: ZoomContext) {
     }
     const overlay = sharedOverlayElement.value
     if (!overlay) return
+    const groups = trackLayouts.value
+      .filter((track) => track.hasVisibleSeries)
+      .map((track) => track.seriesList)
     const behavior = zoom<SVGRectElement, unknown>()
       .filter((event) => canHandleWheelZoom(event, canZoomSharedTracks()))
-      .scaleExtent([1, resolveMaximumZoomScale(initialXDomain.value)])
+      .scaleExtent([1, resolveMaximumZoomScale(initialXDomain.value, groups)])
+      .constrain((transform) =>
+        constrainTransform(transform, initialXDomain.value, innerWidth.value, groups),
+      )
       .extent([
         [0, 0],
         [innerWidth.value, innerHeight.value],

package/src/components/interaction/viewportInteractionState.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  reduceViewportInteraction,
+  transitionViewportInteraction,
+  type ViewportInteractionEvent,
+} from './viewportInteractionState'
+
+const gesture = {
+  trackIndex: 2,
+  independent: true,
+  startX: 10,
+  startY: 20,
+  pointerId: 7,
+  kind: 'box' as const,
+  xDomain: [0, 100] as [number, number],
+  yDomains: { track: [-1, 1] as [number, number] },
+}
+
+describe('viewport interaction reducer', () => {
+  it('accepts one begin and rejects a conflicting begin', () => {
+    const started = transitionViewportInteraction(null, { type: 'begin', gesture })
+    const conflicting = transitionViewportInteraction(started.state, {
+      type: 'begin',
+      gesture: { ...gesture, pointerId: 8 },
+    })
+
+    expect(started.accepted).toBe(true)
+    expect(started.state).toMatchObject({ kind: 'box', pointerId: 7 })
+    expect(conflicting.accepted).toBe(false)
+    expect(conflicting.state).toMatchObject({ kind: 'box', pointerId: 7 })
+  })
+
+  it('rejects move and finish from a different pointer without changing state', () => {
+    const state = reduceViewportInteraction(null, { type: 'begin', gesture })
+    const move = transitionViewportInteraction(state, {
+      type: 'move',
+      pointerId: 8,
+      position: { currentX: 30, currentY: 40 },
+    })
+    const finish = transitionViewportInteraction(move.state, {
+      type: 'finish',
+      pointerId: 8,
+      position: { currentX: 30, currentY: 40 },
+    })
+
+    expect(move.accepted).toBe(false)
+    expect(finish.accepted).toBe(false)
+    expect(finish.state).toMatchObject({ currentX: 10, currentY: 20 })
+  })
+
+  it('updates a valid pointer and returns the completed snapshot on finish', () => {
+    const state = reduceViewportInteraction(null, {
+      type: 'begin',
+      gesture: { ...gesture, kind: 'pan' },
+    })
+    const moved = transitionViewportInteraction(state, {
+      type: 'move',
+      pointerId: 7,
+      position: { currentX: 30, currentY: 40 },
+    })
+    const finished = transitionViewportInteraction(moved.state, {
+      type: 'finish',
+      pointerId: 7,
+      position: { currentX: 50, currentY: 60 },
+    })
+
+    expect(moved.state).toMatchObject({ kind: 'pan', currentX: 30, currentY: 40 })
+    expect(finished.completed).toMatchObject({ kind: 'pan', currentX: 50, currentY: 60 })
+    expect(finished.state).toBeNull()
+  })
+
+  it('cancels only the owning pointer and supports cancel/reset events', () => {
+    const state = reduceViewportInteraction(null, { type: 'begin', gesture })
+    const rejectedCancel = transitionViewportInteraction(state, { type: 'cancel', pointerId: 8 })
+    const cancelled = transitionViewportInteraction(rejectedCancel.state, {
+      type: 'cancel',
+      pointerId: 7,
+    })
+    const restarted = reduceViewportInteraction(null, { type: 'begin', gesture })
+    const reset = transitionViewportInteraction(restarted, { type: 'reset' })
+
+    expect(rejectedCancel.accepted).toBe(false)
+    expect(rejectedCancel.state).not.toBeNull()
+    expect(cancelled.accepted).toBe(true)
+    expect(cancelled.state).toBeNull()
+    expect(reset.accepted).toBe(true)
+    expect(reset.state).toBeNull()
+  })
+
+  it('keeps events discriminated and does not mutate the begin input', () => {
+    const event: ViewportInteractionEvent = { type: 'begin', gesture }
+    const state = reduceViewportInteraction(null, event)
+
+    expect(state).not.toBeNull()
+    expect(state?.xDomain).toEqual([0, 100])
+    expect(state?.yDomains.track).toEqual([-1, 1])
+    expect(event.gesture.xDomain).toEqual([0, 100])
+    expect(event.gesture.yDomains.track).toEqual([-1, 1])
+  })
+})

package/src/components/interaction/viewportInteractionState.ts

@@ -0,0 +1,89 @@
+import type { ViewportSelectionState } from '../core/waveformChartTypes'
+
+export interface ViewportGestureStart {
+  trackIndex: number
+  independent: boolean
+  startX: number
+  startY: number
+  pointerId: number
+  kind: 'box' | 'pan'
+  xDomain: [number, number]
+  yDomains: Record<string, [number, number]>
+}
+
+export interface ViewportGesturePosition {
+  currentX: number
+  currentY: number
+}
+
+export type ViewportInteractionEvent =
+  | { type: 'begin'; gesture: ViewportGestureStart }
+  | { type: 'move'; pointerId: number; position: ViewportGesturePosition }
+  | { type: 'finish'; pointerId: number; position: ViewportGesturePosition }
+  | { type: 'cancel'; pointerId?: number }
+  | { type: 'reset' }
+
+export interface ViewportInteractionTransition {
+  state: ViewportSelectionState | null
+  accepted: boolean
+  completed: ViewportSelectionState | null
+}
+
+function createSelectionState(input: ViewportGestureStart): ViewportSelectionState {
+  return {
+    ...input,
+    currentX: input.startX,
+    currentY: input.startY,
+    xDomain: [...input.xDomain],
+    yDomains: Object.fromEntries(
+      Object.entries(input.yDomains).map(([key, domain]) => [key, [...domain] as [number, number]]),
+    ),
+  }
+}
+
+function withPosition(
+  state: ViewportSelectionState,
+  position: ViewportGesturePosition,
+): ViewportSelectionState {
+  return { ...state, ...position }
+}
+
+function rejectedTransition(state: ViewportSelectionState | null): ViewportInteractionTransition {
+  return { state, accepted: false, completed: null }
+}
+
+export function transitionViewportInteraction(
+  state: ViewportSelectionState | null,
+  event: ViewportInteractionEvent,
+): ViewportInteractionTransition {
+  switch (event.type) {
+    case 'begin':
+      return state
+        ? rejectedTransition(state)
+        : { state: createSelectionState(event.gesture), accepted: true, completed: null }
+    case 'move':
+      if (!state || state.pointerId !== event.pointerId) return rejectedTransition(state)
+      return { state: withPosition(state, event.position), accepted: true, completed: null }
+    case 'finish':
+      if (!state || state.pointerId !== event.pointerId) return rejectedTransition(state)
+      return {
+        state: null,
+        accepted: true,
+        completed: withPosition(state, event.position),
+      }
+    case 'cancel':
+      if (!state || (event.pointerId !== undefined && state.pointerId !== event.pointerId)) {
+        return rejectedTransition(state)
+      }
+      return { state: null, accepted: true, completed: null }
+    case 'reset':
+      return { state: null, accepted: true, completed: null }
+  }
+}
+
+export function reduceViewportInteraction(
+  state: ViewportSelectionState | null,
+  event: ViewportInteractionEvent,
+): ViewportSelectionState | null {
+  return transitionViewportInteraction(state, event).state
+}