waveform-analysis 0.1.73 → 0.1.75

package/src/components/rendering/WaveformTrackAxes.vue

@@ -6,10 +6,11 @@ import type { WaveformAxesOptions } from '../../types'
 import { formatXAxisLabel } from '../../utils'
 import { formatYAxisTickLabel } from '../core/layout'
 import type { DisplaySeries, TrackLayout, WaveformYAxisLayout } from '../core/types'
-import { updateMaximumTickVisibility } from './yAxisTickVisibility'
+import { scheduleMaximumTickVisibility } from './yAxisTickVisibility'
 import { sameTick } from '../core/yAxisPadding'
 import { resolveYAxisLabelBandWidth, resolveYAxisLabelFontSize } from '../core/yAxisLabelStyle'
 import { formatChannelLabel } from './channelLabel'
+import { updateAxis, updateSvgAttribute } from './updateAxis'
 
 interface Props {
   track: TrackLayout
@@ -58,77 +59,89 @@ function renderAxes() {
     if (!element) return
     const unit = props.showUnits ? axis.seriesList[0]?.unit : undefined
     const highestTick = Math.max(...axis.tickValues)
-    const yAxis = (axis.side === 'left' ? axisLeft(axis.scale) : axisRight(axis.scale))
-      .tickFormat((value) =>
-        formatYAxisTickLabel(
-          Number(value),
-          axis.scale.domain() as [number, number],
-          axis.tickValues,
-          unit,
-          axis.side,
-        ),
+    const lowestTick = Math.min(...axis.tickValues)
+    const format = (value: number) =>
+      formatYAxisTickLabel(
+        value,
+        axis.scale.domain() as [number, number],
+        axis.tickValues,
+        unit,
+        axis.side,
       )
+    const yAxis = (axis.side === 'left' ? axisLeft(axis.scale) : axisRight(axis.scale))
+      .tickFormat((value) => format(Number(value)))
       .tickSize(-4)
       .tickPadding(7)
       .tickSizeOuter(0)
       .tickValues(axis.tickValues)
 
     const selection = select(element)
-    selection.call(yAxis)
-    selection
-      .selectAll<SVGTextElement, number>('.tick text')
-      .attr('y', null)
-      .attr('dy', '0')
-      .attr('dominant-baseline', 'central')
-      .attr('data-axis-maximum-label', (value) =>
-        props.hideOverlappingMaximumLabel && sameTick(value, highestTick) ? 'true' : null,
-      )
-      .attr('data-axis-minimum-label', (value) =>
-        props.hideOverlappingMaximumLabel && sameTick(value, Math.min(...axis.tickValues))
-          ? 'true'
-          : null,
-      )
-    selection
-      .attr('data-label-domain-min', axis.scale.domain()[0])
-      .attr('data-label-domain-max', axis.scale.domain()[1])
-      .attr('data-label-unit', unit ?? null)
-    selection
-      .selectAll<SVGGElement, number>('.tick')
-      .attr('data-maximum-tick', (value) =>
+    updateAxis(element, yAxis, axis.scale, axis.tickValues, axis.side, format)
+    updateSvgAttribute(element, 'data-label-domain-min', axis.scale.domain()[0])
+    updateSvgAttribute(element, 'data-label-domain-max', axis.scale.domain()[1])
+    updateSvgAttribute(element, 'data-label-unit', unit ?? null)
+    selection.selectAll<SVGGElement, number>('.tick').each(function (value) {
+      const text = this.querySelector('text')
+      if (text) {
+        updateSvgAttribute(text, 'y', null)
+        updateSvgAttribute(text, 'dy', '0')
+        updateSvgAttribute(text, 'dominant-baseline', 'central')
+        updateSvgAttribute(
+          text,
+          'data-axis-maximum-label',
+          props.hideOverlappingMaximumLabel && sameTick(value, highestTick) ? 'true' : null,
+        )
+        updateSvgAttribute(
+          text,
+          'data-axis-minimum-label',
+          props.hideOverlappingMaximumLabel && sameTick(value, lowestTick) ? 'true' : null,
+        )
+      }
+      updateSvgAttribute(
+        this,
+        'data-maximum-tick',
         axis.maximumTick !== undefined && sameTick(value, axis.maximumTick) ? 'true' : null,
       )
-      .attr('data-minimum-tick', (value) =>
+      updateSvgAttribute(
+        this,
+        'data-minimum-tick',
         axis.minimumTick !== undefined && sameTick(value, axis.minimumTick) ? 'true' : null,
       )
-      .attr('data-tick-value', (value) => value)
-      .attr('data-tick-y', (value) => axis.scale(value))
-    selection
-      .selectAll('path.domain')
-      .attr('display', props.axes?.y?.lineVisible === false ? 'none' : null)
+      updateSvgAttribute(this, 'data-tick-value', value)
+      updateSvgAttribute(this, 'data-tick-y', axis.scale(value))
+    })
+    selection.selectAll<SVGPathElement, unknown>('path.domain').each(function () {
+      updateSvgAttribute(this, 'display', props.axes?.y?.lineVisible === false ? 'none' : null)
+    })
   })
 
   scheduleVisibility()
   if (!xAxisElement.value) return
   const selection = select(xAxisElement.value)
-  selection.call(
+  const format = (value: number) =>
+    formatXAxisLabel(
+      value,
+      props.track.xScale.domain() as [number, number],
+      props.timeUnit,
+      'tick',
+      props.axes?.x?.labelFormatter ?? props.track.xAxisLabelFormatter,
+    )
+  updateAxis(
+    xAxisElement.value,
     axisBottom(props.track.xScale)
       .tickValues(props.track.xAxisTickValues)
-      .tickFormat((value) =>
-        formatXAxisLabel(
-          Number(value),
-          props.track.xScale.domain() as [number, number],
-          props.timeUnit,
-          'tick',
-          props.axes?.x?.labelFormatter ?? props.track.xAxisLabelFormatter,
-        ),
-      )
+      .tickFormat((value) => format(Number(value)))
       .tickSize(-4)
       .tickPadding(7)
       .tickSizeOuter(0),
+    props.track.xScale,
+    props.track.xAxisTickValues,
+    'bottom',
+    format,
   )
-  selection
-    .selectAll('path.domain')
-    .attr('display', props.axes?.x?.lineVisible === false ? 'none' : null)
+  selection.selectAll<SVGPathElement, unknown>('path.domain').each(function () {
+    updateSvgAttribute(this, 'display', props.axes?.x?.lineVisible === false ? 'none' : null)
+  })
 }
 
 let disposed = false
@@ -136,7 +149,7 @@ function scheduleVisibility() {
   if (disposed) return
   const apply = () => {
     const svg = yAxisElements.value[0]?.ownerSVGElement
-    if (svg) updateMaximumTickVisibility(svg)
+    if (svg) scheduleMaximumTickVisibility(svg)
   }
   apply()
 }

package/src/components/rendering/WaveformTrackBackdrop.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import { updateGrid } from './updateGrid'
 import type { TrackLayout } from '../core/types'
 
 interface Props {
@@ -13,7 +15,35 @@ interface Props {
   }
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
+const minorVertical = ref<SVGGElement>()
+const minorHorizontal = ref<SVGGElement>()
+const majorVertical = ref<SVGGElement>()
+const majorHorizontal = ref<SVGGElement>()
+watchEffect(
+  () => {
+    const track = props.track
+    for (const [element, direction, ticks] of [
+      [minorVertical.value, 'vertical', track.xMinorTicks],
+      [minorHorizontal.value, 'horizontal', track.yMinorTicks],
+      [majorVertical.value, 'vertical', track.xMajorTicks],
+      [majorHorizontal.value, 'horizontal', track.yMajorTicks],
+    ] as const) {
+      if (element)
+        updateGrid(
+          element,
+          track.gridLines[direction] ? ticks : [],
+          direction === 'vertical' ? track.xScale : track.yScale,
+          direction,
+          direction === 'vertical' ? track.height : (track.width ?? props.innerWidth),
+          direction === 'vertical'
+            ? track.gridLines.verticalColor
+            : track.gridLines.horizontalColor,
+        )
+    }
+  },
+  { flush: 'post' },
+)
 </script>
 
 <template>
@@ -34,58 +64,14 @@ defineProps<Props>()
     <g
       class="waveform-track__grid waveform-track__grid--minor waveform-chart__grid waveform-chart__grid--minor"
     >
-      <template v-if="track.gridLines.vertical">
-        <line
-          v-for="tick in track.xMinorTicks"
-          :key="`x-minor-${track.index}-${tick}`"
-          data-grid-direction="vertical"
-          :stroke="track.gridLines.verticalColor"
-          :x1="track.xScale(tick)"
-          :x2="track.xScale(tick)"
-          y1="0"
-          :y2="track.height"
-        />
-      </template>
-      <template v-if="track.gridLines.horizontal">
-        <line
-          v-for="tick in track.yMinorTicks"
-          :key="`y-minor-${track.index}-${tick}`"
-          data-grid-direction="horizontal"
-          :stroke="track.gridLines.horizontalColor"
-          x1="0"
-          :x2="track.width ?? innerWidth"
-          :y1="track.yScale(tick)"
-          :y2="track.yScale(tick)"
-        />
-      </template>
+      <g ref="minorVertical" />
+      <g ref="minorHorizontal" />
     </g>
     <g
       class="waveform-track__grid waveform-track__grid--major waveform-chart__grid waveform-chart__grid--major"
     >
-      <template v-if="track.gridLines.vertical">
-        <line
-          v-for="tick in track.xMajorTicks"
-          :key="`x-major-${track.index}-${tick}`"
-          data-grid-direction="vertical"
-          :stroke="track.gridLines.verticalColor"
-          :x1="track.xScale(tick)"
-          :x2="track.xScale(tick)"
-          y1="0"
-          :y2="track.height"
-        />
-      </template>
-      <template v-if="track.gridLines.horizontal">
-        <line
-          v-for="tick in track.yMajorTicks"
-          :key="`y-major-${track.index}-${tick}`"
-          data-grid-direction="horizontal"
-          :stroke="track.gridLines.horizontalColor"
-          x1="0"
-          :x2="track.width ?? innerWidth"
-          :y1="track.yScale(tick)"
-          :y2="track.yScale(tick)"
-        />
-      </template>
+      <g ref="majorVertical" />
+      <g ref="majorHorizontal" />
     </g>
   </g>
 

package/src/components/rendering/updateAxis.ts

@@ -0,0 +1,57 @@
+import { select } from 'd3'
+import type { Axis, NumberValue, ScaleLinear } from 'd3'
+
+const previous = new WeakMap<
+  SVGGElement,
+  { ticks: number[]; range: number[]; orientation: string }
+>()
+
+/** Avoid invalidating native SVG layout when an attribute already has the required value. */
+export function updateSvgAttribute(element: Element, name: string, value: string | number | null) {
+  const next = value === null ? null : String(value)
+  if (element.getAttribute(name) === next) return
+  if (next === null) element.removeAttribute(name)
+  else element.setAttribute(name, next)
+}
+
+/** Domain animation moves existing ticks; unchanged labels keep their native text nodes. */
+export function updateAxis(
+  element: SVGGElement,
+  axis: Axis<NumberValue>,
+  scale: ScaleLinear<number, number>,
+  ticks: number[],
+  orientation: 'bottom' | 'left' | 'right',
+  format: (value: number) => string,
+) {
+  const range = scale.range()
+  const cached = previous.get(element)
+  const selection = select(element)
+  if (
+    !cached ||
+    cached.ticks !== ticks ||
+    cached.orientation !== orientation ||
+    range.some((value, index) => value !== cached.range[index])
+  ) {
+    selection.call(axis)
+    previous.set(element, { ticks, range, orientation })
+  } else {
+    const horizontal = orientation === 'bottom'
+    const offset = axis.offset()
+    selection
+      .selectAll<SVGGElement, number>('.tick')
+      .each(function (value) {
+        updateSvgAttribute(
+          this,
+          'transform',
+          horizontal
+            ? `translate(${scale(value) + offset},0)`
+            : `translate(0,${scale(value) + offset})`,
+        )
+      })
+      .select<SVGTextElement>('text')
+      .each(function (value) {
+        const label = format(value)
+        if (this.textContent !== label) this.textContent = label
+      })
+  }
+}

package/src/components/rendering/updateGrid.ts

@@ -0,0 +1,42 @@
+import { updateSvgAttribute } from './updateAxis'
+import type { ScaleLinear } from 'd3'
+
+const nodes = new WeakMap<SVGGElement, Map<number, SVGLineElement>>()
+
+/** Keep each grid line independently discoverable by the axis collision pass. */
+export function updateGrid(
+  group: SVGGElement,
+  ticks: readonly number[],
+  scale: ScaleLinear<number, number>,
+  direction: 'vertical' | 'horizontal',
+  extent: number,
+  color: string | undefined,
+) {
+  let lines = nodes.get(group)
+  if (!lines) nodes.set(group, (lines = new Map()))
+  const current = new Set(ticks)
+  for (const [tick, line] of lines) {
+    if (!current.has(tick)) {
+      line.remove()
+      lines.delete(tick)
+    }
+  }
+  let previous: SVGLineElement | undefined
+  for (const tick of ticks) {
+    let line = lines.get(tick)
+    if (!line) {
+      line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+      line.setAttribute('data-grid-direction', direction)
+      lines.set(tick, line)
+    }
+    const next = previous ? previous.nextSibling : group.firstChild
+    if (next !== line) group.insertBefore(line, next)
+    const position = scale(tick)
+    updateSvgAttribute(line, 'stroke', color ?? null)
+    updateSvgAttribute(line, 'x1', direction === 'vertical' ? position : 0)
+    updateSvgAttribute(line, 'x2', direction === 'vertical' ? position : extent)
+    updateSvgAttribute(line, 'y1', direction === 'horizontal' ? position : 0)
+    updateSvgAttribute(line, 'y2', direction === 'horizontal' ? position : extent)
+    previous = line
+  }
+}

package/src/components/rendering/yAxisTickVisibility.ts

@@ -1,5 +1,6 @@
 import { sameTick } from '../core/yAxisPadding'
 import { formatYAxisTickLabel } from '../core/layout'
+import { updateSvgAttribute } from './updateAxis'
 
 interface Box {
   left: number
@@ -42,14 +43,25 @@ export function linesOverlap(a: number, b: number, widthA = 1, widthB = 1): bool
 }
 
 function hide(element: Element) {
-  element.setAttribute('display', 'none')
-  element.setAttribute('data-maximum-hidden', 'true')
+  updateSvgAttribute(element, 'display', 'none')
+  updateSvgAttribute(element, 'data-maximum-hidden', 'true')
 }
 
 function strokeWidth(element: Element): number {
   return Number.parseFloat(getComputedStyle(element).strokeWidth) || 1
 }
 
+const pending = new WeakSet<SVGSVGElement>()
+/** Coalesce sibling axes after Vue's current DOM patch, without adding a late animation frame. */
+export function scheduleMaximumTickVisibility(svg: SVGSVGElement) {
+  if (pending.has(svg)) return
+  pending.add(svg)
+  queueMicrotask(() => {
+    pending.delete(svg)
+    updateMaximumTickVisibility(svg)
+  })
+}
+
 function formatCompactLabels(svg: SVGSVGElement) {
   svg.querySelectorAll<SVGTextElement>('text[data-axis-maximum-label]').forEach((maximum) => {
     const axis = maximum.parentElement!.parentElement!
@@ -64,13 +76,14 @@ function formatCompactLabels(svg: SVGSVGElement) {
       Number(axis.getAttribute('data-label-domain-max')),
     ]
     labels.forEach((text) => {
-      text.textContent = formatYAxisTickLabel(
+      const label = formatYAxisTickLabel(
         value(text),
         domain,
         visibleValues,
         axis.getAttribute('data-label-unit') ?? undefined,
         axis.getAttribute('data-y-axis-side') === 'right' ? 'right' : 'left',
       )
+      if (text.textContent !== label) text.textContent = label
     })
   })
 }
@@ -78,24 +91,38 @@ function formatCompactLabels(svg: SVGSVGElement) {
 /** Apply after axes and grid are in the DOM; never feed the filtered set back into layout. */
 export function updateMaximumTickVisibility(svg: SVGSVGElement) {
   svg.querySelectorAll('[data-maximum-hidden]').forEach((el) => {
-    el.removeAttribute('display')
-    el.removeAttribute('data-maximum-hidden')
+    updateSvgAttribute(el, 'display', null)
+    updateSvgAttribute(el, 'data-maximum-hidden', null)
   })
   svg.querySelectorAll('.waveform-track__axis--y .tick text').forEach((text) => {
-    text.removeAttribute('display')
+    updateSvgAttribute(text, 'display', null)
   })
   formatCompactLabels(svg)
+  const boxes = new Map<SVGTextElement, Box>()
+  const widths = new Map<Element, number>()
+  const box = (text: SVGTextElement) => {
+    if (!boxes.has(text)) boxes.set(text, textBox(text))
+    return boxes.get(text)!
+  }
+  const width = (element: Element) => {
+    if (!widths.has(element)) widths.set(element, strokeWidth(element))
+    return widths.get(element)!
+  }
   const minimumLabels = [...svg.querySelectorAll<SVGTextElement>('text[data-axis-minimum-label]')]
   svg.querySelectorAll<SVGTextElement>('text[data-axis-maximum-label]').forEach((maximum) => {
-    const box = textBox(maximum)
-    if (minimumLabels.some((minimum) => labelsOverlap(box, textBox(minimum)))) hide(maximum)
+    const maximumBox = box(maximum)
+    if (minimumLabels.some((minimum) => labelsOverlap(maximumBox, box(minimum)))) hide(maximum)
   })
   svg.querySelectorAll<SVGGElement>('.waveform-track__axis--y .tick').forEach((tick) => {
     const position = Number(tick.getAttribute('data-tick-y'))
     const height = Number(tick.closest('.waveform-track')?.getAttribute('data-track-height'))
     const line = tick.querySelector('line')
-    if (sameTick(position, 0) || sameTick(position, height)) line?.setAttribute('display', 'none')
-    else line?.removeAttribute('display')
+    if (line)
+      updateSvgAttribute(
+        line,
+        'display',
+        sameTick(position, 0) || sameTick(position, height) ? 'none' : null,
+      )
   })
   const minimumTicks = [...svg.querySelectorAll<SVGGElement>('.tick[data-minimum-tick]')]
   const maximumTicks = [...svg.querySelectorAll<SVGGElement>('.tick[data-maximum-tick]')]
@@ -105,7 +132,7 @@ export function updateMaximumTickVisibility(svg: SVGSVGElement) {
     if (!text) return
     maximumTicks.forEach((maximum) => {
       const other = maximum.querySelector('text')
-      if (other && other !== text && labelsOverlap(textBox(text), textBox(other))) hide(other)
+      if (other && other !== text && labelsOverlap(box(text), box(other))) hide(other)
     })
   })
   const extremeTicks = [...new Set([...minimumTicks, ...maximumTicks])]
@@ -113,14 +140,14 @@ export function updateMaximumTickVisibility(svg: SVGSVGElement) {
     const text = tick.querySelector('text')
     const line = tick.querySelector('line')
     if (!text || !line) return
-    const box = textBox(text)
+    const textBounds = box(text)
     labels.forEach((other) => {
       if (text.getAttribute('display') === 'none') return
       if (other.getAttribute('display') === 'none') return
       if (other.parentElement?.matches('[data-minimum-tick], [data-maximum-tick]')) return
       if (!tick.hasAttribute('data-minimum-tick') && other.hasAttribute('data-axis-minimum-label'))
         return
-      if (labelsOverlap(box, textBox(other))) hide(other)
+      if (labelsOverlap(textBounds, box(other))) hide(other)
     })
     const axis = tick.parentElement!
     const value = Number(tick.getAttribute('data-tick-value'))
@@ -134,8 +161,8 @@ export function updateMaximumTickVisibility(svg: SVGSVGElement) {
           linesOverlap(
             position,
             Number(other.getAttribute('data-tick-y')),
-            strokeWidth(line),
-            strokeWidth(otherLine),
+            width(line),
+            width(otherLine),
           )
         )
           hide(otherLine)
@@ -145,12 +172,12 @@ export function updateMaximumTickVisibility(svg: SVGSVGElement) {
     const track = axis.closest('.waveform-track')!
     track.querySelectorAll('[data-grid-direction="horizontal"]').forEach((gridLine) => {
       const gridY = Number(gridLine.getAttribute('y1'))
-      if (linesOverlap(position, gridY, strokeWidth(line), strokeWidth(gridLine))) hide(gridLine)
+      if (linesOverlap(position, gridY, width(line), width(gridLine))) hide(gridLine)
     })
     if (tick.hasAttribute('data-maximum-tick'))
-      tick.setAttribute('data-maximum-value', String(value))
+      updateSvgAttribute(tick, 'data-maximum-value', value)
     if (tick.hasAttribute('data-minimum-tick'))
-      tick.setAttribute('data-minimum-value', String(value))
+      updateSvgAttribute(tick, 'data-minimum-value', value)
   })
   formatCompactLabels(svg)
 }

package/src/components/utils/assignElement.ts

@@ -0,0 +1,7 @@
+import type { ComponentPublicInstance, Ref } from 'vue'
+export function assignElement<T extends Element>(
+  target: Ref<T | undefined>,
+  element: Element | ComponentPublicInstance | null,
+) {
+  target.value = element instanceof Element ? (element as T) : undefined
+}

package/src/demo/DemoYAxisPaddingControls.vue

@@ -24,9 +24,17 @@ const model = defineModel<DemoControlPanelModel>('model', { required: true })
         :aria-label="side === 'upper' ? '上方留白比例' : '下方留白比例'"
       />
     </div>
-    <div class="y-axis-padding-control extrema-control">
-      <span>显示最值刻度</span>
-      <Switch v-model:checked="model.extremaTicksVisible" size="small" aria-label="显示最值刻度" />
+    <div
+      v-for="side in ['maximum', 'minimum'] as const"
+      :key="side"
+      class="y-axis-padding-control extrema-control"
+    >
+      <span>{{ side === 'maximum' ? '显示最大值刻度' : '显示最小值刻度' }}</span>
+      <Switch
+        v-model:checked="model[`${side}TickVisible`]"
+        size="small"
+        :aria-label="side === 'maximum' ? '显示最大值刻度' : '显示最小值刻度'"
+      />
     </div>
     <small>仅作用于自动 Y 范围；刻度取整可能增加实际留白。</small>
   </section>

package/src/demo/types.ts

@@ -53,7 +53,8 @@ export interface DemoControlPanelModel {
   yAxisLineVisible: boolean
   upperPaddingEnabled: boolean
   lowerPaddingEnabled: boolean
-  extremaTicksVisible: boolean
+  maximumTickVisible: boolean
+  minimumTickVisible: boolean
   upperPaddingPercent: number
   lowerPaddingPercent: number
   xAxisLabelFormatterEnabled: boolean

package/src/index.ts

@@ -7,6 +7,58 @@
 export { default as WaveformChart } from './components/WaveformChart.vue'
 export type { WaveformChartProps } from './components/core/waveformChartTypes'
 
+// Numeric engine, pure preset factories and owner-scoped chart animation.
+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 {
   // 图表类型
@@ -40,7 +92,7 @@ export type {
   WaveformXAxisLabelKind,
   WaveformXAxisLabelFormatterContext,
   WaveformXAxisLabelFormatter,
-  // Includes axes.y.extremaTicksVisible for independent extrema tick visibility.
+  // Includes axes.y.maximumTickVisible and minimumTickVisible for independent extrema ticks.
   WaveformAxesOptions,
   WaveformYAxisLabelTextStyle,
   WaveformZeroLineOptions,

package/src/router.ts

@@ -3,6 +3,7 @@ import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-rou
 import App from './App.vue'
 
 export const routes: RouteRecordRaw[] = [
+  { path: '/animation', name: 'animation', component: () => import('./views/AnimationDemo.vue') },
   {
     path: '/',
     name: 'workspace',

package/src/types/chart.ts

@@ -289,8 +289,10 @@ export interface WaveformAxesOptions {
     splitNumber?: number
     /** Expands Y-axis domains to equal, human-friendly intervals. Defaults to true. */
     nice?: boolean
-    /** Shows extra ticks for the full data extrema, independently of padding. Defaults to true. */
-    extremaTicksVisible?: boolean
+    /** Shows the full data maximum's extra tick and label. Defaults to true. */
+    maximumTickVisible?: boolean
+    /** Shows the full data minimum's extra tick and label. Defaults to true. */
+    minimumTickVisible?: boolean
     /** Fraction of the automatic Y span added above its maximum. Defaults to 0. */
     upperPaddingRatio?: number
     /** Fraction of the automatic Y span added below its minimum. Defaults to 0. */