waveform-analysis 0.1.30 → 0.1.32

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

package/src/components/interaction/zoomConstraints.ts

@@ -0,0 +1,167 @@
+import { scaleLinear, zoomIdentity, type ZoomTransform } from 'd3'
+
+import type { WaveformPoint } from '../../types'
+import { ZOOM_CONSTRAINTS } from '../core/constants'
+
+interface PointSeriesSource {
+  points: WaveformPoint[]
+}
+
+export type ZoomSeriesGroup = readonly PointSeriesSource[]
+
+interface ZoomConstraintOptions {
+  minZoomSpan?: number
+  minVisiblePoints?: number
+}
+
+const xValueCache = new WeakMap<object, Map<string, number[]>>()
+
+function normalizedBoundary(boundary: [number, number]): [number, number] {
+  return boundary[0] <= boundary[1] ? [...boundary] : [boundary[1], boundary[0]]
+}
+
+function resolveRequiredPointCount(minimum: number | undefined): number {
+  return Number.isFinite(minimum) && (minimum ?? 0) > 0 ? Math.ceil(minimum as number) : 0
+}
+
+function uniqueXValues(group: ZoomSeriesGroup, boundary: [number, number]): number[] {
+  const boundaryKey = `${boundary[0]}\u0000${boundary[1]}`
+  const cached = xValueCache.get(group)?.get(boundaryKey)
+  if (cached) return cached
+  const values = new Set<number>()
+  for (const series of group) {
+    for (const point of series.points) {
+      if (point.x >= boundary[0] && point.x <= boundary[1]) values.add(point.x)
+    }
+  }
+  const sorted = Array.from(values).sort((left, right) => left - right)
+  const groupCache = xValueCache.get(group) ?? new Map<string, number[]>()
+  groupCache.set(boundaryKey, sorted)
+  xValueCache.set(group, groupCache)
+  return sorted
+}
+
+function minimumPointSpan(
+  groups: readonly ZoomSeriesGroup[],
+  boundary: [number, number],
+  required: number,
+): number {
+  if (required <= 1) return 0
+  let minimumSpan = 0
+  for (const group of groups) {
+    const values = uniqueXValues(group, boundary)
+    if (values.length < required) return boundary[1] - boundary[0]
+    let groupSpan = Number.POSITIVE_INFINITY
+    for (let index = 0; index + required <= values.length; index += 1) {
+      groupSpan = Math.min(groupSpan, values[index + required - 1] - values[index])
+    }
+    const endpointTolerance =
+      Number.EPSILON * Math.max(1, Math.abs(boundary[0]), Math.abs(boundary[1])) * 16
+    minimumSpan = Math.max(minimumSpan, groupSpan + endpointTolerance)
+  }
+  return minimumSpan
+}
+
+export function resolveMinimumZoomSpan(
+  boundary: [number, number],
+  groups: readonly ZoomSeriesGroup[],
+  options: ZoomConstraintOptions,
+): number {
+  const normalized = normalizedBoundary(boundary)
+  const boundarySpan = normalized[1] - normalized[0]
+  if (!Number.isFinite(boundarySpan) || boundarySpan <= 0) return 0
+  const configuredSpan =
+    Number.isFinite(options.minZoomSpan) && (options.minZoomSpan ?? 0) > 0
+      ? Math.min(boundarySpan, options.minZoomSpan as number)
+      : 0
+  const required = resolveRequiredPointCount(options.minVisiblePoints)
+  const pointSpan = minimumPointSpan(groups, normalized, required)
+  if (configuredSpan > 0 || required > 0) {
+    return Math.max(configuredSpan, pointSpan)
+  }
+  return boundarySpan / ZOOM_CONSTRAINTS.DEFAULT_MAX_SCALE
+}
+
+function expandToMinimumPoints(
+  domain: [number, number],
+  boundary: [number, number],
+  groups: readonly ZoomSeriesGroup[],
+  required: number,
+): [number, number] {
+  if (required <= 0) return domain
+  const endpointTolerance =
+    Number.EPSILON * Math.max(1, Math.abs(boundary[0]), Math.abs(boundary[1])) * 16
+  let expanded = domain
+  for (const group of groups) {
+    const values = uniqueXValues(group, boundary)
+    if (values.length < required) return [...boundary]
+    const visibleCount = values.filter(
+      (value) => value >= expanded[0] && value <= expanded[1],
+    ).length
+    if (visibleCount >= required) continue
+    let best: [number, number] | undefined
+    let bestSpan = Number.POSITIVE_INFINITY
+    let bestCenterDistance = Number.POSITIVE_INFINITY
+    const requestedCenter = (expanded[0] + expanded[1]) / 2
+    for (let index = 0; index + required <= values.length; index += 1) {
+      const candidate: [number, number] = [
+        Math.max(boundary[0], Math.min(expanded[0], values[index] - endpointTolerance)),
+        Math.min(
+          boundary[1],
+          Math.max(expanded[1], values[index + required - 1] + endpointTolerance),
+        ),
+      ]
+      const span = candidate[1] - candidate[0]
+      const centerDistance = Math.abs((candidate[0] + candidate[1]) / 2 - requestedCenter)
+      if (span < bestSpan || (span === bestSpan && centerDistance < bestCenterDistance)) {
+        best = candidate
+        bestSpan = span
+        bestCenterDistance = centerDistance
+      }
+    }
+    expanded = best ?? [...boundary]
+  }
+  return expanded
+}
+
+export function constrainZoomDomain(
+  domain: [number, number],
+  boundary: [number, number],
+  groups: readonly ZoomSeriesGroup[],
+  options: ZoomConstraintOptions,
+): [number, number] {
+  const normalized = normalizedBoundary(boundary)
+  const boundarySpan = normalized[1] - normalized[0]
+  if (!Number.isFinite(boundarySpan) || boundarySpan <= 0) return normalized
+  if (Math.abs(domain[1] - domain[0]) >= boundarySpan * (1 - 1e-12)) return normalized
+  const requested: [number, number] = [
+    Math.max(normalized[0], Math.min(domain[0], domain[1])),
+    Math.min(normalized[1], Math.max(domain[0], domain[1])),
+  ]
+  const expanded = expandToMinimumPoints(
+    requested,
+    normalized,
+    groups,
+    resolveRequiredPointCount(options.minVisiblePoints),
+  )
+  const minimumSpan = resolveMinimumZoomSpan(normalized, groups, options)
+  const span = Math.max(minimumSpan, Math.min(boundarySpan, expanded[1] - expanded[0]))
+  const center = (expanded[0] + expanded[1]) / 2
+  const start = Math.max(normalized[0], Math.min(center - span / 2, normalized[1] - span))
+  return [start, start + span]
+}
+
+export function 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)
+}

package/src/components/waveformChartCases/viewportConstraintsAndReset.test.ts

@@ -308,69 +308,4 @@ describe('WaveformChart', () => {
     expect(wrapper.emitted('zoom-change')?.length ?? 0).toBe(eventCount + 1)
     expect(zoomedOutDomain).toEqual([0, 2])
   })
-
-  it('resets a shared viewport on double-click and emits zoom-reset', async () => {
-    const wrapper = await mountSizedChart({
-      kind: 'points',
-      points: [
-        { x: 0, y: 0 },
-        { x: 2, y: 1 },
-      ],
-    })
-    const overlay = wrapper.get('.waveform-chart__overlay')
-    const width = Number(overlay.attributes('width'))
-    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
-      value: () => ({ left: 0, top: 0, width, height: 290 }),
-    })
-    overlay.element.dispatchEvent(
-      new WheelEvent('wheel', {
-        deltaY: -4000,
-        clientX: width / 2,
-        clientY: 145,
-        bubbles: true,
-        cancelable: true,
-      }),
-    )
-    flushAnimationFrames()
-    await flushPromises()
-    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).not.toBe('0')
-
-    overlay.element.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true }))
-    await flushPromises()
-
-    expect(wrapper.emitted('zoom-reset')).toHaveLength(1)
-    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).toBe('0')
-    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('2000')
-  })
-
-  it('exposes resetViewport for independent tracks', async () => {
-    const wrapper = await mountSizedChart(gridSeries(2), {
-      displayMode: 'independent',
-      grid: { rowCount: 1, columnCount: 2 },
-    })
-    const overlay = wrapper.findAll('.waveform-chart__overlay--independent')[0]
-    const width = Number(overlay.attributes('width'))
-    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
-      value: () => ({ left: 0, top: 0, width, height: 260 }),
-    })
-    overlay.element.dispatchEvent(
-      new WheelEvent('wheel', {
-        deltaY: -4000,
-        clientX: width / 2,
-        clientY: 130,
-        bubbles: true,
-        cancelable: true,
-      }),
-    )
-    flushAnimationFrames()
-    await flushPromises()
-    expect(wrapper.findAll('.waveform-chart__axis-endpoint--start')[0].text()).not.toBe('0')
-
-    const chart = wrapper.vm as unknown as { resetViewport: () => void }
-    chart.resetViewport()
-    await flushPromises()
-
-    expect(wrapper.findAll('.waveform-chart__axis-endpoint--start')[0].text()).toBe('0')
-    expect(wrapper.findAll('.waveform-chart__axis-endpoint--end')[0].text()).toBe('1000')
-  })
 })

package/src/components/waveformChartCases/viewportLifecycle.test.ts

@@ -0,0 +1,132 @@
+import { flushPromises } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import { gridSeries, mountSizedChart } from '../../test/waveformChart'
+import WaveformChartView from '../WaveformChartView.vue'
+
+describe('WaveformChart viewport lifecycle', () => {
+  it('cleans an active shared gesture when its track is removed', async () => {
+    const wrapper = await mountSizedChart(gridSeries(2), {
+      displayMode: 'separated',
+      grid: { rowCount: 2, columnCount: 1 },
+    })
+    const overlay = wrapper.get('.waveform-chart__overlay--shared')
+    const width = Number(overlay.attributes('width'))
+    const height = Number(overlay.attributes('height'))
+    const releasePointerCapture = vi.fn()
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width, height }),
+    })
+    Object.defineProperty(overlay.element, 'setPointerCapture', { value: vi.fn() })
+    Object.defineProperty(overlay.element, 'releasePointerCapture', {
+      value: releasePointerCapture,
+    })
+
+    const dispatchPointer = (type: string, pointerId: number, clientY: number) => {
+      const event = new MouseEvent(type, {
+        button: 0,
+        clientX: width / 2,
+        clientY,
+        bubbles: true,
+      })
+      Object.defineProperty(event, 'pointerId', { value: pointerId })
+      overlay.element.dispatchEvent(event)
+    }
+
+    dispatchPointer('pointerdown', 41, height * 0.75)
+    await flushPromises()
+    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(true)
+
+    await wrapper.setProps({ data: gridSeries(1) })
+    await flushPromises()
+    dispatchPointer('pointerup', 41, height * 0.75)
+    await flushPromises()
+
+    expect(releasePointerCapture).toHaveBeenCalledWith(41)
+    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(false)
+
+    dispatchPointer('pointerdown', 42, height / 2)
+    dispatchPointer('pointermove', 42, height / 2 + 20)
+    await flushPromises()
+    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(true)
+  })
+
+  it('cleans an active gesture when its overlay leaves the DOM', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'points',
+        points: [
+          { x: 0, y: 0 },
+          { x: 1, y: 1 },
+        ],
+      },
+      { displayMode: 'separated' },
+    )
+    const overlay = wrapper.get('.waveform-chart__overlay--shared')
+    const width = Number(overlay.attributes('width'))
+    const height = Number(overlay.attributes('height'))
+    const releasePointerCapture = vi.fn(() => {
+      throw new DOMException('Pointer capture is no longer available', 'NotFoundError')
+    })
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width, height }),
+    })
+    Object.defineProperty(overlay.element, 'setPointerCapture', { value: vi.fn() })
+    Object.defineProperty(overlay.element, 'releasePointerCapture', {
+      value: releasePointerCapture,
+    })
+
+    const down = new MouseEvent('pointerdown', {
+      button: 0,
+      clientX: width / 2,
+      clientY: height / 2,
+      bubbles: true,
+    })
+    Object.defineProperty(down, 'pointerId', { value: 43 })
+    overlay.element.dispatchEvent(down)
+    await wrapper.setProps({ hiddenSeriesIds: ['series-0'] })
+    await flushPromises()
+
+    expect(wrapper.find('.waveform-chart__overlay--shared').exists()).toBe(false)
+    const view = wrapper.findComponent(WaveformChartView)
+    const finishViewportDrag = (
+      view.vm as unknown as { finishViewportDrag: (event: PointerEvent) => void }
+    ).finishViewportDrag
+    const up = new MouseEvent('pointerup', {
+      clientX: width / 2,
+      clientY: height / 2,
+      bubbles: true,
+    })
+    Object.defineProperty(up, 'pointerId', { value: 43 })
+    finishViewportDrag(up as unknown as PointerEvent)
+    await flushPromises()
+
+    expect(releasePointerCapture).toHaveBeenCalledWith(43)
+    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(false)
+
+    await wrapper.setProps({ hiddenSeriesIds: [] })
+    await flushPromises()
+    const nextOverlay = wrapper.get('.waveform-chart__overlay--shared')
+    Object.defineProperty(nextOverlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width, height }),
+    })
+    const nextDown = new MouseEvent('pointerdown', {
+      button: 0,
+      clientX: width / 2,
+      clientY: height / 2,
+      bubbles: true,
+    })
+    Object.defineProperty(nextDown, 'pointerId', { value: 44 })
+    nextOverlay.element.dispatchEvent(nextDown)
+    const nextMove = new MouseEvent('pointermove', {
+      clientX: width * 0.75,
+      clientY: height / 2,
+      bubbles: true,
+    })
+    Object.defineProperty(nextMove, 'pointerId', { value: 44 })
+    nextOverlay.element.dispatchEvent(nextMove)
+    await flushPromises()
+
+    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(true)
+  })
+})

package/src/components/waveformChartCases/viewportReset.test.ts

@@ -0,0 +1,114 @@
+import { flushPromises } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import { flushAnimationFrames } from '../../test/setup'
+import { gridSeries, mountSizedChart } from '../../test/waveformChart'
+
+describe('WaveformChart viewport reset', () => {
+  it('resets a shared viewport on double-click and emits a global payload', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'points',
+        points: [
+          { x: 0, y: 0 },
+          { x: 2, y: 1 },
+        ],
+      },
+      { displayMode: 'separated' },
+    )
+    const overlay = wrapper.get('.waveform-chart__overlay')
+    const width = Number(overlay.attributes('width'))
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width, height: 290 }),
+    })
+    overlay.element.dispatchEvent(
+      new WheelEvent('wheel', {
+        deltaY: -4000,
+        clientX: width / 2,
+        clientY: 145,
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+    flushAnimationFrames()
+    await flushPromises()
+    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).not.toBe('0')
+
+    overlay.element.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true }))
+    await flushPromises()
+
+    expect(wrapper.emitted('zoom-reset')).toEqual([[{}]])
+    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).toBe('0')
+    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('2000')
+  })
+
+  it('resets only the double-clicked independent track and identifies it', async () => {
+    const wrapper = await mountSizedChart(gridSeries(2), {
+      displayMode: 'independent',
+      grid: { rowCount: 1, columnCount: 2 },
+    })
+    const overlays = wrapper.findAll('.waveform-chart__overlay--independent')
+    for (const overlay of overlays) {
+      const width = Number(overlay.attributes('width'))
+      Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+        value: () => ({ left: 0, top: 0, width, height: 260 }),
+      })
+      overlay.element.dispatchEvent(
+        new WheelEvent('wheel', {
+          deltaY: -4000,
+          clientX: width / 2,
+          clientY: 130,
+          bubbles: true,
+          cancelable: true,
+        }),
+      )
+      flushAnimationFrames()
+      await flushPromises()
+    }
+    const startsBeforeReset = wrapper.findAll('.waveform-chart__axis-endpoint--start')
+    expect(startsBeforeReset[0].text()).not.toBe('0')
+    expect(startsBeforeReset[1].text()).not.toBe('0')
+    const secondTrackStart = startsBeforeReset[1].text()
+
+    overlays[0].element.dispatchEvent(
+      new MouseEvent('dblclick', { bubbles: true, cancelable: true }),
+    )
+    await flushPromises()
+
+    const startsAfterReset = wrapper.findAll('.waveform-chart__axis-endpoint--start')
+    expect(startsAfterReset[0].text()).toBe('0')
+    expect(startsAfterReset[1].text()).toBe(secondTrackStart)
+    expect(wrapper.emitted('zoom-reset')).toEqual([[{ trackIndex: 0, seriesIds: ['channel-0'] }]])
+  })
+
+  it('keeps the exposed no-argument resetViewport global', async () => {
+    const wrapper = await mountSizedChart(gridSeries(2), {
+      displayMode: 'independent',
+      grid: { rowCount: 1, columnCount: 2 },
+    })
+    const overlay = wrapper.findAll('.waveform-chart__overlay--independent')[0]
+    const width = Number(overlay.attributes('width'))
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width, height: 260 }),
+    })
+    overlay.element.dispatchEvent(
+      new WheelEvent('wheel', {
+        deltaY: -4000,
+        clientX: width / 2,
+        clientY: 130,
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+    flushAnimationFrames()
+    await flushPromises()
+    expect(wrapper.findAll('.waveform-chart__axis-endpoint--start')[0].text()).not.toBe('0')
+
+    const chart = wrapper.vm as unknown as { resetViewport: () => void }
+    chart.resetViewport()
+    await flushPromises()
+
+    expect(wrapper.findAll('.waveform-chart__axis-endpoint--start')[0].text()).toBe('0')
+    expect(wrapper.findAll('.waveform-chart__axis-endpoint--end')[0].text()).toBe('1000')
+  })
+})