waveform-analysis 0.1.76 → 0.1.77

package/src/components/animation/useWaveformAnimations.ts

@@ -13,7 +13,12 @@ import { chartExportOptions } from '../controls/chartExportOptions'
 import { layoutAnnotations } from '../annotation/annotationLayout'
 import { useWaveformInstanceId } from '@/utils/waveformId'
 
-import { animationLayoutSignature, wrapAnimationCommands, type AnimationContext } from './context'
+import {
+  animationGridShape,
+  animationLayoutSignature,
+  wrapAnimationCommands,
+  type AnimationContext,
+} from './context'
 import { createPaginationPresentation } from './paginationPresentation'
 
 export function useWaveformAnimations(context: AnimationContext) {
@@ -26,6 +31,8 @@ export function useWaveformAnimations(context: AnimationContext) {
   const seen = new Set<string>()
   const prefix = useWaveformInstanceId('waveform-animation')
   let clipSequence = 0
+  let presentationGeneration = 0
+  let previousGrid = animationGridShape(context)
   let previousAnnotations = props.annotations
   let previousData = props.data
   let previousLayout = ''
@@ -63,9 +70,12 @@ export function useWaveformAnimations(context: AnimationContext) {
       states.has(track.id) ? projectTrack(states.get(track.id)!) : track,
     )
   })
-  const pagination = createPaginationPresentation(context, controller, config, effective, () =>
-    commit(true),
-  )
+  const pagination = createPaginationPresentation(context, controller, config, effective, () => {
+    commit(true)
+    for (const track of tracks.value) for (const series of track.seriesList) seen.delete(series.id)
+    skipSignature = undefined
+    annotations.clear()
+  })
   const projectedAnnotations = computed(() => {
     const anchors = new Map([...states.values()].flatMap((state) => [...state.anchors]))
     const values = visibleAnnotations().flatMap((annotation) => {
@@ -100,12 +110,10 @@ export function useWaveformAnimations(context: AnimationContext) {
         [...state.series].map(([id, series]) => [id, series.opacity] as const),
       ),
     )
-    return annotations.project(projectedAnnotations.value, opacities).map((annotation) => ({
-      ...annotation,
-      seriesOpacity: (annotation.seriesOpacity ?? 1) * pagination.opacity.value,
-    }))
+    return annotations.project(projectedAnnotations.value, opacities)
   })
   function commit(preservePagination = false) {
+    presentationGeneration++
     if (!preservePagination) pagination.reset()
     const previous = new Map(states)
     states.clear()
@@ -130,6 +138,8 @@ export function useWaveformAnimations(context: AnimationContext) {
     if (disposed) return
     const nextConfig = config.value
     const dataChanged = props.data !== previousData
+    // The post-flush grid watcher waits for lifecycle page resets before requesting replay.
+    if (!dataChanged && seen.size && animationGridShape(context) !== previousGrid) return
     if (dataChanged) {
       pendingFrom = new Map(states)
       previousData = props.data
@@ -162,8 +172,9 @@ export function useWaveformAnimations(context: AnimationContext) {
     previousTracks = tracks.value
     previousSamplingState = sampling.state.value
     controller.setEnabled(effective.value)
-    if (pagination.reconcile(dataChanged)) return
-    if (!effective.value || layoutChanged) {
+    const replay = pagination.reconcile(dataChanged)
+    if (replay === 'static') return
+    if (!effective.value || (layoutChanged && !replay)) {
       controller.finishAll()
       commit()
       return
@@ -224,6 +235,7 @@ export function useWaveformAnimations(context: AnimationContext) {
           if (
             !seen.has(id) &&
             nextConfig.animation.enabled &&
+            nextConfig.animation.duration > 0 &&
             skipSignature !== sampling.requestSignature.value
           ) {
             const state = states.get(track.id)!
@@ -255,8 +267,10 @@ export function useWaveformAnimations(context: AnimationContext) {
             invalidate()
           },
         }
+        const generation = presentationGeneration
         controller.animateSeriesEnter(id, binding, track.width, {
           ...nextConfig.animation,
+          duration: pagination.enterDuration(),
           delay:
             nextConfig.animation.delay + visibleIds.indexOf(id) * nextConfig.animation.staggerDelay,
           onComplete: () => {
@@ -264,7 +278,7 @@ export function useWaveformAnimations(context: AnimationContext) {
             entering.delete(id)
             invalidate()
             queueMicrotask(() => {
-              if (!disposed) annotations.release(id)
+              if (!disposed && presentationGeneration === generation) annotations.release(id)
             })
             nextConfig.animation.onComplete?.()
           },
@@ -311,6 +325,17 @@ export function useWaveformAnimations(context: AnimationContext) {
     reconcile,
     { immediate: true },
   )
+  watch(
+    [() => animationGridShape(context), () => props.data],
+    ([shape, data], [previousShape, previousData]) => {
+      previousGrid = shape
+      if (disposed || shape === previousShape || data !== previousData || !seen.size) return
+      // Lifecycle page resets have now selected the final grid and page.
+      pagination.requestLayout()
+      reconcile()
+    },
+    { flush: 'post' },
+  )
   watch(
     () => props.annotationsVisible,
     (visible) => {
@@ -343,7 +368,6 @@ export function useWaveformAnimations(context: AnimationContext) {
         controller.finishWhere(
           (key) => key.scope === 'update' || key.scope === 'domain',
           () => {
-            pagination.reset()
             for (const track of tracks.value) {
               const old = states.get(track.id),
                 next = staticTrack(track, visibleAnnotations(), old, true)
@@ -405,7 +429,6 @@ export function useWaveformAnimations(context: AnimationContext) {
   return {
     presentationTracks,
     presentationAnnotations,
-    paginationOpacity: pagination.opacity,
     stabilizeAnimations,
     wrap: <T extends object>(commands: T) => wrapAnimationCommands(commands, stabilizeAnimations),
     wrapPagination: pagination.wrapPagination,

package/src/components/core/useWaveformChartController.ts

@@ -422,7 +422,6 @@ export function useWaveformChartController(
     ...animations.wrap(commands),
     presentationTracks: animations.presentationTracks,
     presentationAnnotations: animations.presentationAnnotations,
-    paginationOpacity: animations.paginationOpacity,
     stabilizeAnimations: animations.stabilizeAnimations,
     ...imageExport,
     margin,

package/src/components/rendering/WaveformSeriesLayer.vue

@@ -7,7 +7,6 @@ import { waveformLineDasharray, waveformPointSeriesPath } from './seriesStyle'
 
 const props = defineProps<{
   track: TrackLayout
-  paginationOpacity?: number
   clipPathId: string
 }>()
 
@@ -53,7 +52,7 @@ const renderedSeriesPaths = computed<RenderedSeriesPath[]>(() =>
     <g
       v-for="seriesPath in renderedSeriesPaths"
       :key="seriesPath.presentationKey ?? seriesPath.series.id"
-      :opacity="(seriesPath.opacity ?? 1) * (paginationOpacity ?? 1)"
+      :opacity="seriesPath.opacity ?? 1"
       :clip-path="seriesPath.animationClip ? `url(#${seriesPath.animationClip.id})` : undefined"
       class="waveform-track__series-item waveform-chart__series"
       :data-series-id="seriesPath.series.id"

package/src/components/rendering/WaveformTrack.vue

@@ -12,7 +12,6 @@ import WaveformTrackBackdrop from './WaveformTrackBackdrop.vue'
 
 interface Props {
   track: TrackLayout
-  paginationOpacity?: number
   clipPathId: string
   innerWidth: number
   zoomable: boolean
@@ -137,11 +136,7 @@ const frameInset = computed(() =>
       aria-hidden="true"
     />
 
-    <WaveformSeriesLayer
-      :track="track"
-      :clip-path-id="clipPathId"
-      :pagination-opacity="paginationOpacity"
-    />
+    <WaveformSeriesLayer :track="track" :clip-path-id="clipPathId" />
     <WaveformZeroLines
       :track="track"
       :clip-path-id="clipPathId"

package/src/views/AnimationDemo.vue

@@ -13,6 +13,7 @@ const enter = ref(true)
 const update = ref(true)
 const annotationEnabled = ref(true)
 const effect = ref<AnnotationAnimationType>('scale')
+const gridShape = ref('1x1')
 const direction = ref<LineDrawingDirection>('left-to-right')
 let generation = 0
 function generate(count = 500): WaveformData {
@@ -55,13 +56,13 @@ function toggleAnnotation() {
   <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="enter" type="checkbox" /> 入场 / 切页 / 网格</label>
+      <label><input v-model="update" type="checkbox" /> 更新</label>
       <label><input v-model="annotationEnabled" type="checkbox" /> 标注</label>
       <label
         >入场方向
@@ -80,6 +81,14 @@ function toggleAnnotation() {
           <option value="bounce">弹跳</option>
         </select></label
       >
+      <label
+        >网格
+        <select v-model="gridShape" aria-label="网格">
+          <option value="1x1">1×1</option>
+          <option value="1x2">1×2</option>
+          <option value="2x2">2×2</option>
+        </select>
+      </label>
       <button @click="key++">重新入场</button>
       <button @click="replace(true)">更新振幅</button>
       <button @click="replace(false)">改变点数</button>
@@ -89,7 +98,7 @@ function toggleAnnotation() {
       :key="key"
       :data="data"
       :height="360"
-      :grid="{ rowCount: 1, columnCount: 1 }"
+      :grid="{ rowCount: Number(gridShape[0]), columnCount: Number(gridShape[2]) }"
       :animation-enabled="enabled"
       :animation="{ enabled: enter, direction }"
       :animation-update="{ enabled: update }"