waveform-analysis 0.1.31 → 0.1.35

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

@@ -0,0 +1,149 @@
+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', () => {
+  const niceExplicitStrategy = {
+    type: 'nice' as const,
+    bounds: 'end' as const,
+    tickCount: 10,
+    includeExplicit: true,
+  }
+
+  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')
+  })
+
+  it('resets shared and independent explicit domains to their included nice bounds', async () => {
+    const shared = await mountSizedChart(
+      {
+        kind: 'points',
+        points: [
+          { x: 0, y: 0 },
+          { x: 4.999999, y: 1 },
+        ],
+      },
+      { initialXDomain: [0, 4.999999], xDomainStrategy: niceExplicitStrategy },
+    )
+    const independent = await mountSizedChart(gridSeries(2), {
+      displayMode: 'independent',
+      initialXDomains: { 'channel-0': [0, 4.999999] },
+      xDomainStrategy: niceExplicitStrategy,
+    })
+
+    ;(shared.vm as unknown as { resetViewport: () => void }).resetViewport()
+    ;(independent.vm as unknown as { resetViewport: () => void }).resetViewport()
+    await flushPromises()
+
+    expect(shared.get('.waveform-chart__axis-endpoint--start').text()).toBe('0')
+    expect(shared.get('.waveform-chart__axis-endpoint--end').text()).toBe('5000')
+    const firstTrack = independent.findAll('.waveform-chart__track')[0]
+    expect(firstTrack.get('.waveform-chart__axis-endpoint--start').text()).toBe('0')
+    expect(firstTrack.get('.waveform-chart__axis-endpoint--end').text()).toBe('5000')
+  })
+})

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

@@ -0,0 +1,96 @@
+import { describe, expect, it } from 'vitest'
+
+import { gridSeries, mountSizedChart } from '../../test/waveformChart'
+
+describe('WaveformChart x domain strategy', () => {
+  it('expands automatic x domains without changing source seconds', async () => {
+    const data = {
+      kind: 'points' as const,
+      points: [
+        { x: 0, y: 0 },
+        { x: 4.999999, y: 1 },
+      ],
+    }
+    const wrapper = await mountSizedChart(data, {
+      timeUnit: 'ms',
+      xDomainStrategy: { type: 'nice', bounds: 'end' },
+    })
+
+    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).toBe('0')
+    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('5000')
+    expect(data.points[1]?.x).toBe(4.999999)
+  })
+
+  it('keeps explicit initial x domains exact by default', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'points',
+        points: [
+          { x: 123, y: 0 },
+          { x: 456, y: 1 },
+        ],
+      },
+      {
+        timeUnit: 's',
+        initialXDomain: [120, 460],
+        xDomainStrategy: { type: 'nice' },
+      },
+    )
+
+    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).toBe('120')
+    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('460')
+  })
+
+  it('keeps explicit per-track initial x domains exact by default', async () => {
+    const wrapper = await mountSizedChart(gridSeries(1), {
+      displayMode: 'independent',
+      initialXDomains: { 'channel-0': [0, 4.999999] },
+      xDomainStrategy: { type: 'nice', bounds: 'end' },
+    })
+
+    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).toBe('0')
+    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('4999.999')
+  })
+
+  it('includes an explicit shared initial x domain when requested', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'points',
+        points: [
+          { x: 0, y: 0 },
+          { x: 4.999999, y: 1 },
+        ],
+      },
+      {
+        initialXDomain: [0, 4.999999],
+        xDomainStrategy: {
+          type: 'nice',
+          bounds: 'end',
+          tickCount: 10,
+          includeExplicit: true,
+        },
+      },
+    )
+
+    expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).toBe('0')
+    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('5000')
+  })
+
+  it('includes explicit per-track initial x domains in independent mode', async () => {
+    const wrapper = await mountSizedChart(gridSeries(2), {
+      displayMode: 'independent',
+      grid: { rowCount: 1, columnCount: 2 },
+      initialXDomains: {
+        'channel-0': [0, 4.999999],
+        'channel-1': [10, 14.999999],
+      },
+      xDomainStrategy: { type: 'nice', bounds: 'end', tickCount: 10, includeExplicit: true },
+    })
+
+    const tracks = wrapper.findAll('.waveform-chart__track')
+    expect(tracks[0]?.get('.waveform-chart__axis-endpoint--start').text()).toBe('0')
+    expect(tracks[0]?.get('.waveform-chart__axis-endpoint--end').text()).toBe('5000')
+    expect(tracks[1]?.get('.waveform-chart__axis-endpoint--start').text()).toBe('10000')
+    expect(tracks[1]?.get('.waveform-chart__axis-endpoint--end').text()).toBe('15000')
+  })
+})

package/src/index.ts

@@ -13,7 +13,9 @@ export type {
   WaveformDisplayMode,
   WaveformOverlayMode,
   WaveformInteractionMode,
+  WaveformXDomainStrategy,
   WaveformZoomEndPayload,
+  WaveformZoomResetPayload,
   WaveformAnnotationStyle,
   WaveformAnnotation,
   WaveformRenderingOptions,

package/src/types/chart.ts

@@ -26,6 +26,17 @@ export type WaveformOverlayMode = 'single-axis' | 'multi-axis'
 /** 标注工具模式 */
 export type WaveformInteractionMode = 'zoom' | 'annotation'
 
+/** Controls how the initial X viewport is derived when no explicit domain is configured. */
+export interface WaveformXDomainStrategy {
+  type: 'data' | 'nice'
+  /** Selects which bounds are expanded when type is `nice`. Defaults to `both`. */
+  bounds?: 'both' | 'end'
+  /** Stable tick count used to calculate nice bounds. Defaults to 10. */
+  tickCount?: number
+  /** Applies the strategy to explicit initial domains. Defaults to false. */
+  includeExplicit?: boolean
+}
+
 /** Describes the X-axis viewport after a zoom gesture completes. */
 export interface WaveformZoomEndPayload {
   start: number
@@ -38,6 +49,12 @@ export interface WaveformZoomEndPayload {
   gesture?: 'wheel' | 'box'
 }
 
+/** Identifies the viewport reset by a double-click gesture. */
+export interface WaveformZoomResetPayload {
+  trackIndex?: number
+  seriesIds?: string[]
+}
+
 /** 标注颜色样式 */
 export interface WaveformAnnotationStyle {
   borderColor?: string

package/src/types/index.ts

@@ -8,7 +8,9 @@ export type {
   WaveformDisplayMode,
   WaveformOverlayMode,
   WaveformInteractionMode,
+  WaveformXDomainStrategy,
   WaveformZoomEndPayload,
+  WaveformZoomResetPayload,
   WaveformAnnotationStyle,
   WaveformAnnotation,
   WaveformRenderingOptions,