waveform-analysis 0.1.74 → 0.1.75

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/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 {
   // 图表类型

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/views/AnimationDemo.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { WaveformChart } from '@/index'
+import type {
+  AnnotationAnimationType,
+  LineDrawingDirection,
+  WaveformData,
+  WaveformAnnotation,
+} from '@/index'
+
+const enabled = ref(true)
+const enter = ref(true)
+const update = ref(true)
+const annotationEnabled = ref(true)
+const effect = ref<AnnotationAnimationType>('scale')
+const direction = ref<LineDrawingDirection>('left-to-right')
+let generation = 0
+function generate(count = 500): WaveformData {
+  return {
+    kind: 'series',
+    series: Array.from({ length: 3 }, (_, channel) => ({
+      id: channel === 0 ? 'signal' : `signal-${channel}`,
+      name: `信号 ${channel + 1}`,
+      data: {
+        kind: 'points' as const,
+        points: Array.from({ length: count }, (_, i) => ({
+          x: i / (count - 1),
+          y: Math.sin((i / (count - 1)) * Math.PI * 6 + channel) * (10 + generation * 2),
+        })),
+      },
+    })),
+  }
+}
+const data = ref(generate())
+const annotations = ref<WaveformAnnotation[]>([])
+const key = ref(0)
+function replace(compatible: boolean) {
+  generation++
+  data.value = generate(compatible ? 500 : 750)
+}
+function toggleAnnotation() {
+  annotations.value = annotations.value.length
+    ? []
+    : Array.from({ length: 3 }, (_, channel) => ({
+        id: channel === 0 ? 'note' : `note-${channel}`,
+        seriesId: channel === 0 ? 'signal' : `signal-${channel}`,
+        x: 0.4,
+        y: 10,
+        text: '受控标注',
+      }))
+}
+</script>
+
+<template>
+  <main class="animation-demo">
+    <h1>波形动画</h1>
+    <p>
+      分别控制入场、更新 /
+      切页和标注效果。切换分页时波形与标注同步淡入，坐标轴立即更新。拖动、缩放与导出会提交最终画面。
+    </p>
+    <div class="animation-demo__controls">
+      <label><input v-model="enabled" type="checkbox" /> 动画</label>
+      <label><input v-model="enter" type="checkbox" /> 入场</label>
+      <label><input v-model="update" type="checkbox" /> 更新 / 切页</label>
+      <label><input v-model="annotationEnabled" type="checkbox" /> 标注</label>
+      <label
+        >入场方向
+        <select v-model="direction">
+          <option value="left-to-right">从左向右</option>
+          <option value="right-to-left">从右向左</option>
+          <option value="center-out">从中心展开</option>
+        </select></label
+      >
+      <label
+        >标注效果
+        <select v-model="effect">
+          <option value="fade-in">淡入</option>
+          <option value="scale">缩放</option>
+          <option value="slide-in">滑入</option>
+          <option value="bounce">弹跳</option>
+        </select></label
+      >
+      <button @click="key++">重新入场</button>
+      <button @click="replace(true)">更新振幅</button>
+      <button @click="replace(false)">改变点数</button>
+      <button @click="toggleAnnotation">增删标注</button>
+    </div>
+    <WaveformChart
+      :key="key"
+      :data="data"
+      :height="360"
+      :grid="{ rowCount: 1, columnCount: 1 }"
+      :animation-enabled="enabled"
+      :animation="{ enabled: enter, direction }"
+      :animation-update="{ enabled: update }"
+      :animation-annotation="{ enabled: annotationEnabled, type: effect }"
+      :annotations="annotations"
+      @update:annotations="annotations = $event"
+    />
+  </main>
+</template>
+
+<style scoped>
+.animation-demo {
+  padding: 24px;
+  max-width: 1280px;
+  margin: auto;
+}
+.animation-demo__controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.animation-demo__controls label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+button,
+select {
+  padding: 6px;
+}
+@media (max-width: 520px) {
+  .animation-demo {
+    padding: 8px;
+  }
+}
+</style>