waveform-analysis 0.1.36 → 0.1.38

package/src/components/annotation/components.test.ts

@@ -1,28 +1,93 @@
 import { flushPromises, mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
+import { InputNumber } from 'ant-design-vue'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { ColorPicker } from 'vue3-colorpicker'
+import { defineComponent, h } from 'vue'
 
 import WaveformAnnotationContextMenu from './WaveformAnnotationContextMenu.vue'
 import WaveformAnnotationEditor from './WaveformAnnotationEditor.vue'
 import WaveformAnnotationLayer from './WaveformAnnotationLayer.vue'
 
+const modalStub = defineComponent({
+  props: [
+    'visible',
+    'width',
+    'maskClosable',
+    'keyboard',
+    'wrapClassName',
+    'cancelText',
+    'okText',
+    'okButtonProps',
+  ],
+  emits: ['cancel', 'ok'],
+  setup(props, { emit, slots }) {
+    return () => {
+      const title = slots.title?.() ?? []
+      const titleId = (title[0]?.props as { id?: string } | undefined)?.id
+      return h('div', { class: 'ant-modal-root' }, [
+        h(
+          'div',
+          {
+            class: ['ant-modal-wrap', props.wrapClassName],
+            role: 'dialog',
+            'aria-modal': 'true',
+            'aria-labelledby': titleId,
+            onClick: (event: MouseEvent) => {
+              if (event.target === event.currentTarget && props.maskClosable) emit('cancel')
+            },
+          },
+          [
+            h('div', { class: 'ant-modal' }, [
+              h('div', { class: 'ant-modal-header' }, [
+                h('div', { class: 'ant-modal-title' }, title),
+              ]),
+              h('button', { class: 'ant-modal-close', onClick: () => emit('cancel') }, '×'),
+              slots.default?.(),
+              h('div', { class: 'ant-modal-footer' }, [
+                h('button', { class: 'ant-btn', onClick: () => emit('cancel') }, props.cancelText),
+                h(
+                  'button',
+                  {
+                    class: 'ant-btn ant-btn-primary',
+                    disabled: props.okButtonProps?.disabled,
+                    onClick: () => emit('ok'),
+                  },
+                  props.okText,
+                ),
+              ]),
+            ]),
+          ],
+        ),
+      ])
+    }
+  },
+})
+const mountEditor = (options: { props: Record<string, unknown> }) =>
+  mount(WaveformAnnotationEditor, {
+    props: options.props as never,
+    global: { stubs: { Modal: modalStub, AModal: modalStub } },
+  })
+
 describe('waveform annotation controls', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
   it('keeps dialog title ids unique across editor instances', () => {
-    const first = mount(WaveformAnnotationEditor, {
+    const first = mountEditor({
       props: {
         annotation: { id: 'first', seriesId: 'a', x: 1, y: 2, text: '说明' },
         mode: 'edit',
       },
     })
-    const second = mount(WaveformAnnotationEditor, {
+    const second = mountEditor({
       props: {
         annotation: { id: 'second', seriesId: 'a', x: 1, y: 2, text: '说明' },
         mode: 'edit',
       },
     })
 
-    const firstTitleId = first.get('h2').attributes('id')
-    const secondTitleId = second.get('h2').attributes('id')
+    const firstTitleId = first.get('.ant-modal-title [id]').attributes('id')
+    const secondTitleId = second.get('.ant-modal-title [id]').attributes('id')
 
     expect(firstTitleId).toBeTruthy()
     expect(secondTitleId).toBeTruthy()
@@ -31,8 +96,19 @@ describe('waveform annotation controls', () => {
     expect(second.get('[role="dialog"]').attributes('aria-labelledby')).toBe(secondTitleId)
   })
 
+  it.each(['add', 'edit'] as const)('shows the X-axis snapping hint in %s mode', (mode) => {
+    const wrapper = mountEditor({
+      props: {
+        annotation: { id: `hint-${mode}`, seriesId: 'a', x: 1, y: 2, text: '说明' },
+        mode,
+      },
+    })
+
+    expect(wrapper.get('[role="note"]').text()).toBe('修改 X 轴后失焦时会自动吸附最近的采样点')
+  })
+
   it('allows changing the annotation series inside the editor', async () => {
-    const wrapper = mount(WaveformAnnotationEditor, {
+    const wrapper = mountEditor({
       props: {
         annotation: { id: 'note', seriesId: 'a', x: 1, y: 2, text: '说明' },
         mode: 'edit',
@@ -77,17 +153,15 @@ describe('waveform annotation controls', () => {
 
   it('validates text and emits an immutable edited annotation with style defaults', async () => {
     const annotation = { id: 'note', seriesId: 'a', x: 1, y: 2, text: '' }
-    const wrapper = mount(WaveformAnnotationEditor, {
+    const wrapper = mountEditor({
       props: { annotation, mode: 'add' },
     })
     await flushPromises()
 
     expect(wrapper.get('textarea').attributes('maxlength')).toBe('40')
-    expect(wrapper.get('.waveform-annotation-editor__coordinates').text()).toContain(
-      'X (ms)1000.000',
-    )
+    expect(wrapper.get('.waveform-annotation-editor__coordinates').text()).toContain('X1000.000')
     expect(wrapper.get('.waveform-annotation-editor__coordinates').text()).toContain('Y2')
-    expect(wrapper.get('button.is-primary').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('button.ant-btn-primary').attributes('disabled')).toBeDefined()
     await vi.waitFor(() => expect(wrapper.findAllComponents(ColorPicker)).toHaveLength(3), {
       timeout: 5000,
     })
@@ -113,7 +187,7 @@ describe('waveform annotation controls', () => {
     colorPickers[1].vm.$emit('update:pureColor', 'rgba(51, 51, 51, 0.8)')
     colorPickers[2].vm.$emit('update:pureColor', 'rgba(255, 255, 255, 0.5)')
     await wrapper.vm.$nextTick()
-    await wrapper.get('button.is-primary').trigger('click')
+    await wrapper.get('button.ant-btn-primary').trigger('click')
 
     const emitted = wrapper.emitted('confirm')?.[0]?.[0] as
       | {
@@ -133,7 +207,7 @@ describe('waveform annotation controls', () => {
   })
 
   it('formats annotation coordinates using the selected display context', () => {
-    const wrapper = mount(WaveformAnnotationEditor, {
+    const wrapper = mountEditor({
       props: {
         annotation: { id: 'note', seriesId: 'series', x: 1, y: 0.0000001, text: '说明' },
         mode: 'edit',
@@ -142,13 +216,53 @@ describe('waveform annotation controls', () => {
     })
 
     const coordinates = wrapper.get('.waveform-annotation-editor__coordinates').text()
-    expect(coordinates).toContain('X (s)1.000')
+    expect(coordinates).toContain('X1.000')
     expect(coordinates).toContain('Y0.0000001')
     expect(coordinates).not.toContain('e-')
   })
 
+  it('emits valid manual time input and disables save for invalid input', async () => {
+    const wrapper = mountEditor({
+      props: {
+        annotation: { id: 'note', seriesId: 'series', x: 1, y: 2, text: '说明' },
+        mode: 'edit',
+        timeUnit: 'ms',
+      },
+    })
+    const input = wrapper.getComponent(InputNumber)
+    expect(input.props('controls')).toBe(true)
+    await input.vm.$emit('update:value', 1500)
+    expect(wrapper.emitted('time-change')).toBeUndefined()
+    await input.vm.$emit('blur')
+    expect(wrapper.emitted('time-change')).toEqual([['1500']])
+    await input.vm.$emit('update:value', null)
+    await input.vm.$emit('blur')
+    expect(wrapper.get('[role="alert"]').text()).toBe('请输入有效的时间')
+    expect(wrapper.get('button.ant-btn-primary').attributes('disabled')).toBeDefined()
+  })
+
+  it('shows time validation errors and blocks confirmation', async () => {
+    const wrapper = mountEditor({
+      props: {
+        annotation: { id: 'note', seriesId: 'series', x: 1, y: 2, text: '说明' },
+        mode: 'edit',
+        timeError: '时间超出当前波形范围',
+      },
+    })
+
+    const input = wrapper.getComponent(InputNumber)
+    await input.vm.$emit('blur')
+    expect(
+      wrapper.get('.waveform-annotation-editor__coordinate-input').attributes('aria-invalid'),
+    ).toBe('true')
+    expect(wrapper.get('[role="alert"]').text()).toBe('时间超出当前波形范围')
+    expect(wrapper.get('button.ant-btn-primary').attributes('disabled')).toBeDefined()
+    await wrapper.setProps({ timeError: '' })
+    expect(wrapper.find('[role="alert"]').exists()).toBe(false)
+  })
+
   it('hydrates hexadecimal and rgba annotation colors', async () => {
-    const wrapper = mount(WaveformAnnotationEditor, {
+    const wrapper = mountEditor({
       props: {
         annotation: {
           id: 'colored-note',
@@ -176,7 +290,7 @@ describe('waveform annotation controls', () => {
   })
 
   it('supports modal dismissal and live character counting', async () => {
-    const editor = mount(WaveformAnnotationEditor, {
+    const editor = mountEditor({
       props: {
         annotation: { id: 'note', seriesId: 'a', x: 1, y: 2, text: '原文字' },
         mode: 'edit',
@@ -184,23 +298,23 @@ describe('waveform annotation controls', () => {
     })
 
     expect(editor.get('[role="dialog"]').attributes('aria-modal')).toBe('true')
-    expect(editor.get('h2').text()).toBe('编辑标注')
+    expect(editor.get('.ant-modal-title').text()).toBe('编辑标注')
     await editor.get('textarea').setValue('三字说明')
     expect(editor.get('.waveform-annotation-editor__label-row').text()).toContain('4/40')
 
     await editor.get('textarea').trigger('keydown', { key: 'Escape' })
-    await editor.get('.waveform-annotation-editor').trigger('click')
+    await editor.get('.ant-modal-wrap').trigger('click')
     expect(editor.emitted('cancel')).toHaveLength(2)
   })
 
   it('supports cancellation and context menu actions', async () => {
-    const editor = mount(WaveformAnnotationEditor, {
+    const editor = mountEditor({
       props: {
         annotation: { id: 'note', seriesId: 'a', x: 1, y: 2, text: '原文字' },
         mode: 'edit',
       },
     })
-    await editor.findAll('button')[0].trigger('click')
+    await editor.get('.ant-modal-close').trigger('click')
     expect(editor.emitted('cancel')).toHaveLength(1)
 
     const menu = mount(WaveformAnnotationContextMenu, {

package/src/components/annotation/markup.test.ts

@@ -56,6 +56,20 @@ describe('waveform annotation markup', () => {
     ).toBeNull()
   })
 
+  it('snaps outside and between samples to the nearest complete-data point', () => {
+    const points = [
+      { x: 1, y: 10 },
+      { x: 2, y: 20 },
+      { x: 4, y: 40 },
+    ]
+    expect(findNearestPointByX(points, -10)).toEqual(points[0])
+    expect(findNearestPointByX(points, 3.1)).toEqual(points[2])
+    expect(findNearestPointByX(points, 10)).toEqual(points[2])
+    expect(findNearestPointByX(points, 2)).toEqual(points[1])
+    expect(findNearestPointByX([{ x: 2, y: 20 }], 2.1)).toEqual({ x: 2, y: 20 })
+    expect(findNearestPointByX(points, Number.NaN)).toBeNull()
+  })
+
   it('snaps annotations to nearest sample points while using interpolation for distance calculation', () => {
     const track = createTrack(0, 'series', 0, [
       { x: 0, y: 0 },
@@ -89,14 +103,16 @@ describe('waveform annotation markup', () => {
     expect(interpolateAnnotationPoint(points, 2, 'none')).toEqual({ x: 2, y: 10 })
   })
 
-  it('omits interpolated candidates for point-only series between samples', () => {
+  it('uses the nearest screen-space sample for point-only series', () => {
     const pointOnly = createTrack(0, 'points', 0, [
       { x: 0, y: 2 },
       { x: 2, y: 10 },
     ])
     pointOnly.series.lineType = 'none'
 
-    expect(findAnnotationSeriesCandidates([pointOnly], 1, 100, 50)).toEqual([])
+    expect(findAnnotationSeriesCandidates([pointOnly], 1, 5, 80)).toMatchObject([
+      { point: { x: 0, y: 2 }, screenX: 0, screenY: 80, distance: 5 },
+    ])
   })
 
   it('sorts line candidates by screen distance and keeps series metadata', () => {

package/src/components/annotation/markup.ts

@@ -25,6 +25,25 @@ export const ANNOTATION_CONNECTOR_LENGTH = 32
 
 const pointBisector = bisector((point: { x: number }) => point.x)
 
+function findNearestPointOnScreen(
+  track: AnnotationTrackLayout,
+  pointerX: number,
+  pointerY: number,
+): { point: { x: number; y: number }; screenX: number; screenY: number; distance: number } | null {
+  let nearest: { point: { x: number; y: number }; screenX: number; screenY: number; distance: number } | null =
+    null
+  for (const point of track.series.points) {
+    if (!Number.isFinite(point.x) || !Number.isFinite(point.y)) continue
+    const screenX = track.xScale(point.x)
+    const screenY = track.top + track.yScale(point.y)
+    const distance = Math.hypot(screenX - pointerX, screenY - pointerY)
+    if (!nearest || distance < nearest.distance) {
+      nearest = { point, screenX, screenY, distance }
+    }
+  }
+  return nearest
+}
+
 export function findNearestPointByX(
   points: Array<{ x: number; y: number }>,
   xValue: number,
@@ -74,6 +93,20 @@ export function findAnnotationSeriesCandidates(
 ): AnnotationSeriesCandidate[] {
   return tracks
     .flatMap((track): AnnotationSeriesCandidate[] => {
+      if (track.series.lineType === 'none') {
+        const nearest = findNearestPointOnScreen(track, pointerX, pointerY)
+        if (!nearest) return []
+        return [
+          {
+            trackIndex: track.index,
+            seriesId: track.series.id,
+            name: track.series.name?.trim() || track.series.id,
+            color: track.series.color || DEFAULT_ANNOTATION_STYLE.borderColor,
+            unit: track.series.unit,
+            ...nearest,
+          },
+        ]
+      }
       const interpolatedPoint = interpolateAnnotationPoint(
         track.series.points,
         xValue,

package/src/components/annotation/useWaveformChartAnnotations.ts

@@ -1,5 +1,5 @@
 import { pointer, type ScaleLinear } from 'd3'
-import type { ComputedRef, Ref } from 'vue'
+import { ref, type ComputedRef, type Ref } from 'vue'
 
 import type { WaveformAnnotation, WaveformInteractionMode } from '../data/types'
 import { findClosestTrackAtPointer } from '../core/layout'
@@ -9,7 +9,7 @@ import {
   ANNOTATION_AMBIGUITY_DISTANCE,
   ANNOTATION_HIT_RADIUS,
   findAnnotationSeriesCandidates,
-  interpolateAnnotationPoint,
+  findNearestPointByX,
 } from './markup'
 import type {
   AnnotationEditorAnchor,
@@ -78,6 +78,7 @@ export function useWaveformChartAnnotations(context: AnnotationContext) {
     activeInteractionMode,
     isPresentationMode,
   } = context
+  const timeError = ref('')
 
   function toggleSeriesVisibility(seriesId: string) {
     if (!chartSeries.value.some((series) => series.id === seriesId)) return
@@ -127,6 +128,7 @@ export function useWaveformChartAnnotations(context: AnnotationContext) {
     anchor: AnnotationEditorAnchor,
     candidates: AnnotationSeriesCandidate[],
   ) {
+    timeError.value = ''
     annotationInteraction.openCreate(hit, makeAnnotationId, anchor)
     editorSeriesOptions.value = candidates
     const draft = annotationInteraction.editorDraft.value
@@ -140,7 +142,6 @@ export function useWaveformChartAnnotations(context: AnnotationContext) {
       }
     }
   }
-
   function changeDraftSeries(seriesId: string) {
     if (isPresentationMode.value) return
     const draft = annotationInteraction.editorDraft.value
@@ -149,24 +150,61 @@ export function useWaveformChartAnnotations(context: AnnotationContext) {
       item.seriesList.some((series) => series.id === seriesId),
     )
     const series = track?.seriesList.find((item) => item.id === seriesId)
-    const point =
-      series && draft
-        ? interpolateAnnotationPoint(series.points, draft.annotation.x, series.lineType)
-        : null
-    if (!draft || !candidate || !track || !point) return
+    const validPoints = series?.points.filter(
+      (item) => Number.isFinite(item.x) && Number.isFinite(item.y),
+    )
+    const point = validPoints && draft ? findNearestPointByX(validPoints, draft.annotation.x) : null
+    if (!draft || !candidate || !track || !validPoints?.length) {
+      timeError.value = '当前波形没有有效数据'
+      return
+    }
+    if (draft.annotation.x < validPoints[0].x || draft.annotation.x > validPoints.at(-1)!.x) {
+      timeError.value = '时间超出当前波形范围'
+      return
+    }
+    timeError.value = ''
     draft.annotation = {
       ...draft.annotation,
       seriesId,
-      y: point.y,
+      y: point!.y,
       style: { ...draft.annotation.style, borderColor: candidate.color },
     }
   }
-
+  function changeDraftTime(displayValue: string) {
+    if (isPresentationMode.value) return
+    const draft = annotationInteraction.editorDraft.value
+    const displayTime = Number(displayValue)
+    if (!draft || !Number.isFinite(displayTime)) {
+      timeError.value = '请输入有效的时间'
+      return
+    }
+    const rawTime = props.timeUnit === 'ms' ? displayTime / 1000 : displayTime
+    const track = trackLayouts.value.find((item) =>
+      item.seriesList.some((series) => series.id === draft.annotation.seriesId),
+    )
+    const series = track?.seriesList.find((item) => item.id === draft.annotation.seriesId)
+    const validPoints = series?.points.filter(
+      (point) => Number.isFinite(point.x) && Number.isFinite(point.y),
+    )
+    if (!validPoints?.length) {
+      timeError.value = '当前波形没有有效数据'
+      return
+    }
+    const firstX = validPoints[0].x
+    const lastX = validPoints[validPoints.length - 1].x
+    if (rawTime < firstX || rawTime > lastX) {
+      timeError.value = '时间超出当前波形范围'
+      return
+    }
+    const point = findNearestPointByX(validPoints, rawTime)!
+    timeError.value = ''
+    draft.annotation = { ...draft.annotation, x: point.x, y: point.y }
+  }
   function cancelAnnotation() {
+    timeError.value = ''
     annotationInteraction.closeEditor()
     editorSeriesOptions.value = []
   }
-
   function resolveTrackAtPointer(
     pointerX: number,
     pointerY: number,
@@ -292,6 +330,7 @@ export function useWaveformChartAnnotations(context: AnnotationContext) {
 
   function editContextAnnotation() {
     if (isPresentationMode.value) return
+    timeError.value = ''
     const menu = annotationInteraction.contextMenu.value
     const annotation = props.annotations.find((item) => item.id === menu?.annotationId)
     if (!annotation) return
@@ -328,7 +367,7 @@ export function useWaveformChartAnnotations(context: AnnotationContext) {
   function confirmAnnotation(annotation: WaveformAnnotation) {
     if (isPresentationMode.value) return
     const draft = annotationInteraction.editorDraft.value
-    if (!draft) return
+    if (!draft || timeError.value) return
     if (draft.mode === 'add') {
       emit('update:annotations', [...props.annotations, annotation])
       emit('annotation-create', annotation)
@@ -345,6 +384,8 @@ export function useWaveformChartAnnotations(context: AnnotationContext) {
   return {
     toggleSeriesVisibility,
     changeDraftSeries,
+    changeDraftTime,
+    timeError,
     cancelAnnotation,
     resolveTrackAtPointer,
     handleAnnotationClick,

package/src/components/core/constants.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+
+import { channelColors } from './constants'
+
+describe('channelColors', () => {
+  it('contains the referenced dark palette followed by twenty supplemental colors', () => {
+    expect(channelColors).toHaveLength(30)
+    expect(channelColors.slice(0, 10)).toEqual([
+      '#0960bd',
+      '#ff7f0e',
+      '#2ca02c',
+      '#d62728',
+      '#9467bd',
+      '#8c564b',
+      '#e377c2',
+      '#7f7f7f',
+      '#bcbd22',
+      '#17becf',
+    ])
+    expect(new Set(channelColors).size).toBe(channelColors.length)
+  })
+
+  it('wraps around after the thirtieth color for automatic series assignment', () => {
+    expect(channelColors[0]).toBe('#0960bd')
+    expect(channelColors[29]).toBe('#31572c')
+    expect(channelColors[30 % channelColors.length]).toBe(channelColors[0])
+    expect(channelColors[31 % channelColors.length]).toBe(channelColors[1])
+  })
+})

package/src/components/core/constants.ts

@@ -125,19 +125,41 @@ export const TITLE_LINE_HEIGHT = 1.2
 // ==================== 样式常量 ====================
 
 /**
- * 通道默认颜色列表
+ * 多系列波形的默认颜色列表。
+ *
+ * 颜色保持较深并具备足够辨识度，避免大量系列同时绘制时使用浅色导致线条难以观察。
  */
 export const channelColors = [
   '#0960bd',
   '#ff7f0e',
-  '#389e0d',
-  '#cf1322',
-  '#531dab',
-  '#08979c',
-  '#c41d7f',
-  '#434343',
-  '#7cb305',
-  '#1d39c4',
+  '#2ca02c',
+  '#d62728',
+  '#9467bd',
+  '#8c564b',
+  '#e377c2',
+  '#7f7f7f',
+  '#bcbd22',
+  '#17becf',
+  '#005f73',
+  '#0a9396',
+  '#ae2012',
+  '#bb3e03',
+  '#ca6702',
+  '#ee9b00',
+  '#9b2226',
+  '#3a0ca3',
+  '#4361ee',
+  '#4895ef',
+  '#560bad',
+  '#7209b7',
+  '#b5179e',
+  '#f72585',
+  '#006d77',
+  '#2f3e46',
+  '#354f52',
+  '#52796f',
+  '#800f2f',
+  '#31572c',
 ]
 
 /**

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

@@ -1,10 +1,18 @@
-import { flushPromises } from '@vue/test-utils'
+import { DOMWrapper, flushPromises } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 
 import { flushAnimationFrames } from '../../test/setup'
 
 import { mountSizedChart } from '../../test/waveformChart'
 
+function getAnnotationEditor() {
+  const editor = Array.from(document.body.querySelectorAll<HTMLElement>('[role="dialog"]'))
+    .filter((element) => element.closest('.waveform-annotation-editor'))
+    .at(-1)
+  if (!editor) throw new Error('Expected annotation editor modal to be mounted')
+  return new DOMWrapper(editor)
+}
+
 describe('WaveformChart', () => {
   it('edits and immediately deletes existing annotations without mutating props', async () => {
     const sourceAnnotation = {
@@ -31,8 +39,10 @@ describe('WaveformChart', () => {
     })
     await wrapper.get('.waveform-annotation-context-menu button').trigger('click')
     await flushPromises()
-    await wrapper.get('textarea[aria-label="标注文本"]').setValue('新文字')
-    await wrapper.get('.waveform-annotation-editor button.is-primary').trigger('click')
+    const editor = getAnnotationEditor()
+    await editor.get('textarea[aria-label="标注文本"]').setValue('新文字')
+    await editor.get('button.ant-btn-primary').trigger('click')
+    await flushPromises()
 
     const updated = wrapper.emitted('update:annotations')?.at(-1)?.[0] as
       Array<{ text: string }> | undefined

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

@@ -189,6 +189,46 @@ describe('WaveformChart', () => {
     expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([null])
   })
 
+  it('clears hover when the pointer leaves the chart and restores it only after a new plot move', async () => {
+    const wrapper = await mountSizedChart(
+      {
+        kind: 'points',
+        points: [
+          { x: 0, y: 0 },
+          { x: 1, y: 5 },
+        ],
+      },
+      { grid: { rowCount: 1, columnCount: 1 } },
+    )
+    const overlay = wrapper.get('.waveform-chart__overlay')
+    const overlayWidth = Number(overlay.attributes('width'))
+    Object.defineProperty(overlay.element, 'getBoundingClientRect', {
+      value: () => ({ left: 0, top: 0, width: overlayWidth, height: 290 }),
+    })
+
+    overlay.element.dispatchEvent(
+      new MouseEvent('pointermove', { clientX: overlayWidth, clientY: 120, bubbles: true }),
+    )
+    flushAnimationFrames()
+    await flushPromises()
+    expect(wrapper.find('.waveform-chart__tooltip').exists()).toBe(true)
+
+    await wrapper.trigger('pointerleave')
+    expect(wrapper.find('.waveform-chart__tooltip').exists()).toBe(false)
+    expect(wrapper.find('.waveform-chart__crosshair').exists()).toBe(false)
+    expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([null])
+
+    await wrapper.trigger('pointerenter')
+    expect(wrapper.find('.waveform-chart__tooltip').exists()).toBe(false)
+
+    overlay.element.dispatchEvent(
+      new MouseEvent('pointermove', { clientX: 0, clientY: 120, bubbles: true }),
+    )
+    flushAnimationFrames()
+    await flushPromises()
+    expect(wrapper.find('.waveform-chart__tooltip').exists()).toBe(true)
+  })
+
   it('hides the numeric tooltip and crosshair when showTooltip is disabled', async () => {
     const wrapper = await mountSizedChart(
       {