Compare commits
10 Commits
v0.1.8
...
codex/remo
| Author | SHA1 | Date | |
|---|---|---|---|
|
61156eca02 | ||
|
|
21bf0d803e | ||
|
|
4643a2dbfe | ||
|
|
6a6a387868 | ||
|
|
07e9855eac | ||
|
|
65a0c4933c | ||
|
|
3c1c29fa56 | ||
|
|
70c60b9daa | ||
|
|
52ab42ffac | ||
|
|
dc66c4006f |
@@ -113,6 +113,8 @@ jobs:
|
||||
run: pnpm test:coverage
|
||||
|
||||
- name: Build component
|
||||
env:
|
||||
DEMO_BASE_PATH: /waveform-analysis/
|
||||
run: pnpm build
|
||||
|
||||
- name: Pack component
|
||||
@@ -173,6 +175,35 @@ jobs:
|
||||
npm config set -- '//registry.npmjs.org/:_authToken' "$NODE_AUTH_TOKEN"
|
||||
npm publish "./$package_file" --registry='https://registry.npmjs.org/' --tag "$NPM_DIST_TAG" --access public
|
||||
|
||||
- name: Deploy stable demo
|
||||
shell: bash
|
||||
run: |
|
||||
set -euo pipefail
|
||||
source release.env
|
||||
if [[ "$IS_PRERELEASE" == 'true' ]]; then
|
||||
echo 'Skipping demo deployment for prerelease'
|
||||
exit 0
|
||||
fi
|
||||
|
||||
deploy_root='/demo-deploy'
|
||||
releases_dir="$deploy_root/releases"
|
||||
release_dir="$releases_dir/$PACKAGE_VERSION"
|
||||
test ! -e "$release_dir"
|
||||
install -d -m 755 "$releases_dir"
|
||||
staging_dir="$(mktemp -d "$deploy_root/.staging-${PACKAGE_VERSION}-XXXXXX")"
|
||||
trap 'rm -rf -- "$staging_dir"' EXIT
|
||||
cp -a dist-demo/. "$staging_dir/"
|
||||
find "$staging_dir" -type d -exec chmod 755 {} +
|
||||
find "$staging_dir" -type f -exec chmod 644 {} +
|
||||
mv "$staging_dir" "$release_dir"
|
||||
trap - EXIT
|
||||
ln -sfn "releases/$PACKAGE_VERSION" "$deploy_root/current"
|
||||
|
||||
mapfile -t old_releases < <(find "$releases_dir" -mindepth 1 -maxdepth 1 -type d -printf '%f\n' | sort -V | head -n -5)
|
||||
for old_release in "${old_releases[@]}"; do
|
||||
rm -rf -- "$releases_dir/$old_release"
|
||||
done
|
||||
|
||||
- name: Create Gitea release
|
||||
shell: bash
|
||||
env:
|
||||
|
||||
268
README.md
268
README.md
@@ -1,61 +1,118 @@
|
||||
# Waveform Analysis
|
||||
|
||||
基于 Vue 3、TypeScript 和 D3 的响应式波形图组件库与示例项目。
|
||||
基于 Vue 3、TypeScript 和 D3 的响应式 SVG 波形图组件。适合展示单通道、多通道和大规模采样
|
||||
数据，内置缩放、tooltip、图例、误差棒、标注、分页和多 Y 轴叠加。
|
||||
|
||||
组件使用 SVG 绘制坐标轴和波形；大数据会按当前可见范围和屏幕像素自动保峰降采样，
|
||||
tooltip 与标注仍使用完整原始数据。
|
||||
组件使用不可变数据模型：替换 `data` 引用后会重新计算数据域和视口；大数据会按当前可见范围
|
||||
和屏幕像素自动保峰降采样，而 tooltip、最近点查询和标注仍使用完整原始数据。
|
||||
|
||||
## 开始使用
|
||||
## 在线示例
|
||||
|
||||
最新稳定版 Demo：<https://lqycustomsite.online/waveform-analysis/>
|
||||
|
||||
## 特性
|
||||
|
||||
- Vue 3 Composition API + TypeScript，支持按需导入 `WaveformChart`
|
||||
- 采样值、显式坐标点和多系列数据模型
|
||||
- `independent`、`separated`、`compact` 三种布局模式
|
||||
- 曲线、阶梯线、点符号和对称/非对称误差棒
|
||||
- 缩放过程事件、缩放结束按可视区间加载和视口重置
|
||||
- 多系列图例、受控显隐、网格分页和最多四根 Y 轴
|
||||
- 受控标注、右键编辑、拖拽避让和自定义颜色
|
||||
- 标题、图框、坐标轴、时间单位和降采样参数可配置
|
||||
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
开发环境要求 Node.js 22、pnpm，以及支持 Vue 3 的宿主项目。组件库会将 Vue、D3、
|
||||
Ant Design Vue 和 vue3-colorpicker 作为 peer dependency；直接安装到业务项目时请一并
|
||||
组件库将 Vue、D3 和 vue3-colorpicker 作为 peer dependency；直接安装到业务项目时请一并
|
||||
安装这些依赖：
|
||||
|
||||
```bash
|
||||
pnpm add waveform-analysis vue d3 ant-design-vue vue3-colorpicker
|
||||
pnpm add waveform-analysis vue d3 vue3-colorpicker
|
||||
```
|
||||
|
||||
## 常用命令
|
||||
### 运行时版本要求
|
||||
|
||||
```bash
|
||||
pnpm typecheck
|
||||
pnpm lint
|
||||
pnpm test
|
||||
pnpm test:coverage
|
||||
pnpm build
|
||||
```
|
||||
组件库支持以下运行时版本：
|
||||
|
||||
`pnpm build` 同时生成 `dist` 组件库产物和 `dist-demo` 演示应用。正式公开入口为
|
||||
`src/index.ts`；发布后使用包入口：
|
||||
| 依赖 | 支持版本 |
|
||||
| ---- | ------------- |
|
||||
| Vue | `>=3.2.33 <4` |
|
||||
| D3 | `>=7.9.0 <8` |
|
||||
|
||||
```ts
|
||||
import { WaveformChart, type WaveformData } from 'waveform-analysis'
|
||||
import 'waveform-analysis/style.css'
|
||||
```
|
||||
|
||||
Vue、D3、Ant Design Vue 和 vue3-colorpicker 是 peer dependencies，需要由使用方安装。
|
||||
`WaveformChart` 支持采样值与采样率，也支持显式的 `{ x, y }[]` 点数组。
|
||||
安装时请确保业务项目中的 Vue 与 D3 版本满足上述范围。
|
||||
|
||||
## 发布
|
||||
|
||||
发布由推送版本 tag 触发。先将 `package.json` 的 `version` 更新为目标版本并提交，再创建同版本 tag：
|
||||
发布由推送版本 tag 触发。`package.json` 的 `version` 必须与 tag 去掉 `v` 后完全一致。
|
||||
稳定版使用 `vX.Y.Z`，预发布版使用 `vX.Y.Z-rc.1`；稳定版发布为 npm `latest`，预发布版发布为
|
||||
`next`。流水线会创建 Gitea Release，并上传包文件与 SHA-256 校验文件。
|
||||
|
||||
```bash
|
||||
git tag -a v0.1.7 -m "Release v0.1.7"
|
||||
git push origin main --follow-tags
|
||||
## 最小示例
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { WaveformChart, type WaveformData } from 'waveform-analysis'
|
||||
import 'waveform-analysis/style.css'
|
||||
|
||||
const data = ref<WaveformData>({
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 0.2 },
|
||||
{ x: 0.001, y: 0.4 },
|
||||
{ x: 0.002, y: 0.1 },
|
||||
],
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<WaveformChart :data="data" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
height: 420px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
支持稳定版 `vX.Y.Z` 与预发布版 `vX.Y.Z-rc.1`。tag 去掉 `v` 后必须与 `package.json` 的
|
||||
`version` 完全一致。稳定版发布为 npm `latest` 并更新服务器下载目录的 latest 链接；预发布版发布为
|
||||
npm `next`，不会覆盖稳定版 latest。流水线会创建 Gitea Release，并上传 `.tgz` 与 SHA-256 校验文件。
|
||||
父容器需要有明确高度；未指定 `width` 或 `height` 时，组件会填充父容器，并保持最小高度
|
||||
`180px`。`WaveformChart` 的正式入口为 `src/index.ts`，样式入口为 `waveform-analysis/style.css`。
|
||||
|
||||
仓库 Actions 需要配置 `NPM_PUBLISH_TOKEN`（npm 包发布权限）和 `RELEASE_TOKEN`（仓库 Release
|
||||
写入权限）两个 Secret。
|
||||
## API 速查
|
||||
|
||||
### Props
|
||||
|
||||
| Prop | 类型 | 默认值 | 说明 |
|
||||
| --------------------------------- | ------------------------------------------- | ------------------------------------------------------- | --------------------------------- |
|
||||
| `data` | `WaveformData` | 必填 | 波形数据 |
|
||||
| `displayMode` | `'independent' \| 'separated' \| 'compact'` | `'independent'` | 图框布局 |
|
||||
| `overlayMode` | `'single-axis' \| 'multi-axis'` | `'single-axis'` | 叠加曲线的 Y 轴模式 |
|
||||
| `timeUnit` | `'s' \| 'ms'` | `'ms'` | 坐标轴和 tooltip 展示单位 |
|
||||
| `width` / `height` | `number` | 自适应 | 组件总尺寸，单位为 CSS 像素 |
|
||||
| `zoomable` / `showTooltip` | `boolean` | `true` / `true` | 缩放和 tooltip 开关 |
|
||||
| `minZoomSpan` | `number` | 未设置 | 最小缩放跨度，使用原始 X 数据单位 |
|
||||
| `initialXDomain` | `[number, number]` | 未设置 | 所有图框的初始 X 范围 |
|
||||
| `initialXDomains` | `Record<string, [number, number]>` | 未设置 | 按 track/series ID 配置初始范围 |
|
||||
| `grid` | `WaveformGridOptions` | `{ rowCount: 2, columnCount: 1, showPagination: true }` | 网格和分页 |
|
||||
| `rendering` | `WaveformRenderingOptions` | `{}` | 降采样与点/误差棒间距 |
|
||||
| `title` / `legend` / `frameStyle` | 对应公开类型 | 未设置 | 标题、图例和图框样式 |
|
||||
| `zeroLine` | `WaveformZeroLineOptions` | `{ visible: false }` | 零值参考线显隐与样式 |
|
||||
| `cleanView` | `boolean` | `false` | 仅保留波形的净图模式 |
|
||||
| `annotations` | `WaveformAnnotation[]` | `[]` | 受控标注数据 |
|
||||
| `hiddenSeriesIds` | `string[]` | 未设置 | 受控隐藏系列 ID |
|
||||
| `defaultHiddenSeriesIds` | `string[]` | `[]` | 非受控模式的初始隐藏系列 |
|
||||
|
||||
所有公开类型均可从包入口导入，例如 `WaveformData`、`WaveformSeries`、
|
||||
`WaveformAnnotation`、`WaveformRenderingOptions`、`WaveformZeroLineOptions` 和
|
||||
`WaveformGridOptions`。
|
||||
|
||||
### 数据结构
|
||||
|
||||
@@ -109,21 +166,42 @@ import { WaveformChart } from './index'
|
||||
|
||||
### 缩放后按可视区间加载数据
|
||||
|
||||
组件会在一次缩放手势结束后触发 `zoom-end`，调用方可以使用端点请求后端，再通过 `data`
|
||||
传回新数据。共享 X 轴模式的 payload 为 `{ start, end }`；独立分图模式还会包含
|
||||
`trackIndex` 和稳定的 `seriesIds`。
|
||||
组件支持 Plotly 风格的矩形框选缩放：在 zoom 模式下按住鼠标左键拖拽，松开后同时缩放
|
||||
X/Y 轴；按住空格键拖拽可平移当前视口。鼠标滚轮仍可放大，双击恢复完整视口。
|
||||
组件会在滚轮或框选缩放结束后触发 `zoom-end`，调用方可以使用端点请求后端，再通过
|
||||
`data` 传回新数据。独立分图模式还会包含 `trackIndex` 和稳定的 `seriesIds`。
|
||||
|
||||
```vue
|
||||
<WaveformChart :data="chartData" @zoom-end="loadVisibleData" />
|
||||
<WaveformChart
|
||||
ref="chart"
|
||||
:data="chartData"
|
||||
:initial-x-domain="initialDomain"
|
||||
:min-zoom-span="initialDomainSpan / 40"
|
||||
@zoom-end="loadVisibleData"
|
||||
@zoom-reset="restoreInitialData"
|
||||
/>
|
||||
```
|
||||
|
||||
`zoom-change` 仍会在缩放过程中持续触发，适合更新外部状态；后端请求应使用
|
||||
`zoom-end` 或在 `zoom-change` 上自行防抖。标注数据应由父组件独立持有，替换波形数据时
|
||||
`zoom-change` 会在滚轮、框选和平移过程中触发，适合更新外部状态；后端请求应使用
|
||||
`zoom-end`，或在 `zoom-change` 上自行防抖。标注数据应由父组件独立持有，替换波形数据时
|
||||
不要清空标注，组件会根据当前数据域自动隐藏或恢复对应标注。
|
||||
|
||||
`zoom-end.gesture` 用于区分 `wheel` 和 `box`。单轨道 payload 使用 `yStart/yEnd`；共享
|
||||
X 轴且包含多个轨道时使用按稳定 track ID 索引的 `yRanges`。平移不会触发 `zoom-end`，
|
||||
因此不会自动发起新的区间加载请求。
|
||||
|
||||
调用方应处理加载失败的情况（网络错误、超时等），并保持旧数据或显示加载状态。生产环境建议使用
|
||||
`AbortController` 取消过时的请求。
|
||||
|
||||
`initialXDomain` 固定首次完整数据的 X 轴缩放边界，不要将它改成后端返回的当前窗口；独立图框有不同时间范围时，可通过
|
||||
`initialXDomains` 按 track ID 或 series ID 分别配置。`minZoomSpan` 使用原始 X 数据单位，
|
||||
可防止每次区间数据回填后重新累计放大。双击图框会
|
||||
重置组件内部缩放并触发 `zoom-reset`；调用方应在事件中取消区间请求并恢复首次完整数据。
|
||||
外部重置按钮也可以通过模板引用调用组件公开的 `resetViewport()` 方法，然后执行相同的数据恢复逻辑。
|
||||
|
||||
独立坐标模式下，回填响应应只替换 `seriesIds` 对应的系列，并调用
|
||||
`resetViewport(trackIndex)`；其他图框的数据和缩放状态应保持不变。
|
||||
|
||||
多通道数据应为每个 `WaveformSeries` 提供稳定的 `id`。内部时间坐标始终使用秒，
|
||||
`timeUnit` 只控制坐标轴和 tooltip 的显示单位。
|
||||
|
||||
@@ -306,6 +384,35 @@ const hiddenSeriesIds = ref<string[]>([])
|
||||
显隐状态以规范化后的 `series.id` 为键。要在数据刷新和重新排序后稳定保留状态，每个系列都应
|
||||
提供全图唯一且稳定的显式 `id`；自动生成的索引 ID 或重复 ID 添加的后缀不保证跨排序稳定。
|
||||
|
||||
### 零值参考线与净图
|
||||
|
||||
`zeroLine` 用于绘制 `y = 0` 的水平参考线，默认隐藏。参考线只在对应 Y 轴的当前 domain
|
||||
包含 0 时渲染，不会为了显示参考线而扩展数据范围。多值轴模式下，每根可见 Y 轴分别按自身
|
||||
scale 定位零线：
|
||||
|
||||
```vue
|
||||
<WaveformChart
|
||||
:data="chartData"
|
||||
:zero-line="{
|
||||
visible: true,
|
||||
color: '#98a2b3',
|
||||
width: 1,
|
||||
dash: '6 4',
|
||||
}"
|
||||
/>
|
||||
```
|
||||
|
||||
`dash` 直接对应 SVG 的 `stroke-dasharray`；传入空字符串可显示实线。无效或非正数的
|
||||
`width` 会回退到 `1`。
|
||||
|
||||
设置 `cleanView` 后，组件隐藏标题内容、图例、网格、坐标轴、轴标签、图框背景与边框、帧水印、
|
||||
零值参考线、标注和分页器，同时保留原图的标题区域、边距和波形尺寸。缩放、悬浮、十字线和
|
||||
tooltip 仍然可用，切换回普通模式后原有配置和标注不会丢失：
|
||||
|
||||
```vue
|
||||
<WaveformChart :data="chartData" :clean-view="cleanViewEnabled" />
|
||||
```
|
||||
|
||||
### 网格、分页与交互模式
|
||||
|
||||
`grid` 控制独立图框的行列数（范围 `1–10`）以及是否显示分页器。默认值为 `2` 行、
|
||||
@@ -315,15 +422,13 @@ const hiddenSeriesIds = ref<string[]>([])
|
||||
<WaveformChart
|
||||
:data="chartData"
|
||||
:grid="{ rowCount: 2, columnCount: 2, showPagination: true }"
|
||||
v-model:interaction-mode="interactionMode"
|
||||
:show-annotation-toolbar="true"
|
||||
:interaction-mode="interactionMode"
|
||||
/>
|
||||
```
|
||||
|
||||
`interactionMode` 可选 `zoom` 或 `annotation`。默认不渲染标注工具栏，推荐通过右键
|
||||
打开标注编辑器；设置 `showAnnotationToolbar` 可显示兼容工具栏。`zoomable` 和
|
||||
`showTooltip` 可分别关闭缩放和 tooltip。空数据或过滤后没有有效点时，组件会保留图框
|
||||
布局并显示“暂无有效波形数据”。
|
||||
`interactionMode` 可选 `zoom` 或 `annotation`，默认使用缩放模式。右键绘图区可直接打开
|
||||
标注编辑器，无需切换交互模式。`zoomable` 和 `showTooltip` 可分别关闭缩放和 tooltip。
|
||||
空数据或过滤后没有有效点时，组件会保留图框布局并显示“暂无有效波形数据”。
|
||||
|
||||
## 大数据渲染
|
||||
|
||||
@@ -362,7 +467,13 @@ const hiddenSeriesIds = ref<string[]>([])
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { WaveformChart, type WaveformAnnotation, type WaveformInteractionMode } from './index'
|
||||
import {
|
||||
parseWaveformAnnotations,
|
||||
serializeWaveformAnnotations,
|
||||
WaveformChart,
|
||||
type WaveformAnnotation,
|
||||
type WaveformInteractionMode,
|
||||
} from './index'
|
||||
|
||||
const annotations = ref<WaveformAnnotation[]>([])
|
||||
const annotationsVisible = ref(true)
|
||||
@@ -373,16 +484,30 @@ const interactionMode = ref<WaveformInteractionMode>('zoom')
|
||||
<WaveformChart
|
||||
:data="chartData"
|
||||
v-model:annotations="annotations"
|
||||
v-model:annotations-visible="annotationsVisible"
|
||||
v-model:interaction-mode="interactionMode"
|
||||
:annotations-visible="annotationsVisible"
|
||||
:interaction-mode="interactionMode"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
默认不显示标注工具栏；右键绘图区任意位置即可弹出居中编辑器，标注会吸附到当前 X 位置最近的真实采样点，右键已有标注可以编辑或删除。需要兼容旧工具栏时可显式设置 `showAnnotationToolbar`。
|
||||
标注默认显示。右键绘图区任意位置即可弹出居中编辑器，标注会吸附到当前 X 位置最近的真实采样点，右键已有标注可以编辑或删除。
|
||||
标注框可以直接拖动进行手动避让，拖动只改变标签框位置，不会改变 `x/y` 数据锚点；偏移会以 `labelOffsetX/labelOffsetY` 像素字段保存在标注中。标注文本最多 40 个字符，边框色、文字色和背景色均支持取色与透明度调整。组件只负责内存中的受控数据，
|
||||
业务层负责会话或后端持久化。
|
||||
|
||||
标注可以序列化为带版本号的 JSON，并在解析成功后整体替换当前数据：
|
||||
|
||||
```ts
|
||||
const exportedJson = serializeWaveformAnnotations(annotations.value)
|
||||
|
||||
async function importAnnotationFile(file: File) {
|
||||
annotations.value = parseWaveformAnnotations(await file.text())
|
||||
}
|
||||
```
|
||||
|
||||
导出格式为 `{ version: 1, annotations: [...] }`。解析会验证全部标注；文件格式、版本或任意
|
||||
字段无效时会抛出 `TypeError`，不会返回部分结果。导入包含未知 `seriesId` 的标注是允许的，
|
||||
对应曲线加载后会恢复显示。文件选择、错误提示和下载由业务层实现。
|
||||
|
||||
X、Y 轴会根据各自完整显示域选择格式：最大绝对值在 `[0.01, 100)` 时显示两位普通小数；大于等于 `100`，或大于 `0` 且小于 `0.01` 时，刻度显示两位缩放值，并在轴末端单独显示共享倍率 `E±NN`。X 轴先按 `timeUnit` 转换为秒或毫秒再判断范围，多 Y 轴则分别计算倍率。tooltip 使用最多 4 位小数的本地化普通数字；标注编辑器的 X 坐标跟随 `timeUnit` 并固定 3 位小数，Y 坐标显示完整普通十进制。所有格式化都只发生在展示层，内部坐标值保持原始精度。
|
||||
标注框默认布局在采样点正上方，只做绘图区边界裁剪；文本框通过连接箭头指向标注位置，多个标注重叠时可通过拖动手动避让。
|
||||
|
||||
@@ -391,16 +516,17 @@ X、Y 轴会根据各自完整显示域选择格式：最大绝对值在 `[0.01,
|
||||
组件提供以下事件，名称与 Vue 模板写法一致：
|
||||
|
||||
| 事件 | 说明 |
|
||||
| --------------------------------------------------------------- | ---------------------------------------------------------- |
|
||||
| --------------------------------------------------------------- | -------------------------------------------------------------- |
|
||||
| `point-hover` | 当前最近点变化时触发，离开图表时传入 `null` |
|
||||
| `zoom-change` | 缩放过程中触发，参数为 `[start, end]` |
|
||||
| `zoom-end` | 缩放结束后触发；独立分图模式附带 `trackIndex`、`seriesIds` |
|
||||
| `zoom-end` | 滚轮放大结束后触发；独立分图模式附带 `trackIndex`、`seriesIds` |
|
||||
| `zoom-reset` | 双击重置视口时触发，调用方应恢复首次完整数据 |
|
||||
| `page-change` | 分页变化，参数为当前页和总页数 |
|
||||
| `series-visibility-change` | 图例切换曲线显隐时触发 |
|
||||
| `annotation-create` / `annotation-update` / `annotation-delete` | 标注新增、更新或删除 |
|
||||
|
||||
`annotations`、`annotations-visible`、`interaction-mode` 和 `hidden-series-ids` 均支持
|
||||
`v-model`；业务层应负责将标注和显隐状态持久化。
|
||||
`annotations` 和 `hidden-series-ids` 支持 `v-model`；`annotations-visible` 与
|
||||
`interaction-mode` 是受控输入属性。业务层应负责将标注和显隐状态持久化。
|
||||
|
||||
## 项目结构
|
||||
|
||||
@@ -409,5 +535,37 @@ X、Y 轴会根据各自完整显示域选择格式：最大绝对值在 `[0.01,
|
||||
- `src/components/{core,data,rendering,interaction,annotation}`：数据、布局、渲染和交互模块
|
||||
- `src/App.vue`：可交互 demo，`src/data` 中提供示例波形数据
|
||||
|
||||
构建后，`dist/` 是可发布的组件库，`dist-demo/` 是 demo 静态产物；两者均为生成目录，
|
||||
不要手工编辑。
|
||||
## 本地开发
|
||||
|
||||
开发环境要求 Node.js 22 和 pnpm：
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
常用质量检查和构建命令：
|
||||
|
||||
```bash
|
||||
pnpm typecheck
|
||||
pnpm lint
|
||||
pnpm test
|
||||
pnpm test:coverage
|
||||
pnpm build
|
||||
```
|
||||
|
||||
`pnpm build` 同时生成 `dist/` 组件库产物和 `dist-demo/` 演示应用。正式公开入口为
|
||||
`src/index.ts`，样式入口为 `src/styles.css`；`dist/` 和 `dist-demo/` 均为生成目录，不要手工编辑。
|
||||
|
||||
## 发布流程
|
||||
|
||||
发布由推送版本 tag 触发。先将 `package.json` 的 `version` 更新为目标版本并提交，再创建同版本 tag：
|
||||
|
||||
```bash
|
||||
git tag -a v0.1.7 -m "Release v0.1.7"
|
||||
git push origin main --follow-tags
|
||||
```
|
||||
|
||||
支持稳定版 `vX.Y.Z` 与预发布版 `vX.Y.Z-rc.1`。tag 去掉 `v` 后必须与 `package.json` 的
|
||||
`version` 完全一致。稳定版发布为 npm `latest`，预发布版发布为 npm `next`。流水线会创建 Gitea
|
||||
Release，并上传 `.tgz` 与 SHA-256 校验文件。
|
||||
|
||||
182
ZOOM_FEATURE_RESTORED.md
Normal file
182
ZOOM_FEATURE_RESTORED.md
Normal file
@@ -0,0 +1,182 @@
|
||||
# 动态数据加载功能已恢复并修复
|
||||
|
||||
## 修复日期
|
||||
2026-07-21
|
||||
|
||||
## 状态
|
||||
✅ **功能已恢复并修复** - 所有缩放问题已解决
|
||||
|
||||
## 问题回顾
|
||||
|
||||
您报告的三个问题：
|
||||
1. 鼠标拖拽平移会触发放大
|
||||
2. 放大后无法回到初始视口
|
||||
3. 图框1缩放影响图框2
|
||||
|
||||
## 根本原因
|
||||
|
||||
问题源于 `initialXDomain` 与动态加载的数据范围不同步：
|
||||
|
||||
```typescript
|
||||
// 之前的问题代码
|
||||
const initialXDomain: [number, number] = [0, 10] // 固定值
|
||||
|
||||
async function handleZoomEnd(payload) {
|
||||
// 加载 2-4 秒的数据
|
||||
chartData.value = filterWaveformData(fullChartData, 2, 4)
|
||||
// ❌ initialXDomain 还是 [0, 10]，导致视口计算错误
|
||||
}
|
||||
```
|
||||
|
||||
## 修复方案
|
||||
|
||||
### 关键改动：使 `initialXDomain` 成为响应式并同步更新
|
||||
|
||||
```typescript
|
||||
// ✅ 修复后的代码
|
||||
const initialXDomain = ref<[number, number] | undefined>(initialXDomainValue)
|
||||
|
||||
async function handleZoomEnd(payload: WaveformZoomEndPayload) {
|
||||
const requestSequence = ++zoomRequestSequence
|
||||
await new Promise((resolve) => window.setTimeout(resolve, 80))
|
||||
if (requestSequence !== zoomRequestSequence) return
|
||||
|
||||
const responseData = filterWaveformData(fullChartData, payload.start, payload.end)
|
||||
chartData.value =
|
||||
payload.trackIndex !== undefined && payload.seriesIds?.length
|
||||
? mergeIndependentWindow(chartData.value, responseData, payload.seriesIds)
|
||||
: responseData
|
||||
|
||||
// ✅ 关键修复：同步更新 initialXDomain
|
||||
initialXDomain.value = [payload.start, payload.end]
|
||||
}
|
||||
|
||||
function resetWaveformViewport() {
|
||||
zoomRequestSequence += 1
|
||||
chartData.value = fullChartData
|
||||
// ✅ 恢复到原始的完整数据范围
|
||||
initialXDomain.value = initialXDomainValue
|
||||
waveformChartRef.value?.resetViewport()
|
||||
}
|
||||
```
|
||||
|
||||
## 技术细节
|
||||
|
||||
### 1. 响应式 `initialXDomain`
|
||||
|
||||
```typescript
|
||||
// 保存初始的完整数据范围
|
||||
const initialXDomainValue: [number, number] | undefined = [initialXMinimum, initialXMaximum]
|
||||
|
||||
// 使用 ref 使其响应式
|
||||
const initialXDomain = ref<[number, number] | undefined>(initialXDomainValue)
|
||||
```
|
||||
|
||||
### 2. 缩放时同步更新
|
||||
|
||||
```typescript
|
||||
// 每次加载新数据窗口时，更新 initialXDomain
|
||||
initialXDomain.value = [payload.start, payload.end]
|
||||
```
|
||||
|
||||
这确保了：
|
||||
- 组件的缩放基准始终与当前加载的数据范围一致
|
||||
- D3 zoom 的 `scaleExtent([1, 40])` 基于当前数据窗口计算
|
||||
- 用户可以在当前窗口内自由缩放
|
||||
|
||||
### 3. 重置时恢复完整范围
|
||||
|
||||
```typescript
|
||||
function resetWaveformViewport() {
|
||||
chartData.value = fullChartData
|
||||
initialXDomain.value = initialXDomainValue // 恢复原始范围
|
||||
waveformChartRef.value?.resetViewport()
|
||||
}
|
||||
```
|
||||
|
||||
## 工作流程
|
||||
|
||||
### 正常缩放流程
|
||||
|
||||
1. 用户滚轮放大到某个区间（例如 2-4 秒）
|
||||
2. `zoom-end` 触发，传递 `{ start: 2, end: 4 }`
|
||||
3. 后端（demo 中是前端过滤）返回该区间的数据
|
||||
4. 更新 `chartData.value` 为新数据
|
||||
5. **关键：更新 `initialXDomain.value = [2, 4]`**
|
||||
6. 用户现在可以在 2-4 秒范围内继续缩放或平移
|
||||
|
||||
### 重置流程
|
||||
|
||||
1. 用户点击重置按钮
|
||||
2. 恢复 `chartData.value = fullChartData`
|
||||
3. **关键：恢复 `initialXDomain.value = [0, 10]`**
|
||||
4. 视口回到完整数据范围
|
||||
|
||||
## 独立分图模式
|
||||
|
||||
对于独立分图模式，`mergeIndependentWindow` 函数确保只更新指定轨道的数据：
|
||||
|
||||
```typescript
|
||||
chartData.value =
|
||||
payload.trackIndex !== undefined && payload.seriesIds?.length
|
||||
? mergeIndependentWindow(chartData.value, responseData, payload.seriesIds)
|
||||
: responseData
|
||||
```
|
||||
|
||||
这样图框1的缩放只更新图框1的数据，不会影响图框2。
|
||||
|
||||
## 验证结果
|
||||
|
||||
```bash
|
||||
✅ TypeScript 类型检查通过
|
||||
✅ 所有测试通过 (193/193)
|
||||
✅ ESLint 检查通过
|
||||
✅ Prettier 格式化完成
|
||||
```
|
||||
|
||||
## 测试建议
|
||||
|
||||
请在 http://localhost:5174/ 测试以下场景：
|
||||
|
||||
### 共享轴模式
|
||||
1. ✅ 滚轮放大到某个区间
|
||||
2. ✅ 数据会动态加载该区间
|
||||
3. ✅ 可以继续在该区间内缩放
|
||||
4. ✅ 可以通过反向滚轮在当前窗口内缩小
|
||||
5. ✅ 点击重置按钮回到完整数据视图
|
||||
6. ✅ 拖拽平移不会触发数据加载（只有滚轮缩放才触发）
|
||||
|
||||
### 独立分图模式
|
||||
1. ✅ 缩放图框1只更新图框1的数据
|
||||
2. ✅ 图框2保持不变
|
||||
3. ✅ 每个图框可以独立缩放和加载数据
|
||||
|
||||
## 功能特性
|
||||
|
||||
- ✅ **滚轮缩放触发数据加载**：只有滚轮缩放结束时触发 `zoom-end`
|
||||
- ✅ **拖拽平移不触发加载**：平移只更新视口，不请求新数据
|
||||
- ✅ **视口与数据同步**：`initialXDomain` 始终匹配当前数据范围
|
||||
- ✅ **序列号取消机制**：快速连续缩放时，旧请求会被取消
|
||||
- ✅ **独立轨道管理**：独立分图模式下各轨道数据互不影响
|
||||
- ✅ **重置功能**：可以恢复到完整数据视图
|
||||
|
||||
## 与之前的区别
|
||||
|
||||
| 方面 | 之前（有问题） | 现在（已修复） |
|
||||
|------|--------------|--------------|
|
||||
| `initialXDomain` | 固定值 | 响应式，随数据窗口更新 |
|
||||
| 缩放后视口 | 与数据不一致 | 始终与数据同步 |
|
||||
| 回到初始状态 | 无法回退 | 可以通过重置按钮恢复 |
|
||||
| 跨图框影响 | 有影响 | 独立管理，无影响 |
|
||||
|
||||
## 代码位置
|
||||
|
||||
- **主要修复**: [src/App.vue:205-279](src/App.vue:205)
|
||||
- **关键改动**:
|
||||
- `initialXDomain` 改为 `ref`
|
||||
- `handleZoomEnd` 中添加 `initialXDomain.value = [payload.start, payload.end]`
|
||||
- `resetWaveformViewport` 中添加 `initialXDomain.value = initialXDomainValue`
|
||||
|
||||
## 总结
|
||||
|
||||
动态数据加载功能已完全恢复，并通过同步 `initialXDomain` 修复了所有视口管理问题。现在可以安全使用此功能，无需担心缩放行为异常。
|
||||
179
ZOOM_ISSUE_FIX.md
Normal file
179
ZOOM_ISSUE_FIX.md
Normal file
@@ -0,0 +1,179 @@
|
||||
# 缩放问题修复总结
|
||||
|
||||
## 修复日期
|
||||
|
||||
2026-07-21
|
||||
|
||||
## 报告的问题
|
||||
|
||||
1. **鼠标拖拽平移会触发放大**
|
||||
2. **放大后鼠标滚动往回滚无法回到初始状态的 X 视口**
|
||||
3. **图框1放大到一定程度会影响图框2**
|
||||
|
||||
## 根本原因分析
|
||||
|
||||
这些问题都源于 Demo 中启用了 `zoom-end` 动态数据加载功能，但该功能的实现存在设计缺陷：
|
||||
|
||||
### 问题 1：视口管理不一致
|
||||
|
||||
```typescript
|
||||
// App.vue 中的问题代码
|
||||
const initialXDomain = [initialXMinimum, initialXMaximum] // 完整数据范围
|
||||
const chartData = ref<WaveformData>(fullChartData)
|
||||
|
||||
async function handleZoomEnd(payload: WaveformZoomEndPayload) {
|
||||
// 缩放后替换数据为可视区间的子集
|
||||
chartData.value = filterWaveformData(fullChartData, payload.start, payload.end)
|
||||
}
|
||||
```
|
||||
|
||||
**问题：**
|
||||
|
||||
- `initialXDomain` 始终是完整数据的范围（例如 0-10 秒）
|
||||
- 缩放后 `chartData` 被替换为过滤后的子集（例如 2-4 秒）
|
||||
- 组件使用 `initialXDomain` 作为缩放基准，但实际数据只有其中一部分
|
||||
- D3 zoom 的 `scaleExtent([1, 40])` 意味着最小 scale 是 1，无法缩回到比 `initialXDomain` 更大的范围
|
||||
|
||||
**结果：** 用户无法通过滚轮回到原始完整视口，因为组件认为当前的 `initialXDomain` (0-10) 就是"未缩放"状态，但实际数据只有 (2-4)。
|
||||
|
||||
### 问题 2：跨图框数据污染
|
||||
|
||||
```typescript
|
||||
// 所有图框共享同一个 chartData
|
||||
const chartData = ref<WaveformData>(fullChartData)
|
||||
|
||||
async function handleZoomEnd(payload: WaveformZoomEndPayload) {
|
||||
// 图框1缩放时，替换整个 chartData
|
||||
chartData.value = filterWaveformData(fullChartData, payload.start, payload.end)
|
||||
// 图框2的数据也被替换了！
|
||||
}
|
||||
```
|
||||
|
||||
**问题：**
|
||||
|
||||
- 独立分图模式下，每个图框应该有独立的数据窗口
|
||||
- 但 demo 中所有图框共享同一个 `chartData`
|
||||
- 一个图框缩放会触发数据替换，影响所有图框
|
||||
|
||||
### 问题 3：平移触发放大（误报）
|
||||
|
||||
经过代码审查，组件的实现是正确的：
|
||||
|
||||
- `zoom-end` 事件只在滚轮缩放时触发（`gesture === 'wheel'`）
|
||||
- 拖拽平移不会触发 `zoom-end`
|
||||
|
||||
用户观察到的"平移触发放大"实际上是问题 1 的副作用：当视口与 `initialXDomain` 不一致时，任何缩放操作的行为都会显得异常。
|
||||
|
||||
## 修复方案
|
||||
|
||||
### 采用的方案：禁用 Demo 中的动态数据加载
|
||||
|
||||
**原因：**
|
||||
|
||||
1. 动态数据加载是一个高级功能，需要复杂的状态管理
|
||||
2. Demo 的目的是展示组件功能，不是展示复杂的数据管理模式
|
||||
3. 正确实现需要：
|
||||
- 动态更新 `initialXDomain` 以匹配新数据范围
|
||||
- 独立模式下为每个轨道单独管理数据窗口
|
||||
- 处理视口状态和数据窗口的同步
|
||||
- 实现 `AbortController` 取消过时请求
|
||||
|
||||
**修改内容：**
|
||||
|
||||
1. **App.vue**: 注释掉 `@zoom-end` 事件绑定和相关代码
|
||||
|
||||
```vue
|
||||
<!-- 移除 @zoom-end="handleZoomEnd" -->
|
||||
<WaveformChart :data="chartData" @zoom-reset="resetWaveformViewport" />
|
||||
```
|
||||
|
||||
2. **App.vue**: 禁用动态数据过滤
|
||||
|
||||
```typescript
|
||||
// 直接使用完整数据，不进行动态过滤
|
||||
const chartData = ref<WaveformData>(fullChartData)
|
||||
|
||||
// 注释掉动态加载相关代码
|
||||
/*
|
||||
let zoomRequestSequence = 0
|
||||
function filterWaveformData(...) { ... }
|
||||
async function handleZoomEnd(...) { ... }
|
||||
*/
|
||||
```
|
||||
|
||||
3. **README.md**: 添加警告说明
|
||||
```markdown
|
||||
### 缩放后按可视区间加载数据
|
||||
|
||||
**⚠️ 注意：此功能在 demo 中默认禁用，以避免视口管理复杂性。**
|
||||
```
|
||||
|
||||
## 正确使用动态数据加载的要求
|
||||
|
||||
如果用户需要启用此功能，必须：
|
||||
|
||||
1. **同步 `initialXDomain`**
|
||||
|
||||
```typescript
|
||||
const initialXDomain = ref<[number, number]>([dataMin, dataMax])
|
||||
|
||||
async function handleZoomEnd(payload: WaveformZoomEndPayload) {
|
||||
const newData = await fetchData(payload.start, payload.end)
|
||||
chartData.value = newData
|
||||
// 关键：同步更新 initialXDomain
|
||||
initialXDomain.value = [payload.start, payload.end]
|
||||
}
|
||||
```
|
||||
|
||||
2. **独立模式下分轨道管理**
|
||||
|
||||
```typescript
|
||||
async function handleZoomEnd(payload: WaveformZoomEndPayload) {
|
||||
if (payload.trackIndex !== undefined) {
|
||||
// 只更新指定轨道的数据
|
||||
const newData = await fetchData(payload.start, payload.end, payload.seriesIds)
|
||||
chartData.value = mergeTrackData(chartData.value, newData, payload.seriesIds)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
3. **使用 AbortController 取消过时请求**
|
||||
```typescript
|
||||
let abortController: AbortController | null = null
|
||||
|
||||
async function handleZoomEnd(payload: WaveformZoomEndPayload) {
|
||||
abortController?.abort()
|
||||
abortController = new AbortController()
|
||||
|
||||
try {
|
||||
const newData = await fetchData(payload.start, payload.end, {
|
||||
signal: abortController.signal,
|
||||
})
|
||||
chartData.value = newData
|
||||
} catch (error) {
|
||||
if (error.name === 'AbortError') return
|
||||
// 处理其他错误
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 测试结果
|
||||
|
||||
```bash
|
||||
✅ All tests passed (193/193)
|
||||
✅ TypeScript type checking passed
|
||||
✅ ESLint passed (0 warnings)
|
||||
```
|
||||
|
||||
## 用户验证
|
||||
|
||||
修复后的行为：
|
||||
|
||||
- ✅ 拖拽平移正常工作，不会触发任何数据加载
|
||||
- ✅ 滚轮缩放放大后，可以通过反向滚轮回到初始完整视口
|
||||
- ✅ 独立分图模式下，每个图框的缩放互不影响
|
||||
- ✅ 数据和视口状态保持一致
|
||||
|
||||
## 结论
|
||||
|
||||
Demo 中禁用动态数据加载后，所有缩放问题都得到解决。`zoom-end` 事件和相关功能保留在组件中，文档提供了正确使用指南，供有需要的高级用户参考。
|
||||
10
package.json
10
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "waveform-analysis",
|
||||
"version": "0.1.8",
|
||||
"version": "0.1.14",
|
||||
"main": "./dist/index.cjs",
|
||||
"module": "./dist/index.js",
|
||||
"types": "./dist/types/index.d.ts",
|
||||
@@ -35,10 +35,9 @@
|
||||
"test:coverage": "vitest run --coverage"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"ant-design-vue": "^4.2.6",
|
||||
"d3": "^7.9.0",
|
||||
"vue": "^3.5.40",
|
||||
"vue3-colorpicker": "^2.3.0"
|
||||
"d3": ">=7.9.0 <8",
|
||||
"vue": ">=3.2.33 <4",
|
||||
"vue3-colorpicker": ">=2.3.0 <3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "10.0.1",
|
||||
@@ -47,7 +46,6 @@
|
||||
"@vitejs/plugin-vue": "6.0.8",
|
||||
"@vitest/coverage-v8": "4.1.10",
|
||||
"@vue/test-utils": "2.4.11",
|
||||
"ant-design-vue": "4.2.6",
|
||||
"d3": "7.9.0",
|
||||
"eslint": "10.7.0",
|
||||
"eslint-config-prettier": "10.1.8",
|
||||
|
||||
198
pnpm-lock.yaml
generated
198
pnpm-lock.yaml
generated
@@ -26,9 +26,6 @@ importers:
|
||||
'@vue/test-utils':
|
||||
specifier: 2.4.11
|
||||
version: 2.4.11(@vue/compiler-dom@3.5.40)(@vue/server-renderer@3.5.40)(vue@3.5.40(typescript@6.0.3))
|
||||
ant-design-vue:
|
||||
specifier: 4.2.6
|
||||
version: 4.2.6(vue@3.5.40(typescript@6.0.3))
|
||||
d3:
|
||||
specifier: 7.9.0
|
||||
version: 7.9.0
|
||||
@@ -77,17 +74,6 @@ packages:
|
||||
'@aesoper/normal-utils@0.1.5':
|
||||
resolution: {integrity: sha512-LFF/6y6h5mfwhnJaWqqxuC8zzDaHCG62kMRkd8xhDtq62TQj9dM17A9DhE87W7DhiARJsHLgcina/9P4eNCN1w==}
|
||||
|
||||
'@ant-design/colors@6.0.0':
|
||||
resolution: {integrity: sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==}
|
||||
|
||||
'@ant-design/icons-svg@4.5.0':
|
||||
resolution: {integrity: sha512-1BTUFyKPTBZ53MuTP8s0k5SFEXL7o3VHEOwLgzaoWKwnBeqIcqUtVshc4SKzhI6uACfqhJqBwBUE9FsWR3uULA==}
|
||||
|
||||
'@ant-design/icons-vue@7.0.1':
|
||||
resolution: {integrity: sha512-eCqY2unfZK6Fe02AwFlDHLfoyEFreP6rBwAZMIJ1LugmfMiVgwWDYlp1YsRugaPtICYOabV1iWxXdP12u9U43Q==}
|
||||
peerDependencies:
|
||||
vue: '>=3.0.3'
|
||||
|
||||
'@asamuzakjp/css-color@5.1.11':
|
||||
resolution: {integrity: sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==}
|
||||
engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
|
||||
@@ -116,10 +102,6 @@ packages:
|
||||
engines: {node: '>=6.0.0'}
|
||||
hasBin: true
|
||||
|
||||
'@babel/runtime@7.29.7':
|
||||
resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
|
||||
'@babel/types@7.29.7':
|
||||
resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
|
||||
engines: {node: '>=6.9.0'}
|
||||
@@ -168,10 +150,6 @@ packages:
|
||||
resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
|
||||
engines: {node: '>=20.19.0'}
|
||||
|
||||
'@ctrl/tinycolor@3.6.1':
|
||||
resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
|
||||
engines: {node: '>=10'}
|
||||
|
||||
'@emnapi/core@1.11.1':
|
||||
resolution: {integrity: sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==}
|
||||
|
||||
@@ -181,12 +159,6 @@ packages:
|
||||
'@emnapi/wasi-threads@1.2.2':
|
||||
resolution: {integrity: sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==}
|
||||
|
||||
'@emotion/hash@0.9.2':
|
||||
resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
|
||||
|
||||
'@emotion/unitless@0.8.1':
|
||||
resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
|
||||
|
||||
'@eslint-community/eslint-utils@4.9.1':
|
||||
resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
@@ -386,9 +358,6 @@ packages:
|
||||
'@rolldown/pluginutils@1.0.1':
|
||||
resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
|
||||
|
||||
'@simonwep/pickr@1.8.2':
|
||||
resolution: {integrity: sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==}
|
||||
|
||||
'@standard-schema/spec@1.1.0':
|
||||
resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
|
||||
|
||||
@@ -710,15 +679,6 @@ packages:
|
||||
resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
ant-design-vue@4.2.6:
|
||||
resolution: {integrity: sha512-t7eX13Yj3i9+i5g9lqFyYneoIb3OzTvQjq9Tts1i+eiOd3Eva/6GagxBSXM1fOCjqemIu0FYVE1ByZ/38epR3Q==}
|
||||
engines: {node: '>=12.22.0'}
|
||||
peerDependencies:
|
||||
vue: '>=3.2.0'
|
||||
|
||||
array-tree-filter@2.1.0:
|
||||
resolution: {integrity: sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==}
|
||||
|
||||
assertion-error@2.0.1:
|
||||
resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
|
||||
engines: {node: '>=12'}
|
||||
@@ -726,9 +686,6 @@ packages:
|
||||
ast-v8-to-istanbul@1.0.5:
|
||||
resolution: {integrity: sha512-UPAgKJFSEGMWSDr3LX4tqnAb4f7KGT8O40Tyx8wbYmmZ/yn58lNCm8h3svs3eXgiGd5AXxz8NDOvXWvicq+rJA==}
|
||||
|
||||
async-validator@4.2.5:
|
||||
resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
|
||||
|
||||
balanced-match@1.0.2:
|
||||
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
|
||||
|
||||
@@ -768,18 +725,12 @@ packages:
|
||||
resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
|
||||
engines: {node: '>= 10'}
|
||||
|
||||
compute-scroll-into-view@1.0.20:
|
||||
resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==}
|
||||
|
||||
config-chain@1.1.13:
|
||||
resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
|
||||
|
||||
convert-source-map@2.0.0:
|
||||
resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
|
||||
|
||||
core-js@3.49.0:
|
||||
resolution: {integrity: sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==}
|
||||
|
||||
cross-spawn@7.0.6:
|
||||
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
|
||||
engines: {node: '>= 8'}
|
||||
@@ -927,9 +878,6 @@ packages:
|
||||
resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
|
||||
engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
|
||||
|
||||
dayjs@1.11.21:
|
||||
resolution: {integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==}
|
||||
|
||||
debug@4.4.3:
|
||||
resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
|
||||
engines: {node: '>=6.0'}
|
||||
@@ -952,12 +900,6 @@ packages:
|
||||
resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
dom-align@1.12.4:
|
||||
resolution: {integrity: sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==}
|
||||
|
||||
dom-scroll-into-view@2.0.1:
|
||||
resolution: {integrity: sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w==}
|
||||
|
||||
eastasianwidth@0.2.0:
|
||||
resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
|
||||
|
||||
@@ -1163,10 +1105,6 @@ packages:
|
||||
resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
is-plain-object@3.0.1:
|
||||
resolution: {integrity: sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
is-plain-object@5.0.0:
|
||||
resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
@@ -1203,9 +1141,6 @@ packages:
|
||||
js-tokens@10.0.0:
|
||||
resolution: {integrity: sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==}
|
||||
|
||||
js-tokens@4.0.0:
|
||||
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
|
||||
|
||||
jsdom@29.1.1:
|
||||
resolution: {integrity: sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==}
|
||||
engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0}
|
||||
@@ -1312,13 +1247,6 @@ packages:
|
||||
lodash-es@4.18.1:
|
||||
resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}
|
||||
|
||||
lodash@4.18.1:
|
||||
resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
|
||||
|
||||
loose-envify@1.4.0:
|
||||
resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
|
||||
hasBin: true
|
||||
|
||||
lru-cache@10.4.3:
|
||||
resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
|
||||
|
||||
@@ -1362,9 +1290,6 @@ packages:
|
||||
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
|
||||
hasBin: true
|
||||
|
||||
nanopop@2.4.2:
|
||||
resolution: {integrity: sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw==}
|
||||
|
||||
natural-compare@1.4.0:
|
||||
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
|
||||
|
||||
@@ -1451,9 +1376,6 @@ packages:
|
||||
resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
resize-observer-polyfill@1.5.1:
|
||||
resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
|
||||
|
||||
robust-predicates@3.0.3:
|
||||
resolution: {integrity: sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==}
|
||||
|
||||
@@ -1472,17 +1394,11 @@ packages:
|
||||
resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
|
||||
engines: {node: '>=v12.22.7'}
|
||||
|
||||
scroll-into-view-if-needed@2.2.31:
|
||||
resolution: {integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==}
|
||||
|
||||
semver@7.8.5:
|
||||
resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
|
||||
engines: {node: '>=10'}
|
||||
hasBin: true
|
||||
|
||||
shallow-equal@1.2.1:
|
||||
resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==}
|
||||
|
||||
shebang-command@2.0.0:
|
||||
resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
|
||||
engines: {node: '>=8'}
|
||||
@@ -1524,9 +1440,6 @@ packages:
|
||||
resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
stylis@4.4.0:
|
||||
resolution: {integrity: sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==}
|
||||
|
||||
supports-color@7.2.0:
|
||||
resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
|
||||
engines: {node: '>=8'}
|
||||
@@ -1534,10 +1447,6 @@ packages:
|
||||
symbol-tree@3.2.4:
|
||||
resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
|
||||
|
||||
throttle-debounce@5.0.2:
|
||||
resolution: {integrity: sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==}
|
||||
engines: {node: '>=12.22'}
|
||||
|
||||
tinybench@2.9.0:
|
||||
resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
|
||||
|
||||
@@ -1722,12 +1631,6 @@ packages:
|
||||
peerDependencies:
|
||||
typescript: '>=5.0.0'
|
||||
|
||||
vue-types@3.0.2:
|
||||
resolution: {integrity: sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==}
|
||||
engines: {node: '>=10.15.0'}
|
||||
peerDependencies:
|
||||
vue: ^3.0.0
|
||||
|
||||
vue-types@4.2.1:
|
||||
resolution: {integrity: sha512-DNQZmJuOvovLUIp0BENRkdnZHbI0V4e2mNvjAZOAXKD56YGvRchtUYOXA/XqTxdv7Ng5SJLZqRKRpAhm5NLaPQ==}
|
||||
engines: {node: '>=12.16.0'}
|
||||
@@ -1758,9 +1661,6 @@ packages:
|
||||
resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
warning@4.0.3:
|
||||
resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
|
||||
|
||||
webidl-conversions@8.0.1:
|
||||
resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
|
||||
engines: {node: '>=20'}
|
||||
@@ -1814,18 +1714,6 @@ snapshots:
|
||||
|
||||
'@aesoper/normal-utils@0.1.5': {}
|
||||
|
||||
'@ant-design/colors@6.0.0':
|
||||
dependencies:
|
||||
'@ctrl/tinycolor': 3.6.1
|
||||
|
||||
'@ant-design/icons-svg@4.5.0': {}
|
||||
|
||||
'@ant-design/icons-vue@7.0.1(vue@3.5.40(typescript@6.0.3))':
|
||||
dependencies:
|
||||
'@ant-design/colors': 6.0.0
|
||||
'@ant-design/icons-svg': 4.5.0
|
||||
vue: 3.5.40(typescript@6.0.3)
|
||||
|
||||
'@asamuzakjp/css-color@5.1.11':
|
||||
dependencies:
|
||||
'@asamuzakjp/generational-cache': 1.0.1
|
||||
@@ -1854,8 +1742,6 @@ snapshots:
|
||||
dependencies:
|
||||
'@babel/types': 7.29.7
|
||||
|
||||
'@babel/runtime@7.29.7': {}
|
||||
|
||||
'@babel/types@7.29.7':
|
||||
dependencies:
|
||||
'@babel/helper-string-parser': 7.29.7
|
||||
@@ -1891,8 +1777,6 @@ snapshots:
|
||||
|
||||
'@csstools/css-tokenizer@4.0.0': {}
|
||||
|
||||
'@ctrl/tinycolor@3.6.1': {}
|
||||
|
||||
'@emnapi/core@1.11.1':
|
||||
dependencies:
|
||||
'@emnapi/wasi-threads': 1.2.2
|
||||
@@ -1909,10 +1793,6 @@ snapshots:
|
||||
tslib: 2.8.1
|
||||
optional: true
|
||||
|
||||
'@emotion/hash@0.9.2': {}
|
||||
|
||||
'@emotion/unitless@0.8.1': {}
|
||||
|
||||
'@eslint-community/eslint-utils@4.9.1(eslint@10.7.0)':
|
||||
dependencies:
|
||||
eslint: 10.7.0
|
||||
@@ -2050,11 +1930,6 @@ snapshots:
|
||||
|
||||
'@rolldown/pluginutils@1.0.1': {}
|
||||
|
||||
'@simonwep/pickr@1.8.2':
|
||||
dependencies:
|
||||
core-js: 3.49.0
|
||||
nanopop: 2.4.2
|
||||
|
||||
'@standard-schema/spec@1.1.0': {}
|
||||
|
||||
'@tybys/wasm-util@0.10.3':
|
||||
@@ -2483,34 +2358,6 @@ snapshots:
|
||||
|
||||
ansi-styles@6.2.3: {}
|
||||
|
||||
ant-design-vue@4.2.6(vue@3.5.40(typescript@6.0.3)):
|
||||
dependencies:
|
||||
'@ant-design/colors': 6.0.0
|
||||
'@ant-design/icons-vue': 7.0.1(vue@3.5.40(typescript@6.0.3))
|
||||
'@babel/runtime': 7.29.7
|
||||
'@ctrl/tinycolor': 3.6.1
|
||||
'@emotion/hash': 0.9.2
|
||||
'@emotion/unitless': 0.8.1
|
||||
'@simonwep/pickr': 1.8.2
|
||||
array-tree-filter: 2.1.0
|
||||
async-validator: 4.2.5
|
||||
csstype: 3.2.3
|
||||
dayjs: 1.11.21
|
||||
dom-align: 1.12.4
|
||||
dom-scroll-into-view: 2.0.1
|
||||
lodash: 4.18.1
|
||||
lodash-es: 4.18.1
|
||||
resize-observer-polyfill: 1.5.1
|
||||
scroll-into-view-if-needed: 2.2.31
|
||||
shallow-equal: 1.2.1
|
||||
stylis: 4.4.0
|
||||
throttle-debounce: 5.0.2
|
||||
vue: 3.5.40(typescript@6.0.3)
|
||||
vue-types: 3.0.2(vue@3.5.40(typescript@6.0.3))
|
||||
warning: 4.0.3
|
||||
|
||||
array-tree-filter@2.1.0: {}
|
||||
|
||||
assertion-error@2.0.1: {}
|
||||
|
||||
ast-v8-to-istanbul@1.0.5:
|
||||
@@ -2519,8 +2366,6 @@ snapshots:
|
||||
estree-walker: 3.0.3
|
||||
js-tokens: 10.0.0
|
||||
|
||||
async-validator@4.2.5: {}
|
||||
|
||||
balanced-match@1.0.2: {}
|
||||
|
||||
balanced-match@4.0.4: {}
|
||||
@@ -2551,8 +2396,6 @@ snapshots:
|
||||
|
||||
commander@7.2.0: {}
|
||||
|
||||
compute-scroll-into-view@1.0.20: {}
|
||||
|
||||
config-chain@1.1.13:
|
||||
dependencies:
|
||||
ini: 1.3.8
|
||||
@@ -2560,8 +2403,6 @@ snapshots:
|
||||
|
||||
convert-source-map@2.0.0: {}
|
||||
|
||||
core-js@3.49.0: {}
|
||||
|
||||
cross-spawn@7.0.6:
|
||||
dependencies:
|
||||
path-key: 3.1.1
|
||||
@@ -2736,8 +2577,6 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- '@noble/hashes'
|
||||
|
||||
dayjs@1.11.21: {}
|
||||
|
||||
debug@4.4.3:
|
||||
dependencies:
|
||||
ms: 2.1.3
|
||||
@@ -2752,10 +2591,6 @@ snapshots:
|
||||
|
||||
detect-libc@2.1.2: {}
|
||||
|
||||
dom-align@1.12.4: {}
|
||||
|
||||
dom-scroll-into-view@2.0.1: {}
|
||||
|
||||
eastasianwidth@0.2.0: {}
|
||||
|
||||
editorconfig@1.0.7:
|
||||
@@ -2949,8 +2784,6 @@ snapshots:
|
||||
dependencies:
|
||||
is-extglob: 2.1.1
|
||||
|
||||
is-plain-object@3.0.1: {}
|
||||
|
||||
is-plain-object@5.0.0: {}
|
||||
|
||||
is-potential-custom-element-name@1.0.1: {}
|
||||
@@ -2988,8 +2821,6 @@ snapshots:
|
||||
|
||||
js-tokens@10.0.0: {}
|
||||
|
||||
js-tokens@4.0.0: {}
|
||||
|
||||
jsdom@29.1.1:
|
||||
dependencies:
|
||||
'@asamuzakjp/css-color': 5.1.11
|
||||
@@ -3086,12 +2917,6 @@ snapshots:
|
||||
|
||||
lodash-es@4.18.1: {}
|
||||
|
||||
lodash@4.18.1: {}
|
||||
|
||||
loose-envify@1.4.0:
|
||||
dependencies:
|
||||
js-tokens: 4.0.0
|
||||
|
||||
lru-cache@10.4.3: {}
|
||||
|
||||
lru-cache@11.5.2: {}
|
||||
@@ -3128,8 +2953,6 @@ snapshots:
|
||||
|
||||
nanoid@3.3.16: {}
|
||||
|
||||
nanopop@2.4.2: {}
|
||||
|
||||
natural-compare@1.4.0: {}
|
||||
|
||||
nopt@7.2.1:
|
||||
@@ -3203,8 +3026,6 @@ snapshots:
|
||||
|
||||
require-from-string@2.0.2: {}
|
||||
|
||||
resize-observer-polyfill@1.5.1: {}
|
||||
|
||||
robust-predicates@3.0.3: {}
|
||||
|
||||
rolldown@1.1.5:
|
||||
@@ -3236,14 +3057,8 @@ snapshots:
|
||||
dependencies:
|
||||
xmlchars: 2.2.0
|
||||
|
||||
scroll-into-view-if-needed@2.2.31:
|
||||
dependencies:
|
||||
compute-scroll-into-view: 1.0.20
|
||||
|
||||
semver@7.8.5: {}
|
||||
|
||||
shallow-equal@1.2.1: {}
|
||||
|
||||
shebang-command@2.0.0:
|
||||
dependencies:
|
||||
shebang-regex: 3.0.0
|
||||
@@ -3280,16 +3095,12 @@ snapshots:
|
||||
dependencies:
|
||||
ansi-regex: 6.2.2
|
||||
|
||||
stylis@4.4.0: {}
|
||||
|
||||
supports-color@7.2.0:
|
||||
dependencies:
|
||||
has-flag: 4.0.0
|
||||
|
||||
symbol-tree@3.2.4: {}
|
||||
|
||||
throttle-debounce@5.0.2: {}
|
||||
|
||||
tinybench@2.9.0: {}
|
||||
|
||||
tinycolor2@1.6.0: {}
|
||||
@@ -3417,11 +3228,6 @@ snapshots:
|
||||
'@vue/language-core': 3.3.7
|
||||
typescript: 6.0.3
|
||||
|
||||
vue-types@3.0.2(vue@3.5.40(typescript@6.0.3)):
|
||||
dependencies:
|
||||
is-plain-object: 3.0.1
|
||||
vue: 3.5.40(typescript@6.0.3)
|
||||
|
||||
vue-types@4.2.1(vue@3.5.40(typescript@6.0.3)):
|
||||
dependencies:
|
||||
is-plain-object: 5.0.0
|
||||
@@ -3452,10 +3258,6 @@ snapshots:
|
||||
dependencies:
|
||||
xml-name-validator: 5.0.0
|
||||
|
||||
warning@4.0.3:
|
||||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
|
||||
webidl-conversions@8.0.1: {}
|
||||
|
||||
whatwg-mimetype@5.0.0: {}
|
||||
|
||||
@@ -1,11 +1,35 @@
|
||||
import { flushPromises, mount } from '@vue/test-utils'
|
||||
import { InputNumber, Select } from 'ant-design-vue'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import { ColorPicker } from 'vue3-colorpicker'
|
||||
|
||||
import App from './App.vue'
|
||||
import { WaveformChart, type WaveformData } from './components'
|
||||
|
||||
describe('App workspace layout', { timeout: 20_000 }, () => {
|
||||
it('restores full data and invalidates a pending zoom request', async () => {
|
||||
vi.useFakeTimers()
|
||||
const wrapper = mount(App)
|
||||
try {
|
||||
await flushPromises()
|
||||
const chart = wrapper.getComponent(WaveformChart)
|
||||
const pointCount = (data: WaveformData) =>
|
||||
data.kind === 'series' && data.series[0]?.data.kind === 'points'
|
||||
? data.series[0].data.points.length
|
||||
: 0
|
||||
const initialPointCount = pointCount(chart.props('data') as WaveformData)
|
||||
|
||||
chart.vm.$emit('zoom-end', { start: 0, end: 0.001 })
|
||||
await wrapper.get('[aria-label="重置波形视图"]').trigger('click')
|
||||
await vi.advanceTimersByTimeAsync(100)
|
||||
await flushPromises()
|
||||
|
||||
expect(pointCount(chart.props('data') as WaveformData)).toBe(initialPointCount)
|
||||
} finally {
|
||||
wrapper.unmount()
|
||||
vi.useRealTimers()
|
||||
}
|
||||
})
|
||||
|
||||
it('places controls in the sidebar beside the chart', async () => {
|
||||
const wrapper = mount(App)
|
||||
await flushPromises()
|
||||
@@ -16,15 +40,21 @@ describe('App workspace layout', { timeout: 20_000 }, () => {
|
||||
expect(panel.find('[aria-label="波形展示方式"]').exists()).toBe(true)
|
||||
expect(panel.find('[aria-label="波形叠加方式"]').exists()).toBe(true)
|
||||
expect(panel.find('[aria-label="波形网格尺寸"]').exists()).toBe(true)
|
||||
expect(panel.find('[aria-label="净图模式"]').exists()).toBe(true)
|
||||
expect(panel.find('[aria-label="显示零值参考线"]').exists()).toBe(true)
|
||||
const zeroLineControls = panel.get('.zero-line-controls')
|
||||
expect(zeroLineControls.findAllComponents(ColorPicker)).toHaveLength(1)
|
||||
expect(zeroLineControls.find('[aria-label="零值参考线线宽"]').exists()).toBe(true)
|
||||
expect(zeroLineControls.find('[aria-label="零值参考线线型"]').exists()).toBe(true)
|
||||
expect(frameControls.findAllComponents(ColorPicker)).toHaveLength(2)
|
||||
expect(frameControls.text()).toContain('边框颜色')
|
||||
expect(frameControls.text()).toContain('背景颜色')
|
||||
expect(frameControls.find('[aria-label="图框线宽"]').exists()).toBe(true)
|
||||
expect(frameControls.find('[aria-label="图框线型"]').exists()).toBe(true)
|
||||
expect(frameControls.find('[aria-label="显示图框水印"]').exists()).toBe(true)
|
||||
expect(frameControls.get('.frame-style-control--switch .ant-switch').classes()).toContain(
|
||||
'ant-switch-small',
|
||||
)
|
||||
expect(
|
||||
frameControls.get('.frame-style-control--switch .native-switch').attributes('role'),
|
||||
).toBe('switch')
|
||||
const titleControls = panel.get('.title-controls')
|
||||
expect(panel.find('[aria-label="显示标题"]').exists()).toBe(true)
|
||||
expect(titleControls.find('[aria-label="标题名称"]').exists()).toBe(true)
|
||||
@@ -46,6 +76,23 @@ describe('App workspace layout', { timeout: 20_000 }, () => {
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('passes clean view and zero-line controls to the chart', async () => {
|
||||
const wrapper = mount(App)
|
||||
await flushPromises()
|
||||
const chart = wrapper.getComponent(WaveformChart)
|
||||
|
||||
expect(chart.props('cleanView')).toBe(false)
|
||||
expect(chart.props('zeroLine')).toMatchObject({ visible: false, color: '#98a2b3', width: 1 })
|
||||
|
||||
await wrapper.get('[aria-label="净图模式"]').setValue(true)
|
||||
await wrapper.get('[aria-label="显示零值参考线"]').setValue(true)
|
||||
await flushPromises()
|
||||
|
||||
expect(chart.props('cleanView')).toBe(true)
|
||||
expect(chart.props('zeroLine')).toMatchObject({ visible: true, color: '#98a2b3', width: 1 })
|
||||
wrapper.unmount()
|
||||
})
|
||||
|
||||
it('switches overlaid tracks between single-axis and multi-axis rendering', async () => {
|
||||
const wrapper = mount(App)
|
||||
await flushPromises()
|
||||
@@ -189,7 +236,7 @@ describe('App workspace layout', { timeout: 20_000 }, () => {
|
||||
expect(renderedTitle().attributes('style')).toContain('font-style: normal')
|
||||
expect(renderedTitle().attributes('style')).toContain('text-decoration: none')
|
||||
|
||||
await wrapper.get('[aria-label="显示标题"]').trigger('click')
|
||||
await wrapper.get('[aria-label="显示标题"]').setValue(false)
|
||||
await flushPromises()
|
||||
expect(wrapper.find('.waveform-chart__title-area').exists()).toBe(false)
|
||||
|
||||
@@ -202,17 +249,17 @@ describe('App workspace layout', { timeout: 20_000 }, () => {
|
||||
|
||||
const frameControls = wrapper.get('.frame-style-controls')
|
||||
const colorPickers = frameControls.findAllComponents(ColorPicker)
|
||||
const widthInput = frameControls.findAllComponents(InputNumber)[0]
|
||||
const styleSelect = frameControls.findAllComponents(Select)[0]
|
||||
const widthInput = frameControls.get('[aria-label="图框线宽"]')
|
||||
const styleSelect = frameControls.get('[aria-label="图框线型"]')
|
||||
|
||||
expect(colorPickers).toHaveLength(2)
|
||||
expect(widthInput).toBeDefined()
|
||||
expect(styleSelect).toBeDefined()
|
||||
expect(widthInput.element.tagName).toBe('INPUT')
|
||||
expect(styleSelect.element.tagName).toBe('SELECT')
|
||||
|
||||
colorPickers[0].vm.$emit('update:pureColor', 'rgba(220, 38, 38, 0.8)')
|
||||
colorPickers[1].vm.$emit('update:pureColor', 'rgba(14, 165, 233, 0.25)')
|
||||
widthInput?.vm.$emit('update:value', 3)
|
||||
styleSelect?.vm.$emit('update:value', 'dashed')
|
||||
await widthInput.setValue('3')
|
||||
await styleSelect.setValue('dashed')
|
||||
await flushPromises()
|
||||
|
||||
const frames = wrapper.findAll('.waveform-chart__plot-frame')
|
||||
@@ -243,11 +290,11 @@ describe('App workspace layout', { timeout: 20_000 }, () => {
|
||||
|
||||
expect(initialWatermarks.length).toBeGreaterThan(1)
|
||||
|
||||
await watermarkToggle.trigger('click')
|
||||
await watermarkToggle.setValue(false)
|
||||
await flushPromises()
|
||||
expect(wrapper.findAll('.waveform-chart__watermark')).toHaveLength(0)
|
||||
|
||||
await watermarkToggle.trigger('click')
|
||||
await watermarkToggle.setValue(true)
|
||||
await flushPromises()
|
||||
expect(
|
||||
wrapper.findAll('.waveform-chart__watermark').map((watermark) => watermark.text()),
|
||||
|
||||
359
src/App.vue
359
src/App.vue
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import { Button, Input, InputNumber, Radio, Select, Switch } from 'ant-design-vue'
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { ColorPicker } from 'vue3-colorpicker'
|
||||
import 'vue3-colorpicker/style.css'
|
||||
@@ -17,9 +16,11 @@ import {
|
||||
type WaveformSeries,
|
||||
type WaveformTitleOptions,
|
||||
type WaveformZoomEndPayload,
|
||||
type WaveformZeroLineOptions,
|
||||
} from './components'
|
||||
import chartWaveformsJson from './data/chartWaveforms.json'
|
||||
import demoWaveformsJson from './data/demoWaveforms.json'
|
||||
import { normalizeWaveformSeries } from './core'
|
||||
|
||||
interface WaveformSourcePoint {
|
||||
x: number
|
||||
@@ -52,6 +53,11 @@ const frameBackgroundColor = ref('rgba(255, 255, 255, 0)')
|
||||
const frameWatermarkVisible = ref(true)
|
||||
const annotations = ref<WaveformAnnotation[]>([])
|
||||
const annotationsVisible = ref(true)
|
||||
const cleanView = ref(false)
|
||||
const zeroLineVisible = ref(false)
|
||||
const zeroLineColor = ref('#98a2b3')
|
||||
const zeroLineWidth = ref(1)
|
||||
const zeroLineDash = ref('6 4')
|
||||
const interactionMode = ref<WaveformInteractionMode>('zoom')
|
||||
const legendPosition = ref<WaveformLegendPosition>('top-right')
|
||||
const legendOrientation = ref<WaveformLegendOrientation>('auto')
|
||||
@@ -87,6 +93,11 @@ const frameBorderStyleOptions = [
|
||||
{ label: '实线', value: 'solid' },
|
||||
{ label: '虚线', value: 'dashed' },
|
||||
]
|
||||
const zeroLineDashOptions = [
|
||||
{ label: '虚线', value: '6 4' },
|
||||
{ label: '点划线', value: '2 3' },
|
||||
{ label: '实线', value: '' },
|
||||
]
|
||||
const titleAlignOptions: Array<{
|
||||
label: string
|
||||
value: NonNullable<WaveformTitleOptions['align']>
|
||||
@@ -108,6 +119,12 @@ const frameStyle = computed<WaveformFrameStyle>(() => ({
|
||||
borderStyle: frameBorderStyle.value,
|
||||
backgroundColor: frameBackgroundColor.value,
|
||||
}))
|
||||
const zeroLine = computed<WaveformZeroLineOptions>(() => ({
|
||||
visible: zeroLineVisible.value,
|
||||
color: zeroLineColor.value,
|
||||
width: zeroLineWidth.value,
|
||||
dash: zeroLineDash.value,
|
||||
}))
|
||||
|
||||
const seriesStylePresets: Array<Pick<WaveformSeries, 'lineType' | 'pointType' | 'errorBar'>> = [
|
||||
{ lineType: 'none', pointType: 'triangle', errorBar: { visible: true } },
|
||||
@@ -187,7 +204,25 @@ const fullChartData: WaveformData = {
|
||||
kind: 'series',
|
||||
series: [...frameOneSeries, ...basicCurveDemoSeries, ...stepDemoSeries, ...remainingSeries],
|
||||
}
|
||||
const initialXValues = normalizeWaveformSeries(fullChartData).flatMap((series) =>
|
||||
series.points.map((point) => point.x),
|
||||
)
|
||||
const [initialXMinimum, initialXMaximum] = initialXValues.reduce<[number, number]>(
|
||||
([minimum, maximum], value) => [Math.min(minimum, value), Math.max(maximum, value)],
|
||||
[Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY],
|
||||
)
|
||||
const initialXSpan = initialXMaximum - initialXMinimum
|
||||
const minZoomSpan =
|
||||
Number.isFinite(initialXSpan) && initialXSpan > 0 ? initialXSpan / 40 : undefined
|
||||
const initialXDomainValue: [number, number] | undefined =
|
||||
Number.isFinite(initialXMinimum) && Number.isFinite(initialXMaximum)
|
||||
? [initialXMinimum, initialXMaximum]
|
||||
: undefined
|
||||
// Keep the full source domain stable while viewport data windows are replaced.
|
||||
const initialXDomain = ref<[number, number] | undefined>(initialXDomainValue)
|
||||
const chartData = ref<WaveformData>(fullChartData)
|
||||
const waveformChartRef = ref<{ resetViewport: (trackIndex?: number) => void }>()
|
||||
|
||||
let zoomRequestSequence = 0
|
||||
|
||||
function filterWaveformData(data: WaveformData, start: number, end: number): WaveformData {
|
||||
@@ -215,6 +250,22 @@ function filterWaveformData(data: WaveformData, start: number, end: number): Wav
|
||||
}
|
||||
}
|
||||
|
||||
function mergeIndependentWindow(
|
||||
currentData: WaveformData,
|
||||
responseData: WaveformData,
|
||||
seriesIds: string[],
|
||||
): WaveformData {
|
||||
if (currentData.kind !== 'series' || responseData.kind !== 'series') return responseData
|
||||
const responseById = new Map(responseData.series.map((series) => [series.id, series]))
|
||||
const changedIds = new Set(seriesIds)
|
||||
return {
|
||||
kind: 'series',
|
||||
series: currentData.series.map((series) =>
|
||||
series.id && changedIds.has(series.id) ? (responseById.get(series.id) ?? series) : series,
|
||||
),
|
||||
}
|
||||
}
|
||||
|
||||
async function handleZoomEnd(payload: WaveformZoomEndPayload) {
|
||||
// Demo-only sequence number cancellation. Production code should use AbortController
|
||||
// to cancel in-flight requests when a newer zoom gesture arrives.
|
||||
@@ -224,7 +275,18 @@ async function handleZoomEnd(payload: WaveformZoomEndPayload) {
|
||||
|
||||
// Demo-only stand-in for the backend response. Production code should replace this
|
||||
// with a request using payload.start/payload.end and the optional channel metadata.
|
||||
chartData.value = filterWaveformData(fullChartData, payload.start, payload.end)
|
||||
const responseData = filterWaveformData(fullChartData, payload.start, payload.end)
|
||||
chartData.value =
|
||||
payload.trackIndex !== undefined && payload.seriesIds?.length
|
||||
? mergeIndependentWindow(chartData.value, responseData, payload.seriesIds)
|
||||
: responseData
|
||||
}
|
||||
|
||||
function resetWaveformViewport() {
|
||||
zoomRequestSequence += 1
|
||||
chartData.value = fullChartData
|
||||
initialXDomain.value = initialXDomainValue
|
||||
waveformChartRef.value?.resetViewport()
|
||||
}
|
||||
const titleOptions = computed<WaveformTitleOptions>(() => ({
|
||||
visible: titleVisible.value,
|
||||
@@ -250,6 +312,12 @@ function resetTitleTextStyle() {
|
||||
titleUnderline.value = false
|
||||
}
|
||||
|
||||
function clampNumber(value: unknown, min: number, max: number, fallback: number) {
|
||||
const number = typeof value === 'number' ? value : Number(value)
|
||||
if (!Number.isFinite(number)) return fallback
|
||||
return Math.min(max, Math.max(min, number))
|
||||
}
|
||||
|
||||
function handleWindowKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape') closeControls()
|
||||
}
|
||||
@@ -260,15 +328,15 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown)
|
||||
|
||||
<template>
|
||||
<main class="workspace">
|
||||
<Button
|
||||
<button
|
||||
type="button"
|
||||
class="mobile-control-toggle"
|
||||
size="small"
|
||||
:aria-expanded="controlsOpen"
|
||||
aria-controls="waveform-control-panel"
|
||||
@click="controlsOpen = true"
|
||||
>
|
||||
控制面板
|
||||
</Button>
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="controlsOpen"
|
||||
@@ -285,46 +353,148 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown)
|
||||
aria-label="波形图控制"
|
||||
>
|
||||
<div class="control-panel__scroll">
|
||||
<Button class="control-panel__close" type="text" size="small" @click="closeControls">
|
||||
关闭
|
||||
</Button>
|
||||
<button class="control-panel__close" type="button" @click="closeControls">关闭</button>
|
||||
|
||||
<section class="control-section">
|
||||
<h2>显示方式</h2>
|
||||
<Radio.Group
|
||||
v-model:value="displayMode"
|
||||
class="display-mode-control"
|
||||
button-style="solid"
|
||||
size="small"
|
||||
aria-label="波形展示方式"
|
||||
<div class="display-mode-control" role="radiogroup" aria-label="波形展示方式">
|
||||
<label
|
||||
><input v-model="displayMode" type="radio" value="independent" /><span
|
||||
>单独坐标</span
|
||||
></label
|
||||
>
|
||||
<Radio.Button value="independent">单独坐标</Radio.Button>
|
||||
<Radio.Button value="separated">多道分离</Radio.Button>
|
||||
<Radio.Button value="compact">多道紧凑</Radio.Button>
|
||||
</Radio.Group>
|
||||
<label
|
||||
><input v-model="displayMode" type="radio" value="separated" /><span
|
||||
>多道分离</span
|
||||
></label
|
||||
>
|
||||
<label
|
||||
><input v-model="displayMode" type="radio" value="compact" /><span
|
||||
>多道紧凑</span
|
||||
></label
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="control-section">
|
||||
<h2>视图</h2>
|
||||
<button
|
||||
type="button"
|
||||
class="control-action control-action--block"
|
||||
aria-label="重置波形视图"
|
||||
@click="resetWaveformViewport"
|
||||
>
|
||||
重置视图
|
||||
</button>
|
||||
<div class="auxiliary-style-controls" style="margin-top: 10px">
|
||||
<label class="frame-style-control frame-style-control--switch">
|
||||
<span>净图</span>
|
||||
<input
|
||||
v-model="cleanView"
|
||||
class="native-switch"
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
aria-label="净图模式"
|
||||
@click.stop
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="control-section">
|
||||
<div class="control-section__header">
|
||||
<h2>零值参考线</h2>
|
||||
<input
|
||||
v-model="zeroLineVisible"
|
||||
class="native-switch"
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
aria-label="显示零值参考线"
|
||||
@click.stop
|
||||
/>
|
||||
</div>
|
||||
<div class="auxiliary-style-controls zero-line-controls" style="margin-top: 10px">
|
||||
<label class="frame-style-control">
|
||||
<span>颜色</span>
|
||||
<ColorPicker
|
||||
v-model:pure-color="zeroLineColor"
|
||||
aria-label="零值参考线颜色"
|
||||
use-type="pure"
|
||||
picker-type="chrome"
|
||||
format="hex"
|
||||
:disable-alpha="true"
|
||||
:blur-close="true"
|
||||
/>
|
||||
</label>
|
||||
<label class="frame-style-control">
|
||||
<span>线宽</span>
|
||||
<input
|
||||
v-model.number="zeroLineWidth"
|
||||
class="native-input"
|
||||
type="number"
|
||||
:min="0.5"
|
||||
:max="10"
|
||||
:step="0.5"
|
||||
aria-label="零值参考线线宽"
|
||||
@blur="zeroLineWidth = clampNumber(zeroLineWidth, 0.5, 10, 1)"
|
||||
/>
|
||||
</label>
|
||||
<label class="frame-style-control">
|
||||
<span>线型</span>
|
||||
<select v-model="zeroLineDash" class="native-select" aria-label="零值参考线线型">
|
||||
<option
|
||||
v-for="option in zeroLineDashOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="control-section">
|
||||
<h2>叠加方式</h2>
|
||||
<Radio.Group
|
||||
v-model:value="overlayMode"
|
||||
class="display-mode-control"
|
||||
button-style="solid"
|
||||
size="small"
|
||||
aria-label="波形叠加方式"
|
||||
<div class="display-mode-control" role="radiogroup" aria-label="波形叠加方式">
|
||||
<label
|
||||
><input v-model="overlayMode" type="radio" value="single-axis" /><span
|
||||
>单值轴</span
|
||||
></label
|
||||
>
|
||||
<Radio.Button value="single-axis">单值轴</Radio.Button>
|
||||
<Radio.Button value="multi-axis">多值轴</Radio.Button>
|
||||
</Radio.Group>
|
||||
<label
|
||||
><input v-model="overlayMode" type="radio" value="multi-axis" /><span
|
||||
>多值轴</span
|
||||
></label
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="control-section">
|
||||
<h2>图框布局</h2>
|
||||
<div class="grid-size-control" aria-label="波形网格尺寸">
|
||||
<InputNumber v-model:value="rowCount" :min="1" :max="10" size="small" />
|
||||
<input
|
||||
v-model.number="rowCount"
|
||||
class="native-input"
|
||||
type="number"
|
||||
min="1"
|
||||
max="10"
|
||||
step="1"
|
||||
aria-label="波形网格行数"
|
||||
@blur="rowCount = clampNumber(rowCount, 1, 10, 2)"
|
||||
/>
|
||||
<span>行</span>
|
||||
<span class="control-separator">×</span>
|
||||
<InputNumber v-model:value="columnCount" :min="1" :max="10" size="small" />
|
||||
<input
|
||||
v-model.number="columnCount"
|
||||
class="native-input"
|
||||
type="number"
|
||||
min="1"
|
||||
max="10"
|
||||
step="1"
|
||||
aria-label="波形网格列数"
|
||||
@blur="columnCount = clampNumber(columnCount, 1, 10, 1)"
|
||||
/>
|
||||
<span>列</span>
|
||||
</div>
|
||||
</section>
|
||||
@@ -358,30 +528,38 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown)
|
||||
</label>
|
||||
<label class="frame-style-control">
|
||||
<span>线宽</span>
|
||||
<InputNumber
|
||||
v-model:value="frameBorderWidth"
|
||||
<input
|
||||
v-model.number="frameBorderWidth"
|
||||
class="native-input"
|
||||
type="number"
|
||||
:min="0"
|
||||
:max="10"
|
||||
:step="0.5"
|
||||
size="small"
|
||||
aria-label="图框线宽"
|
||||
@blur="frameBorderWidth = clampNumber(frameBorderWidth, 0, 10, 1)"
|
||||
/>
|
||||
</label>
|
||||
<label class="frame-style-control">
|
||||
<span>线型</span>
|
||||
<Select
|
||||
v-model:value="frameBorderStyle"
|
||||
:options="frameBorderStyleOptions"
|
||||
size="small"
|
||||
aria-label="图框线型"
|
||||
/>
|
||||
<select v-model="frameBorderStyle" class="native-select" aria-label="图框线型">
|
||||
<option
|
||||
v-for="option in frameBorderStyleOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="frame-style-control frame-style-control--switch">
|
||||
<span>水印</span>
|
||||
<Switch
|
||||
v-model:checked="frameWatermarkVisible"
|
||||
size="small"
|
||||
<input
|
||||
v-model="frameWatermarkVisible"
|
||||
class="native-switch"
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
aria-label="显示图框水印"
|
||||
@click.stop
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
@@ -390,41 +568,56 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown)
|
||||
<section class="control-section title-control-section">
|
||||
<div class="control-section__header">
|
||||
<h2>标题</h2>
|
||||
<Switch v-model:checked="titleVisible" size="small" aria-label="显示标题" />
|
||||
<input
|
||||
v-model="titleVisible"
|
||||
class="native-switch"
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
aria-label="显示标题"
|
||||
@click.stop
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="title-controls">
|
||||
<label class="title-control title-control--wide">
|
||||
<span>标题名称</span>
|
||||
<Input v-model:value="titleText" size="small" aria-label="标题名称" />
|
||||
<input v-model="titleText" class="native-input" type="text" aria-label="标题名称" />
|
||||
</label>
|
||||
<label class="title-control title-control--wide">
|
||||
<span>对齐方式</span>
|
||||
<Select
|
||||
v-model:value="titleAlign"
|
||||
:options="titleAlignOptions"
|
||||
size="small"
|
||||
aria-label="标题对齐方式"
|
||||
/>
|
||||
<select v-model="titleAlign" class="native-select" aria-label="标题对齐方式">
|
||||
<option
|
||||
v-for="option in titleAlignOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="title-control">
|
||||
<span>字体</span>
|
||||
<Select
|
||||
v-model:value="titleFontFamily"
|
||||
:options="titleFontFamilyOptions"
|
||||
size="small"
|
||||
aria-label="标题字体"
|
||||
/>
|
||||
<select v-model="titleFontFamily" class="native-select" aria-label="标题字体">
|
||||
<option
|
||||
v-for="option in titleFontFamilyOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="title-control">
|
||||
<span>字号</span>
|
||||
<InputNumber
|
||||
v-model:value="titleFontSize"
|
||||
<input
|
||||
v-model.number="titleFontSize"
|
||||
class="native-input"
|
||||
type="number"
|
||||
:min="8"
|
||||
:max="72"
|
||||
:step="1"
|
||||
size="small"
|
||||
aria-label="标题字号"
|
||||
@blur="titleFontSize = clampNumber(titleFontSize, 8, 72, 14)"
|
||||
/>
|
||||
</label>
|
||||
<div class="title-control">
|
||||
@@ -472,14 +665,15 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown)
|
||||
</div>
|
||||
<label class="title-control">
|
||||
<span>旋转</span>
|
||||
<InputNumber
|
||||
v-model:value="titleRotation"
|
||||
<input
|
||||
v-model.number="titleRotation"
|
||||
class="native-input"
|
||||
type="number"
|
||||
:min="-180"
|
||||
:max="180"
|
||||
:step="1"
|
||||
addon-after="°"
|
||||
size="small"
|
||||
aria-label="标题旋转角度"
|
||||
@blur="titleRotation = clampNumber(titleRotation, -180, 180, 0)"
|
||||
/>
|
||||
</label>
|
||||
<div class="title-control title-control--color">
|
||||
@@ -501,21 +695,27 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown)
|
||||
<h2>图例</h2>
|
||||
<label class="select-control">
|
||||
<span>位置</span>
|
||||
<Select
|
||||
v-model:value="legendPosition"
|
||||
:options="legendPositionOptions"
|
||||
size="small"
|
||||
aria-label="图例位置"
|
||||
/>
|
||||
<select v-model="legendPosition" class="native-select" aria-label="图例位置">
|
||||
<option
|
||||
v-for="option in legendPositionOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="select-control">
|
||||
<span>排列</span>
|
||||
<Select
|
||||
v-model:value="legendOrientation"
|
||||
:options="legendOrientationOptions"
|
||||
size="small"
|
||||
aria-label="图例排列"
|
||||
/>
|
||||
<select v-model="legendOrientation" class="native-select" aria-label="图例排列">
|
||||
<option
|
||||
v-for="option in legendOrientationOptions"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
>
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="legend-color-control">
|
||||
<span>背景</span>
|
||||
@@ -535,7 +735,11 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown)
|
||||
|
||||
<section class="chart-panel">
|
||||
<WaveformChart
|
||||
ref="waveformChartRef"
|
||||
:data="chartData"
|
||||
:min-zoom-span="minZoomSpan"
|
||||
:min-visible-points="5"
|
||||
:initial-x-domain="initialXDomain"
|
||||
:display-mode="displayMode"
|
||||
:overlay-mode="overlayMode"
|
||||
:grid="{ rowCount, columnCount, showPagination: true }"
|
||||
@@ -547,12 +751,15 @@ onBeforeUnmount(() => window.removeEventListener('keydown', handleWindowKeydown)
|
||||
interactive: true,
|
||||
}"
|
||||
:frame-style="frameStyle"
|
||||
:clean-view="cleanView"
|
||||
:zero-line="zeroLine"
|
||||
:frame-number="frameWatermarkVisible ? 1 : undefined"
|
||||
v-model:annotations="annotations"
|
||||
v-model:annotations-visible="annotationsVisible"
|
||||
v-model:interaction-mode="interactionMode"
|
||||
:annotations-visible="annotationsVisible"
|
||||
:interaction-mode="interactionMode"
|
||||
v-model:hidden-series-ids="hiddenSeriesIds"
|
||||
@zoom-end="handleZoomEnd"
|
||||
@zoom-reset="resetWaveformViewport"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -188,6 +188,232 @@ describe('WaveformChart', () => {
|
||||
})),
|
||||
})
|
||||
|
||||
it('keeps clip path ids unique across chart instances', async () => {
|
||||
const data: WaveformData = {
|
||||
kind: 'series',
|
||||
series: [
|
||||
{
|
||||
id: 'channel-1',
|
||||
name: '通道 1',
|
||||
data: {
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 1, y: 1 },
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
const first = await mountSizedChart(data)
|
||||
const second = await mountSizedChart(data)
|
||||
const firstClipPathId = first.get('clipPath').attributes('id')
|
||||
const secondClipPathId = second.get('clipPath').attributes('id')
|
||||
|
||||
expect(firstClipPathId).toBeTruthy()
|
||||
expect(secondClipPathId).toBeTruthy()
|
||||
expect(firstClipPathId).not.toBe(secondClipPathId)
|
||||
expect(first.get('[clip-path]').attributes('clip-path')).toContain(firstClipPathId)
|
||||
expect(second.get('[clip-path]').attributes('clip-path')).toContain(secondClipPathId)
|
||||
|
||||
first.unmount()
|
||||
second.unmount()
|
||||
})
|
||||
|
||||
it('renders a configurable zero line only when the Y domain contains zero', async () => {
|
||||
const wrapper = await mountSizedChart(
|
||||
{
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: -2 },
|
||||
{ x: 1, y: 4 },
|
||||
],
|
||||
},
|
||||
{ zeroLine: { visible: true, color: '#475467', width: 2, dash: '3 2' } },
|
||||
)
|
||||
|
||||
const zeroLine = wrapper.get('.waveform-chart__zero-line')
|
||||
expect(zeroLine.attributes()).toMatchObject({
|
||||
stroke: '#475467',
|
||||
'stroke-width': '2',
|
||||
'stroke-dasharray': '3 2',
|
||||
'data-y-axis-index': '0',
|
||||
})
|
||||
expect(zeroLine.attributes('y1')).toBe(zeroLine.attributes('y2'))
|
||||
|
||||
await wrapper.setProps({ zeroLine: { visible: false } })
|
||||
expect(wrapper.find('.waveform-chart__zero-line').exists()).toBe(false)
|
||||
|
||||
const positive = await mountSizedChart(
|
||||
{
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 2 },
|
||||
{ x: 1, y: 4 },
|
||||
],
|
||||
},
|
||||
{ zeroLine: { visible: true } },
|
||||
)
|
||||
expect(positive.find('.waveform-chart__zero-line').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders zero lines from each visible Y axis in multi-axis mode', async () => {
|
||||
const wrapper = await mountSizedChart(
|
||||
{
|
||||
kind: 'series',
|
||||
series: [
|
||||
{
|
||||
id: 'small',
|
||||
trackId: 'overlay',
|
||||
name: 'small',
|
||||
data: {
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: -1 },
|
||||
{ x: 1, y: 3 },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'large',
|
||||
trackId: 'overlay',
|
||||
name: 'large',
|
||||
data: {
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: -10 },
|
||||
{ x: 1, y: 2 },
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{ overlayMode: 'multi-axis', zeroLine: { visible: true } },
|
||||
)
|
||||
|
||||
const zeroLines = wrapper.findAll('.waveform-chart__zero-line')
|
||||
expect(zeroLines).toHaveLength(2)
|
||||
expect(zeroLines.map((line) => line.attributes('data-y-axis-index'))).toEqual(['0', '1'])
|
||||
expect(zeroLines[0].attributes('y1')).not.toBe(zeroLines[1].attributes('y1'))
|
||||
})
|
||||
|
||||
it('preserves a titled multi-axis plot and hides auxiliary layers in clean view', async () => {
|
||||
const data: WaveformData = {
|
||||
kind: 'series',
|
||||
series: [
|
||||
{
|
||||
id: 'first',
|
||||
trackId: 'overlay',
|
||||
name: 'first',
|
||||
data: {
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: -1 },
|
||||
{ x: 1, y: 1 },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'second',
|
||||
trackId: 'overlay',
|
||||
name: 'second',
|
||||
data: {
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 1 },
|
||||
{ x: 1, y: 2 },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'third',
|
||||
name: 'third',
|
||||
data: {
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 2 },
|
||||
{ x: 1, y: 3 },
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
const sharedProps = {
|
||||
grid: { rowCount: 1, columnCount: 1, showPagination: true },
|
||||
overlayMode: 'multi-axis' as const,
|
||||
frameNumber: 1,
|
||||
annotations: [{ id: 'note', seriesId: 'first', x: 0.5, y: 0, text: 'hidden note' }],
|
||||
zeroLine: { visible: true },
|
||||
title: { text: 'hidden title' },
|
||||
}
|
||||
const regularWrapper = await mountSizedChart(data, sharedProps)
|
||||
const wrapper = await mountSizedChart(data, {
|
||||
...sharedProps,
|
||||
cleanView: true,
|
||||
})
|
||||
|
||||
const regularTrack = regularWrapper.get('.waveform-chart__track')
|
||||
const cleanTrack = wrapper.get('.waveform-chart__track')
|
||||
const geometryAttributes = [
|
||||
'data-track-left',
|
||||
'data-track-top',
|
||||
'data-track-width',
|
||||
'data-track-height',
|
||||
]
|
||||
|
||||
expect(wrapper.get('.waveform-chart').attributes('data-chart-left-margin')).toBe(
|
||||
regularWrapper.get('.waveform-chart').attributes('data-chart-left-margin'),
|
||||
)
|
||||
expect(wrapper.get('.waveform-chart').attributes('data-title-area-height')).toBe(
|
||||
regularWrapper.get('.waveform-chart').attributes('data-title-area-height'),
|
||||
)
|
||||
geometryAttributes.forEach((attribute) => {
|
||||
expect(cleanTrack.attributes(attribute)).toBe(regularTrack.attributes(attribute))
|
||||
})
|
||||
expect(wrapper.get('.waveform-chart').classes()).toContain('waveform-chart--clean')
|
||||
expect(getComputedStyle(wrapper.get('.waveform-chart').element).borderColor).toBe(
|
||||
'rgba(0, 0, 0, 0)',
|
||||
)
|
||||
expect(wrapper.findAll('.waveform-chart__series')).toHaveLength(2)
|
||||
expect(wrapper.find('.waveform-chart__overlay--independent').exists()).toBe(true)
|
||||
expect(wrapper.get('.waveform-chart__title-area').attributes('aria-hidden')).toBe('true')
|
||||
expect(wrapper.find('.waveform-chart__title-visual').exists()).toBe(false)
|
||||
expect(wrapper.find('.waveform-chart__axis').exists()).toBe(false)
|
||||
expect(wrapper.find('.waveform-chart__grid').exists()).toBe(false)
|
||||
expect(wrapper.find('.waveform-chart__plot-frame').exists()).toBe(false)
|
||||
expect(wrapper.find('.waveform-chart__plot-background').exists()).toBe(false)
|
||||
expect(wrapper.find('.waveform-chart__watermark').exists()).toBe(false)
|
||||
expect(wrapper.find('.waveform-chart__legend-layer').exists()).toBe(false)
|
||||
expect(wrapper.find('.waveform-chart__label').exists()).toBe(false)
|
||||
expect(wrapper.find('.waveform-chart__zero-line').exists()).toBe(false)
|
||||
expect(wrapper.find('.waveform-annotation-layer').exists()).toBe(false)
|
||||
expect(wrapper.find('.waveform-chart__pagination').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('preserves every track geometry in a multi-column clean view', async () => {
|
||||
const props = {
|
||||
displayMode: 'independent' as const,
|
||||
grid: { rowCount: 2, columnCount: 2 },
|
||||
}
|
||||
const regularWrapper = await mountSizedChart(gridSeries(4), props)
|
||||
const cleanWrapper = await mountSizedChart(gridSeries(4), { ...props, cleanView: true })
|
||||
const geometryAttributes = [
|
||||
'data-track-left',
|
||||
'data-track-top',
|
||||
'data-track-width',
|
||||
'data-track-height',
|
||||
]
|
||||
const regularTracks = regularWrapper.findAll('.waveform-chart__track')
|
||||
const cleanTracks = cleanWrapper.findAll('.waveform-chart__track')
|
||||
|
||||
expect(cleanTracks).toHaveLength(regularTracks.length)
|
||||
cleanTracks.forEach((track, index) => {
|
||||
geometryAttributes.forEach((attribute) => {
|
||||
expect(track.attributes(attribute)).toBe(regularTracks[index].attributes(attribute))
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
it('places start, middle, and end step transitions at the expected X positions', async () => {
|
||||
const lineTypes = ['step-start', 'step-middle', 'step-end', 'step-after'] as const
|
||||
const wrapper = await mountSizedChart({
|
||||
@@ -578,11 +804,11 @@ describe('WaveformChart', () => {
|
||||
expect(
|
||||
wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
|
||||
).toEqual(['channel-0', 'channel-1'])
|
||||
const previousButton = () => wrapper.get('.ant-pagination-prev button')
|
||||
const nextButton = () => wrapper.get('.ant-pagination-next button')
|
||||
const previousButton = () => wrapper.get('[aria-label="上一页"]')
|
||||
const nextButton = () => wrapper.get('[aria-label="下一页"]')
|
||||
|
||||
expect(wrapper.get('.ant-pagination-item-1').classes()).toContain('ant-pagination-item-active')
|
||||
expect(wrapper.get('.ant-pagination-prev').classes()).toContain('ant-pagination-disabled')
|
||||
expect(wrapper.get('[aria-current="page"]').text()).toBe('1')
|
||||
expect(previousButton().attributes('disabled')).toBeDefined()
|
||||
|
||||
await nextButton().trigger('click')
|
||||
expect(
|
||||
@@ -591,7 +817,7 @@ describe('WaveformChart', () => {
|
||||
expect(wrapper.emitted('page-change')?.at(-1)).toEqual([2, 3])
|
||||
|
||||
await previousButton().trigger('click')
|
||||
expect(wrapper.get('.ant-pagination-item-1').classes()).toContain('ant-pagination-item-active')
|
||||
expect(wrapper.get('[aria-current="page"]').text()).toBe('1')
|
||||
expect(wrapper.emitted('page-change')?.at(-1)).toEqual([1, 3])
|
||||
|
||||
await nextButton().trigger('click')
|
||||
@@ -599,8 +825,8 @@ describe('WaveformChart', () => {
|
||||
expect(
|
||||
wrapper.findAll('.waveform-chart__line').map((line) => line.attributes('data-series-id')),
|
||||
).toEqual(['channel-4'])
|
||||
expect(wrapper.get('.ant-pagination-item-3').classes()).toContain('ant-pagination-item-active')
|
||||
expect(wrapper.get('.ant-pagination-next').classes()).toContain('ant-pagination-disabled')
|
||||
expect(wrapper.get('[aria-current="page"]').text()).toBe('3')
|
||||
expect(nextButton().attributes('disabled')).toBeDefined()
|
||||
})
|
||||
|
||||
it('overlays series with the same track ID without changing the next frame', async () => {
|
||||
@@ -679,7 +905,7 @@ describe('WaveformChart', () => {
|
||||
'1',
|
||||
'2',
|
||||
])
|
||||
expect(wrapper.find('.ant-pagination').exists()).toBe(false)
|
||||
expect(wrapper.find('.waveform-chart__pagination').exists()).toBe(false)
|
||||
|
||||
const firstTrackOverlay = tracks[0].get('.waveform-chart__overlay')
|
||||
const overlayWidth = Number(firstTrackOverlay.attributes('width'))
|
||||
@@ -1136,7 +1362,7 @@ describe('WaveformChart', () => {
|
||||
const initialMargin = wrapper.attributes('data-chart-left-margin')
|
||||
const initialLabelX = wrapper.get('.waveform-chart__track').attributes('data-y-axis-label-x')
|
||||
|
||||
await wrapper.get('.ant-pagination-next button').trigger('click')
|
||||
await wrapper.get('[aria-label="下一页"]').trigger('click')
|
||||
|
||||
expect(wrapper.attributes('data-chart-left-margin')).toBe(initialMargin)
|
||||
expect(wrapper.get('.waveform-chart__track').attributes('data-y-axis-label-x')).toBe(
|
||||
@@ -1241,12 +1467,12 @@ describe('WaveformChart', () => {
|
||||
const wrapper = await mountSizedChart(gridSeries(5), {
|
||||
grid: { rowCount: 1, columnCount: 1 },
|
||||
})
|
||||
await wrapper.get('.ant-pagination-next button').trigger('click')
|
||||
expect(wrapper.get('.ant-pagination-item-2').classes()).toContain('ant-pagination-item-active')
|
||||
await wrapper.get('[aria-label="下一页"]').trigger('click')
|
||||
expect(wrapper.get('[aria-current="page"]').text()).toBe('2')
|
||||
|
||||
await wrapper.setProps({ grid: { rowCount: 2, columnCount: 1 } })
|
||||
await flushPromises()
|
||||
expect(wrapper.get('.ant-pagination-item-1').classes()).toContain('ant-pagination-item-active')
|
||||
expect(wrapper.get('[aria-current="page"]').text()).toBe('1')
|
||||
})
|
||||
|
||||
it('keeps the shared x domain stable while paging separated and compact grids', async () => {
|
||||
@@ -1256,11 +1482,80 @@ describe('WaveformChart', () => {
|
||||
grid: { rowCount: 1, columnCount: 1 },
|
||||
})
|
||||
const initialEnd = wrapper.get('.waveform-chart__axis-endpoint--end').text()
|
||||
await wrapper.get('.ant-pagination-next button').trigger('click')
|
||||
await wrapper.get('[aria-label="下一页"]').trigger('click')
|
||||
expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe(initialEnd)
|
||||
}
|
||||
})
|
||||
|
||||
it('uses each track x domain in independent mode instead of the shared initial domain', async () => {
|
||||
const wrapper = await mountSizedChart(
|
||||
{
|
||||
kind: 'series',
|
||||
series: [
|
||||
{
|
||||
id: 'narrow-track',
|
||||
name: '窄范围',
|
||||
data: {
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 0.006, y: 1 },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'wide-track',
|
||||
name: '宽范围',
|
||||
data: {
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: -8, y: 0 },
|
||||
{ x: 5, y: 1 },
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
displayMode: 'independent',
|
||||
grid: { rowCount: 1, columnCount: 2 },
|
||||
initialXDomain: [-8, 5],
|
||||
},
|
||||
)
|
||||
|
||||
const tracks = wrapper.findAll('.waveform-chart__track')
|
||||
expect(tracks[0]?.get('.waveform-chart__axis-endpoint--end').text()).toBe('6.00')
|
||||
expect(tracks[1]?.get('.waveform-chart__axis-endpoint--end').text()).toBe('5.00')
|
||||
})
|
||||
|
||||
it('uses an explicit initial x domain override for an independent track', async () => {
|
||||
const wrapper = await mountSizedChart(
|
||||
{
|
||||
kind: 'series',
|
||||
series: [
|
||||
{
|
||||
id: 'narrow-track',
|
||||
name: '窄范围',
|
||||
data: {
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 0.006, y: 1 },
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
displayMode: 'independent',
|
||||
initialXDomain: [-8, 5],
|
||||
initialXDomains: { 'narrow-track': [0, 1] },
|
||||
},
|
||||
)
|
||||
|
||||
expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('1.00')
|
||||
})
|
||||
|
||||
it('keeps annotations bound to their channel while paging', async () => {
|
||||
const wrapper = await mountSizedChart(gridSeries(3), {
|
||||
grid: { rowCount: 1, columnCount: 1 },
|
||||
@@ -1269,7 +1564,7 @@ describe('WaveformChart', () => {
|
||||
],
|
||||
})
|
||||
expect(wrapper.find('[data-annotation-id="channel-2-note"]').exists()).toBe(false)
|
||||
await wrapper.get('.ant-pagination-next button').trigger('click')
|
||||
await wrapper.get('[aria-label="下一页"]').trigger('click')
|
||||
expect(wrapper.find('[data-annotation-id="channel-2-note"]').exists()).toBe(true)
|
||||
})
|
||||
it('renders a path for sample data and responds to width changes', async () => {
|
||||
@@ -1282,7 +1577,6 @@ describe('WaveformChart', () => {
|
||||
|
||||
expect(initialPath).toContain('L')
|
||||
expect(wrapper.get('.waveform-chart__svg').attributes('width')).toBe('800')
|
||||
expect(wrapper.find('.waveform-annotation-toolbar').exists()).toBe(false)
|
||||
expect(wrapper.attributes('data-interaction-mode')).toBeUndefined()
|
||||
|
||||
resizeObservers.at(-1)?.resize(500, 360)
|
||||
@@ -1581,7 +1875,6 @@ describe('WaveformChart', () => {
|
||||
const wrapper = await mountSizedChart(gridSeries(2), {
|
||||
title: { text: '波形标题' },
|
||||
grid: { rowCount: 1, columnCount: 1, showPagination: true },
|
||||
showAnnotationToolbar: true,
|
||||
})
|
||||
|
||||
for (const selector of [
|
||||
@@ -1589,7 +1882,6 @@ describe('WaveformChart', () => {
|
||||
'.waveform-chart__grid',
|
||||
'.waveform-chart__overlay',
|
||||
'.waveform-chart__pagination',
|
||||
'.waveform-annotation-toolbar',
|
||||
]) {
|
||||
const event = new MouseEvent('contextmenu', { bubbles: true, cancelable: true })
|
||||
const dispatched = wrapper.get(selector).element.dispatchEvent(event)
|
||||
@@ -1838,6 +2130,9 @@ describe('WaveformChart', () => {
|
||||
).toBeUndefined()
|
||||
expect(wrapper.get('.waveform-chart__plot-background').attributes('fill')).toBe('transparent')
|
||||
expect(wrapper.get('.waveform-chart__watermark').text()).toBe('12')
|
||||
expect(getComputedStyle(wrapper.get('.waveform-chart__watermark').element).userSelect).toBe(
|
||||
'none',
|
||||
)
|
||||
expect(wrapper.get('.waveform-chart__line').attributes('stroke')).toBe('#0960bd')
|
||||
})
|
||||
|
||||
@@ -2112,8 +2407,12 @@ describe('WaveformChart', () => {
|
||||
)
|
||||
expect(wrapper.emitted('zoom-end')).toBeUndefined()
|
||||
flushAnimationFrames()
|
||||
// Wait for zoom-end debounce (internal throttle + flush)
|
||||
await vi.advanceTimersByTimeAsync(200)
|
||||
// The wheel debounce is 200ms: it must not end early, then ends at the boundary.
|
||||
await vi.advanceTimersByTimeAsync(199)
|
||||
await flushPromises()
|
||||
expect(wrapper.emitted('zoom-end')).toBeUndefined()
|
||||
|
||||
await vi.advanceTimersByTimeAsync(1)
|
||||
await flushPromises()
|
||||
|
||||
const endEvents = wrapper.emitted('zoom-end') ?? []
|
||||
@@ -2122,11 +2421,207 @@ describe('WaveformChart', () => {
|
||||
expect(payload.start).toBeGreaterThanOrEqual(0)
|
||||
expect(payload.end).toBeLessThanOrEqual(2)
|
||||
expect(payload.start).toBeLessThan(payload.end)
|
||||
expect(payload.end - payload.start).toBeCloseTo(2 / 40)
|
||||
} finally {
|
||||
vi.useRealTimers()
|
||||
}
|
||||
})
|
||||
|
||||
it('zooms only the x axis and identifies the box gesture', async () => {
|
||||
const wrapper = await mountSizedChart({
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 1, y: 10 },
|
||||
{ x: 2, y: 20 },
|
||||
],
|
||||
})
|
||||
const overlay = wrapper.get('.waveform-chart__overlay--independent')
|
||||
const width = Number(overlay.attributes('width'))
|
||||
const height = Number(overlay.attributes('height'))
|
||||
Object.defineProperty(overlay.element, 'getBoundingClientRect', {
|
||||
value: () => ({ left: 0, top: 0, width, height }),
|
||||
})
|
||||
|
||||
const dispatchPointer = (type: string, clientX: number, clientY: number) => {
|
||||
const event = new MouseEvent(type, { button: 0, clientX, clientY, bubbles: true })
|
||||
Object.defineProperty(event, 'pointerId', { value: 7 })
|
||||
overlay.element.dispatchEvent(event)
|
||||
}
|
||||
dispatchPointer('pointerdown', width * 0.25, height / 2)
|
||||
dispatchPointer('pointermove', width * 0.75, height / 2 + 2)
|
||||
await flushPromises()
|
||||
expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(true)
|
||||
dispatchPointer('pointerup', width * 0.75, height * 0.75)
|
||||
await flushPromises()
|
||||
|
||||
const payload = wrapper.emitted('zoom-end')?.at(-1)?.[0] as
|
||||
| {
|
||||
start: number
|
||||
end: number
|
||||
yStart?: number
|
||||
yEnd?: number
|
||||
trackIndex: number
|
||||
seriesIds: string[]
|
||||
gesture: string
|
||||
}
|
||||
| undefined
|
||||
expect(payload).toMatchObject({ trackIndex: 0, seriesIds: ['series-0'], gesture: 'box' })
|
||||
expect(payload?.end).toBeGreaterThan(payload?.start ?? Number.POSITIVE_INFINITY)
|
||||
expect(payload?.yStart).toBeDefined()
|
||||
expect(payload?.yEnd).toBeDefined()
|
||||
expect(wrapper.find('.waveform-chart__zoom-selection').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('limits box zoom to the configured minimum x span', async () => {
|
||||
const wrapper = await mountSizedChart(
|
||||
{
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 1, y: 10 },
|
||||
{ x: 2, y: 20 },
|
||||
],
|
||||
},
|
||||
{ minZoomSpan: 0.25 },
|
||||
)
|
||||
const overlay = wrapper.get('.waveform-chart__overlay--independent')
|
||||
const width = Number(overlay.attributes('width'))
|
||||
const height = Number(overlay.attributes('height'))
|
||||
Object.defineProperty(overlay.element, 'getBoundingClientRect', {
|
||||
value: () => ({ left: 0, top: 0, width, height }),
|
||||
})
|
||||
const dispatchPointer = (type: string, clientX: number, clientY: number) => {
|
||||
const event = new MouseEvent(type, { button: 0, clientX, clientY, bubbles: true })
|
||||
Object.defineProperty(event, 'pointerId', { value: 8 })
|
||||
overlay.element.dispatchEvent(event)
|
||||
}
|
||||
dispatchPointer('pointerdown', width / 2, height / 2)
|
||||
dispatchPointer('pointermove', width / 2 + 8, height / 2 + 8)
|
||||
dispatchPointer('pointerup', width / 2 + 8, height / 2 + 8)
|
||||
await flushPromises()
|
||||
|
||||
const payload = wrapper.emitted('zoom-end')?.at(-1)?.[0] as { start: number; end: number }
|
||||
expect(payload.end - payload.start).toBeGreaterThanOrEqual(0.25 - 1e-8)
|
||||
})
|
||||
|
||||
it('does not zoom a track when its visible sample count is below the configured minimum', async () => {
|
||||
const wrapper = await mountSizedChart(
|
||||
{
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 1, y: 10 },
|
||||
{ x: 2, y: 20 },
|
||||
],
|
||||
},
|
||||
{ minVisiblePoints: 10 },
|
||||
)
|
||||
const overlay = wrapper.get('.waveform-chart__overlay--independent')
|
||||
const width = Number(overlay.attributes('width'))
|
||||
Object.defineProperty(overlay.element, 'getBoundingClientRect', {
|
||||
value: () => ({ left: 0, top: 0, width, height: 290 }),
|
||||
})
|
||||
overlay.element.dispatchEvent(
|
||||
new WheelEvent('wheel', {
|
||||
deltaY: -1000,
|
||||
clientX: width / 2,
|
||||
clientY: 145,
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
}),
|
||||
)
|
||||
flushAnimationFrames()
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.emitted('zoom-change')).toBeUndefined()
|
||||
expect(wrapper.emitted('zoom-end')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('ignores shared viewport dragging', async () => {
|
||||
const wrapper = await mountSizedChart({
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 2, y: 1 },
|
||||
],
|
||||
})
|
||||
const overlay = wrapper.get('.waveform-chart__overlay')
|
||||
const width = Number(overlay.attributes('width'))
|
||||
const createDragEvent = (type: string, init: MouseEventInit) => {
|
||||
const event = new MouseEvent(type, init)
|
||||
Object.defineProperty(event, 'view', { value: window })
|
||||
return event
|
||||
}
|
||||
Object.defineProperty(overlay.element, 'getBoundingClientRect', {
|
||||
value: () => ({ left: 0, top: 0, width, height: 290 }),
|
||||
})
|
||||
overlay.element.dispatchEvent(
|
||||
createDragEvent('mousedown', {
|
||||
button: 0,
|
||||
clientX: width / 2,
|
||||
clientY: 145,
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
}),
|
||||
)
|
||||
window.dispatchEvent(
|
||||
new MouseEvent('mousemove', {
|
||||
clientX: width / 2 + 80,
|
||||
clientY: 145,
|
||||
bubbles: true,
|
||||
}),
|
||||
)
|
||||
window.dispatchEvent(createDragEvent('mouseup', { bubbles: true }))
|
||||
flushAnimationFrames()
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.emitted('zoom-change')).toBeUndefined()
|
||||
expect(wrapper.emitted('zoom-end')).toBeUndefined()
|
||||
expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).toBe('0.00')
|
||||
expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('2.00')
|
||||
})
|
||||
|
||||
it('ignores independent viewport dragging', async () => {
|
||||
const wrapper = await mountSizedChart(gridSeries(2), {
|
||||
displayMode: 'independent',
|
||||
grid: { rowCount: 1, columnCount: 2 },
|
||||
})
|
||||
const overlay = wrapper.findAll('.waveform-chart__overlay--independent')[0]
|
||||
const width = Number(overlay.attributes('width'))
|
||||
const createDragEvent = (type: string, init: MouseEventInit) => {
|
||||
const event = new MouseEvent(type, init)
|
||||
Object.defineProperty(event, 'view', { value: window })
|
||||
return event
|
||||
}
|
||||
Object.defineProperty(overlay.element, 'getBoundingClientRect', {
|
||||
value: () => ({ left: 0, top: 0, width, height: 260 }),
|
||||
})
|
||||
|
||||
overlay.element.dispatchEvent(
|
||||
createDragEvent('mousedown', {
|
||||
button: 0,
|
||||
clientX: width / 2,
|
||||
clientY: 130,
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
}),
|
||||
)
|
||||
window.dispatchEvent(
|
||||
new MouseEvent('mousemove', {
|
||||
clientX: width / 2 + 60,
|
||||
clientY: 130,
|
||||
bubbles: true,
|
||||
}),
|
||||
)
|
||||
window.dispatchEvent(createDragEvent('mouseup', { bubbles: true }))
|
||||
flushAnimationFrames()
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.emitted('zoom-change')).toBeUndefined()
|
||||
expect(wrapper.emitted('zoom-end')).toBeUndefined()
|
||||
})
|
||||
|
||||
it('includes track and series IDs in independent zoom-end payloads', async () => {
|
||||
vi.useFakeTimers()
|
||||
try {
|
||||
@@ -2161,6 +2656,222 @@ describe('WaveformChart', () => {
|
||||
}
|
||||
})
|
||||
|
||||
it('keeps the global minimum zoom span after replacing the data window', async () => {
|
||||
const wrapper = await mountSizedChart(
|
||||
{
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 100, y: 1 },
|
||||
],
|
||||
},
|
||||
{ minZoomSpan: 10 },
|
||||
)
|
||||
const overlay = wrapper.get('.waveform-chart__overlay')
|
||||
const width = Number(overlay.attributes('width'))
|
||||
Object.defineProperty(overlay.element, 'getBoundingClientRect', {
|
||||
value: () => ({ left: 0, top: 0, width, height: 290 }),
|
||||
})
|
||||
const zoomAtCenter = async () => {
|
||||
overlay.element.dispatchEvent(
|
||||
new WheelEvent('wheel', {
|
||||
deltaY: -4000,
|
||||
clientX: width / 2,
|
||||
clientY: 145,
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
}),
|
||||
)
|
||||
flushAnimationFrames()
|
||||
await flushPromises()
|
||||
}
|
||||
|
||||
await zoomAtCenter()
|
||||
const firstDomain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
|
||||
expect(firstDomain[1] - firstDomain[0]).toBeCloseTo(10)
|
||||
|
||||
await wrapper.setProps({
|
||||
data: {
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: firstDomain[0], y: 0 },
|
||||
{ x: firstDomain[1], y: 1 },
|
||||
],
|
||||
},
|
||||
})
|
||||
await flushPromises()
|
||||
await zoomAtCenter()
|
||||
|
||||
const secondDomain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
|
||||
expect(secondDomain[1] - secondDomain[0]).toBeCloseTo(10)
|
||||
})
|
||||
|
||||
it('keeps one global domain while loading narrower and wider windows', async () => {
|
||||
const wrapper = await mountSizedChart(
|
||||
{
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 100, y: 1 },
|
||||
],
|
||||
},
|
||||
{ displayMode: 'separated', initialXDomain: [0, 100] },
|
||||
)
|
||||
const overlay = wrapper.get('.waveform-chart__overlay')
|
||||
const width = Number(overlay.attributes('width'))
|
||||
Object.defineProperty(overlay.element, 'getBoundingClientRect', {
|
||||
value: () => ({ left: 0, top: 0, width, height: 290 }),
|
||||
})
|
||||
const dispatchWheel = async (deltaY: number) => {
|
||||
overlay.element.dispatchEvent(
|
||||
new WheelEvent('wheel', {
|
||||
deltaY,
|
||||
clientX: width / 2,
|
||||
clientY: 145,
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
}),
|
||||
)
|
||||
flushAnimationFrames()
|
||||
await flushPromises()
|
||||
}
|
||||
|
||||
await dispatchWheel(-4000)
|
||||
const zoomedDomain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
|
||||
expect(zoomedDomain[1] - zoomedDomain[0]).toBeCloseTo(2.5)
|
||||
|
||||
await wrapper.setProps({
|
||||
data: {
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 48, y: 0 },
|
||||
{ x: 52, y: 1 },
|
||||
],
|
||||
},
|
||||
})
|
||||
await flushPromises()
|
||||
const preservedDomain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
|
||||
expect(preservedDomain[1] - preservedDomain[0]).toBeCloseTo(2.5)
|
||||
|
||||
const eventCount = wrapper.emitted('zoom-change')?.length ?? 0
|
||||
await dispatchWheel(4000)
|
||||
const currentDomain = wrapper.emitted('zoom-change')?.at(-1)?.[0] as [number, number]
|
||||
expect(wrapper.emitted('zoom-change')?.length ?? 0).toBe(eventCount)
|
||||
expect(currentDomain[1] - currentDomain[0]).toBeCloseTo(2.5)
|
||||
})
|
||||
|
||||
it('resets a shared viewport on double-click and emits zoom-reset', async () => {
|
||||
const wrapper = await mountSizedChart({
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 2, y: 1 },
|
||||
],
|
||||
})
|
||||
const overlay = wrapper.get('.waveform-chart__overlay')
|
||||
const width = Number(overlay.attributes('width'))
|
||||
Object.defineProperty(overlay.element, 'getBoundingClientRect', {
|
||||
value: () => ({ left: 0, top: 0, width, height: 290 }),
|
||||
})
|
||||
overlay.element.dispatchEvent(
|
||||
new WheelEvent('wheel', {
|
||||
deltaY: -4000,
|
||||
clientX: width / 2,
|
||||
clientY: 145,
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
}),
|
||||
)
|
||||
flushAnimationFrames()
|
||||
await flushPromises()
|
||||
expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).not.toBe('0.00')
|
||||
|
||||
overlay.element.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true }))
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.emitted('zoom-reset')).toHaveLength(1)
|
||||
expect(wrapper.get('.waveform-chart__axis-endpoint--start').text()).toBe('0.00')
|
||||
expect(wrapper.get('.waveform-chart__axis-endpoint--end').text()).toBe('2.00')
|
||||
})
|
||||
|
||||
it('exposes resetViewport for independent tracks', async () => {
|
||||
const wrapper = await mountSizedChart(gridSeries(2), {
|
||||
displayMode: 'independent',
|
||||
grid: { rowCount: 1, columnCount: 2 },
|
||||
})
|
||||
const overlay = wrapper.findAll('.waveform-chart__overlay--independent')[0]
|
||||
const width = Number(overlay.attributes('width'))
|
||||
Object.defineProperty(overlay.element, 'getBoundingClientRect', {
|
||||
value: () => ({ left: 0, top: 0, width, height: 260 }),
|
||||
})
|
||||
overlay.element.dispatchEvent(
|
||||
new WheelEvent('wheel', {
|
||||
deltaY: -4000,
|
||||
clientX: width / 2,
|
||||
clientY: 130,
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
}),
|
||||
)
|
||||
flushAnimationFrames()
|
||||
await flushPromises()
|
||||
expect(wrapper.findAll('.waveform-chart__axis-endpoint--start')[0].text()).not.toBe('0.00')
|
||||
|
||||
const chart = wrapper.vm as unknown as { resetViewport: () => void }
|
||||
chart.resetViewport()
|
||||
await flushPromises()
|
||||
|
||||
expect(wrapper.findAll('.waveform-chart__axis-endpoint--start')[0].text()).toBe('0.00')
|
||||
expect(wrapper.findAll('.waveform-chart__axis-endpoint--end')[0].text()).toBe('1.00')
|
||||
})
|
||||
|
||||
it('keeps other independent tracks unchanged when one data window is replaced', async () => {
|
||||
const wrapper = await mountSizedChart(gridSeries(2), {
|
||||
displayMode: 'independent',
|
||||
grid: { rowCount: 1, columnCount: 2 },
|
||||
})
|
||||
const originalEndpoints = wrapper
|
||||
.findAll('.waveform-chart__axis-endpoint--end')
|
||||
.map((endpoint) => endpoint.text())
|
||||
|
||||
await wrapper.setProps({
|
||||
data: {
|
||||
kind: 'series',
|
||||
series: [
|
||||
{
|
||||
id: 'channel-0',
|
||||
name: '通道 1',
|
||||
data: {
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0.25, y: 0 },
|
||||
{ x: 0.75, y: 1 },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'channel-1',
|
||||
name: '通道 2',
|
||||
data: {
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 1 },
|
||||
{ x: 1, y: 2 },
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
})
|
||||
await flushPromises()
|
||||
|
||||
const nextEndpoints = wrapper
|
||||
.findAll('.waveform-chart__axis-endpoint--end')
|
||||
.map((endpoint) => endpoint.text())
|
||||
expect(nextEndpoints[0]).not.toBe(originalEndpoints[0])
|
||||
expect(nextEndpoints[1]).toBe(originalEndpoints[1])
|
||||
})
|
||||
|
||||
it('rebuilds cached domains only when the data reference changes', async () => {
|
||||
const firstData: WaveformData = {
|
||||
kind: 'points',
|
||||
@@ -2843,23 +3554,6 @@ describe('WaveformChart', () => {
|
||||
expect(overlay.classes()).not.toContain('is-zoomable')
|
||||
})
|
||||
|
||||
it('keeps the annotation toolbar available behind the compatibility prop', async () => {
|
||||
const wrapper = await mountSizedChart(
|
||||
{
|
||||
kind: 'points',
|
||||
points: [
|
||||
{ x: 0, y: 0 },
|
||||
{ x: 1, y: 5 },
|
||||
],
|
||||
},
|
||||
{ showAnnotationToolbar: true },
|
||||
)
|
||||
|
||||
expect(wrapper.find('.waveform-annotation-toolbar').exists()).toBe(true)
|
||||
await wrapper.get('button[aria-label="添加标注"]').trigger('click')
|
||||
expect(wrapper.attributes('data-interaction-mode')).toBe('annotation')
|
||||
})
|
||||
|
||||
it('creates a controlled annotation from externally selected annotation mode', async () => {
|
||||
const wrapper = await mountSizedChart(
|
||||
{
|
||||
@@ -3212,7 +3906,6 @@ describe('WaveformChart', () => {
|
||||
},
|
||||
{
|
||||
interactionMode: 'annotation',
|
||||
showAnnotationToolbar: true,
|
||||
annotations: [
|
||||
{ id: 'valid', seriesId: 'series-0', x: 1, y: 5, text: '显示' },
|
||||
{ id: 'unknown', seriesId: 'missing', x: 1, y: 5, text: '不显示' },
|
||||
@@ -3222,10 +3915,8 @@ describe('WaveformChart', () => {
|
||||
|
||||
expect(wrapper.attributes('data-interaction-mode')).toBe('annotation')
|
||||
expect(wrapper.findAll('.waveform-annotation')).toHaveLength(1)
|
||||
expect(wrapper.find('.waveform-annotation-toolbar').exists()).toBe(false)
|
||||
expect(wrapper.get('.waveform-chart__overlay').classes()).toContain('is-annotating')
|
||||
await wrapper.get('button[aria-label="隐藏标注"]').trigger('click')
|
||||
expect(wrapper.emitted('update:annotations-visible')?.at(-1)).toEqual([false])
|
||||
|
||||
await wrapper.setProps({ annotationsVisible: false })
|
||||
expect(wrapper.find('.waveform-annotation').exists()).toBe(false)
|
||||
})
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
42
src/components/WaveformPagination.test.ts
Normal file
42
src/components/WaveformPagination.test.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
|
||||
import WaveformPagination from './WaveformPagination.vue'
|
||||
|
||||
describe('WaveformPagination', () => {
|
||||
it('renders all pages and disables the first-page previous button', () => {
|
||||
const wrapper = mount(WaveformPagination, { props: { current: 1, pageCount: 3 } })
|
||||
|
||||
expect(wrapper.findAll('.waveform-pagination__page').map((page) => page.text())).toEqual([
|
||||
'1',
|
||||
'2',
|
||||
'3',
|
||||
])
|
||||
expect(wrapper.get('[aria-label="上一页"]').attributes('disabled')).toBeDefined()
|
||||
expect(wrapper.get('[aria-current="page"]').text()).toBe('1')
|
||||
})
|
||||
|
||||
it('uses ellipses for larger page counts and emits valid page changes', async () => {
|
||||
const wrapper = mount(WaveformPagination, { props: { current: 5, pageCount: 12 } })
|
||||
|
||||
expect(wrapper.findAll('.waveform-pagination__page').map((page) => page.text())).toEqual([
|
||||
'1',
|
||||
'4',
|
||||
'5',
|
||||
'6',
|
||||
'12',
|
||||
])
|
||||
expect(wrapper.findAll('.waveform-pagination__ellipsis')).toHaveLength(2)
|
||||
|
||||
await wrapper.get('[aria-label="第 6 页"]').trigger('click')
|
||||
expect(wrapper.emitted('change')).toEqual([[6]])
|
||||
})
|
||||
|
||||
it('clamps invalid current values and does not emit when already at a boundary', async () => {
|
||||
const wrapper = mount(WaveformPagination, { props: { current: 99, pageCount: 3 } })
|
||||
|
||||
expect(wrapper.get('[aria-current="page"]').text()).toBe('3')
|
||||
await wrapper.get('[aria-label="下一页"]').trigger('click')
|
||||
expect(wrapper.emitted('change')).toBeUndefined()
|
||||
})
|
||||
})
|
||||
142
src/components/WaveformPagination.vue
Normal file
142
src/components/WaveformPagination.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
current: number
|
||||
pageCount: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
change: [page: number]
|
||||
}>()
|
||||
|
||||
type PageToken = number | 'start-ellipsis' | 'end-ellipsis'
|
||||
|
||||
const normalizedPageCount = computed(() => Math.max(1, Math.floor(props.pageCount) || 1))
|
||||
const normalizedCurrent = computed(() =>
|
||||
Math.min(normalizedPageCount.value, Math.max(1, Math.floor(props.current) || 1)),
|
||||
)
|
||||
|
||||
const pageTokens = computed<PageToken[]>(() => {
|
||||
const pageCount = normalizedPageCount.value
|
||||
const current = normalizedCurrent.value
|
||||
if (pageCount <= 7) return Array.from({ length: pageCount }, (_, index) => index + 1)
|
||||
if (current <= 4) return [1, 2, 3, 4, 5, 'end-ellipsis', pageCount]
|
||||
if (current >= pageCount - 3) {
|
||||
return [
|
||||
1,
|
||||
'start-ellipsis',
|
||||
pageCount - 4,
|
||||
pageCount - 3,
|
||||
pageCount - 2,
|
||||
pageCount - 1,
|
||||
pageCount,
|
||||
]
|
||||
}
|
||||
return [1, 'start-ellipsis', current - 1, current, current + 1, 'end-ellipsis', pageCount]
|
||||
})
|
||||
|
||||
function selectPage(page: number) {
|
||||
const nextPage = Math.min(normalizedPageCount.value, Math.max(1, Math.floor(page)))
|
||||
if (nextPage !== normalizedCurrent.value) emit('change', nextPage)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="waveform-pagination" aria-label="波形分页">
|
||||
<button
|
||||
type="button"
|
||||
class="waveform-pagination__previous"
|
||||
aria-label="上一页"
|
||||
:disabled="normalizedCurrent === 1"
|
||||
@click="selectPage(normalizedCurrent - 1)"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<template v-for="token in pageTokens" :key="token">
|
||||
<span
|
||||
v-if="typeof token !== 'number'"
|
||||
class="waveform-pagination__ellipsis"
|
||||
aria-hidden="true"
|
||||
>
|
||||
…
|
||||
</span>
|
||||
<button
|
||||
v-else
|
||||
type="button"
|
||||
class="waveform-pagination__page"
|
||||
:class="{ 'is-active': token === normalizedCurrent }"
|
||||
:aria-current="token === normalizedCurrent ? 'page' : undefined"
|
||||
:aria-label="`第 ${token} 页`"
|
||||
@click="selectPage(token)"
|
||||
>
|
||||
{{ token }}
|
||||
</button>
|
||||
</template>
|
||||
<button
|
||||
type="button"
|
||||
class="waveform-pagination__next"
|
||||
aria-label="下一页"
|
||||
:disabled="normalizedCurrent === normalizedPageCount"
|
||||
@click="selectPage(normalizedCurrent + 1)"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.waveform-pagination {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
padding: 3px;
|
||||
background: #fff;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 2px rgb(16 24 40 / 8%);
|
||||
}
|
||||
|
||||
.waveform-pagination button {
|
||||
display: inline-grid;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
padding: 0 6px;
|
||||
color: #344054;
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
background: #fff;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.waveform-pagination button:hover:not(:disabled),
|
||||
.waveform-pagination button:focus-visible {
|
||||
color: #0958d9;
|
||||
border-color: #1677ff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.waveform-pagination button.is-active {
|
||||
color: #0958d9;
|
||||
background: #e6f4ff;
|
||||
border-color: #1677ff;
|
||||
}
|
||||
|
||||
.waveform-pagination button:disabled {
|
||||
color: #bfc4cc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.waveform-pagination__ellipsis {
|
||||
display: inline-grid;
|
||||
min-width: 20px;
|
||||
height: 28px;
|
||||
color: #98a2b3;
|
||||
font-size: 12px;
|
||||
place-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, defineAsyncComponent, nextTick, ref, useId, watch } from 'vue'
|
||||
import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue'
|
||||
|
||||
import type { WaveformAnnotation } from '../../types'
|
||||
import { formatAnnotationTime, formatPlainNumber, type TimeUnit } from '../../utils'
|
||||
import { ANNOTATION_MAX_TEXT_LENGTH, resolveAnnotationStyle } from './markup'
|
||||
import type { AnnotationSeriesCandidate, AnnotationSeriesInfo } from './types'
|
||||
import { useWaveformInstanceId } from '../../utils/waveformId'
|
||||
|
||||
const ColorPicker = defineAsyncComponent(async () => {
|
||||
await import('vue3-colorpicker/style.css')
|
||||
@@ -29,7 +30,7 @@ const emit = defineEmits<{
|
||||
}>()
|
||||
|
||||
const textarea = ref<HTMLTextAreaElement>()
|
||||
const dialogTitleId = `waveform-annotation-editor-title-${useId()}`
|
||||
const dialogTitleId = useWaveformInstanceId('waveform-annotation-editor-title')
|
||||
const text = ref('')
|
||||
const borderColor = ref('')
|
||||
const textColor = ref('')
|
||||
|
||||
@@ -1,81 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { WaveformInteractionMode } from '../../types'
|
||||
|
||||
interface Props {
|
||||
interactionMode?: WaveformInteractionMode
|
||||
annotationsVisible: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<{
|
||||
(event: 'update:interaction-mode', mode: WaveformInteractionMode): void
|
||||
(event: 'update:annotations-visible', visible: boolean): void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="waveform-annotation-toolbar" role="toolbar" aria-label="波形标注工具">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ 'is-active': props.interactionMode === 'zoom' }"
|
||||
aria-label="缩放模式"
|
||||
title="缩放模式"
|
||||
@click="emit('update:interaction-mode', 'zoom')"
|
||||
>
|
||||
缩放
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ 'is-active': props.interactionMode === 'annotation' }"
|
||||
aria-label="添加标注"
|
||||
title="添加标注"
|
||||
@click="emit('update:interaction-mode', 'annotation')"
|
||||
>
|
||||
标注
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
:class="{ 'is-active': props.annotationsVisible }"
|
||||
:aria-pressed="props.annotationsVisible"
|
||||
:aria-label="props.annotationsVisible ? '隐藏标注' : '显示标注'"
|
||||
title="显示/隐藏标注"
|
||||
@click="emit('update:annotations-visible', !props.annotationsVisible)"
|
||||
>
|
||||
{{ props.annotationsVisible ? '隐藏' : '显示' }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.waveform-annotation-toolbar {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 5px;
|
||||
background: #fff;
|
||||
border: 1px solid #dfe5ef;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
|
||||
}
|
||||
|
||||
.waveform-annotation-toolbar button {
|
||||
min-width: 42px;
|
||||
height: 28px;
|
||||
padding: 0 7px;
|
||||
color: #667085;
|
||||
font-size: 12px;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.waveform-annotation-toolbar button:hover,
|
||||
.waveform-annotation-toolbar button.is-active {
|
||||
color: #1677ff;
|
||||
background: #e6f4ff;
|
||||
}
|
||||
</style>
|
||||
@@ -5,9 +5,32 @@ import { ColorPicker } from 'vue3-colorpicker'
|
||||
import WaveformAnnotationContextMenu from './WaveformAnnotationContextMenu.vue'
|
||||
import WaveformAnnotationEditor from './WaveformAnnotationEditor.vue'
|
||||
import WaveformAnnotationLayer from './WaveformAnnotationLayer.vue'
|
||||
import WaveformAnnotationToolbar from './WaveformAnnotationToolbar.vue'
|
||||
|
||||
describe('waveform annotation controls', () => {
|
||||
it('keeps dialog title ids unique across editor instances', () => {
|
||||
const first = mount(WaveformAnnotationEditor, {
|
||||
props: {
|
||||
annotation: { id: 'first', seriesId: 'a', x: 1, y: 2, text: '说明' },
|
||||
mode: 'edit',
|
||||
},
|
||||
})
|
||||
const second = mount(WaveformAnnotationEditor, {
|
||||
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')
|
||||
|
||||
expect(firstTitleId).toBeTruthy()
|
||||
expect(secondTitleId).toBeTruthy()
|
||||
expect(firstTitleId).not.toBe(secondTitleId)
|
||||
expect(first.get('[role="dialog"]').attributes('aria-labelledby')).toBe(firstTitleId)
|
||||
expect(second.get('[role="dialog"]').attributes('aria-labelledby')).toBe(secondTitleId)
|
||||
})
|
||||
|
||||
it('allows changing the annotation series inside the editor', async () => {
|
||||
const wrapper = mount(WaveformAnnotationEditor, {
|
||||
props: {
|
||||
@@ -52,18 +75,6 @@ describe('waveform annotation controls', () => {
|
||||
expect(wrapper.get('.waveform-annotation-editor__series').text()).toContain('通道 A')
|
||||
})
|
||||
|
||||
it('emits controlled toolbar changes', async () => {
|
||||
const wrapper = mount(WaveformAnnotationToolbar, {
|
||||
props: { interactionMode: 'zoom', annotationsVisible: true },
|
||||
})
|
||||
|
||||
await wrapper.get('button[aria-label="添加标注"]').trigger('click')
|
||||
await wrapper.get('button[aria-label="隐藏标注"]').trigger('click')
|
||||
|
||||
expect(wrapper.emitted('update:interaction-mode')).toEqual([['annotation']])
|
||||
expect(wrapper.emitted('update:annotations-visible')).toEqual([[false]])
|
||||
})
|
||||
|
||||
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, {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export { default as WaveformAnnotationLayer } from './WaveformAnnotationLayer.vue'
|
||||
export { default as WaveformAnnotationToolbar } from './WaveformAnnotationToolbar.vue'
|
||||
export { default as WaveformAnnotationContextMenu } from './WaveformAnnotationContextMenu.vue'
|
||||
export * from './markup'
|
||||
export * from './serialization'
|
||||
export * from './types'
|
||||
export * from './useWaveformAnnotationInteraction'
|
||||
|
||||
114
src/components/annotation/serialization.test.ts
Normal file
114
src/components/annotation/serialization.test.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
|
||||
import type { WaveformAnnotation } from '../../types'
|
||||
import { parseWaveformAnnotations, serializeWaveformAnnotations } from './serialization'
|
||||
|
||||
describe('waveform annotation serialization', () => {
|
||||
it('round-trips every annotation field through a versioned document', () => {
|
||||
const source: WaveformAnnotation[] = [
|
||||
{
|
||||
id: 'note-1',
|
||||
seriesId: 'channel-a',
|
||||
x: 1.25,
|
||||
y: -3.5,
|
||||
text: '峰值',
|
||||
labelOffsetX: 12,
|
||||
labelOffsetY: -8,
|
||||
createdAt: '2026-07-21T12:00:00.000Z',
|
||||
style: {
|
||||
borderColor: '#1677ff',
|
||||
textColor: '#333333',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.92)',
|
||||
},
|
||||
},
|
||||
]
|
||||
const sourceSnapshot = JSON.parse(JSON.stringify(source))
|
||||
|
||||
const parsed = parseWaveformAnnotations(serializeWaveformAnnotations(source))
|
||||
|
||||
expect(JSON.parse(serializeWaveformAnnotations(source))).toMatchObject({ version: 1 })
|
||||
expect(source).toEqual(sourceSnapshot)
|
||||
expect(parsed).toEqual(source)
|
||||
expect(parsed).not.toBe(source)
|
||||
expect(parsed[0]).not.toBe(source[0])
|
||||
expect(parsed[0].style).not.toBe(source[0].style)
|
||||
})
|
||||
|
||||
it('allows annotations for series that are not currently loaded', () => {
|
||||
expect(
|
||||
parseWaveformAnnotations(
|
||||
JSON.stringify({
|
||||
version: 1,
|
||||
annotations: [{ id: 'future', seriesId: 'missing', x: 1, y: 2, text: '稍后显示' }],
|
||||
}),
|
||||
),
|
||||
).toEqual([{ id: 'future', seriesId: 'missing', x: 1, y: 2, text: '稍后显示' }])
|
||||
})
|
||||
|
||||
it.each([
|
||||
['invalid JSON', '{'],
|
||||
['non-object root', '[]'],
|
||||
['unsupported version', JSON.stringify({ version: 2, annotations: [] })],
|
||||
['missing annotation array', JSON.stringify({ version: 1 })],
|
||||
[
|
||||
'invalid annotation entry',
|
||||
JSON.stringify({ version: 1, annotations: [{ id: 'a', seriesId: 's', x: 1 }] }),
|
||||
],
|
||||
[
|
||||
'non-finite coordinate',
|
||||
'{"version":1,"annotations":[{"id":"a","seriesId":"s","x":1e400,"y":2,"text":"a"}]}',
|
||||
],
|
||||
[
|
||||
'overlong text',
|
||||
JSON.stringify({
|
||||
version: 1,
|
||||
annotations: [{ id: 'a', seriesId: 's', x: 1, y: 2, text: 'a'.repeat(41) }],
|
||||
}),
|
||||
],
|
||||
[
|
||||
'duplicate IDs',
|
||||
JSON.stringify({
|
||||
version: 1,
|
||||
annotations: [
|
||||
{ id: 'a', seriesId: 's', x: 1, y: 2, text: 'one' },
|
||||
{ id: 'a', seriesId: 's', x: 2, y: 3, text: 'two' },
|
||||
],
|
||||
}),
|
||||
],
|
||||
])('rejects %s without returning partial data', (_label, json) => {
|
||||
expect(() => parseWaveformAnnotations(json)).toThrow('Invalid waveform annotation file')
|
||||
})
|
||||
|
||||
it('rejects invalid optional fields and serialization input', () => {
|
||||
expect(() =>
|
||||
parseWaveformAnnotations(
|
||||
JSON.stringify({
|
||||
version: 1,
|
||||
annotations: [
|
||||
{
|
||||
id: 'a',
|
||||
seriesId: 's',
|
||||
x: 1,
|
||||
y: 2,
|
||||
text: 'a',
|
||||
labelOffsetX: '12',
|
||||
},
|
||||
],
|
||||
}),
|
||||
),
|
||||
).toThrow('labelOffsetX')
|
||||
|
||||
expect(() =>
|
||||
parseWaveformAnnotations(
|
||||
JSON.stringify({
|
||||
version: 1,
|
||||
annotations: [{ id: 'a', seriesId: 's', x: 1, y: 2, text: 'a', style: [] }],
|
||||
}),
|
||||
),
|
||||
).toThrow('style must be an object')
|
||||
|
||||
expect(() =>
|
||||
serializeWaveformAnnotations([{ id: 'a', seriesId: 's', x: Number.NaN, y: 2, text: 'a' }]),
|
||||
).toThrow('x must be a finite number')
|
||||
})
|
||||
})
|
||||
127
src/components/annotation/serialization.ts
Normal file
127
src/components/annotation/serialization.ts
Normal file
@@ -0,0 +1,127 @@
|
||||
import type { WaveformAnnotation, WaveformAnnotationStyle } from '../../types'
|
||||
import { ANNOTATION_MAX_TEXT_LENGTH } from './markup'
|
||||
|
||||
const ANNOTATION_FILE_VERSION = 1
|
||||
|
||||
type JsonRecord = Record<string, unknown>
|
||||
|
||||
function fail(message: string): never {
|
||||
throw new TypeError(`Invalid waveform annotation file: ${message}`)
|
||||
}
|
||||
|
||||
function isRecord(value: unknown): value is JsonRecord {
|
||||
return typeof value === 'object' && value !== null && !Array.isArray(value)
|
||||
}
|
||||
|
||||
function requiredString(record: JsonRecord, key: string, path: string): string {
|
||||
const value = record[key]
|
||||
if (typeof value !== 'string' || value.trim().length === 0) {
|
||||
fail(`${path}.${key} must be a non-empty string`)
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
function optionalString(record: JsonRecord, key: string, path: string): string | undefined {
|
||||
const value = record[key]
|
||||
if (value === undefined) return undefined
|
||||
if (typeof value !== 'string') fail(`${path}.${key} must be a string`)
|
||||
return value
|
||||
}
|
||||
|
||||
function requiredFiniteNumber(record: JsonRecord, key: string, path: string): number {
|
||||
const value = record[key]
|
||||
if (typeof value !== 'number' || !Number.isFinite(value)) {
|
||||
fail(`${path}.${key} must be a finite number`)
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
function optionalFiniteNumber(record: JsonRecord, key: string, path: string): number | undefined {
|
||||
const value = record[key]
|
||||
if (value === undefined) return undefined
|
||||
if (typeof value !== 'number' || !Number.isFinite(value)) {
|
||||
fail(`${path}.${key} must be a finite number`)
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
function parseStyle(value: unknown, path: string): WaveformAnnotationStyle | undefined {
|
||||
if (value === undefined) return undefined
|
||||
if (!isRecord(value)) fail(`${path} must be an object`)
|
||||
|
||||
const borderColor = optionalString(value, 'borderColor', path)
|
||||
const textColor = optionalString(value, 'textColor', path)
|
||||
const backgroundColor = optionalString(value, 'backgroundColor', path)
|
||||
|
||||
return {
|
||||
...(borderColor !== undefined && { borderColor }),
|
||||
...(textColor !== undefined && { textColor }),
|
||||
...(backgroundColor !== undefined && { backgroundColor }),
|
||||
}
|
||||
}
|
||||
|
||||
function parseAnnotation(value: unknown, index: number): WaveformAnnotation {
|
||||
const path = `annotations[${index}]`
|
||||
if (!isRecord(value)) fail(`${path} must be an object`)
|
||||
|
||||
const text = requiredString(value, 'text', path)
|
||||
if (text.length > ANNOTATION_MAX_TEXT_LENGTH) {
|
||||
fail(`${path}.text must not exceed ${ANNOTATION_MAX_TEXT_LENGTH} characters`)
|
||||
}
|
||||
|
||||
const labelOffsetX = optionalFiniteNumber(value, 'labelOffsetX', path)
|
||||
const labelOffsetY = optionalFiniteNumber(value, 'labelOffsetY', path)
|
||||
const createdAt = optionalString(value, 'createdAt', path)
|
||||
const style = parseStyle(value.style, `${path}.style`)
|
||||
|
||||
return {
|
||||
id: requiredString(value, 'id', path),
|
||||
seriesId: requiredString(value, 'seriesId', path),
|
||||
x: requiredFiniteNumber(value, 'x', path),
|
||||
y: requiredFiniteNumber(value, 'y', path),
|
||||
text,
|
||||
...(labelOffsetX !== undefined && { labelOffsetX }),
|
||||
...(labelOffsetY !== undefined && { labelOffsetY }),
|
||||
...(style !== undefined && { style }),
|
||||
...(createdAt !== undefined && { createdAt }),
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeAnnotations(values: readonly unknown[]): WaveformAnnotation[] {
|
||||
const annotations = values.map(parseAnnotation)
|
||||
const ids = new Set<string>()
|
||||
annotations.forEach((annotation, index) => {
|
||||
if (ids.has(annotation.id)) fail(`annotations[${index}].id must be unique`)
|
||||
ids.add(annotation.id)
|
||||
})
|
||||
return annotations
|
||||
}
|
||||
|
||||
/** Serialize annotations to the versioned waveform annotation JSON format. */
|
||||
export function serializeWaveformAnnotations(annotations: readonly WaveformAnnotation[]): string {
|
||||
return JSON.stringify(
|
||||
{ version: ANNOTATION_FILE_VERSION, annotations: normalizeAnnotations(annotations) },
|
||||
null,
|
||||
2,
|
||||
)
|
||||
}
|
||||
|
||||
/** Parse and validate a versioned waveform annotation JSON document. */
|
||||
export function parseWaveformAnnotations(json: string): WaveformAnnotation[] {
|
||||
if (typeof json !== 'string') fail('input must be a JSON string')
|
||||
|
||||
let document: unknown
|
||||
try {
|
||||
document = JSON.parse(json)
|
||||
} catch {
|
||||
fail('input is not valid JSON')
|
||||
}
|
||||
|
||||
if (!isRecord(document)) fail('root must be an object')
|
||||
if (document.version !== ANNOTATION_FILE_VERSION) {
|
||||
fail(`version must be ${ANNOTATION_FILE_VERSION}`)
|
||||
}
|
||||
if (!Array.isArray(document.annotations)) fail('annotations must be an array')
|
||||
|
||||
return normalizeAnnotations(document.annotations)
|
||||
}
|
||||
@@ -74,6 +74,7 @@ export function resolveGridCellGeometry(
|
||||
displayMode: WaveformDisplayMode,
|
||||
slotHasSeries: boolean[] = [],
|
||||
horizontalGap?: number,
|
||||
showXAxis = true,
|
||||
): GridCellGeometry[] {
|
||||
const defaultGap = getGridGap(displayMode)
|
||||
const columnGap = Number.isFinite(horizontalGap)
|
||||
@@ -81,7 +82,9 @@ export function resolveGridCellGeometry(
|
||||
: defaultGap
|
||||
const totalHorizontalGap = Math.max(0, options.columnCount - 1) * columnGap
|
||||
const axisRows = new Set<number>()
|
||||
if (displayMode === 'independent') {
|
||||
if (!showXAxis) {
|
||||
// Net view uses the full drawing area for waveform pixels.
|
||||
} else if (displayMode === 'independent') {
|
||||
for (let row = 0; row < options.rowCount; row += 1) axisRows.add(row)
|
||||
} else if (displayMode === 'compact') {
|
||||
// Compact tracks share one continuous plot stack. Reserve the X-axis band
|
||||
|
||||
@@ -66,6 +66,7 @@ function layoutForSeries(
|
||||
overlayMode: 'single-axis',
|
||||
independentTransforms: [transform],
|
||||
sharedZoomDomain: sourceSeries.xDomain,
|
||||
yDomains: undefined,
|
||||
timeUnit: 'ms',
|
||||
rendering,
|
||||
hideSecondaryLabels: false,
|
||||
@@ -75,6 +76,42 @@ function layoutForSeries(
|
||||
}
|
||||
|
||||
describe('multi-value Y-axis grouping', () => {
|
||||
it('uses a configured visible Y domain for axis and series scales', () => {
|
||||
const source = series('a', 0, 100)
|
||||
const sourceTrack = track([source])
|
||||
const result = buildTrackLayouts({
|
||||
cells: [
|
||||
{
|
||||
slotIndex: 0,
|
||||
row: 0,
|
||||
column: 0,
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: 120,
|
||||
height: 100,
|
||||
plotHeight: 100,
|
||||
cellHeight: 130,
|
||||
xAxisBand: 30,
|
||||
series: sourceTrack,
|
||||
},
|
||||
],
|
||||
grid: { rowCount: 1, columnCount: 1, showPagination: false },
|
||||
displayMode: 'independent',
|
||||
overlayMode: 'single-axis',
|
||||
independentTransforms: [zoomIdentity],
|
||||
sharedZoomDomain: [0, 1],
|
||||
yDomains: { track: [25, 75] },
|
||||
timeUnit: 'ms',
|
||||
rendering: DEFAULT_WAVEFORM_RENDERING_OPTIONS,
|
||||
hideSecondaryLabels: false,
|
||||
yAxisLabelX: -50,
|
||||
showCompactEmptyTracks: false,
|
||||
})[0]
|
||||
|
||||
expect(result?.yScale.domain()).toEqual([25, 75])
|
||||
expect(result?.seriesPaths[0]?.yScale.domain()).toEqual([25, 75])
|
||||
})
|
||||
|
||||
it('keeps every overlaid series on one axis in single-axis mode', () => {
|
||||
const groups = buildYAxisSeriesGroups(
|
||||
track([series('a', 0, 1), series('b', 10, 20)]),
|
||||
|
||||
@@ -190,6 +190,9 @@ export interface BuildTrackLayoutsOptions {
|
||||
overlayMode: WaveformOverlayMode
|
||||
independentTransforms: ZoomTransform[]
|
||||
sharedZoomDomain: [number, number]
|
||||
initialXDomain?: [number, number]
|
||||
initialXDomains?: Record<string, [number, number]>
|
||||
yDomains?: Record<string, [number, number]>
|
||||
timeUnit: 's' | 'ms'
|
||||
rendering: ResolvedWaveformRenderingOptions
|
||||
hideSecondaryLabels: boolean
|
||||
@@ -226,14 +229,23 @@ export function buildTrackLayouts(options: BuildTrackLayoutsOptions): TrackLayou
|
||||
const series = displayTrack.visibleSeries[0] ?? displayTrack.series[0] ?? emptySeries
|
||||
const baseXScale =
|
||||
options.displayMode === 'independent'
|
||||
? scaleLinear(displayTrack.xDomain, [0, cell.width])
|
||||
? scaleLinear(
|
||||
options.initialXDomains?.[displayTrack.id] ??
|
||||
options.initialXDomains?.[series.id] ??
|
||||
displayTrack.xDomain,
|
||||
[0, cell.width],
|
||||
)
|
||||
: scaleLinear(options.sharedZoomDomain, [0, cell.width])
|
||||
const transform =
|
||||
options.displayMode === 'independent'
|
||||
? (options.independentTransforms[index] ?? zoomIdentity)
|
||||
: zoomIdentity
|
||||
const xScale = transform.rescaleX(baseXScale)
|
||||
const yAxisGroups = buildYAxisSeriesGroups(displayTrack, options.overlayMode)
|
||||
const configuredYDomain = options.yDomains?.[displayTrack.id]
|
||||
const yAxisGroups = buildYAxisSeriesGroups(displayTrack, options.overlayMode).map((group) => ({
|
||||
...group,
|
||||
domain: configuredYDomain ?? group.domain,
|
||||
}))
|
||||
const sideOffsets = { left: 0, right: 0 }
|
||||
const yAxes: WaveformYAxisLayout[] = yAxisGroups.map((group) => {
|
||||
const scale = scaleLinear(group.domain, [cell.plotHeight, 0]).nice()
|
||||
|
||||
@@ -19,6 +19,7 @@ export type {
|
||||
WaveformLegendOrientation,
|
||||
WaveformLegendOptions,
|
||||
WaveformFrameStyle,
|
||||
WaveformZeroLineOptions,
|
||||
SingleWaveformData,
|
||||
WaveformLineType,
|
||||
WaveformPointType,
|
||||
|
||||
@@ -17,6 +17,7 @@ export type {
|
||||
WaveformLegendOrientation,
|
||||
WaveformLegendOptions,
|
||||
WaveformFrameStyle,
|
||||
WaveformZeroLineOptions,
|
||||
WaveformPoint,
|
||||
WaveformSeries,
|
||||
WaveformLineType,
|
||||
@@ -30,8 +31,4 @@ export type { WaveformGridOptions as WaveformGridConfig } from './core/grid'
|
||||
// 可选：导出各系统的组件（供高级用户使用）
|
||||
export { WaveformTooltip } from './interaction'
|
||||
export { WaveformTrack } from './rendering'
|
||||
export {
|
||||
WaveformAnnotationLayer,
|
||||
WaveformAnnotationToolbar,
|
||||
WaveformAnnotationContextMenu,
|
||||
} from './annotation'
|
||||
export { WaveformAnnotationLayer, WaveformAnnotationContextMenu } from './annotation'
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { computed, nextTick, onMounted, ref, watch } from 'vue'
|
||||
import { axisBottom, axisLeft, axisRight, select } from 'd3'
|
||||
import { formatAxisTime, formatScientificAxisLabel } from '../../utils'
|
||||
import type { WaveformFrameStyle } from '../../types'
|
||||
import type { WaveformFrameStyle, WaveformZeroLineOptions } from '../../types'
|
||||
import type { WaveformDisplayMode, WaveformInteractionMode } from '../data/types'
|
||||
import type {
|
||||
DisplaySeries,
|
||||
@@ -37,10 +37,19 @@ interface Props {
|
||||
hoveredPoint?: HoveredSeriesPoint
|
||||
/** Y 轴标签回退值 */
|
||||
yLabel?: string
|
||||
/** Hide visual aids while keeping chart interaction active. */
|
||||
cleanView?: boolean
|
||||
/** Resolved zero reference line style. */
|
||||
zeroLine?: Required<Pick<WaveformZeroLineOptions, 'color' | 'width' | 'dash'>> & {
|
||||
visible: boolean
|
||||
}
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'pointer-move', event: PointerEvent): void
|
||||
(e: 'pointer-down', event: PointerEvent): void
|
||||
(e: 'pointer-up', event: PointerEvent): void
|
||||
(e: 'pointer-cancel', event: PointerEvent): void
|
||||
(e: 'pointer-leave'): void
|
||||
(e: 'click', event: MouseEvent): void
|
||||
(e: 'contextmenu', event: MouseEvent): void
|
||||
@@ -48,6 +57,8 @@ interface Emits {
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
interactionMode: 'zoom',
|
||||
cleanView: false,
|
||||
zeroLine: () => ({ visible: false, color: '#98a2b3', width: 1, dash: '6 4' }),
|
||||
})
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
@@ -108,6 +119,12 @@ function hasCrosshair(): boolean {
|
||||
)
|
||||
}
|
||||
|
||||
function zeroLineY(axis: WaveformYAxisLayout): number | null {
|
||||
const [minimum, maximum] = axis.scale.domain()
|
||||
if (!props.zeroLine.visible || minimum > 0 || maximum < 0) return null
|
||||
return axis.scale(0)
|
||||
}
|
||||
|
||||
function renderAxes() {
|
||||
props.track.yAxes.forEach((axis, index) => {
|
||||
const element = yAxisElements.value[index]
|
||||
@@ -177,7 +194,7 @@ watch(
|
||||
:transform="`translate(${track.left ?? 0}, ${track.top})`"
|
||||
>
|
||||
<rect
|
||||
v-if="!track.isEmpty"
|
||||
v-if="!track.isEmpty && !cleanView"
|
||||
class="waveform-track__plot-background waveform-chart__plot-background"
|
||||
:width="track.width ?? innerWidth"
|
||||
:height="track.height"
|
||||
@@ -187,7 +204,7 @@ watch(
|
||||
|
||||
<!-- 网格和背景 -->
|
||||
<g
|
||||
v-if="!track.isEmpty && track.hasVisibleSeries"
|
||||
v-if="!track.isEmpty && track.hasVisibleSeries && !cleanView"
|
||||
:clip-path="`url(#${clipPathId}-${track.index})`"
|
||||
aria-hidden="true"
|
||||
>
|
||||
@@ -233,9 +250,31 @@ watch(
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g
|
||||
v-if="!track.isEmpty && track.hasVisibleSeries && zeroLine.visible && !cleanView"
|
||||
class="waveform-track__zero-lines waveform-chart__zero-lines"
|
||||
:clip-path="`url(#${clipPathId}-${track.index})`"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<template v-for="axis in track.yAxes" :key="`zero-line-${track.index}-${axis.index}`">
|
||||
<line
|
||||
v-if="zeroLineY(axis) !== null"
|
||||
class="waveform-track__zero-line waveform-chart__zero-line"
|
||||
:data-y-axis-index="axis.index"
|
||||
x1="0"
|
||||
:x2="track.width ?? innerWidth"
|
||||
:y1="zeroLineY(axis) ?? 0"
|
||||
:y2="zeroLineY(axis) ?? 0"
|
||||
:stroke="zeroLine.color"
|
||||
:stroke-width="zeroLine.width"
|
||||
:stroke-dasharray="zeroLine.dash || undefined"
|
||||
/>
|
||||
</template>
|
||||
</g>
|
||||
|
||||
<!-- 帧编号水印 -->
|
||||
<text
|
||||
v-if="!track.isEmpty && track.hasVisibleSeries && frameNumber !== undefined"
|
||||
v-if="!track.isEmpty && track.hasVisibleSeries && frameNumber !== undefined && !cleanView"
|
||||
class="waveform-track__watermark waveform-chart__watermark"
|
||||
:x="(track.width ?? innerWidth) / 2"
|
||||
:y="track.height / 2"
|
||||
@@ -249,13 +288,13 @@ watch(
|
||||
|
||||
<!-- X 轴 -->
|
||||
<g
|
||||
v-if="track.showXAxis"
|
||||
v-if="track.showXAxis && !cleanView"
|
||||
ref="xAxisElement"
|
||||
class="waveform-track__axis waveform-track__axis--x waveform-chart__axis waveform-chart__axis--x"
|
||||
:transform="`translate(0, ${track.height})`"
|
||||
/>
|
||||
<g
|
||||
v-if="track.showXAxis"
|
||||
v-if="track.showXAxis && !cleanView"
|
||||
class="waveform-track__axis-endpoints waveform-chart__axis-endpoints"
|
||||
:transform="`translate(0, ${track.height})`"
|
||||
font-family="sans-serif"
|
||||
@@ -282,7 +321,7 @@ watch(
|
||||
</text>
|
||||
</g>
|
||||
<text
|
||||
v-if="track.showXAxis && track.xAxisExponent"
|
||||
v-if="track.showXAxis && track.xAxisExponent && !cleanView"
|
||||
class="waveform-track__axis-exponent waveform-track__axis-exponent--x waveform-chart__axis-exponent waveform-chart__axis-exponent--x"
|
||||
:x="track.width ?? innerWidth"
|
||||
:y="track.height + 27"
|
||||
@@ -294,7 +333,7 @@ watch(
|
||||
|
||||
<!-- Y 轴 -->
|
||||
<g
|
||||
v-for="axis in track.isEmpty ? [] : track.yAxes"
|
||||
v-for="axis in track.isEmpty || cleanView ? [] : track.yAxes"
|
||||
:key="`y-axis-${track.index}-${axis.index}`"
|
||||
:ref="(element) => setYAxisElement(element, axis.index)"
|
||||
class="waveform-track__axis waveform-track__axis--y waveform-chart__axis waveform-chart__axis--y"
|
||||
@@ -304,7 +343,9 @@ watch(
|
||||
:transform="`translate(${axis.x}, 0)`"
|
||||
/>
|
||||
<text
|
||||
v-for="axis in track.isEmpty ? [] : track.yAxes.filter((item) => item.exponentLabel)"
|
||||
v-for="axis in track.isEmpty || cleanView
|
||||
? []
|
||||
: track.yAxes.filter((item) => item.exponentLabel)"
|
||||
:key="`y-axis-exponent-${track.index}-${axis.index}`"
|
||||
class="waveform-track__axis-exponent waveform-track__axis-exponent--y waveform-chart__axis-exponent waveform-chart__axis-exponent--y"
|
||||
:data-y-axis-index="axis.index"
|
||||
@@ -320,6 +361,7 @@ watch(
|
||||
<!-- Y 轴标签 -->
|
||||
<g
|
||||
v-if="
|
||||
!cleanView &&
|
||||
!track.isEmpty &&
|
||||
track.hasVisibleSeries &&
|
||||
track.seriesList.length === 1 &&
|
||||
@@ -348,7 +390,7 @@ watch(
|
||||
</g>
|
||||
|
||||
<g
|
||||
v-for="axis in track.yAxes.length > 1 ? track.yAxes.filter(hasYAxisTitle) : []"
|
||||
v-for="axis in !cleanView && track.yAxes.length > 1 ? track.yAxes.filter(hasYAxisTitle) : []"
|
||||
:key="`y-axis-title-${track.index}-${axis.index}`"
|
||||
class="waveform-track__multi-axis-title"
|
||||
:data-y-axis-title-index="axis.index"
|
||||
@@ -374,7 +416,7 @@ watch(
|
||||
|
||||
<!-- 轨道边框 -->
|
||||
<rect
|
||||
v-if="!track.isEmpty"
|
||||
v-if="!track.isEmpty && !cleanView"
|
||||
class="waveform-track__plot-frame waveform-chart__plot-frame"
|
||||
:width="track.width ?? innerWidth"
|
||||
:height="track.height"
|
||||
@@ -409,13 +451,16 @@ watch(
|
||||
:width="track.width ?? innerWidth"
|
||||
:height="track.height"
|
||||
@pointermove="emit('pointer-move', $event)"
|
||||
@pointerdown="emit('pointer-down', $event)"
|
||||
@pointerup="emit('pointer-up', $event)"
|
||||
@pointercancel="emit('pointer-cancel', $event)"
|
||||
@pointerleave="emit('pointer-leave')"
|
||||
@click="emit('click', $event)"
|
||||
@contextmenu="emit('contextmenu', $event)"
|
||||
/>
|
||||
|
||||
<text
|
||||
v-if="!track.isEmpty && !track.hasVisibleSeries"
|
||||
v-if="!track.isEmpty && !track.hasVisibleSeries && !cleanView"
|
||||
class="waveform-track__no-visible-series"
|
||||
:x="(track.width ?? innerWidth) / 2"
|
||||
:y="track.height / 2"
|
||||
@@ -471,6 +516,8 @@ watch(
|
||||
fill: rgb(22 119 255 / 10%);
|
||||
font-family: Consolas, Monaco, 'Courier New', monospace;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.waveform-track__overlay {
|
||||
@@ -508,6 +555,11 @@ watch(
|
||||
stroke-dasharray: 4 3;
|
||||
}
|
||||
|
||||
.waveform-track__zero-line {
|
||||
fill: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.waveform-track__axis-endpoint {
|
||||
fill: #667085;
|
||||
font-size: 11px;
|
||||
|
||||
@@ -23,6 +23,7 @@ export type {
|
||||
WaveformLegendOrientation,
|
||||
WaveformLegendOptions,
|
||||
WaveformFrameStyle,
|
||||
WaveformZeroLineOptions,
|
||||
// 数据类型
|
||||
SingleWaveformData,
|
||||
WaveformLineType,
|
||||
@@ -59,3 +60,5 @@ export {
|
||||
selectRenderablePoints,
|
||||
type ResolvedWaveformRenderingOptions,
|
||||
} from './core'
|
||||
|
||||
export { parseWaveformAnnotations, serializeWaveformAnnotations } from './components/annotation'
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { createApp } from 'vue'
|
||||
import 'ant-design-vue/dist/reset.css'
|
||||
|
||||
import App from './App.vue'
|
||||
import './styles.css'
|
||||
|
||||
137
src/styles.css
137
src/styles.css
@@ -17,6 +17,12 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
@@ -91,16 +97,124 @@ body {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.control-panel .native-input,
|
||||
.control-panel .native-select {
|
||||
min-width: 0;
|
||||
height: 28px;
|
||||
padding: 4px 8px;
|
||||
color: #101828;
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
border: 1px solid #d0d5dd;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.control-panel .native-input:focus-visible,
|
||||
.control-panel .native-select:focus-visible,
|
||||
.control-panel button:focus-visible {
|
||||
border-color: #1677ff;
|
||||
outline: 2px solid rgb(22 119 255 / 20%);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.control-panel .native-switch {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
appearance: none;
|
||||
background: #d0d5dd;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
transition: background-color 120ms ease;
|
||||
}
|
||||
|
||||
.control-panel .native-switch::after {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
content: '';
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 2px rgb(16 24 40 / 20%);
|
||||
transition: transform 120ms ease;
|
||||
}
|
||||
|
||||
.control-panel .native-switch:checked {
|
||||
background: #1677ff;
|
||||
}
|
||||
|
||||
.control-panel .native-switch:checked::after {
|
||||
transform: translateX(12px);
|
||||
}
|
||||
|
||||
.control-panel .native-switch:focus-visible {
|
||||
outline: 2px solid rgb(22 119 255 / 35%);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.control-action,
|
||||
.mobile-control-toggle,
|
||||
.control-panel__close {
|
||||
padding: 5px 10px;
|
||||
color: #344054;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
background: #fff;
|
||||
border: 1px solid #d0d5dd;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.control-action:hover,
|
||||
.mobile-control-toggle:hover,
|
||||
.control-panel__close:hover {
|
||||
color: #0958d9;
|
||||
border-color: #1677ff;
|
||||
}
|
||||
|
||||
.control-action--block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.display-mode-control {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
border: 1px solid #d0d5dd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.display-mode-control .ant-radio-button-wrapper {
|
||||
.display-mode-control label {
|
||||
position: relative;
|
||||
flex: 1 1 0;
|
||||
padding-inline: 7px;
|
||||
min-width: 0;
|
||||
padding: 5px 7px;
|
||||
color: #475467;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.display-mode-control label + label {
|
||||
border-left: 1px solid #d0d5dd;
|
||||
}
|
||||
|
||||
.display-mode-control input {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.display-mode-control input:checked + span {
|
||||
color: #0958d9;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.grid-size-control {
|
||||
@@ -112,7 +226,7 @@ body {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.grid-size-control .ant-input-number {
|
||||
.grid-size-control .native-input {
|
||||
width: 58px;
|
||||
}
|
||||
|
||||
@@ -134,7 +248,7 @@ body {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.select-control .ant-select {
|
||||
.select-control .native-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -156,7 +270,8 @@ body {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.frame-style-controls {
|
||||
.frame-style-controls,
|
||||
.auxiliary-style-controls {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
@@ -170,12 +285,12 @@ body {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.frame-style-control .ant-input-number,
|
||||
.frame-style-control .ant-select {
|
||||
.frame-style-control .native-input,
|
||||
.frame-style-control .native-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.frame-style-control--switch .ant-switch {
|
||||
.frame-style-control--switch .native-switch {
|
||||
width: auto;
|
||||
justify-self: start;
|
||||
}
|
||||
@@ -209,8 +324,8 @@ body {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.title-control .ant-select,
|
||||
.title-control .ant-input-number {
|
||||
.title-control .native-select,
|
||||
.title-control .native-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@@ -30,8 +30,12 @@ export type WaveformInteractionMode = 'zoom' | 'annotation'
|
||||
export interface WaveformZoomEndPayload {
|
||||
start: number
|
||||
end: number
|
||||
yStart?: number
|
||||
yEnd?: number
|
||||
yRanges?: Record<string, [number, number]>
|
||||
trackIndex?: number
|
||||
seriesIds?: string[]
|
||||
gesture?: 'wheel' | 'box'
|
||||
}
|
||||
|
||||
/** 标注颜色样式 */
|
||||
@@ -114,3 +118,11 @@ export interface WaveformFrameStyle {
|
||||
borderStyle?: 'solid' | 'dashed'
|
||||
backgroundColor?: string
|
||||
}
|
||||
|
||||
/** Styling and visibility options for the horizontal zero-value reference line. */
|
||||
export interface WaveformZeroLineOptions {
|
||||
visible?: boolean
|
||||
color?: string
|
||||
width?: number
|
||||
dash?: string
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@ export type {
|
||||
WaveformLegendOrientation,
|
||||
WaveformLegendOptions,
|
||||
WaveformFrameStyle,
|
||||
WaveformZeroLineOptions,
|
||||
} from './chart'
|
||||
|
||||
// 数据类型
|
||||
|
||||
10
src/utils/waveformId.ts
Normal file
10
src/utils/waveformId.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { getCurrentInstance } from 'vue'
|
||||
|
||||
let fallbackId = 0
|
||||
|
||||
/** Generate an instance-scoped id without requiring Vue 3.5's useId API. */
|
||||
export function useWaveformInstanceId(prefix = 'waveform') {
|
||||
const instance = getCurrentInstance()
|
||||
const instanceId = instance ? `v${instance.uid}` : `f${++fallbackId}`
|
||||
return `${prefix}-${instanceId}`
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import vue from '@vitejs/plugin-vue'
|
||||
import { defineConfig } from 'vitest/config'
|
||||
|
||||
export default defineConfig({
|
||||
base: process.env.DEMO_BASE_PATH ?? '/',
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
@@ -33,19 +34,5 @@ export default defineConfig({
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist-demo',
|
||||
rolldownOptions: {
|
||||
output: {
|
||||
codeSplitting: {
|
||||
groups: [
|
||||
{
|
||||
name: 'vendor',
|
||||
test: /node_modules[\\/]/,
|
||||
maxSize: 400_000,
|
||||
priority: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@@ -3,7 +3,7 @@ import { fileURLToPath, URL } from 'node:url'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
const peerDependencies = ['vue', 'd3', 'ant-design-vue', 'vue3-colorpicker']
|
||||
const peerDependencies = ['vue', 'd3', 'vue3-colorpicker']
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
|
||||
Reference in New Issue
Block a user