waveform-analysis 0.1.63 → 0.1.65

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

@@ -1,345 +0,0 @@
-import { flushPromises } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-
-import { type WaveformData } from '../waveform'
-
-import { gridSeries, mountSizedChart } from '../../test/waveformChart'
-
-describe('WaveformChart', () => {
-  it('keeps clip path ids unique across chart instances', async () => {
-    const data: WaveformData = {
-      kind: 'series',
-      series: [
-        {
-          id: 'channel-1',
-          name: '通道 1',
-          data: {
-            kind: 'points',
-            points: [
-              { x: 0, y: 0 },
-              { x: 1, y: 1 },
-            ],
-          },
-        },
-      ],
-    }
-    const first = await mountSizedChart(data)
-    const second = await mountSizedChart(data)
-    const firstClipPathId = first.get('clipPath').attributes('id')
-    const secondClipPathId = second.get('clipPath').attributes('id')
-
-    expect(firstClipPathId).toBeTruthy()
-    expect(secondClipPathId).toBeTruthy()
-    expect(firstClipPathId).not.toBe(secondClipPathId)
-    expect(first.get('[clip-path]').attributes('clip-path')).toContain(firstClipPathId)
-    expect(second.get('[clip-path]').attributes('clip-path')).toContain(secondClipPathId)
-
-    first.unmount()
-    second.unmount()
-  })
-
-  it('does not reuse Y scales between chart instances with the same default series ID', async () => {
-    const first = await mountSizedChart({
-      kind: 'points',
-      points: [
-        { x: 0, y: 0 },
-        { x: 1, y: 1 },
-      ],
-    })
-    const second = await mountSizedChart({
-      kind: 'points',
-      points: [
-        { x: 0, y: 10_000 },
-        { x: 1, y: 20_000 },
-      ],
-    })
-
-    expect(first.get('.waveform-chart__axis--y').text()).not.toContain('E')
-    expect(second.get('.waveform-chart__axis--y').text()).toContain('E+04 ')
-    expect(second.find('.waveform-chart__axis-exponent--y').exists()).toBe(false)
-  })
-
-  it('renders a configurable zero line only when the Y domain contains zero', async () => {
-    const wrapper = await mountSizedChart(
-      {
-        kind: 'points',
-        points: [
-          { x: 0, y: -2 },
-          { x: 1, y: 4 },
-        ],
-      },
-      { zeroLine: { visible: true, color: '#475467', width: 2, dash: '3 2' } },
-    )
-
-    const zeroLine = wrapper.get('.waveform-chart__zero-line')
-    expect(zeroLine.attributes()).toMatchObject({
-      stroke: '#475467',
-      'stroke-width': '2',
-      'stroke-dasharray': '3 2',
-      'data-y-axis-index': '0',
-    })
-    expect(zeroLine.attributes('y1')).toBe(zeroLine.attributes('y2'))
-
-    await wrapper.setProps({ zeroLine: { visible: false } })
-    expect(wrapper.find('.waveform-chart__zero-line').exists()).toBe(false)
-
-    const positive = await mountSizedChart(
-      {
-        kind: 'points',
-        points: [
-          { x: 0, y: 2 },
-          { x: 1, y: 4 },
-        ],
-      },
-      { zeroLine: { visible: true } },
-    )
-    expect(positive.find('.waveform-chart__zero-line').exists()).toBe(false)
-  })
-
-  it('renders zero lines from each visible Y axis in multi-axis mode', async () => {
-    const wrapper = await mountSizedChart(
-      {
-        kind: 'series',
-        series: [
-          {
-            id: 'small',
-            trackId: 'overlay',
-            name: 'small',
-            data: {
-              kind: 'points',
-              points: [
-                { x: 0, y: -1 },
-                { x: 1, y: 3 },
-              ],
-            },
-          },
-          {
-            id: 'large',
-            trackId: 'overlay',
-            name: 'large',
-            data: {
-              kind: 'points',
-              points: [
-                { x: 0, y: -10 },
-                { x: 1, y: 2 },
-              ],
-            },
-          },
-        ],
-      },
-      { overlayMode: 'multi-axis', zeroLine: { visible: true } },
-    )
-
-    const zeroLines = wrapper.findAll('.waveform-chart__zero-line')
-    expect(zeroLines).toHaveLength(2)
-    expect(zeroLines.map((line) => line.attributes('data-y-axis-index'))).toEqual(['0', '1'])
-    expect(zeroLines[0].attributes('y1')).not.toBe(zeroLines[1].attributes('y1'))
-  })
-
-  it('hides X and Y axis lines independently while preserving axis text and the frame', async () => {
-    const wrapper = await mountSizedChart({
-      kind: 'series',
-      series: [
-        {
-          id: 'channel',
-          name: 'Voltage',
-          data: {
-            kind: 'points',
-            points: [
-              { x: 0, y: -1 },
-              { x: 10_000, y: 1 },
-            ],
-          },
-        },
-      ],
-    })
-    const xAxis = wrapper.get('.waveform-chart__axis--x')
-    const yAxis = wrapper.get('.waveform-chart__axis--y')
-
-    expect(xAxis.classes()).not.toContain('waveform-track__axis--line-hidden')
-    expect(yAxis.classes()).not.toContain('waveform-track__axis--line-hidden')
-
-    await wrapper.setProps({ axes: { x: { lineVisible: false } } })
-    await flushPromises()
-    expect(xAxis.classes()).toContain('waveform-track__axis--line-hidden')
-    expect(yAxis.classes()).not.toContain('waveform-track__axis--line-hidden')
-    expect(xAxis.get('path.domain').attributes('display')).toBe('none')
-    expect(
-      xAxis.findAll('.tick line').every((line) => line.attributes('display') === undefined),
-    ).toBe(true)
-    expect(yAxis.get('path.domain').attributes('display')).toBeUndefined()
-
-    await wrapper.setProps({
-      axes: {
-        x: { lineVisible: false },
-        y: { lineVisible: false },
-      },
-      grid: {
-        rowCount: 1,
-        columnCount: 1,
-        trackLines: { channel: { horizontal: false, vertical: false } },
-      },
-      frameStyle: { borderColor: '#dc2626', borderWidth: 2 },
-    })
-    await flushPromises()
-
-    expect(xAxis.classes()).toContain('waveform-track__axis--line-hidden')
-    expect(yAxis.classes()).toContain('waveform-track__axis--line-hidden')
-    expect(yAxis.get('path.domain').attributes('display')).toBe('none')
-    expect(
-      yAxis.findAll('.tick line').every((line) => line.attributes('display') === undefined),
-    ).toBe(true)
-    expect(xAxis.findAll('text').length).toBeGreaterThan(0)
-    expect(yAxis.findAll('text').length).toBeGreaterThan(0)
-    expect(wrapper.findAll('.waveform-chart__axis-endpoint')).toHaveLength(2)
-    expect(wrapper.get('.waveform-chart__y-axis-label').text()).toBe('Voltage')
-    expect(wrapper.findAll('[data-grid-direction]')).toHaveLength(0)
-    expect(wrapper.get('.waveform-chart__plot-frame').attributes()).toMatchObject({
-      stroke: '#dc2626',
-      'stroke-width': '2',
-    })
-
-    await wrapper.setProps({ axes: { x: { lineVisible: true }, y: { lineVisible: true } } })
-    await flushPromises()
-    expect(xAxis.get('path.domain').attributes('display')).toBeUndefined()
-    expect(yAxis.get('path.domain').attributes('display')).toBeUndefined()
-  })
-
-  it('preserves a titled multi-axis plot and hides auxiliary layers in clean view', async () => {
-    const data: WaveformData = {
-      kind: 'series',
-      series: [
-        {
-          id: 'first',
-          trackId: 'overlay',
-          name: 'first',
-          data: {
-            kind: 'points',
-            points: [
-              { x: 0, y: -1 },
-              { x: 1, y: 1 },
-            ],
-          },
-        },
-        {
-          id: 'second',
-          trackId: 'overlay',
-          name: 'second',
-          data: {
-            kind: 'points',
-            points: [
-              { x: 0, y: 10_000 },
-              { x: 10_000, y: 20_000 },
-            ],
-          },
-        },
-        {
-          id: 'third',
-          name: 'third',
-          data: {
-            kind: 'points',
-            points: [
-              { x: 0, y: 2 },
-              { x: 10_000, y: 3 },
-            ],
-          },
-        },
-      ],
-    }
-    const sharedProps = {
-      grid: { rowCount: 1, columnCount: 1, showPagination: true },
-      overlayMode: 'multi-axis' as const,
-      frameNumber: 1,
-      annotations: [{ id: 'note', seriesId: 'first', x: 0.5, y: 0, text: 'hidden note' }],
-      zeroLine: { visible: true },
-      title: { text: 'hidden title' },
-      axes: { x: { lineVisible: false }, y: { lineVisible: false } },
-      frameStyle: { borderColor: '#dc2626', borderWidth: 2, borderStyle: 'dashed' as const },
-    }
-    const regularWrapper = await mountSizedChart(data, sharedProps)
-    const wrapper = await mountSizedChart(data, {
-      ...sharedProps,
-      cleanView: true,
-    })
-
-    const regularTrack = regularWrapper.get('.waveform-chart__track')
-    const cleanTrack = wrapper.get('.waveform-chart__track')
-    const geometryAttributes = [
-      'data-track-left',
-      'data-track-top',
-      'data-track-width',
-      'data-track-height',
-    ]
-
-    expect(wrapper.get('.waveform-chart').attributes('data-chart-left-margin')).toBe(
-      regularWrapper.get('.waveform-chart').attributes('data-chart-left-margin'),
-    )
-    expect(wrapper.get('.waveform-chart').attributes('data-title-area-height')).toBe(
-      regularWrapper.get('.waveform-chart').attributes('data-title-area-height'),
-    )
-    geometryAttributes.forEach((attribute) => {
-      expect(cleanTrack.attributes(attribute)).toBe(regularTrack.attributes(attribute))
-    })
-    expect(wrapper.get('.waveform-chart').classes()).toContain('waveform-chart--clean')
-    expect(getComputedStyle(wrapper.get('.waveform-chart').element).borderColor).toBe(
-      'rgba(0, 0, 0, 0)',
-    )
-    expect(wrapper.findAll('.waveform-chart__series')).toHaveLength(2)
-    expect(wrapper.find('.waveform-chart__overlay--independent').exists()).toBe(true)
-    expect(wrapper.get('.waveform-chart__title-area').attributes('aria-hidden')).toBe('true')
-    expect(wrapper.find('.waveform-chart__title-visual').exists()).toBe(false)
-    const xAxis = wrapper.get('.waveform-chart__axis--x')
-    const yAxes = wrapper.findAll('.waveform-chart__axis--y')
-    expect(yAxes).toHaveLength(2)
-    expect(xAxis.findAll('.tick line').length).toBeGreaterThan(0)
-    expect(xAxis.findAll('.tick text').length).toBeGreaterThan(0)
-    yAxes.forEach((axis) => {
-      expect(axis.findAll('.tick line').length).toBeGreaterThan(0)
-      expect(axis.findAll('.tick text').length).toBeGreaterThan(0)
-      expect(axis.get('path.domain').attributes('display')).toBe('none')
-    })
-    expect(xAxis.get('path.domain').attributes('display')).toBe('none')
-    expect(wrapper.findAll('.waveform-chart__axis-endpoint')).toHaveLength(2)
-    expect(wrapper.find('.waveform-chart__axis-exponent--x').exists()).toBe(false)
-    expect(yAxes.some((axis) => axis.text().includes('E+04 '))).toBe(true)
-    expect(wrapper.find('.waveform-chart__axis-exponent--y').exists()).toBe(false)
-    expect(wrapper.find('.waveform-chart__grid').exists()).toBe(false)
-    expect(wrapper.get('.waveform-chart__plot-frame').attributes()).toMatchObject({
-      stroke: '#dc2626',
-      'stroke-width': '2',
-      'stroke-dasharray': '6 4',
-    })
-    expect(wrapper.find('.waveform-chart__plot-background').exists()).toBe(false)
-    expect(wrapper.find('.waveform-chart__watermark').exists()).toBe(false)
-    expect(wrapper.find('.waveform-chart__legend-layer').exists()).toBe(false)
-    expect(wrapper.find('.waveform-chart__label').exists()).toBe(false)
-    expect(wrapper.find('.waveform-chart__y-axis-label').exists()).toBe(false)
-    expect(wrapper.find('.waveform-chart__zero-line').exists()).toBe(false)
-    expect(wrapper.find('.waveform-annotation-layer').exists()).toBe(false)
-    expect(wrapper.find('.ant-pagination').exists()).toBe(false)
-  })
-
-  it('preserves every track geometry in a multi-column clean view', async () => {
-    const props = {
-      displayMode: 'independent' as const,
-      grid: { rowCount: 2, columnCount: 2 },
-    }
-    const regularWrapper = await mountSizedChart(gridSeries(4), props)
-    const cleanWrapper = await mountSizedChart(gridSeries(4), { ...props, cleanView: true })
-    const geometryAttributes = [
-      'data-track-left',
-      'data-track-top',
-      'data-track-width',
-      'data-track-height',
-    ]
-    const regularTracks = regularWrapper.findAll('.waveform-chart__track')
-    const cleanTracks = cleanWrapper.findAll('.waveform-chart__track')
-
-    expect(cleanTracks).toHaveLength(regularTracks.length)
-    cleanTracks.forEach((track, index) => {
-      geometryAttributes.forEach((attribute) => {
-        expect(track.attributes(attribute)).toBe(regularTracks[index].attributes(attribute))
-      })
-    })
-  })
-})

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

@@ -1,327 +0,0 @@
-import { flushPromises } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-
-import { flushAnimationFrames } from '../../test/setup'
-import { mountSizedChart } from '../../test/waveformChart'
-import type { WaveformData, WaveformDisplayMode } from '../data/types'
-
-function annotationEditorExists() {
-  return Boolean(
-    Array.from(document.body.querySelectorAll<HTMLElement>('[role="dialog"]'))
-      .filter((element) => element.closest('.waveform-annotation-editor'))
-      .at(-1),
-  )
-}
-
-const presentationData: WaveformData = {
-  kind: 'series',
-  series: [
-    {
-      id: 'low',
-      trackId: 'shared',
-      name: '低量程',
-      data: {
-        kind: 'points',
-        points: [
-          { x: 0, y: 0 },
-          { x: 1, y: 10 },
-          { x: 2, y: 5 },
-        ],
-      },
-    },
-    {
-      id: 'high',
-      trackId: 'shared',
-      name: '高量程',
-      data: {
-        kind: 'points',
-        points: [
-          { x: 0, y: 100 },
-          { x: 1, y: 200 },
-          { x: 2, y: 150 },
-        ],
-      },
-    },
-    {
-      id: 'mid',
-      trackId: 'shared',
-      name: '中量程',
-      data: {
-        kind: 'points',
-        points: [
-          { x: 0, y: 50 },
-          { x: 1, y: 100 },
-          { x: 2, y: 75 },
-        ],
-      },
-    },
-    {
-      id: 'other',
-      name: '其他通道',
-      data: {
-        kind: 'points',
-        points: [
-          { x: 0, y: -1 },
-          { x: 1, y: 1 },
-          { x: 2, y: 0 },
-        ],
-      },
-    },
-  ],
-}
-
-function setOverlayBounds(overlay: ReturnType<Awaited<ReturnType<typeof mountSizedChart>>['get']>) {
-  const width = Number(overlay.attributes('width'))
-  const height = Number(overlay.attributes('height'))
-  Object.defineProperty(overlay.element, 'getBoundingClientRect', {
-    value: () => ({ left: 0, top: 0, width, height }),
-  })
-  return { width, height }
-}
-
-function dispatchPointer(
-  element: Element,
-  type: string,
-  options: MouseEventInit & { pointerId: number },
-) {
-  const event = new MouseEvent(type, { bubbles: true, cancelable: true, ...options })
-  Object.defineProperty(event, 'pointerId', { value: options.pointerId })
-  element.dispatchEvent(event)
-}
-
-describe('WaveformChart presentation mode', () => {
-  it('keeps existing plot interaction enabled by default', async () => {
-    const wrapper = await mountSizedChart(presentationData, {
-      grid: { rowCount: 1, columnCount: 1 },
-    })
-    const overlay = wrapper.get('.waveform-chart__overlay--independent')
-    const { width, height } = setOverlayBounds(overlay)
-
-    expect(wrapper.attributes('data-presentation-mode')).toBe('false')
-    expect(overlay.classes()).toContain('is-zoomable')
-
-    overlay.element.dispatchEvent(
-      new MouseEvent('pointermove', {
-        clientX: width / 2,
-        clientY: height / 2,
-        bubbles: true,
-      }),
-    )
-    flushAnimationFrames()
-    await flushPromises()
-
-    expect(wrapper.find('.waveform-chart__tooltip').exists()).toBe(true)
-    expect(wrapper.emitted('point-hover')?.length).toBeGreaterThan(0)
-  })
-
-  it.each<WaveformDisplayMode>(['independent', 'separated'])(
-    'blocks plot mouse events in %s layout',
-    async (displayMode) => {
-      const wrapper = await mountSizedChart(presentationData, {
-        annotations: [{ id: 'note', seriesId: 'low', x: 1, y: 10, text: '只读标注' }],
-        displayMode,
-        grid: { rowCount: 1, columnCount: 1 },
-        interactionMode: 'annotation',
-        presentationMode: true,
-      })
-      const overlay = wrapper.get('.waveform-chart__overlay')
-      const { width, height } = setOverlayBounds(overlay)
-
-      expect(wrapper.attributes('data-presentation-mode')).toBe('true')
-      expect(overlay.classes()).not.toContain('is-zoomable')
-      expect(overlay.classes()).not.toContain('is-annotating')
-
-      overlay.element.dispatchEvent(
-        new MouseEvent('pointermove', {
-          clientX: width / 2,
-          clientY: height / 2,
-          bubbles: true,
-        }),
-      )
-      overlay.element.dispatchEvent(
-        new WheelEvent('wheel', {
-          deltaY: -4000,
-          clientX: width / 2,
-          clientY: height / 2,
-          bubbles: true,
-          cancelable: true,
-        }),
-      )
-      overlay.element.dispatchEvent(
-        new MouseEvent('click', {
-          clientX: width / 2,
-          clientY: height / 2,
-          bubbles: true,
-          cancelable: true,
-        }),
-      )
-      overlay.element.dispatchEvent(
-        new MouseEvent('contextmenu', {
-          clientX: width / 2,
-          clientY: height / 2,
-          bubbles: true,
-          cancelable: true,
-        }),
-      )
-      wrapper
-        .get('.waveform-chart__svg')
-        .element.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true }))
-      await wrapper.get('[data-annotation-id="note"]').trigger('contextmenu', {
-        clientX: width / 2,
-        clientY: height / 2,
-      })
-      const annotation = wrapper.get('[data-annotation-id="note"]').element
-      dispatchPointer(annotation, 'pointerdown', {
-        button: 0,
-        clientX: width / 2,
-        clientY: height / 2,
-        pointerId: 42,
-      })
-      dispatchPointer(annotation, 'pointermove', {
-        clientX: width / 2 + 30,
-        clientY: height / 2 + 20,
-        pointerId: 42,
-      })
-      dispatchPointer(annotation, 'pointerup', {
-        clientX: width / 2 + 30,
-        clientY: height / 2 + 20,
-        pointerId: 42,
-      })
-      flushAnimationFrames()
-      await flushPromises()
-
-      expect(wrapper.find('.waveform-chart__tooltip').exists()).toBe(false)
-      expect(wrapper.find('.waveform-annotation-editor').exists()).toBe(false)
-      expect(wrapper.find('.waveform-annotation-context-menu').exists()).toBe(false)
-      expect(wrapper.emitted('point-hover')).toBeUndefined()
-      expect(wrapper.emitted('zoom-change')).toBeUndefined()
-      expect(wrapper.emitted('zoom-end')).toBeUndefined()
-      expect(wrapper.emitted('zoom-reset')).toBeUndefined()
-      expect(wrapper.emitted('update:annotations')).toBeUndefined()
-    },
-  )
-
-  it('keeps the legend and pagination interactive', async () => {
-    const wrapper = await mountSizedChart(presentationData, {
-      grid: { rowCount: 1, columnCount: 1, showPagination: true },
-      legend: { interactive: true },
-      presentationMode: true,
-    })
-
-    await wrapper.findAll('.waveform-chart__legend-item')[1]!.trigger('click')
-    await flushPromises()
-    expect(wrapper.emitted('update:hidden-series-ids')?.at(-1)).toEqual([['high']])
-
-    await wrapper.get('.ant-pagination-next button').trigger('click')
-    await flushPromises()
-    expect(wrapper.emitted('page-change')?.at(-1)).toEqual([2, 2])
-  })
-
-  it('cleans active UI state and restores interaction without resetting the viewport', async () => {
-    const wrapper = await mountSizedChart(presentationData, {
-      grid: { rowCount: 1, columnCount: 1 },
-    })
-    const overlay = wrapper.get('.waveform-chart__overlay--independent')
-    const { width, height } = setOverlayBounds(overlay)
-
-    overlay.element.dispatchEvent(
-      new WheelEvent('wheel', {
-        deltaY: -4000,
-        clientX: width / 2,
-        clientY: height / 2,
-        bubbles: true,
-        cancelable: true,
-      }),
-    )
-    flushAnimationFrames()
-    await flushPromises()
-    const zoomedEndpoint = wrapper.get('.waveform-chart__axis-endpoint--end').text()
-
-    dispatchPointer(overlay.element, 'pointerdown', {
-      button: 0,
-      clientX: width * 0.25,
-      clientY: height / 2,
-      pointerId: 41,
-    })
-    dispatchPointer(overlay.element, 'pointermove', {
-      clientX: width * 0.75,
-      clientY: height / 2,
-      pointerId: 41,
-    })
-    await flushPromises()
-    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(true)
-
-    await wrapper.setProps({ presentationMode: true })
-    await flushPromises()
-
-    expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(false)
-    expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe(zoomedEndpoint)
-
-    const zoomEventCount = wrapper.emitted('zoom-change')?.length ?? 0
-    await wrapper.setProps({ presentationMode: false })
-    await flushPromises()
-    overlay.element.dispatchEvent(
-      new WheelEvent('wheel', {
-        deltaY: 200,
-        clientX: width / 2,
-        clientY: height / 2,
-        bubbles: true,
-        cancelable: true,
-      }),
-    )
-    flushAnimationFrames()
-    await flushPromises()
-
-    expect(wrapper.emitted('zoom-change')?.length).toBeGreaterThan(zoomEventCount)
-  })
-
-  it('closes hover and annotation UI when enabled at runtime', async () => {
-    const wrapper = await mountSizedChart(presentationData, {
-      grid: { rowCount: 1, columnCount: 1 },
-      interactionMode: 'annotation',
-    })
-    const overlay = wrapper.get('.waveform-chart__overlay--independent')
-    const { width, height } = setOverlayBounds(overlay)
-
-    overlay.element.dispatchEvent(
-      new MouseEvent('pointermove', {
-        clientX: width / 2,
-        clientY: height / 2,
-        bubbles: true,
-      }),
-    )
-    flushAnimationFrames()
-    await flushPromises()
-    expect(wrapper.find('.waveform-chart__tooltip').exists()).toBe(true)
-
-    overlay.element.dispatchEvent(
-      new MouseEvent('contextmenu', {
-        clientX: width / 2,
-        clientY: height / 2,
-        bubbles: true,
-        cancelable: true,
-      }),
-    )
-    await flushPromises()
-    expect(annotationEditorExists()).toBe(true)
-
-    await wrapper.setProps({ presentationMode: true })
-    await flushPromises()
-
-    expect(wrapper.find('.waveform-chart__tooltip').exists()).toBe(false)
-    expect(annotationEditorExists()).toBe(false)
-    expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([null])
-
-    await wrapper.setProps({ presentationMode: false })
-    overlay.element.dispatchEvent(
-      new MouseEvent('pointermove', {
-        clientX: width / 2,
-        clientY: height / 2,
-        bubbles: true,
-      }),
-    )
-    flushAnimationFrames()
-    await flushPromises()
-    expect(wrapper.find('.waveform-chart__tooltip').exists()).toBe(true)
-  })
-})