waveform-analysis 0.1.46 → 0.1.48

package/src/components/interaction/useWaveformViewport.ts

@@ -3,11 +3,8 @@ import { computed, nextTick, shallowRef, type ComputedRef, type Ref, type Shallo
 import { MINIMUM_SELECTION_SIZE } from '../core/constants'
 import type { DisplayTrack, TrackLayout } from '../core/types'
 import { hasFixedYDomainForTrack } from '../core/yDomain'
-import type {
-  ResolvedWaveformChartProps,
-  ViewportSelectionState,
-  WaveformChartEmit,
-} from '../core/waveformChartTypes'
+import type { ResolvedWaveformChartProps, ViewportSelectionState } from '../core/waveformChartTypes'
+import type { WaveformChartEmit } from '../core/waveformChartTypes'
 import type { AnnotationSeriesCandidate } from '../annotation'
 import { tryReleasePointerCapture } from './pointerCapture'
 import { transitionViewportInteraction } from './viewportInteractionState'
@@ -104,10 +101,12 @@ export function useWaveformViewport(context: ViewportContext) {
   }
   const currentYDomains = (): Record<string, [number, number]> =>
     Object.fromEntries(
-      trackLayouts.value.map((track) => [
-        track.series.trackId ?? track.series.id,
-        track.yScale.domain() as [number, number],
-      ]),
+      trackLayouts.value
+        .filter((track) => track.hasVisibleSeries)
+        .map((track) => [
+          track.series?.trackId ?? track.series?.id ?? track.id,
+          track.yScale.domain() as [number, number],
+        ]),
     )
   const beginViewportDrag = (event: PointerEvent, trackIndex: number, independent: boolean) => {
     if (isPresentationMode.value) return
@@ -142,8 +141,10 @@ export function useWaveformViewport(context: ViewportContext) {
   const beginSharedViewportDrag = (event: PointerEvent) => {
     if (!sharedOverlayElement.value) return
     const [x, y] = pointer(event, sharedOverlayElement.value)
+    const pointedTrack = resolveTrackAtPointer(x, y)
     const track =
-      resolveTrackAtPointer(x, y) ?? trackLayouts.value.find((item) => item.hasVisibleSeries)
+      (pointedTrack?.hasVisibleSeries ? pointedTrack : undefined) ??
+      trackLayouts.value.find((item) => item.hasVisibleSeries)
     if (track) beginViewportDrag(event, track.index, false)
   }
   const applyPan = (active: ViewportSelectionState, track: TrackLayout) => {
@@ -166,7 +167,9 @@ export function useWaveformViewport(context: ViewportContext) {
     } else {
       sharedTransform.value = transformForDomain(nextX, sourceXDomain, innerWidth.value)
     }
-    const targets = active.independent ? [track] : trackLayouts.value
+    const targets = active.independent
+      ? [track]
+      : trackLayouts.value.filter((target) => target.hasVisibleSeries)
     const nextIndependentDomains = { ...independentYDomains.value }
     const nextSharedDomains = { ...sharedYDomains.value }
     targets.forEach((target) => {
@@ -174,7 +177,7 @@ export function useWaveformViewport(context: ViewportContext) {
       if (chartTrack && hasFixedYDomainForTrack(chartTrack, props.yDomain, props.yDomains)) {
         return
       }
-      const key = target.series.trackId ?? target.series.id
+      const key = target.series?.trackId ?? target.series?.id ?? target.id
       const source = active.yDomains[key] ?? (target.yScale.domain() as [number, number])
       const boundary = chartTrack?.yDomain ?? source
       const ySpan = source[1] - source[0]
@@ -251,16 +254,18 @@ export function useWaveformViewport(context: ViewportContext) {
     } else {
       sharedTransform.value = transformForDomain(xDomain, baseXDomain, innerWidth.value)
     }
-    const targets = active.independent ? [track] : trackLayouts.value
+    const targets = active.independent
+      ? [track]
+      : trackLayouts.value.filter((target) => target.hasVisibleSeries)
     const yRanges = Object.fromEntries(
       targets.map((target) => [
-        target.series.trackId ?? target.series.id,
+        target.series?.trackId ?? target.series?.id ?? target.id,
         target.yScale.domain() as [number, number],
       ]),
     )
     emit('zoom-change', xDomain)
     if (active.independent) {
-      const yDomain = yRanges[track.series.trackId ?? track.series.id]
+      const yDomain = yRanges[track.series?.trackId ?? track.series?.id ?? track.id]
       emit('zoom-end', {
         start: xDomain[0],
         end: xDomain[1],

package/src/components/interaction/useWaveformZoom.ts

@@ -177,7 +177,7 @@ export function useWaveformZoom(context: ZoomContext) {
         end: domain[1],
         yRanges: Object.fromEntries(
           visibleTracks.map((track) => [
-            track.series.trackId ?? track.series.id,
+            track.series?.trackId ?? track.series?.id ?? track.id,
             track.yScale.domain() as [number, number],
           ]),
         ),

package/src/components/rendering/WaveformTrack.vue

@@ -67,6 +67,7 @@ const resolvedFrameStyle = computed(() => {
     class="waveform-track waveform-chart__track"
     :class="{ 'waveform-track--empty waveform-chart__track--empty': track.isEmpty }"
     :data-track-index="track.index"
+    :data-track-id="track.id"
     :data-track-empty="track.isEmpty || undefined"
     :data-track-left="track.left"
     :data-track-width="track.width"

package/src/components/rendering/WaveformTrackAxes.vue

@@ -164,6 +164,7 @@ watch(
       track.hasVisibleSeries &&
       track.seriesList.length === 1 &&
       track.showYAxisLabel &&
+      track.series &&
       resolveYAxisLabel(track.series) &&
       shouldShowYAxisLabel(track.height, track.index)
     "
@@ -178,12 +179,12 @@ watch(
     />
     <text
       class="waveform-track__y-axis-label waveform-chart__y-axis-label"
-      :fill="track.series.color"
+      :fill="track.series?.color"
       :transform="`translate(${track.yAxisLabelX}, ${track.height / 2}) rotate(-90)`"
       text-anchor="middle"
       dominant-baseline="central"
     >
-      {{ resolveYAxisLabel(track.series) }}
+      {{ track.series ? resolveYAxisLabel(track.series) : '' }}
     </text>
   </g>
 

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

@@ -144,6 +144,55 @@ describe('WaveformChart', () => {
     expect(wrapper.get('.ant-pagination-next').classes()).toContain('ant-pagination-disabled')
   })
 
+  it('keeps ordered empty tracks in their page slots after channels are merged', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'series',
+        series: ['frame-1', 'frame-1', 'frame-3', 'frame-4', 'frame-5', 'frame-6'].map(
+          (trackId, index) => ({
+            id: `channel-${index + 1}`,
+            trackId,
+            name: `channel-${index + 1}`,
+            data: {
+              kind: 'points' as const,
+              points: [
+                { x: 0, y: index },
+                { x: 1, y: index + 1 },
+              ],
+            },
+          }),
+        ),
+      },
+      {
+        grid: {
+          rowCount: 2,
+          columnCount: 1,
+          trackOrder: ['frame-1', 'frame-2', 'frame-3', 'frame-4', 'frame-5', 'frame-6'],
+        },
+      },
+    )
+    const trackIds = () =>
+      wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id'))
+    const lineIds = () =>
+      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id'))
+    const nextButton = () => wrapper.get('.ant-pagination-next button')
+
+    expect(trackIds()).toEqual(['frame-1', 'frame-2'])
+    expect(wrapper.findAll('.waveform-chart__track--empty')).toHaveLength(1)
+    expect(lineIds()).toEqual(['channel-1', 'channel-2'])
+    expect(wrapper.findAll('.waveform-chart__legend')).toHaveLength(1)
+
+    await nextButton().trigger('click')
+    expect(trackIds()).toEqual(['frame-3', 'frame-4'])
+    expect(lineIds()).toEqual(['channel-3', 'channel-4'])
+    expect(wrapper.emitted('page-change')?.at(-1)).toEqual([2, 3])
+
+    await nextButton().trigger('click')
+    expect(trackIds()).toEqual(['frame-5', 'frame-6'])
+    expect(lineIds()).toEqual(['channel-5', 'channel-6'])
+    expect(wrapper.emitted('page-change')?.at(-1)).toEqual([3, 3])
+  })
+
   it('overlays series with the same track ID without changing the next frame', async () => {
     const wrapper = await mountSizedChart(
       {

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

@@ -0,0 +1,261 @@
+import { flushPromises } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import { flushAnimationFrames } from '../../test/setup'
+import { mountSizedChart } from '../../test/waveformChart'
+
+describe('WaveformChart track order', () => {
+  const points = (offset: number) => ({
+    kind: 'points' as const,
+    points: [
+      { x: 0, y: offset },
+      { x: 1, y: offset + 1 },
+    ],
+  })
+  const orderedSeries = (trackIds: string[]) => ({
+    kind: 'series' as const,
+    series: trackIds.map((trackId, index) => ({
+      id: trackId,
+      trackId,
+      name: trackId,
+      data: points(index + 1),
+    })),
+  })
+  const mergedFourTrackSeries = () => ({
+    kind: 'series' as const,
+    series: [
+      { id: 'frame-1-a', trackId: 'frame-1', name: 'frame-1-a', data: points(1) },
+      { id: 'frame-1-b', trackId: 'frame-1', name: 'frame-1-b', data: points(2) },
+      { id: 'frame-3', trackId: 'frame-3', name: 'frame-3', data: points(3) },
+      { id: 'frame-4', trackId: 'frame-4', name: 'frame-4', data: points(4) },
+    ],
+  })
+
+  it('keeps a merged source slot empty without adding legend or tooltip data', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'series',
+        series: [
+          {
+            id: 'frame-1-a',
+            trackId: 'frame-1',
+            name: '合并前通道',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: 1 },
+                { x: 1, y: 2 },
+              ],
+            },
+          },
+          {
+            id: 'frame-1-b',
+            trackId: 'frame-1',
+            name: '合并后通道',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: 3 },
+                { x: 1, y: 4 },
+              ],
+            },
+          },
+          {
+            id: 'frame-3',
+            trackId: 'frame-3',
+            name: '后续通道',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: 5 },
+                { x: 1, y: 6 },
+              ],
+            },
+          },
+        ],
+      },
+      {
+        displayMode: 'separated',
+        grid: { rowCount: 3, trackOrder: ['frame-1', 'frame-2', 'frame-3'] },
+      },
+    )
+    const trackIds = () =>
+      wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id'))
+
+    expect(trackIds()).toEqual(['frame-1', 'frame-2', 'frame-3'])
+    expect(wrapper.findAll('.waveform-chart__track--empty')).toHaveLength(1)
+    expect(
+      wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
+    ).toEqual(['frame-1-a', 'frame-1-b', 'frame-3'])
+    expect(wrapper.findAll('.waveform-chart__legend')).toHaveLength(1)
+
+    const overlay = wrapper.get('.waveform-chart__overlay--shared')
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width: 712, height: 290 }),
+    })
+    overlay.element.dispatchEvent(
+      new MouseEvent('pointermove', { clientX: 356, clientY: 150, bubbles: true }),
+    )
+    flushAnimationFrames()
+    await flushPromises()
+
+    expect(wrapper.findAll('.waveform-chart__tooltip-series')).toHaveLength(3)
+    expect(wrapper.get('.waveform-chart__tooltip').text()).not.toContain('frame-2')
+    expect(wrapper.findAll('.waveform-chart__crosshair line')).toHaveLength(2)
+  })
+
+  it('appends data tracks absent from trackOrder in input order', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'series',
+        series: [
+          {
+            id: 'later-a',
+            trackId: 'later-a',
+            name: 'later-a',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: 1 },
+                { x: 1, y: 2 },
+              ],
+            },
+          },
+          {
+            id: 'frame-1',
+            trackId: 'frame-1',
+            name: 'frame-1',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: 3 },
+                { x: 1, y: 4 },
+              ],
+            },
+          },
+          {
+            id: 'later-b',
+            trackId: 'later-b',
+            name: 'later-b',
+            data: {
+              kind: 'points',
+              points: [
+                { x: 0, y: 5 },
+                { x: 1, y: 6 },
+              ],
+            },
+          },
+        ],
+      },
+      { grid: { rowCount: 2, columnCount: 2, trackOrder: ['frame-2', 'frame-1'] } },
+    )
+
+    expect(
+      wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id')),
+    ).toEqual(['frame-2', 'frame-1', 'later-a', 'later-b'])
+  })
+
+  it.each(['independent', 'separated', 'compact'] as const)(
+    'reclaims merged empty slots in %s mode when incomplete rows fill',
+    async (displayMode) => {
+      const wrapper = await mountSizedChart(mergedFourTrackSeries(), {
+        displayMode,
+        grid: {
+          rowCount: 4,
+          columnCount: 1,
+          fillIncompleteLastRow: true,
+          trackOrder: ['frame-1', 'frame-2', 'frame-3', 'frame-4'],
+        },
+      })
+      const tracks = wrapper.findAll('.waveform-chart__track')
+      const heights = tracks.map((track) => Number(track.attributes('data-track-height')))
+
+      expect(tracks.map((track) => track.attributes('data-track-id'))).toEqual([
+        'frame-1',
+        'frame-3',
+        'frame-4',
+      ])
+      expect(wrapper.findAll('.waveform-chart__track--empty')).toHaveLength(0)
+      expect(wrapper.findAll('.waveform-chart__line')).toHaveLength(4)
+      expect(heights[0]).toBeCloseTo(heights[1] ?? Number.NaN)
+      expect(heights[1]).toBeCloseTo(heights[2] ?? Number.NaN)
+      expect(wrapper.findAll('.waveform-chart__legend')).toHaveLength(1)
+      expect(wrapper.get('.waveform-chart__legend').text()).not.toContain('frame-2')
+    },
+  )
+
+  it('reclaims only the current page without pulling tracks from the next page', async () => {
+    const wrapper = await mountSizedChart(
+      orderedSeries(['frame-1', 'frame-3', 'frame-4', 'frame-5', 'frame-6', 'frame-7', 'frame-8']),
+      {
+        grid: {
+          rowCount: 4,
+          columnCount: 1,
+          fillIncompleteLastRow: true,
+          trackOrder: [
+            'frame-1',
+            'frame-2',
+            'frame-3',
+            'frame-4',
+            'frame-5',
+            'frame-6',
+            'frame-7',
+            'frame-8',
+          ],
+        },
+      },
+    )
+    const trackIds = () =>
+      wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id'))
+
+    expect(trackIds()).toEqual(['frame-1', 'frame-3', 'frame-4'])
+    await wrapper.get('.ant-pagination-next button').trigger('click')
+    expect(trackIds()).toEqual(['frame-5', 'frame-6', 'frame-7', 'frame-8'])
+    expect(wrapper.emitted('page-change')?.at(-1)).toEqual([2, 2])
+  })
+
+  it('retains ordered empty slots when incomplete rows do not fill', async () => {
+    const wrapper = await mountSizedChart(orderedSeries(['frame-1', 'frame-3', 'frame-4']), {
+      grid: {
+        rowCount: 4,
+        columnCount: 1,
+        fillIncompleteLastRow: false,
+        trackOrder: ['frame-1', 'frame-2', 'frame-3', 'frame-4'],
+      },
+    })
+
+    expect(
+      wrapper.findAll('.waveform-chart__track').map((track) => track.attributes('data-track-id')),
+    ).toEqual(['frame-1', 'frame-2', 'frame-3', 'frame-4'])
+    expect(wrapper.findAll('.waveform-chart__track--empty')).toHaveLength(1)
+  })
+
+  it('keeps an entirely empty page addressable when incomplete rows fill', async () => {
+    const wrapper = await mountSizedChart(
+      orderedSeries(['frame-1', 'frame-2', 'frame-3', 'frame-4']),
+      {
+        grid: {
+          rowCount: 4,
+          columnCount: 1,
+          fillIncompleteLastRow: true,
+          trackOrder: [
+            'frame-1',
+            'frame-2',
+            'frame-3',
+            'frame-4',
+            'frame-5',
+            'frame-6',
+            'frame-7',
+            'frame-8',
+          ],
+        },
+      },
+    )
+
+    await wrapper.get('.ant-pagination-next button').trigger('click')
+
+    expect(wrapper.findAll('.waveform-chart__track--empty')).toHaveLength(4)
+    expect(wrapper.emitted('page-change')?.at(-1)).toEqual([2, 2])
+    expect(wrapper.get('.ant-pagination-item-active').text()).toBe('2')
+  })
+})

package/src/demo/xAxisLabelControls.test.ts

@@ -82,5 +82,5 @@ describe('X-axis label demo controls', () => {
     expect(chart.props('axes')?.x?.labelFormatter).toBeUndefined()
     expect(wrapper.find('[aria-label="X 轴 Label 运算倍率"]').exists()).toBe(false)
     wrapper.unmount()
-  })
+  }, 10_000)
 })

package/src/types/chart.ts

@@ -176,6 +176,8 @@ export interface WaveformAxesOptions {
     lineVisible?: boolean
     /** Target total number of equal Y-axis ticks, including endpoints. Defaults to 5. */
     splitNumber?: number
+    /** Expands Y-axis domains to equal, human-friendly intervals. Defaults to true. */
+    nice?: boolean
   }
 }