Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
dda87f7508 | ||
|
|
3692e21dbc |
14
README.md
14
README.md
@@ -109,8 +109,8 @@ const data = ref<WaveformData>({
|
||||
| `pannable` | `boolean` | `false` | 空格拖拽平移开关 |
|
||||
| `minZoomSpan` | `number` | 未设置 | 最小缩放跨度,使用原始 X 数据单位 |
|
||||
| `minVisiblePoints` | `number` | `0` | 缩放后至少保留的不同 X 坐标数 |
|
||||
| `initialXDomain` | `[number, number]` | 未设置 | 所有图框的初始 X 范围 |
|
||||
| `initialXDomains` | `Record<string, [number, number]>` | 未设置 | 按 track/series ID 配置初始范围 |
|
||||
| `initialXDomain` | `[number, number]` | 未设置 | 所有图框的初始 X 范围(可超出数据,空白显示) |
|
||||
| `initialXDomains` | `Record<string, [number, number]>` | 未设置 | 按 track/series ID 配置初始范围(可超出数据) |
|
||||
| `xDomainStrategy` | `WaveformXDomainStrategy` | `{ type: 'data' }` | 自动 X 轴视口范围策略 |
|
||||
| `yDomain` | `[number, number]` | 未设置 | 所有波形的固定 Y 轴范围 |
|
||||
| `yDomains` | `Record<string, [number, number]>` | 未设置 | 按 track/series ID 配置固定范围 |
|
||||
@@ -163,8 +163,8 @@ const points: WaveformData = {
|
||||
const chartData: WaveformData = {
|
||||
kind: 'series',
|
||||
series: [
|
||||
{ id: 'ch-a', name: '通道 A', trackId: 'group-1', data: samples },
|
||||
{ id: 'ch-b', name: '通道 B', trackId: 'group-1', data: points },
|
||||
{ id: 'ch-a', shotNo: '13300', name: '通道 A', trackId: 'group-1', data: samples },
|
||||
{ id: 'ch-b', shotNo: '13300', name: '通道 B', trackId: 'group-1', data: points },
|
||||
],
|
||||
}
|
||||
```
|
||||
@@ -247,7 +247,7 @@ X 轴且包含多个轨道时使用按稳定 track ID 索引的 `yRanges`。平
|
||||
调用方应处理加载失败的情况(网络错误、超时等),并保持旧数据或显示加载状态。生产环境建议使用
|
||||
`AbortController` 取消过时的请求。
|
||||
|
||||
`initialXDomain` 固定首次完整数据的 X 轴缩放边界,不要将它改成后端返回的当前窗口;独立图框有不同时间范围时,可通过
|
||||
`initialXDomain` 固定首次及重置时的 X 轴视口范围,不要将它改成后端返回的当前窗口;范围可以超出数据的实际时间,超出部分保留空白。独立图框有不同时间范围时,可通过
|
||||
`initialXDomains` 按 track ID 或 series ID 分别配置。`minZoomSpan` 使用原始 X 数据单位,
|
||||
可防止每次区间数据回填后重新累计放大。双击图框会
|
||||
重置组件内部缩放并触发 `zoom-reset`;调用方应在事件中取消区间请求并恢复首次完整数据。
|
||||
@@ -281,6 +281,9 @@ X 轴且包含多个轨道时使用按稳定 track ID 索引的 `yRanges`。平
|
||||
多通道数据应为每个 `WaveformSeries` 提供稳定的 `id`。内部时间坐标始终使用秒,
|
||||
`timeUnit` 只控制坐标轴和 tooltip 的显示单位。
|
||||
|
||||
Tooltip 每个系列按 `炮号:通道 (x:值 y:值)` 格式显示。`WaveformSeries.shotNo` 为空或未提供时,
|
||||
炮号显示为“未配置炮号”;Tooltip 不显示单位和误差附加文本。
|
||||
|
||||
### 线型、点型与误差棒
|
||||
|
||||
每条序列可以独立设置连线方式、数据点符号和误差棒:
|
||||
@@ -288,6 +291,7 @@ X 轴且包含多个轨道时使用按稳定 track ID 索引的 `yRanges`。平
|
||||
```ts
|
||||
const series = {
|
||||
id: 'temperature',
|
||||
shotNo: '13300',
|
||||
name: '温度',
|
||||
lineType: 'step-end',
|
||||
lineStyle: 'dashed',
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "waveform-analysis",
|
||||
"version": "0.1.35",
|
||||
"version": "0.1.37",
|
||||
"main": "./dist/index.cjs",
|
||||
"module": "./dist/index.js",
|
||||
"types": "./dist/types/index.d.ts",
|
||||
|
||||
@@ -321,8 +321,9 @@ describe('App workspace layout', { timeout: 20_000 }, () => {
|
||||
const styleSelect = frameControls.findAllComponents(Select)[0]
|
||||
|
||||
expect(colorPickers).toHaveLength(2)
|
||||
expect(widthInput).toBeDefined()
|
||||
expect(styleSelect).toBeDefined()
|
||||
|
||||
const initialFrames = wrapper.findAll('.waveform-chart__plot-frame')
|
||||
expect(initialFrames.length > 1 && initialFrames.every((frame) => frame.attributes('stroke-width') === '2')).toBe(true)
|
||||
|
||||
colorPickers[0].vm.$emit('update:pureColor', 'rgba(220, 38, 38, 0.8)')
|
||||
colorPickers[1].vm.$emit('update:pureColor', 'rgba(14, 165, 233, 0.25)')
|
||||
|
||||
@@ -32,7 +32,7 @@ const overlayMode = ref<WaveformOverlayMode>('single-axis')
|
||||
const rowCount = ref(4)
|
||||
const columnCount = ref(1)
|
||||
const frameBorderColor = ref('#1f2937')
|
||||
const frameBorderWidth = ref(1)
|
||||
const frameBorderWidth = ref(2)
|
||||
const frameBorderStyle = ref<NonNullable<WaveformFrameStyle['borderStyle']>>('solid')
|
||||
const frameBackgroundColor = ref('rgba(255, 255, 255, 0)')
|
||||
const frameWatermarkVisible = ref(true)
|
||||
|
||||
@@ -87,9 +87,11 @@ const {
|
||||
contextMenu,
|
||||
editorSeries,
|
||||
editorSeriesOptions,
|
||||
timeError,
|
||||
confirmAnnotation,
|
||||
cancelAnnotation,
|
||||
changeDraftSeries,
|
||||
changeDraftTime,
|
||||
editContextAnnotation,
|
||||
deleteContextAnnotation,
|
||||
chartHeight,
|
||||
@@ -98,6 +100,11 @@ const {
|
||||
setTitleMeasureElement,
|
||||
setSharedOverlayElement,
|
||||
} = toRefs(props.controller)
|
||||
|
||||
function handleChartPointerLeave() {
|
||||
pointerInsideChart.value = false
|
||||
handlePointerLeave.value()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -123,7 +130,7 @@ const {
|
||||
:data-plot-margin-bottom="resolvedPlotMargin.bottom"
|
||||
:data-title-area-height="titleAreaHeight"
|
||||
@pointerenter="pointerInsideChart = true"
|
||||
@pointerleave="pointerInsideChart = false"
|
||||
@pointerleave="handleChartPointerLeave"
|
||||
@contextmenu.capture="handleNativeContextMenu"
|
||||
>
|
||||
<div
|
||||
@@ -332,9 +339,11 @@ const {
|
||||
:series="editorSeries"
|
||||
:series-options="editorSeriesOptions"
|
||||
:time-unit="timeUnit"
|
||||
:time-error="timeError"
|
||||
@confirm="confirmAnnotation"
|
||||
@cancel="cancelAnnotation"
|
||||
@series-change="changeDraftSeries"
|
||||
@time-change="changeDraftTime"
|
||||
/>
|
||||
|
||||
<WaveformAnnotationContextMenu
|
||||
|
||||
@@ -1,63 +1,8 @@
|
||||
.waveform-annotation-editor {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 20px;
|
||||
background: rgb(16 24 40 / 32%);
|
||||
animation: waveform-annotation-editor-fade-in 160ms ease-out;
|
||||
}
|
||||
.waveform-annotation-editor__panel {
|
||||
.waveform-annotation-editor__content {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
width: min(440px, 100%);
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 22px;
|
||||
color: #344054;
|
||||
font-size: 13px;
|
||||
background: #fff;
|
||||
border: 1px solid #e4e7ec;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 50px rgb(16 24 40 / 22%);
|
||||
animation: waveform-annotation-editor-rise-in 180ms ease-out;
|
||||
}
|
||||
.waveform-annotation-editor__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
.waveform-annotation-editor__header h2 {
|
||||
margin: 0;
|
||||
color: #101828;
|
||||
font-size: 18px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.waveform-annotation-editor__header p {
|
||||
margin: 5px 0 0;
|
||||
color: #667085;
|
||||
font-size: 12px;
|
||||
}
|
||||
.waveform-annotation-editor__close {
|
||||
display: inline-grid;
|
||||
flex: 0 0 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
color: #667085;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.waveform-annotation-editor__close:hover {
|
||||
color: #101828;
|
||||
background: #f2f4f7;
|
||||
}
|
||||
.waveform-annotation-editor__coordinates {
|
||||
display: grid;
|
||||
@@ -78,6 +23,39 @@
|
||||
.waveform-annotation-editor__coordinates span {
|
||||
color: #667085;
|
||||
}
|
||||
.waveform-annotation-editor__coordinate-input {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 9px 10px;
|
||||
color: #667085;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #eaecf0;
|
||||
border-radius: 7px;
|
||||
}
|
||||
.waveform-annotation-editor__coordinate-input :deep(.ant-input-number) {
|
||||
width: auto;
|
||||
min-width: 96px;
|
||||
color: #344054;
|
||||
font-family: 'SFMono-Regular', Consolas, monospace;
|
||||
}
|
||||
.waveform-annotation-editor__coordinate-value {
|
||||
display: none;
|
||||
}
|
||||
.waveform-annotation-editor__coordinate-error {
|
||||
grid-column: 1 / -1;
|
||||
margin: -12px 0 0;
|
||||
color: #d92d20;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.waveform-annotation-editor__coordinate-hint {
|
||||
margin: -12px 0 0;
|
||||
color: #98a2b3;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.waveform-annotation-editor__coordinates b {
|
||||
color: #1677ff;
|
||||
font-size: 11px;
|
||||
@@ -205,56 +183,9 @@
|
||||
border-color: #98a2b3;
|
||||
box-shadow: 0 0 0 3px rgb(22 119 255 / 12%);
|
||||
}
|
||||
.waveform-annotation-editor__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #eaecf0;
|
||||
}
|
||||
.waveform-annotation-editor__actions button {
|
||||
height: 34px;
|
||||
padding: 0 12px;
|
||||
color: #475467;
|
||||
background: #fff;
|
||||
border: 1px solid #d0d5dd;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.waveform-annotation-editor__actions button.is-primary {
|
||||
color: #fff;
|
||||
background: #1677ff;
|
||||
border-color: #1677ff;
|
||||
}
|
||||
.waveform-annotation-editor__actions button:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@keyframes waveform-annotation-editor-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes waveform-annotation-editor-rise-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px) scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
@media (max-width: 420px) {
|
||||
.waveform-annotation-editor {
|
||||
padding: 12px;
|
||||
}
|
||||
.waveform-annotation-editor__panel {
|
||||
.waveform-annotation-editor__content {
|
||||
gap: 16px;
|
||||
padding: 18px;
|
||||
}
|
||||
.waveform-annotation-editor__coordinates {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, ref, watch } from 'vue'
|
||||
import { InputNumber, Modal } from 'ant-design-vue'
|
||||
import { ColorPicker } from 'vue3-colorpicker'
|
||||
import 'vue3-colorpicker/style.css'
|
||||
|
||||
@@ -15,24 +16,44 @@ interface Props {
|
||||
series?: AnnotationSeriesInfo
|
||||
seriesOptions?: AnnotationSeriesCandidate[]
|
||||
timeUnit?: TimeUnit
|
||||
timeError?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
timeUnit: 'ms',
|
||||
timeError: '',
|
||||
})
|
||||
const emit = defineEmits<{
|
||||
(event: 'confirm', annotation: WaveformAnnotation): void
|
||||
(event: 'cancel'): void
|
||||
(event: 'series-change', seriesId: string): void
|
||||
(event: 'time-change', displayValue: string): void
|
||||
}>()
|
||||
|
||||
const textarea = ref<HTMLTextAreaElement>()
|
||||
const dialogTitleId = useWaveformInstanceId('waveform-annotation-editor-title')
|
||||
const text = ref('')
|
||||
const timeInput = ref('')
|
||||
const timeValidationRequested = ref(false)
|
||||
const borderColor = ref('')
|
||||
const textColor = ref('')
|
||||
const backgroundColor = ref('')
|
||||
const canConfirm = computed(() => text.value.trim().length > 0)
|
||||
const inputTimeError = computed(() => {
|
||||
if (!timeValidationRequested.value) return ''
|
||||
if (!timeInput.value.trim() || !Number.isFinite(Number(timeInput.value)))
|
||||
return '请输入有效的时间'
|
||||
return ''
|
||||
})
|
||||
const timeErrorMessage = computed(() =>
|
||||
timeValidationRequested.value ? inputTimeError.value || props.timeError || '' : '',
|
||||
)
|
||||
const canConfirm = computed(
|
||||
() =>
|
||||
text.value.trim().length > 0 &&
|
||||
timeInput.value.trim().length > 0 &&
|
||||
Number.isFinite(Number(timeInput.value)) &&
|
||||
!timeErrorMessage.value,
|
||||
)
|
||||
const characterCount = computed(() => text.value.length)
|
||||
const selectedSeries = computed(() => {
|
||||
const option = props.seriesOptions?.find(
|
||||
@@ -46,15 +67,30 @@ const selectedSeries = computed(() => {
|
||||
function hydrate() {
|
||||
const style = resolveAnnotationStyle(props.annotation.style)
|
||||
text.value = props.annotation.text
|
||||
timeInput.value = formatAnnotationTime(props.annotation.x, props.timeUnit)
|
||||
timeValidationRequested.value = false
|
||||
borderColor.value = style.borderColor
|
||||
textColor.value = style.textColor
|
||||
backgroundColor.value = style.backgroundColor
|
||||
void nextTick(() => textarea.value?.focus())
|
||||
}
|
||||
|
||||
watch(() => props.annotation, hydrate, { immediate: true })
|
||||
watch(() => props.annotation.id, hydrate, { immediate: true })
|
||||
|
||||
function confirm() {
|
||||
function handleTimeInput(value: number | string | null) {
|
||||
const nextValue = value === null || value === undefined ? '' : String(value)
|
||||
timeInput.value = nextValue
|
||||
timeValidationRequested.value = false
|
||||
}
|
||||
|
||||
function commitTimeInput() {
|
||||
timeValidationRequested.value = true
|
||||
emit('time-change', timeInput.value)
|
||||
}
|
||||
|
||||
async function confirm() {
|
||||
commitTimeInput()
|
||||
await nextTick()
|
||||
if (!canConfirm.value) return
|
||||
emit('confirm', {
|
||||
...props.annotation,
|
||||
@@ -82,40 +118,60 @@ function handleSeriesChange(event: Event) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="waveform-annotation-editor"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-labelledby="dialogTitleId"
|
||||
@click.self="emit('cancel')"
|
||||
<Modal
|
||||
:visible="true"
|
||||
:width="440"
|
||||
:mask-closable="true"
|
||||
:keyboard="true"
|
||||
cancel-text="取消"
|
||||
ok-text="保存标注"
|
||||
:ok-button-props="{ disabled: !canConfirm }"
|
||||
wrap-class-name="waveform-annotation-editor"
|
||||
@cancel="emit('cancel')"
|
||||
@ok="confirm"
|
||||
>
|
||||
<section class="waveform-annotation-editor__panel">
|
||||
<header class="waveform-annotation-editor__header">
|
||||
<div>
|
||||
<h2 :id="dialogTitleId">
|
||||
{{ props.mode === 'add' ? '添加标注' : '编辑标注' }}
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="waveform-annotation-editor__close"
|
||||
aria-label="关闭标注编辑器"
|
||||
title="关闭"
|
||||
@click="emit('cancel')"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
<template #title>
|
||||
<span :id="dialogTitleId">{{ props.mode === 'add' ? '添加标注' : '编辑标注' }}</span>
|
||||
</template>
|
||||
|
||||
<div class="waveform-annotation-editor__content">
|
||||
<div class="waveform-annotation-editor__coordinates" aria-label="标注坐标">
|
||||
<span
|
||||
><b>X ({{ props.timeUnit }})</b
|
||||
><code>{{ formatAnnotationTime(props.annotation.x, props.timeUnit) }}</code></span
|
||||
<label
|
||||
class="waveform-annotation-editor__coordinate-input"
|
||||
:aria-invalid="Boolean(timeErrorMessage)"
|
||||
>
|
||||
<b>X</b>
|
||||
<InputNumber
|
||||
:value="timeInput === '' ? undefined : Number(timeInput)"
|
||||
:controls="true"
|
||||
:step="0.001"
|
||||
:keyboard="true"
|
||||
:status="timeErrorMessage ? 'error' : undefined"
|
||||
aria-label="标注横轴时间"
|
||||
:aria-invalid="Boolean(timeErrorMessage)"
|
||||
:aria-describedby="timeErrorMessage ? `${dialogTitleId}-time-error` : undefined"
|
||||
@blur="commitTimeInput"
|
||||
@update:value="handleTimeInput"
|
||||
/>
|
||||
<code class="waveform-annotation-editor__coordinate-value" aria-hidden="true">{{
|
||||
timeInput
|
||||
}}</code>
|
||||
</label>
|
||||
<p
|
||||
v-if="timeErrorMessage"
|
||||
:id="`${dialogTitleId}-time-error`"
|
||||
class="waveform-annotation-editor__coordinate-error"
|
||||
role="alert"
|
||||
>
|
||||
{{ timeErrorMessage }}
|
||||
</p>
|
||||
<span
|
||||
><b>Y</b><code>{{ formatPlainNumber(props.annotation.y) }}</code></span
|
||||
>
|
||||
</div>
|
||||
<p class="waveform-annotation-editor__coordinate-hint" role="note">
|
||||
修改 X 轴后失焦时会自动吸附最近的采样点
|
||||
</p>
|
||||
|
||||
<label
|
||||
v-if="selectedSeries"
|
||||
@@ -200,14 +256,8 @@ function handleSeriesChange(event: Event) {
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<footer class="waveform-annotation-editor__actions">
|
||||
<button type="button" @click="emit('cancel')">取消</button>
|
||||
<button type="button" class="is-primary" :disabled="!canConfirm" @click="confirm">
|
||||
保存标注
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<style scoped src="./WaveformAnnotationEditor.css"></style>
|
||||
|
||||
@@ -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, {
|
||||
|
||||
@@ -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', () => {
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
29
src/components/core/constants.test.ts
Normal file
29
src/components/core/constants.test.ts
Normal file
@@ -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])
|
||||
})
|
||||
})
|
||||
@@ -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',
|
||||
]
|
||||
|
||||
/**
|
||||
|
||||
@@ -13,6 +13,7 @@ import type { NormalizedWaveformGridLineOptions } from './grid'
|
||||
*/
|
||||
export interface DisplaySeries {
|
||||
id: string
|
||||
shotNo?: string
|
||||
trackId?: string
|
||||
name: string
|
||||
unit?: string
|
||||
@@ -63,6 +64,7 @@ export interface WaveformYAxisLayout {
|
||||
*/
|
||||
export interface HoveredSeriesPoint {
|
||||
id: string
|
||||
shotNo?: string
|
||||
name: string
|
||||
unit?: string
|
||||
color: string
|
||||
|
||||
@@ -80,7 +80,7 @@ describe('WaveformTooltip', () => {
|
||||
expect(tooltip.attributes('style')).toContain('max-width: 280px')
|
||||
})
|
||||
|
||||
it('shows resolved asymmetric errors beside the hovered value', () => {
|
||||
it('omits units and errors from the strict x/y value format', () => {
|
||||
const pointWithErrors = { x: 1, y: 12, error: 1, upperError: 2 }
|
||||
const wrapper = mount(WaveformTooltip, {
|
||||
props: {
|
||||
@@ -102,10 +102,12 @@ describe('WaveformTooltip', () => {
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.get('.waveform-tooltip__series small').text()).toBe('(+2 / -1)')
|
||||
expect(wrapper.get('.waveform-tooltip__value').text()).toBe('(x:1 y:12)')
|
||||
expect(wrapper.get('.waveform-tooltip__value').text()).not.toContain('C')
|
||||
expect(wrapper.get('.waveform-tooltip__value').text()).not.toContain('+2')
|
||||
})
|
||||
|
||||
it('keeps a formatted value and its unit in one value container', () => {
|
||||
it('renders the configured shot number, channel, and formatted coordinates', () => {
|
||||
const hoveredPoint = { x: 1, y: -1405.4932 }
|
||||
const wrapper = mount(WaveformTooltip, {
|
||||
props: {
|
||||
@@ -117,6 +119,7 @@ describe('WaveformTooltip', () => {
|
||||
{
|
||||
trackIndex: 0,
|
||||
name: 'ENG8KJXAc(10001)',
|
||||
shotNo: '炮 7',
|
||||
color: '#ffb43b',
|
||||
unit: 'A',
|
||||
point: hoveredPoint,
|
||||
@@ -127,26 +130,31 @@ describe('WaveformTooltip', () => {
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.get('.waveform-tooltip__value').text()).toBe('-1,405.4932 A')
|
||||
expect(wrapper.get('.waveform-tooltip__series-label').text()).toBe('炮 7: ENG8KJXAc(10001)(A)')
|
||||
expect(wrapper.get('.waveform-tooltip__value').text()).toBe('(x:1,000 y:-1,405.4932)')
|
||||
})
|
||||
|
||||
it('formats tooltip time with at most four decimal places', () => {
|
||||
it('renders each series row with the formatted x coordinate and series label', () => {
|
||||
const wrapper = mount(WaveformTooltip, {
|
||||
props: {
|
||||
visible: true,
|
||||
position: { x: 10, y: 10 },
|
||||
timeUnit: 's',
|
||||
hoveredPoint: { x: 1.234567, y: 12 },
|
||||
seriesPoints: [],
|
||||
seriesPoints: [
|
||||
{ trackIndex: 0, name: '温度', color: '#f00', point: { x: 1.234567, y: 12 } },
|
||||
],
|
||||
containerWidth: 400,
|
||||
containerHeight: 300,
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.get('.waveform-tooltip__time').text()).toBe('s: 1.2346')
|
||||
expect(wrapper.find('.waveform-tooltip__time').exists()).toBe(false)
|
||||
expect(wrapper.get('.waveform-tooltip__series-label').text()).toBe('未配置炮号: 温度')
|
||||
expect(wrapper.get('.waveform-tooltip__value').text()).toBe('(x:1.2346 y:12)')
|
||||
})
|
||||
|
||||
it('omits the error label when both resolved errors are zero', () => {
|
||||
it('uses the fallback shot number when shotNo is blank', () => {
|
||||
const point = { x: 1, y: 12 }
|
||||
const wrapper = mount(WaveformTooltip, {
|
||||
props: {
|
||||
@@ -160,6 +168,6 @@ describe('WaveformTooltip', () => {
|
||||
},
|
||||
})
|
||||
|
||||
expect(wrapper.find('.waveform-tooltip__series small').exists()).toBe(false)
|
||||
expect(wrapper.get('.waveform-tooltip__series-label').text()).toBe('未配置炮号: 温度')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { resolveWaveformPointErrors } from '../../core'
|
||||
import { formatTooltipNumber, formatTooltipTime } from '../../utils'
|
||||
import type { WaveformPoint } from '../data/types'
|
||||
|
||||
interface SeriesPoint {
|
||||
trackIndex: number
|
||||
name: string
|
||||
shotNo?: string
|
||||
color: string
|
||||
unit?: string
|
||||
point: WaveformPoint
|
||||
@@ -34,7 +34,7 @@ const props = defineProps<Props>()
|
||||
const tooltipGap = 12
|
||||
const containerPadding = 8
|
||||
const tooltipPlacementWidth = 238
|
||||
const tooltipMaxWidth = 320
|
||||
const tooltipMaxWidth = 560
|
||||
const tooltipHorizontalPadding = 20
|
||||
const tooltipLineHeight = 20
|
||||
|
||||
@@ -45,18 +45,18 @@ function estimateLineCount(text: string, width: number): number {
|
||||
}
|
||||
|
||||
function formatSeriesText(seriesPoint: SeriesPoint): string {
|
||||
const error = formatError(seriesPoint.point)
|
||||
return `${seriesPoint.name ? `${seriesPoint.name}: ` : ''}${formatTooltipNumber(seriesPoint.point.y)}${
|
||||
seriesPoint.unit ? ` ${seriesPoint.unit}` : ''
|
||||
}${error ? ` ${error}` : ''}`
|
||||
const timeText = formatTooltipTime(props.hoveredPoint?.x ?? seriesPoint.point.x, props.timeUnit)
|
||||
return `${seriesPoint.shotNo?.trim() || '未配置炮号'}: ${seriesPoint.name}${
|
||||
seriesPoint.unit ? `(${seriesPoint.unit})` : ''
|
||||
} (x:${timeText} y:${formatTooltipNumber(seriesPoint.point.y)})`
|
||||
}
|
||||
|
||||
function estimateTooltipHeight(width: number, timeText: string): number {
|
||||
function estimateTooltipHeight(width: number): number {
|
||||
const seriesLines = props.seriesPoints.reduce(
|
||||
(total, seriesPoint) => total + estimateLineCount(formatSeriesText(seriesPoint), width),
|
||||
0,
|
||||
)
|
||||
return 16 + tooltipLineHeight * (estimateLineCount(timeText, width) + seriesLines) + 5
|
||||
return 16 + tooltipLineHeight * seriesLines + 5
|
||||
}
|
||||
|
||||
const tooltipStyle = computed(() => {
|
||||
@@ -84,25 +84,18 @@ const tooltipStyle = computed(() => {
|
||||
: { left: `${containerPadding}px`, maxWidth: `${availableWidth}px` }
|
||||
|
||||
const maxWidth = Number.parseFloat(horizontalStyle.maxWidth)
|
||||
const timeText = `${props.timeUnit}: ${formatTooltipTime(props.hoveredPoint.x, props.timeUnit)}`
|
||||
|
||||
return {
|
||||
...horizontalStyle,
|
||||
top: `${Math.max(
|
||||
8,
|
||||
Math.min(
|
||||
props.position.y - 18,
|
||||
props.containerHeight - estimateTooltipHeight(maxWidth, timeText) - 8,
|
||||
props.containerHeight - estimateTooltipHeight(maxWidth) - 8,
|
||||
),
|
||||
)}px`,
|
||||
}
|
||||
})
|
||||
|
||||
function formatError(point: WaveformPoint): string | null {
|
||||
const { lower, upper } = resolveWaveformPointErrors(point)
|
||||
if (lower === 0 && upper === 0) return null
|
||||
return `(+${formatTooltipNumber(upper)} / -${formatTooltipNumber(lower)})`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -111,9 +104,6 @@ function formatError(point: WaveformPoint): string | null {
|
||||
class="waveform-tooltip waveform-chart__tooltip"
|
||||
:style="tooltipStyle"
|
||||
>
|
||||
<span class="waveform-tooltip__time waveform-chart__tooltip-time">
|
||||
{{ timeUnit }}: {{ formatTooltipTime(hoveredPoint.x, timeUnit) }}
|
||||
</span>
|
||||
<span
|
||||
v-for="seriesPoint in seriesPoints"
|
||||
:key="`${seriesPoint.trackIndex}-${seriesPoint.name}`"
|
||||
@@ -121,12 +111,12 @@ function formatError(point: WaveformPoint): string | null {
|
||||
>
|
||||
<i :style="{ backgroundColor: seriesPoint.color }" />
|
||||
<span class="waveform-tooltip__series-content">
|
||||
<strong v-if="seriesPoint.name">{{ seriesPoint.name }}:</strong>
|
||||
<span class="waveform-tooltip__value">
|
||||
{{ formatTooltipNumber(seriesPoint.point.y)
|
||||
}}{{ seriesPoint.unit ? ` ${seriesPoint.unit}` : '' }}
|
||||
<small v-if="formatError(seriesPoint.point)">{{ formatError(seriesPoint.point) }}</small>
|
||||
</span>
|
||||
<span class="waveform-tooltip__series-label">{{ seriesPoint.shotNo?.trim() || '未配置炮号' }}: {{
|
||||
seriesPoint.name
|
||||
}}<template v-if="seriesPoint.unit">({{ seriesPoint.unit }})</template></span>
|
||||
<span class="waveform-tooltip__value">(x:{{ formatTooltipTime(hoveredPoint.x, timeUnit) }} y:{{
|
||||
formatTooltipNumber(seriesPoint.point.y)
|
||||
}})</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@@ -138,26 +128,17 @@ function formatError(point: WaveformPoint): string | null {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
gap: 2px;
|
||||
width: max-content;
|
||||
max-width: min(320px, calc(100% - 16px));
|
||||
padding: 8px 10px;
|
||||
color: #333;
|
||||
font:
|
||||
12px/1.45 ui-monospace,
|
||||
SFMono-Regular,
|
||||
Consolas,
|
||||
monospace;
|
||||
max-width: min(560px, calc(100% - 16px));
|
||||
padding: 9px 12px;
|
||||
color: #505050;
|
||||
font: 14px/1.35 Arial, sans-serif;
|
||||
pointer-events: none;
|
||||
background: #fff;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 4px 12px rgb(16 24 40 / 12%);
|
||||
}
|
||||
|
||||
.waveform-tooltip__time {
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
border: 1px solid #e3e7eb;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 3px 10px rgb(16 24 40 / 15%);
|
||||
}
|
||||
|
||||
.waveform-tooltip__series {
|
||||
@@ -176,9 +157,24 @@ function formatError(point: WaveformPoint): string | null {
|
||||
}
|
||||
|
||||
.waveform-tooltip__series-content {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 12px;
|
||||
align-items: baseline;
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.waveform-tooltip__series-label {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.waveform-tooltip__value {
|
||||
flex: 0 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.waveform-tooltip__series strong {
|
||||
@@ -186,7 +182,7 @@ function formatError(point: WaveformPoint): string | null {
|
||||
}
|
||||
|
||||
.waveform-tooltip__value {
|
||||
overflow-wrap: anywhere;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.waveform-tooltip__series small {
|
||||
|
||||
@@ -85,6 +85,7 @@ export function useWaveformHover(context: HoverContext) {
|
||||
point: WaveformPoint,
|
||||
): HoveredSeriesPoint => ({
|
||||
id: series.id,
|
||||
shotNo: series.shotNo,
|
||||
name: series.name,
|
||||
color: series.color,
|
||||
unit: series.unit,
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -179,10 +179,10 @@ describe('WaveformChart', () => {
|
||||
await flushPromises()
|
||||
|
||||
const tooltip = wrapper.get('.waveform-chart__tooltip')
|
||||
expect(tooltip.text()).toContain('BT2_2M:')
|
||||
expect(tooltip.text()).toContain('2 T')
|
||||
expect(tooltip.text()).toContain('BT1_2M:')
|
||||
expect(tooltip.text()).toContain('4 T')
|
||||
expect(tooltip.text()).toContain('未配置炮号: BT2_2M')
|
||||
expect(tooltip.text()).toContain('(x:1,000 y:2)')
|
||||
expect(tooltip.text()).toContain('未配置炮号: BT1_2M')
|
||||
expect(tooltip.text()).toContain('(x:1,000 y:4)')
|
||||
const crosshairLines = wrapper.findAll('.waveform-chart__crosshair line')
|
||||
expect(crosshairLines).toHaveLength(2)
|
||||
crosshairLines.forEach((line) => {
|
||||
|
||||
@@ -178,7 +178,7 @@ describe('WaveformChart', () => {
|
||||
await flushPromises()
|
||||
expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([{ x: 1, y: 5 }])
|
||||
expect(wrapper.find('.waveform-chart__tooltip').exists()).toBe(true)
|
||||
expect(wrapper.get('.waveform-chart__tooltip-time').text()).toBe('ms: 1,000')
|
||||
expect(wrapper.get('.waveform-tooltip__series-label').text()).toContain('未配置炮号:')
|
||||
const crosshairLines = wrapper.findAll('.waveform-chart__crosshair line')
|
||||
expect(crosshairLines).toHaveLength(1)
|
||||
expect(crosshairLines[0].attributes('x1')).toBe(crosshairLines[0].attributes('x2'))
|
||||
@@ -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(
|
||||
{
|
||||
@@ -303,7 +343,7 @@ describe('WaveformChart', () => {
|
||||
flushAnimationFrames()
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.get('.waveform-chart__tooltip-time').text()).toBe('ms: 1,000')
|
||||
expect(wrapper.get('.waveform-tooltip__series-label').text()).toContain('未配置炮号:')
|
||||
expect(wrapper.findAll('.waveform-chart__crosshair line')).toHaveLength(1)
|
||||
expect(wrapper.get('.waveform-chart__line').element).toBe(pathBeforeHover)
|
||||
expect(chartUpdate).not.toHaveBeenCalled()
|
||||
|
||||
@@ -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, pendingAnimationFrameCount } 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('zooms only the active independent track and resets when the mode changes', async () => {
|
||||
const wrapper = await mountSizedChart({
|
||||
@@ -172,9 +180,10 @@ describe('WaveformChart', () => {
|
||||
)
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.find('.waveform-annotation-editor').exists()).toBe(true)
|
||||
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 annotations = wrapper.emitted('update:annotations')?.at(-1)?.[0] as
|
||||
Array<{ seriesId: string; x: number; y: number; text: string }> | undefined
|
||||
@@ -209,10 +218,10 @@ describe('WaveformChart', () => {
|
||||
}),
|
||||
)
|
||||
await flushPromises()
|
||||
expect(wrapper.find('.waveform-annotation-editor').exists()).toBe(true)
|
||||
expect(wrapper.get('.waveform-annotation-editor').attributes('aria-modal')).toBe('true')
|
||||
expect(wrapper.find('.waveform-annotation-editor__panel').exists()).toBe(true)
|
||||
const textarea = wrapper.get('textarea[aria-label="标注文本"]')
|
||||
const editor = getAnnotationEditor()
|
||||
expect(editor.attributes('role')).toBe('dialog')
|
||||
expect(editor.find('.waveform-annotation-editor__content').exists()).toBe(true)
|
||||
const textarea = editor.get('textarea[aria-label="标注文本"]')
|
||||
const textareaContextMenu = new MouseEvent('contextmenu', {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
@@ -220,7 +229,8 @@ describe('WaveformChart', () => {
|
||||
expect(textarea.element.dispatchEvent(textareaContextMenu)).toBe(true)
|
||||
expect(textareaContextMenu.defaultPrevented).toBe(false)
|
||||
await textarea.setValue('右键标注')
|
||||
await wrapper.get('.waveform-annotation-editor button.is-primary').trigger('click')
|
||||
await editor.get('button.ant-btn-primary').trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
// Annotation snaps to nearest sample point (x=1, y=5)
|
||||
expect(wrapper.emitted('update:annotations')?.at(-1)?.[0]).toMatchObject([
|
||||
@@ -278,20 +288,20 @@ describe('WaveformChart', () => {
|
||||
)
|
||||
await flushPromises()
|
||||
expect(
|
||||
wrapper
|
||||
.find('select[aria-label="选择标注波形"]')
|
||||
getAnnotationEditor()
|
||||
.get('select[aria-label="选择标注波形"]')
|
||||
.findAll('option')
|
||||
.map((item) => item.text()),
|
||||
).toEqual(['通道 A'])
|
||||
|
||||
await wrapper.get('button[aria-label="关闭标注编辑器"]').trigger('click')
|
||||
await getAnnotationEditor().get('.ant-modal-close').trigger('click')
|
||||
overlays[0].element.dispatchEvent(
|
||||
new MouseEvent('contextmenu', { clientX: 356, clientY: 230, bubbles: true }),
|
||||
)
|
||||
await flushPromises()
|
||||
expect(
|
||||
wrapper
|
||||
.find('select[aria-label="选择标注波形"]')
|
||||
getAnnotationEditor()
|
||||
.get('select[aria-label="选择标注波形"]')
|
||||
.findAll('option')
|
||||
.map((item) => item.text()),
|
||||
).toEqual(['通道 B'])
|
||||
|
||||
@@ -7,6 +7,14 @@ import WaveformChartView from '../WaveformChartView.vue'
|
||||
|
||||
import { gridSeries, mountSizedChart, visibilitySeries } from '../../test/waveformChart'
|
||||
|
||||
function annotationEditorExists() {
|
||||
return Boolean(
|
||||
Array.from(document.body.querySelectorAll<HTMLElement>('[role="dialog"]'))
|
||||
.filter((element) => element.closest('.waveform-annotation-editor'))
|
||||
.at(-1),
|
||||
)
|
||||
}
|
||||
|
||||
describe('WaveformChart', () => {
|
||||
it('resolves legend positions by stable track id across pages', async () => {
|
||||
const wrapper = await mountSizedChart(
|
||||
@@ -273,7 +281,7 @@ describe('WaveformChart', () => {
|
||||
)
|
||||
flushAnimationFrames()
|
||||
await flushPromises()
|
||||
expect(wrapper.find('.waveform-annotation-editor').exists()).toBe(true)
|
||||
expect(annotationEditorExists()).toBe(true)
|
||||
|
||||
const controller = wrapper.getComponent(WaveformChartView).props('controller') as unknown as {
|
||||
annotationInteraction: { editorDraft: { value: { annotation: { seriesId: string } } | null } }
|
||||
@@ -287,7 +295,7 @@ describe('WaveformChart', () => {
|
||||
expect(item).toBeDefined()
|
||||
await item!.trigger('click')
|
||||
await flushPromises()
|
||||
expect(wrapper.find('.waveform-annotation-editor').exists()).toBe(false)
|
||||
expect(annotationEditorExists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders independent cells with separate x axes and overlays', async () => {
|
||||
|
||||
@@ -208,7 +208,7 @@ describe('WaveformChart', () => {
|
||||
legend
|
||||
.findAll('.waveform-legend__swatch')
|
||||
.map((swatch) => swatch.get('path').attributes('stroke')),
|
||||
).toEqual(['#0960bd', '#389e0d'])
|
||||
).toEqual(['#0960bd', '#2ca02c'])
|
||||
expect(wrapper.findAll('.waveform-chart__watermark').map((item) => item.text())).toEqual([
|
||||
'1',
|
||||
'2',
|
||||
|
||||
@@ -5,6 +5,14 @@ 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: [
|
||||
@@ -282,13 +290,13 @@ describe('WaveformChart presentation mode', () => {
|
||||
}),
|
||||
)
|
||||
await flushPromises()
|
||||
expect(wrapper.find('.waveform-annotation-editor').exists()).toBe(true)
|
||||
expect(annotationEditorExists()).toBe(true)
|
||||
|
||||
await wrapper.setProps({ presentationMode: true })
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.find('.waveform-chart__tooltip').exists()).toBe(false)
|
||||
expect(wrapper.find('.waveform-annotation-editor').exists()).toBe(false)
|
||||
expect(annotationEditorExists()).toBe(false)
|
||||
expect(wrapper.emitted('point-hover')?.at(-1)).toEqual([null])
|
||||
|
||||
await wrapper.setProps({ presentationMode: false })
|
||||
|
||||
@@ -181,7 +181,7 @@ describe('WaveformChart', () => {
|
||||
])
|
||||
expect(stepSwatchPaths[0]?.attributes()).toMatchObject({
|
||||
d: 'M1 8H25',
|
||||
stroke: '#389e0d',
|
||||
stroke: '#2ca02c',
|
||||
'stroke-width': '1.5',
|
||||
})
|
||||
expect(stepSwatchPaths[1]?.attributes()).toMatchObject({
|
||||
|
||||
@@ -93,4 +93,64 @@ describe('WaveformChart x domain strategy', () => {
|
||||
expect(tracks[1]?.get('.waveform-chart__axis-endpoint--start').text()).toBe('10000')
|
||||
expect(tracks[1]?.get('.waveform-chart__axis-endpoint--end').text()).toBe('15000')
|
||||
})
|
||||
|
||||
it('keeps an explicit viewport wider than the data and leaves uncovered time blank', async () => {
|
||||
const wrapper = await mountSizedChart(
|
||||
{
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 10, y: 1 },
|
||||
],
|
||||
},
|
||||
{ timeUnit: 's', initialXDomain: [-5, 20] },
|
||||
)
|
||||
|
||||
const track = wrapper.get('.waveform-chart__track')
|
||||
const width = Number(track.attributes('data-track-width'))
|
||||
const path = track.get('.waveform-chart__line').attributes('d') ?? ''
|
||||
const xCoordinates = Array.from(path.matchAll(/(?:M|L)([\d.-]+)/g)).map((match) =>
|
||||
Number(match[1]),
|
||||
)
|
||||
|
||||
expect(track.get('.waveform-chart__axis-endpoint--start').text()).toBe('-5')
|
||||
expect(track.get('.waveform-chart__axis-endpoint--end').text()).toBe('20')
|
||||
expect(xCoordinates.length).toBeGreaterThan(0)
|
||||
expect(Math.min(...xCoordinates)).toBeGreaterThanOrEqual(0)
|
||||
expect(Math.max(...xCoordinates)).toBeLessThanOrEqual(width)
|
||||
})
|
||||
|
||||
it('applies independent explicit viewports per track, including empty time regions', async () => {
|
||||
const wrapper = await mountSizedChart(
|
||||
{
|
||||
kind: 'series',
|
||||
series: [
|
||||
{
|
||||
id: 'first',
|
||||
name: '第一轨',
|
||||
data: { kind: 'points', points: [{ x: 0, y: 0 }, { x: 10, y: 1 }] },
|
||||
},
|
||||
{
|
||||
id: 'second',
|
||||
name: '第二轨',
|
||||
data: { kind: 'points', points: [{ x: 100, y: 0 }, { x: 110, y: 1 }] },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
displayMode: 'independent',
|
||||
grid: { rowCount: 1, columnCount: 2 },
|
||||
timeUnit: 's',
|
||||
initialXDomains: { first: [-5, 20], second: [95, 120] },
|
||||
},
|
||||
)
|
||||
|
||||
const tracks = wrapper.findAll('.waveform-chart__track')
|
||||
expect(tracks[0]?.get('.waveform-chart__axis-endpoint--start').text()).toBe('-5')
|
||||
expect(tracks[0]?.get('.waveform-chart__axis-endpoint--end').text()).toBe('20')
|
||||
expect(tracks[1]?.get('.waveform-chart__axis-endpoint--start').text()).toBe('95')
|
||||
expect(tracks[1]?.get('.waveform-chart__axis-endpoint--end').text()).toBe('120')
|
||||
expect(tracks[0]?.find('.waveform-chart__line').exists()).toBe(true)
|
||||
expect(tracks[1]?.find('.waveform-chart__line').exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -102,4 +102,26 @@ describe('waveform data normalization', () => {
|
||||
'solid',
|
||||
])
|
||||
})
|
||||
|
||||
it('preserves trimmed shot numbers and omits blank values', () => {
|
||||
const result = normalizeWaveformSeries({
|
||||
kind: 'series',
|
||||
series: [
|
||||
{
|
||||
id: 'with-shot',
|
||||
shotNo: ' 13300 ',
|
||||
name: '通道 A',
|
||||
data: { kind: 'points', points: [{ x: 0, y: 1 }] },
|
||||
},
|
||||
{
|
||||
id: 'without-shot',
|
||||
shotNo: ' ',
|
||||
name: '通道 B',
|
||||
data: { kind: 'points', points: [{ x: 0, y: 2 }] },
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
expect(result.map((series) => series.shotNo)).toEqual(['13300', undefined])
|
||||
})
|
||||
})
|
||||
|
||||
@@ -132,6 +132,7 @@ export function normalizeWaveformSeries(data: WaveformData): NormalizedWaveformS
|
||||
|
||||
return {
|
||||
id: uniqueId,
|
||||
shotNo: series.shotNo?.trim() || undefined,
|
||||
trackId: series.trackId?.trim() || undefined,
|
||||
name: series.name,
|
||||
unit: series.unit,
|
||||
|
||||
@@ -13,6 +13,7 @@ describe('simulated waveform data', () => {
|
||||
|
||||
expect(first.series).toHaveLength(6)
|
||||
expect(new Set(first.series.map((series) => series.id)).size).toBe(6)
|
||||
expect(new Set(first.series.map((series) => series.shotNo))).toEqual(new Set(['13300']))
|
||||
first.series.forEach((series) => {
|
||||
expect(series.data.kind).toBe('points')
|
||||
if (series.data.kind !== 'points') return
|
||||
|
||||
@@ -13,7 +13,7 @@ type ErrorGenerator = (
|
||||
|
||||
interface SimulatedSeriesDefinition extends Pick<
|
||||
WaveformSeries,
|
||||
'id' | 'name' | 'unit' | 'lineType' | 'pointType' | 'errorBar'
|
||||
'id' | 'shotNo' | 'name' | 'unit' | 'lineType' | 'pointType' | 'errorBar'
|
||||
> {
|
||||
signal: SignalGenerator
|
||||
errors?: ErrorGenerator
|
||||
@@ -46,6 +46,7 @@ function createPoints(
|
||||
const seriesDefinitions: SimulatedSeriesDefinition[] = [
|
||||
{
|
||||
id: 'simulated-sine',
|
||||
shotNo: '13300',
|
||||
name: '正弦基波',
|
||||
unit: 'V',
|
||||
lineType: 'none',
|
||||
@@ -59,6 +60,7 @@ const seriesDefinitions: SimulatedSeriesDefinition[] = [
|
||||
},
|
||||
{
|
||||
id: 'simulated-harmonic',
|
||||
shotNo: '13300',
|
||||
name: '谐波扰动',
|
||||
unit: 'V',
|
||||
lineType: 'linear',
|
||||
@@ -68,6 +70,7 @@ const seriesDefinitions: SimulatedSeriesDefinition[] = [
|
||||
},
|
||||
{
|
||||
id: 'simulated-damped',
|
||||
shotNo: '13300',
|
||||
name: '阻尼振荡',
|
||||
unit: 'A',
|
||||
lineType: 'linear',
|
||||
@@ -79,6 +82,7 @@ const seriesDefinitions: SimulatedSeriesDefinition[] = [
|
||||
},
|
||||
{
|
||||
id: 'simulated-step',
|
||||
shotNo: '13300',
|
||||
name: '阶跃响应',
|
||||
unit: 'V',
|
||||
lineType: 'linear',
|
||||
@@ -87,6 +91,7 @@ const seriesDefinitions: SimulatedSeriesDefinition[] = [
|
||||
},
|
||||
{
|
||||
id: 'simulated-pulse',
|
||||
shotNo: '13300',
|
||||
name: '脉冲响应',
|
||||
unit: 'V',
|
||||
lineType: 'linear',
|
||||
@@ -95,6 +100,7 @@ const seriesDefinitions: SimulatedSeriesDefinition[] = [
|
||||
},
|
||||
{
|
||||
id: 'simulated-noise',
|
||||
shotNo: '13300',
|
||||
name: '带噪信号',
|
||||
unit: 'A',
|
||||
lineType: 'linear',
|
||||
|
||||
@@ -47,6 +47,8 @@ export type SingleWaveformData =
|
||||
*/
|
||||
export interface WaveformSeries {
|
||||
id?: string
|
||||
/** 炮号,未提供时 Tooltip 显示“未配置炮号”。 */
|
||||
shotNo?: string
|
||||
/** 相同 trackId 的系列叠加在同一图框中;默认每个系列独占一个图框。 */
|
||||
trackId?: string
|
||||
name: string
|
||||
@@ -74,6 +76,7 @@ export type WaveformData =
|
||||
*/
|
||||
export interface NormalizedWaveformSeries {
|
||||
id: string
|
||||
shotNo?: string
|
||||
trackId?: string
|
||||
name: string
|
||||
unit?: string
|
||||
|
||||
@@ -19,6 +19,7 @@ const chartData: WaveformData = {
|
||||
series: [
|
||||
{
|
||||
id: 'voltage',
|
||||
shotNo: '13300',
|
||||
name: '电压',
|
||||
unit: 'V',
|
||||
color: '#1677ff',
|
||||
@@ -33,6 +34,7 @@ const chartData: WaveformData = {
|
||||
},
|
||||
{
|
||||
id: 'current',
|
||||
shotNo: '13300',
|
||||
name: '电流',
|
||||
unit: 'mA',
|
||||
color: '#d4380d',
|
||||
|
||||
Reference in New Issue
Block a user