waveform-analysis 0.1.74 → 0.1.76

package/dist/types/demo/DemoChartHost.vue.d.ts

@@ -1,5 +1,5 @@
 import type { DemoChartModel } from './types';
-declare function resetViewport(): void;
+declare function resetViewport(trackIndex?: number): void;
 type __VLS_ModelProps = {
     'model': DemoChartModel;
 };

package/dist/types/demo/remoteWaveformLoader.d.ts

@@ -0,0 +1,23 @@
+import type { InjectionKey } from 'vue';
+import type { WaveformData } from '../types';
+export interface RemoteWindowRequest {
+    start: number;
+    end: number;
+    seriesIds?: string[];
+}
+export type RemoteWindowLoader = (request: RemoteWindowRequest, signal: AbortSignal) => Promise<WaveformData>;
+export declare const remoteWindowLoaderKey: InjectionKey<RemoteWindowLoader>;
+export interface MockWindowOptions {
+    delayMs?: number | ((request: RemoteWindowRequest) => number);
+    empty?: boolean | ((request: RemoteWindowRequest) => boolean);
+    fail?: boolean | ((request: RemoteWindowRequest) => boolean);
+}
+/** Preserve series identities even when a window has no samples. */
+export declare function selectWaveformWindow(data: WaveformData, request: RemoteWindowRequest, empty?: boolean): WaveformData;
+export declare function mergeWaveformWindow(current: WaveformData, response: WaveformData, seriesIds?: string[]): WaveformData;
+/** Metadata is derived from the complete record, never from a loaded window. */
+export declare function waveformRecordMetadata(data: WaveformData): {
+    domain: [number, number];
+    minZoomSpan: number | undefined;
+};
+export declare function createMockWindowLoader(source: () => WaveformData, options?: MockWindowOptions): RemoteWindowLoader;

package/dist/types/demo/types.d.ts

@@ -1,4 +1,5 @@
-import type { WaveformAnnotation, WaveformAxesOptions, WaveformData, WaveformDisplayMode, WaveformFrameStyle, WaveformGridTrackLines, WaveformInteractionMode, WaveformLegendOrientation, WaveformLegendPosition, WaveformLineStyle, WaveformOverlayMode, WaveformPlotMargin, WaveformTitleOptions, WaveformZeroLineOptions, WaveformZoomEndPayload } from '../components';
+import type { WaveformAnnotation, WaveformAxesOptions, WaveformData, WaveformDisplayMode, WaveformFrameStyle, WaveformGridTrackLines, WaveformInteractionMode, WaveformLegendOrientation, WaveformLegendPosition, WaveformLineStyle, WaveformOverlayMode, WaveformPlotMargin, WaveformTitleOptions, WaveformZeroLineOptions, WaveformZoomEndPayload, WaveformZoomIntentPayload } from '../components';
+import type { WaveformZoomResetPayload, WaveformPanEndPayload } from '../types';
 import type { DemoXAxisLabelFormat, DemoXAxisLabelTimeZone } from './useDemoXAxisLabelControls';
 interface SelectOption<T> {
     label: string;
@@ -78,6 +79,11 @@ export interface DemoChartModel {
     toolbarVisible: boolean;
     data: WaveformData;
     initialXDomain?: [number, number];
+    recordDomain: [number, number];
+    minZoomSpan?: number;
+    loading: boolean;
+    errors: string[];
+    retry: () => Promise<void[]>;
     displayMode: WaveformDisplayMode;
     overlayMode: WaveformOverlayMode;
     rowCount: number;
@@ -101,6 +107,9 @@ export interface DemoChartModel {
     interactionMode: WaveformInteractionMode;
     hiddenSeriesIds: string[];
     handleZoomEnd: (payload: WaveformZoomEndPayload) => void | Promise<void>;
-    resetWaveformViewport: () => void;
+    handleZoomIntent: (payload: WaveformZoomIntentPayload) => void;
+    handleZoomChange: (domain: [number, number]) => void;
+    handlePanEnd: (payload: WaveformPanEndPayload) => void | Promise<void>;
+    resetWaveformViewport: (payload?: WaveformZoomResetPayload) => void | Promise<void>;
 }
 export {};

package/dist/types/demo/useRemoteWaveformWindow.d.ts

@@ -0,0 +1,22 @@
+import { type Ref } from 'vue';
+import type { WaveformData, WaveformPanEndPayload, WaveformZoomEndPayload, WaveformZoomIntentPayload, WaveformZoomResetPayload } from '../types';
+import { type RemoteWindowLoader } from './remoteWaveformLoader';
+interface RemoteWindowOptions {
+    loadWindow?: RemoteWindowLoader;
+    resetViewport?: (trackIndex?: number) => void;
+}
+export declare function useRemoteWaveformWindow(source: Ref<WaveformData>, options?: RemoteWindowOptions): {
+    chartData: import("vue").ShallowRef<WaveformData, WaveformData>;
+    recordDomain: import("vue").ComputedRef<[number, number]>;
+    initialXDomain: import("vue").ComputedRef<[number, number]>;
+    minZoomSpan: import("vue").ComputedRef<number | undefined>;
+    loading: import("vue").ComputedRef<boolean>;
+    errors: import("vue").ComputedRef<string[]>;
+    handleZoomIntent: (payload: WaveformZoomIntentPayload) => void;
+    handleZoomChange: (domain: [number, number]) => void;
+    handleZoomEnd: (payload: WaveformZoomEndPayload) => Promise<void>;
+    handlePanEnd: (payload: WaveformPanEndPayload) => Promise<void>;
+    resetWaveformViewport: (payload?: WaveformZoomResetPayload) => Promise<void>;
+    retry: () => Promise<void[]>;
+};
+export {};

package/dist/types/index.d.ts

@@ -4,7 +4,16 @@
  */
 export { default as WaveformChart } from './components/WaveformChart.vue';
 export type { WaveformChartProps } from './components/core/waveformChartTypes';
-export type { WaveformPoint, WaveformDisplayMode, WaveformUnitDisplayMode, WaveformLayoutPreset, WaveformOverlayMode, WaveformInteractionMode, WaveformXDomainStrategy, WaveformZoomIntentPayload, WaveformZoomEndPayload, WaveformPanEndPayload, WaveformZoomResetPayload, WaveformAnnotationStyle, WaveformAnnotation, WaveformSamplingMode, WaveformSamplingStrategy, WaveformSamplingOptions, WaveformSamplingBackend, WaveformSamplingDiagnostics, WaveformSamplingError, WaveformRenderingOptions, WaveformPlotMargin, WaveformTitleTextStyle, WaveformTitleOptions, WaveformLegendPosition, WaveformLegendOrientation, WaveformLegendOptions, WaveformFrameStyle, WaveformXAxisLabelKind, WaveformXAxisLabelFormatterContext, WaveformXAxisLabelFormatter, WaveformAxesOptions, WaveformYAxisLabelTextStyle, WaveformZeroLineOptions, SingleWaveformData, WaveformLineType, WaveformLineStyle, WaveformPointType, WaveformErrorBarOptions, ResolvedWaveformErrorBarOptions, WaveformTypedValues, TypedSampleData, TypedPointData, WaveformSeries, WaveformData, NormalizedWaveformSeries, } from './types';
+export { getEasingFunction } from './animation/core/easing';
+export { WaveformAnimationController } from './animation/WaveformAnimationController';
+export { createLineDrawingAnimation, createStaggeredLineDrawingAnimations, } from './animation/presets/lineDrawing';
+export { createPathTransitionAnimation, createYAxisScaleAnimation, } from './animation/presets/transitions';
+export { createAnnotationAppearAnimation, createAnnotationDisappearAnimation, } from './animation/presets/annotation';
+export { Animation } from './animation/core/Animation';
+export { Animator, globalAnimator } from './animation/core/Animator';
+export type { AnimationValue, AnimationDirection, AnimationState, AnimationFrame, AnimationTrack, AnimationConfig, AnimationHandle, AnimationScheduler, EasingFunction, EasingFamily, EasingType, } from './animation/core/types';
+export type { LineDrawingDirection, AnnotationAnimationType, LineDrawingOptions, StaggeredLineDrawingOptions, DataUpdateOptions, AnnotationAnimationOptions, WaveformEnterAnimationOptions, WaveformUpdateAnimationOptions, WaveformAnnotationAnimationOptions, WaveformAnimationProps, ClipAnimationState, AnimationBinding, NumericGeometry, GeometryTransitionInput, GeometryTransitionFrame, AnnotationAnimationState, AnimationScope, AnimationObjectKey, WaveformAnimationControllerOptions, } from './animation/types';
+export type { WaveformAmplitudeLimit, WaveformAmplitudeLimits, WaveformPoint, WaveformDisplayMode, WaveformUnitDisplayMode, WaveformLayoutPreset, WaveformOverlayMode, WaveformInteractionMode, WaveformXDomainStrategy, WaveformZoomIntentPayload, WaveformZoomEndPayload, WaveformPanEndPayload, WaveformZoomResetPayload, WaveformAnnotationStyle, WaveformAnnotation, WaveformSamplingMode, WaveformSamplingStrategy, WaveformSamplingOptions, WaveformSamplingBackend, WaveformSamplingDiagnostics, WaveformSamplingError, WaveformRenderingOptions, WaveformPlotMargin, WaveformTitleTextStyle, WaveformTitleOptions, WaveformLegendPosition, WaveformLegendOrientation, WaveformLegendOptions, WaveformFrameStyle, WaveformXAxisLabelKind, WaveformXAxisLabelFormatterContext, WaveformXAxisLabelFormatter, WaveformAxesOptions, WaveformYAxisLabelTextStyle, WaveformZeroLineOptions, SingleWaveformData, WaveformLineType, WaveformLineStyle, WaveformPointType, WaveformErrorBarOptions, ResolvedWaveformErrorBarOptions, WaveformTypedValues, TypedSampleData, TypedPointData, WaveformSeries, WaveformData, NormalizedWaveformSeries, } from './types';
 export type { WaveformGridOptions, WaveformGridLineOptions, WaveformGridTrackLines, } from './components/core/grid';
 export { normalizeWaveformData, normalizeWaveformSeries } from './core';
 export { paddedDomain, buildMinorTicks, displayTime, formatEndpointTime, formatAxisTime, formatTooltipTime, resolveTrackGeometry, clamp, type TimeUnit, type TrackGeometry, } from './utils';

package/dist/types/types/chart.d.ts

@@ -68,7 +68,7 @@ export interface WaveformZoomIntentPayload extends WaveformCommandMetadata {
     trackIndex?: number;
     seriesIds?: string[];
 }
-/** Identifies the viewport reset by a double-click gesture. */
+/** Identifies the viewport reset by a toolbar or API command. */
 export interface WaveformZoomResetPayload extends WaveformCommandMetadata {
     trackIndex?: number;
     seriesIds?: string[];
@@ -279,3 +279,10 @@ export interface WaveformZeroLineOptions {
     /** Hide within this fraction of a Y-axis tick interval from either boundary. Defaults to 0.02. */
     boundaryThreshold?: number;
 }
+/** Strict amplitude display bounds, in the series' original Y units. */
+export interface WaveformAmplitudeLimit {
+    lower?: number;
+    upper?: number;
+}
+/** Keyed by stable normalized series IDs (not track IDs). */
+export type WaveformAmplitudeLimits = Record<string, WaveformAmplitudeLimit>;

package/dist/types/types/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * 类型定义统一导出
  */
-export type { WaveformPoint, WaveformDisplayMode, WaveformUnitDisplayMode, WaveformLayoutPreset, WaveformOverlayMode, WaveformInteractionMode, WaveformXDomainStrategy, WaveformZoomIntentPayload, WaveformZoomEndPayload, WaveformPanEndPayload, WaveformZoomResetPayload, WaveformAnnotationStyle, WaveformAnnotation, WaveformSamplingMode, WaveformSamplingStrategy, WaveformSamplingOptions, WaveformSamplingBackend, WaveformSamplingDiagnostics, WaveformSamplingError, WaveformRenderingOptions, WaveformPlotMargin, WaveformTitleTextStyle, WaveformTitleOptions, WaveformLegendPosition, WaveformLegendOrientation, WaveformLegendOptions, WaveformFrameStyle, WaveformXAxisLabelKind, WaveformXAxisLabelFormatterContext, WaveformXAxisLabelFormatter, WaveformAxesOptions, WaveformYAxisLabelTextStyle, WaveformZeroLineOptions, } from './chart';
+export type { WaveformAmplitudeLimit, WaveformAmplitudeLimits, WaveformPoint, WaveformDisplayMode, WaveformUnitDisplayMode, WaveformLayoutPreset, WaveformOverlayMode, WaveformInteractionMode, WaveformXDomainStrategy, WaveformZoomIntentPayload, WaveformZoomEndPayload, WaveformPanEndPayload, WaveformZoomResetPayload, WaveformAnnotationStyle, WaveformAnnotation, WaveformSamplingMode, WaveformSamplingStrategy, WaveformSamplingOptions, WaveformSamplingBackend, WaveformSamplingDiagnostics, WaveformSamplingError, WaveformRenderingOptions, WaveformPlotMargin, WaveformTitleTextStyle, WaveformTitleOptions, WaveformLegendPosition, WaveformLegendOrientation, WaveformLegendOptions, WaveformFrameStyle, WaveformXAxisLabelKind, WaveformXAxisLabelFormatterContext, WaveformXAxisLabelFormatter, WaveformAxesOptions, WaveformYAxisLabelTextStyle, WaveformZeroLineOptions, } from './chart';
 export type { SingleWaveformData, WaveformLineType, WaveformLineStyle, WaveformPointType, WaveformErrorBarOptions, ResolvedWaveformErrorBarOptions, WaveformTypedValues, TypedSampleData, TypedPointData, WaveformSeries, WaveformData, NormalizedWaveformSeries, } from './data';
 export type { WaveformToolbarItem, WaveformToolbarOptions, WaveformControlTarget, WaveformControlAction, WaveformCommandMetadata, WaveformTargetStatus, WaveformViewportSnapshot, WaveformTargetResult, WaveformControlResult, WaveformControlState, WaveformImageExportOptions, WaveformImageExportErrorCode, WaveformImageExportError, WaveformChartHandle, } from './controls';

package/dist/types/utils/formatters.d.ts

@@ -46,18 +46,18 @@ export declare function formatXAxisLabel(rawValue: number, domain: [number, numb
  */
 export declare function endpointFractionDigits(domain: [number, number], timeUnit: TimeUnit): number;
 /**
- * 将 X 轴端点时间格式化为当前显示单位下的普通十进制文本
+ * 将 X 轴端点时间格式化为当前显示单位下的自适应精度文本
  * @param value 时间值（秒）
- * @param _domain 数据域（为保持现有调用签名而保留）
+ * @param _domain 用于计算显示精度的可视域
  * @param timeUnit 时间单位
  * @returns 格式化的时间字符串
  */
 export declare function formatEndpointTime(value: number, _domain: [number, number], timeUnit: TimeUnit): string;
 /**
- * 将 X 轴时间刻度格式化为当前显示单位下的普通十进制文本
+ * 将 X 轴时间刻度格式化为当前显示单位下的自适应精度文本
  * @param value 时间值（秒）
  * @param timeUnit 时间单位
- * @param _domain 数据域（为保持现有调用签名而保留）
+ * @param _domain 用于计算显示精度的可视域
  * @returns 格式化的时间字符串
  */
 export declare function formatAxisTime(value: number, timeUnit: TimeUnit, _domain?: [number, number]): string;

package/dist/types/utils/xAxisNumber.d.ts

@@ -0,0 +1,2 @@
+/** Compact labels share precision so even extremely close endpoints stay distinct. */
+export declare function formatXAxisNumber(value: number, domain: [number, number]): string;

package/dist/types/views/AnimationDemo.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waveform-analysis",
-  "version": "0.1.74",
+  "version": "0.1.76",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -44,7 +44,9 @@
     "globals": "17.7.0",
     "jsdom": "29.1.1",
     "oxlint": "1.77.0",
+    "playwright": "1.56.1",
     "prettier": "3.9.5",
+    "terser": "5.51.2",
     "typescript": "~6.0.0",
     "typescript-eslint": "8.64.0",
     "vite": "8.1.5",
@@ -70,6 +72,7 @@
     "test": "pnpm prepare:wasm && vitest run",
     "test:coverage": "pnpm prepare:wasm && vitest run --coverage",
     "test:package": "node scripts/test-package.mjs",
-    "prepare:wasm": "node scripts/prepare-wasm.mjs"
+    "prepare:wasm": "node scripts/prepare-wasm.mjs",
+    "test:animation:browser": "node scripts/test-animation-browser.mjs"
   }
 }

package/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { computed, inject, onBeforeUnmount, onMounted, reactive, ref, shallowRef } from 'vue'
 import 'vue3-colorpicker/style.css'
 
 import {
@@ -16,7 +16,6 @@ import {
   type WaveformOverlayMode,
   type WaveformPlotMargin,
   type WaveformTitleOptions,
-  type WaveformZoomEndPayload,
   type WaveformZeroLineOptions,
 } from './components'
 import { normalizeWaveformSeries } from './core'
@@ -25,6 +24,8 @@ import DemoChartHost from './demo/DemoChartHost.vue'
 import DemoControlPanel from './demo/DemoControlPanel.vue'
 import type { DemoChartModel, DemoControlPanelModel } from './demo/types'
 import { useDemoXAxisLabelControls } from './demo/useDemoXAxisLabelControls'
+import { remoteWindowLoaderKey } from './demo/remoteWaveformLoader'
+import { useRemoteWaveformWindow } from './demo/useRemoteWaveformWindow'
 
 const demoPreset = new URLSearchParams(window.location.search).get('demo')
 const compactNineDemo = demoPreset === 'compact-nine'
@@ -164,20 +165,27 @@ const plotMargin = computed<WaveformPlotMargin>(() => ({
   bottom: plotMarginBottom.value,
 }))
 
-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 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 demoChartHostRef = ref<{ resetViewport: (trackIndex?: number) => void }>()
+const sourceData = shallowRef<WaveformData>(fullChartData)
+const remoteWindow = useRemoteWaveformWindow(sourceData, {
+  loadWindow: inject(remoteWindowLoaderKey, undefined),
+  resetViewport: (trackIndex) => demoChartHostRef.value?.resetViewport(trackIndex),
+})
+const {
+  chartData,
+  initialXDomain,
+  recordDomain,
+  minZoomSpan,
+  loading,
+  errors,
+  handleZoomIntent,
+  handleZoomChange,
+  handleZoomEnd,
+  handlePanEnd,
+  resetWaveformViewport,
+  retry,
+} = remoteWindow
+onMounted(() => void resetWaveformViewport())
 const lineStyleOverrides = ref<Record<string, WaveformLineStyle>>({})
 const selectedSeriesId = ref(
   fullChartData.kind === 'series' ? (fullChartData.series[0]?.id ?? '') : '',
@@ -188,7 +196,7 @@ const lineStyleOptions: Array<{ label: string; value: WaveformLineStyle }> = [
   { label: '点划线', value: 'dash-dot' },
 ]
 const seriesStyleOptions = computed(() =>
-  normalizeWaveformSeries(chartData.value).map((series) => ({
+  normalizeWaveformSeries(sourceData.value).map((series) => ({
     label: series.name || series.id,
     value: series.id,
   })),
@@ -214,7 +222,7 @@ const displayChartData = computed<WaveformData>(() => {
 })
 const gridTrackLines = computed<WaveformGridTrackLines>(() =>
   Object.fromEntries(
-    normalizeWaveformSeries(displayChartData.value).map((series) => [
+    normalizeWaveformSeries(sourceData.value).map((series) => [
       series.trackId ?? series.id,
       {
         horizontal: horizontalGridVisible.value,
@@ -225,88 +233,6 @@ const gridTrackLines = computed<WaveformGridTrackLines>(() =>
     ]),
   ),
 )
-const demoChartHostRef = ref<{ resetViewport: (trackIndex?: number) => void }>()
-
-let zoomRequestSequence = 0
-
-function filterWaveformData(data: WaveformData, start: number, end: number): WaveformData {
-  const lower = Math.min(start, end)
-  const upper = Math.max(start, end)
-  if (data.kind !== 'series') {
-    if (data.kind !== 'points') return data
-    return {
-      kind: 'points',
-      points: data.points.filter((point) => point.x >= lower && point.x <= upper),
-    }
-  }
-  return {
-    kind: 'series',
-    series: data.series.map((series) => ({
-      ...series,
-      data:
-        series.data.kind === 'points'
-          ? {
-              kind: 'points',
-              points: series.data.points.filter((point) => point.x >= lower && point.x <= upper),
-            }
-          : series.data,
-    })),
-  }
-}
-
-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,
-    ),
-  }
-}
-
-let pendingCommandId: string | undefined
-let pendingPayloads: WaveformZoomEndPayload[] = []
-async function handleZoomEnd(payload: WaveformZoomEndPayload) {
-  if (payload.action === 'fit') return
-  if (payload.commandId && payload.commandId === pendingCommandId) {
-    pendingPayloads.push(payload)
-    return
-  }
-  pendingCommandId = payload.commandId
-  const batch = [payload]
-  pendingPayloads = batch
-  // Demo-only sequence number cancellation. Production code should use AbortController
-  // to cancel in-flight requests when a newer zoom gesture arrives.
-  const requestSequence = ++zoomRequestSequence
-  await new Promise((resolve) => window.setTimeout(resolve, 80))
-  if (requestSequence !== zoomRequestSequence) return
-
-  // 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.
-  let nextData = chartData.value
-  batch.forEach((item) => {
-    const responseData = filterWaveformData(fullChartData, item.start, item.end)
-    nextData =
-      item.trackIndex !== undefined && item.seriesIds?.length
-        ? mergeIndependentWindow(nextData, responseData, item.seriesIds)
-        : responseData
-  })
-  chartData.value = nextData
-  pendingCommandId = undefined
-}
-
-function resetWaveformViewport() {
-  zoomRequestSequence += 1
-  chartData.value = fullChartData
-  initialXDomain.value = initialXDomainValue
-  demoChartHostRef.value?.resetViewport()
-}
 const titleOptions = computed<WaveformTitleOptions>(() => ({
   visible: titleVisible.value,
   text: titleText.value,
@@ -406,6 +332,11 @@ const chartModel = reactive({
   toolbarVisible,
   data: displayChartData,
   initialXDomain,
+  recordDomain,
+  minZoomSpan,
+  loading,
+  errors,
+  retry,
   displayMode,
   overlayMode,
   rowCount,
@@ -428,7 +359,10 @@ const chartModel = reactive({
   annotationsVisible,
   interactionMode,
   hiddenSeriesIds,
+  handleZoomIntent,
+  handleZoomChange,
   handleZoomEnd,
+  handlePanEnd,
   resetWaveformViewport,
 }) satisfies DemoChartModel
 </script>

package/src/DemoRouterApp.vue

@@ -5,6 +5,7 @@
       <nav class="demo-shell__nav" aria-label="示例导航">
         <RouterLink to="/">综合示例</RouterLink>
         <RouterLink to="/fixed-y-domain">固定振幅范围</RouterLink>
+        <RouterLink to="/animation">动画</RouterLink>
         <RouterLink to="/wasm-sampling">WASM 采样</RouterLink>
       </nav>
     </header>